Difference between revisions of "Hierarchy"

From Dreamwidth Notes
Jump to: navigation, search
m (→‎Head Functions)
(→‎Page View)
Line 39: Line 39:
 
=== Page View ===
 
=== Page View ===
  
−
Class Page is the center of core2 design.  Changes to anything in a Class Page function affects all views unless they are edited separately.  Below is a list of all functions and properties directly associated with the Page class.
+
Class Page and its associated functions are the center of core2 design.  Changes to anything in a Class Page function affects all views unless they are edited separately.   
 +
 
 +
The following will define the functions that make up the meat of your DW: the Page::print function that controls the layout of your journal, and the Page::print_entry(Entry e) that controls the look of each individual entry, with a breakdown of the functions they were created from.
 +
 
 +
==== Page View:  The Layout ====
 +
 
 +
This is the layout of your entire dw journal.  This is how the stucture is decided, columns created, and worlds destroyed.
 +
 
 +
<source lang="perl">
 +
    function Page::print()
 +
    {
 +
    """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n
 +
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n
 +
    <head profile="http://www.w3.org/2006/03/hcard http://purl.org/uF/hAtom/0.1/ http://gmpg.org/xfn/11">\n""";
 +
    $this->print_head();
 +
    $this->print_stylesheets();
 +
    $this->print_head_title();
 +
    """</head>""";
 +
    $this->print_wrapper_start();
 +
    $this->print_control_strip();
 +
    """<div id="canvas">
 +
    <div class="inner">
 +
    <div id="header">
 +
    <div class="inner">""";
 +
    $this->print_global_title();
 +
    $this->print_global_subtitle();
 +
    $this->print_title();
 +
    """</div><!-- end header>inner -->
 +
            </div><!-- end header -->
 +
            <div id="content">
 +
                <div class="inner">
 +
                    <div id="primary"><div class="inner">
 +
                        """;
 +
                        $this->print_body();
 +
    """</div></div><!-- end primary and primary>inner -->
 +
                    <div id="secondary"><div class="inner">""";
 +
                        $this->print_module_section("one");
 +
    """</div></div><!--  end secondary and secondary>inner -->
 +
                    <div id="tertiary"><div class="inner">""";
 +
                        $this->print_module_section("two");
 +
    """</div></div><!-- end tertiary and tertiary>inner -->
 +
                </div><!-- end content>inner -->
 +
            </div> <!-- end content -->
 +
        </div> <!-- end canvas>inner -->""";
 +
   
 +
    """<div id="footer">
 +
        <div class="inner">""";
 +
      print safe """<div class="page-top"><a href="#">$*text_page_top</a></div>
 +
        </div><!-- end footer>inner -->
 +
    </div><!-- end footer -->
 +
    </div> <!-- end canvas -->""";
 +
    $this->print_wrapper_end();
 +
    """</html>""";
 +
    }
 +
 
 +
</source>
 +
 
 +
==== Breakdown ====
 +
 
 +
The following is a list and definition of all functions that can be used in the above, split by type and location.
 +
 
 +
===== Head Functions =====
 +
 
 +
The head-related functions are the first that are called on in function Page::print(). The first function combines two options: to print the default head, or to call on a custom head you write yourself.
 +
 
 +
<source lang="perl">
 +
function Page::print_head()
 +
{
 +
    print $.head_content;
 +
    $this->print_custom_head();
 +
}
 +
</source>
 +
 
 +
<source lang="perl">
 +
function Page::print_custom_head()
 +
{
 +
    # blank
 +
}
 +
 
 +
<source lang="perl">
 +
function Page::print_linklist()
 +
{
 +
    if (size $.linklist <= 0)
 +
    {
 +
        return;
 +
    }
 +
    elseif (not $*linklist_support)
 +
    {
 +
        return;
 +
    }
 +
    foreach var UserLink l ($.linklist) {
 +
        if ($l.title)
 +
        {
 +
            if ($l.is_heading)
 +
            {
 +
                "<b>$l.title</b>";
 +
            }
 +
            else
 +
            {
 +
                "<a href='$l.url'>$l.title</a>";
 +
            }
 +
        }
 +
        "<br />";
 +
    }
 +
}
 +
</source>
  
−
==== Page View Functions ====
 
  
 
===== CSS Functions =====
 
===== CSS Functions =====
  
−
This adds CSS to all layouts in your theme.
+
This function in Page::print() calls the functions that control your stylesheet.
 +
 
 +
The first function calls on the default stylesheet for your style when you do not want to customize it.
  
 
<source lang="perl">
 
<source lang="perl">
Line 57: Line 163:
 
</source>
 
</source>
  
−
If you have specific CSS to code onto all themes using this layout, override print_default_stylesheet.  If you have specific CSS to code into this theme, set the external_stylesheet property or override the print_stylesheet function. An end user can choose to link to an off-site stylesheet using the linked_stylesheet property and/or use the custom_css property.  Overriding this function is NOT RECOMMENDED. Overriding this function could prevent sitewide improvements to styles, accessibility, or other functionality from operating in your layout.
+
This function gives the user a choice to use an external stylesheet or custom css added to the existing default stylesheet.  
  
 
<source lang="perl">
 
<source lang="perl">
Line 89: Line 195:
 
     }
 
     }
 
</source>
 
</source>
−
 
  
 
===== Title Functions =====
 
===== Title Functions =====
 +
 +
The third function in Layout refers to the title of the current view, such as Reading page, Recent Entries, and Year.
  
 
<source lang="perl">
 
<source lang="perl">
 
function Page::print_title()  
 
function Page::print_title()  
−
"Using standard CSS, print the page title. If you want to change the way this looks, modify the CSS."
 
 
{
 
{
 
     print """<h2 id="pagetitle"><span>""" + $this->view_title() + """</span></h2>\n""";
 
     print """<h2 id="pagetitle"><span>""" + $this->view_title() + """</span></h2>\n""";
 
}
 
}
 
</source>
 
</source>
 +
 +
This prints the Journal's title on the page.
  
 
<source lang="perl">
 
<source lang="perl">
 
function Page::print_head_title()  
 
function Page::print_head_title()  
−
"Using standard CSS, print the journal title. If you want to change the way this looks, modify the CSS."
 
 
{
 
{
 
     if ($this.journal.journal_type == "I") {
 
     if ($this.journal.journal_type == "I") {
Line 111: Line 218:
 
         print """<title>""" + $this.journal.username + $*text_default_separator + $this->view_title() + """</title>\n""";
 
         print """<title>""" + $this.journal.username + $*text_default_separator + $this->view_title() + """</title>\n""";
 
     }
 
     }
 +
}
 +
</source>
 +
 +
Add documentation here.
 +
 +
<source lang="perl">
 +
function Page::view_title() [notags] : string {
 +
    return lang_viewname($.view);
 
}
 
}
 
</source>
 
</source>
Line 169: Line 284:
 
</source>
 
</source>
 
      
 
      
−
===== Layout Functions =====
 
  
−
This is the layout of your entire dw journal. 
 
−
 
−
Note: Divs are breaking formatting.  Work out how to fix that.
 
−
 
−
<source lang="perl">
 
−
    function Page::print()
 
−
    {
 
−
    """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n
 
−
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n
 
−
    <head profile="http://www.w3.org/2006/03/hcard http://purl.org/uF/hAtom/0.1/ http://gmpg.org/xfn/11">\n""";
 
−
    $this->print_head();
 
−
    $this->print_stylesheets();
 
−
    $this->print_head_title();
 
−
    """</head>""";
 
−
    $this->print_wrapper_start();
 
−
    $this->print_control_strip();
 
−
    """<div id="canvas">
 
−
    <div class="inner">
 
−
    <div id="header">
 
−
    <div class="inner">""";
 
−
    $this->print_global_title();
 
−
    $this->print_global_subtitle();
 
−
    $this->print_title();
 
−
    """</div><!-- end header>inner -->
 
−
            </div><!-- end header -->
 
−
            <div id="content">
 
−
                <div class="inner">
 
−
                    <div id="primary"><div class="inner">
 
−
                        """;
 
−
                        $this->print_body();
 
−
    """</div></div><!-- end primary and primary>inner -->
 
−
                    <div id="secondary"><div class="inner">""";
 
−
                        $this->print_module_section("one");
 
−
    """</div></div><!--  end secondary and secondary>inner -->
 
−
                    <div id="tertiary"><div class="inner">""";
 
−
                        $this->print_module_section("two");
 
−
    """</div></div><!-- end tertiary and tertiary>inner -->
 
−
                </div><!-- end content>inner -->
 
−
            </div> <!-- end content -->
 
−
        </div> <!-- end canvas>inner -->""";
 
−
   
 
−
    """<div id="footer">
 
−
        <div class="inner">""";
 
−
      print safe """<div class="page-top"><a href="#">$*text_page_top</a></div>
 
−
        </div><!-- end footer>inner -->
 
−
    </div><!-- end footer -->
 
−
    </div> <!-- end canvas -->""";
 
−
    $this->print_wrapper_end();
 
−
    """</html>""";
 
−
    }
 
−
 
−
</source>
 
  
  
Line 271: Line 333:
 
</source>
 
</source>
  
−
===== Head Functions =====
+
==== Page view: the Entry ====
  
−
<source lang="perl">
+
This is the function that gives structure and shape to your individual entries and forms the basis of the page you see when you click on Reply, when you click on Comment, or when the individual entry is directly linked to.
−
function Page::print_head()
+
−
{
+
−
    print $.head_content;
+
−
    $this->print_custom_head();
+
−
}
+
−
</source>
+
−
 
+
−
<source lang="perl">
+
−
function Page::print_custom_head()
+
−
{
+
−
    # blank
+
−
}
+
−
 
+
−
<source lang="perl">
+
−
function Page::print_linklist()
+
−
{
+
−
    if (size $.linklist <= 0)
+
−
    {
+
−
        return;
+
−
    }
+
−
    elseif (not $*linklist_support)
+
−
    {
+
−
        return;
+
−
    }
+
−
    foreach var UserLink l ($.linklist) {
+
−
        if ($l.title)
+
−
        {
+
−
            if ($l.is_heading)
+
−
            {
+
−
                "<b>$l.title</b>";
+
−
            }
+
−
            else
+
−
            {
+
−
                "<a href='$l.url'>$l.title</a>";
+
−
            }
+
−
        }
+
−
        "<br />";
+
−
    }
+
−
}
+
−
</source>
+
−
 
+
−
===== Print Entry =====
+
−
 
+
−
This is how all the functions used for a basic layout fit together.  This function will affect how you see your Recent Entries, your Reading Page, and your individual entry page.
+
  
 
<source lang="perl">
 
<source lang="perl">
Line 356: Line 374:
 
</source>
 
</source>
  
−
==== Page View Properties ====
+
==== The Breakdown ====
−
 
+
−
Paste Property explantion here and link to Properties page.
+
−
 
+
−
==== Page View Classes ====
+
−
 
+
−
Paste Class explanation here and link to Class page.
+

Revision as of 04:21, 5 May 2009

There are three components to core2 styles: classes, properties, and functions. This will be a short overview of the hierarchy of the view-related functions and how they associate with each other.

Below are the tables of core2 functions associated with view. Each child is listed below and to the right of the parent.

Table of View-Related Functions

Page
TagsPage
MessagePage
RecentPage
FriendsPage
DayPage
YearPage
MonthPage
EntryPage
ReplyPage
MonthDay
YearWeek
Comment
CommentInfo
Entry

Functions

For the purposes of this explanation, Views refers to the actual pages that you use to read your DWJ, your Reading Page, Archive.

To get a complete explanation of a function, go the wikipedia route. So we'll start assuming this is already a familiar concept and go on from there.

There are three types of functions: simple functions, methods of a class, and builtin. Builtin, or call functions, are built into the backend and cannot be edited by the user.

Example: 

   function print_userpic()

Methods of a class are functions that are declared in a class for the purposes of calling on class properties.

Example: 

   function Image::as_string(string{} opts) [fixed] : string

Page View

Class Page and its associated functions are the center of core2 design. Changes to anything in a Class Page function affects all views unless they are edited separately.

The following will define the functions that make up the meat of your DW: the Page::print function that controls the layout of your journal, and the Page::print_entry(Entry e) that controls the look of each individual entry, with a breakdown of the functions they were created from.

Page View: The Layout

This is the layout of your entire dw journal. This is how the stucture is decided, columns created, and worlds destroyed. 

    function Page::print()
    {
    """<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n
    <head profile="http://www.w3.org/2006/03/hcard http://purl.org/uF/hAtom/0.1/ http://gmpg.org/xfn/11">\n""";
    $this->print_head();
    $this->print_stylesheets();
    $this->print_head_title();
    """</head>""";
    $this->print_wrapper_start();
    $this->print_control_strip();
    """<div id="canvas">
    <div class="inner">
    <div id="header">
    <div class="inner">""";
    $this->print_global_title();
    $this->print_global_subtitle();
    $this->print_title();
    """</div><!-- end header>inner -->
            </div><!-- end header -->
            <div id="content">
                <div class="inner">
                    <div id="primary"><div class="inner">
                        """; 
                        $this->print_body();
    """</div></div><!-- end primary and primary>inner -->
                    <div id="secondary"><div class="inner">""";
                        $this->print_module_section("one");
    """</div></div><!--  end secondary and secondary>inner -->
                    <div id="tertiary"><div class="inner">""";
                        $this->print_module_section("two");
    """</div></div><!-- end tertiary and tertiary>inner -->
                </div><!-- end content>inner -->
            </div> <!-- end content -->
        </div> <!-- end canvas>inner -->""";
 
    """<div id="footer">
        <div class="inner">""";
       print safe """<div class="page-top"><a href="#">$*text_page_top</a></div>
        </div><!-- end footer>inner -->
    </div><!-- end footer -->
    </div> <!-- end canvas -->""";
    $this->print_wrapper_end();
    """</html>""";
    }

Breakdown

The following is a list and definition of all functions that can be used in the above, split by type and location.

Head Functions

The head-related functions are the first that are called on in function Page::print(). The first function combines two options: to print the default head, or to call on a custom head you write yourself. 

function Page::print_head() 
{
    print $.head_content;
    $this->print_custom_head();
}
function Page::print_custom_head() 
{
    # blank
}
 
<source lang="perl">
function Page::print_linklist() 
{
    if (size $.linklist <= 0) 
    {
        return;
    } 
    elseif (not $*linklist_support) 
    {
        return;
    }
    foreach var UserLink l ($.linklist) {
        if ($l.title) 
        {
            if ($l.is_heading) 
            {
                "<b>$l.title</b>";
            } 
            else 
            {
                "<a href='$l.url'>$l.title</a>";
            }
        }
        "<br />";
    }
}


CSS Functions

This function in Page::print() calls the functions that control your stylesheet.

The first function calls on the default stylesheet for your style when you do not want to customize it. 

    function Page::print_default_stylesheet()
    {
    """<style type="text/css">""";
    start_css();
    end_css();
    """</style>\n""";
    }

This function gives the user a choice to use an external stylesheet or custom css added to the existing default stylesheet. 

    function Page::print_stylesheets()
    {
    if ($*include_default_stylesheet) {
        $this->print_default_stylesheet();
        if ($*external_stylesheet) {
            println safe """<link rel="stylesheet" href="$.stylesheet_url" type="text/css" />""";
        }
        else {
            println """<style type="text/css">""";
            start_css();
            print_stylesheet();
            end_css();
            println """</style>""";
        }
    }
 
    if ($*linked_stylesheet != "") {
        println safe """<link rel="stylesheet" href="$*linked_stylesheet" type="text/css" />""";
    }
 
    if ($*custom_css != "") {
        println """<style type="text/css">""";
        start_css();
        println safe $*custom_css;
        end_css();
        println """</style>""";
    }
    }
Title Functions

The third function in Layout refers to the title of the current view, such as Reading page, Recent Entries, and Year. 

function Page::print_title() 
{
    print """<h2 id="pagetitle"><span>""" + $this->view_title() + """</span></h2>\n""";
}

This prints the Journal's title on the page. 

function Page::print_head_title() 
{
    if ($this.journal.journal_type == "I") {
        print """<title>""" + $this.journal.name + $*text_default_separator + $this->view_title() + """</title>\n""";
    }
    else {
        print """<title>""" + $this.journal.username + $*text_default_separator + $this->view_title() + """</title>\n""";
    }
}

Add documentation here. 

function Page::view_title() [notags] : string {
    return lang_viewname($.view);
}
function Page::print_global_title() {
    if ($.global_title) {
        """<h1 id="title"><span>""" + $.global_title + """</span></h1>""";
    }
}
function Page::print_global_subtitle() {
    if ($.global_subtitle) {
        """<h2 id="subtitle"><span>""" + $.global_subtitle + """</span></h2>""";
    }
}
function Page::view_title() [notags] : string {
    return lang_viewname($.view);
}
function Page::title() [notags] : string {
    return $this->view_title();
}
Wrapper Functions
    function Page::print_wrapper_start() 
    {
    $this->print_wrapper_start( { "" => "" } );
    }
    function Page::print_wrapper_start(string{} opts) 
    {
 
    var string class = $opts{"class"} ? """class="$opts{"class"}" """ : "";
    """<body class="page-$.view $*layout_type $class">\n""";
    }

"This function concludes the wrapper to the page. Overriding this function is NOT RECOMMENDED. Overriding this function could prevent sitewide improvements to styles, accessibility, or other functionality from operating in your layout." 

    function Page::print_wrapper_end() 
    {
    """</body>""";
    }



<source lang="perl">
   function Page::print_body() {
    """<h2>No Default Renderer</h2><p>There is no body renderer for viewtype <tt>$.view</tt> defined.</p>""";
}
    function Page::print_module_section ( string section_name ) 
{
    """<div class="module-wrapper"><div class="separator separator-before"><div class="inner"></div></div>\n<div class="module-section-$section_name">\n<div class="inner">""";
    handle_module_group_array( $*module_sections{$section_name} );
    """</div>\n</div><div class="separator separator-after"><div class="inner"></div></div>\n</div>""";
    }
Date Functions
    function Page::print_time() {
    $this->print_time("","");
    }
 
    function Page::print_time(string datefmt, string timefmt) {
    if ($datefmt == "") {
        $datefmt = "med";
    }
    if ($timefmt == "") {
        $timefmt = "short";
    }
    var string ret;
    if ($datefmt != "none") { $ret = $ret + $this.local_time->date_format($datefmt); }
    if ($datefmt != "none" and $timefmt != "none") { $ret = $ret + " "; }
    if ($timefmt != "none") { $ret = $ret + $this.local_time->time_format($timefmt); }
 
    print safe """<span id="load-time">$*text_generated_on $ret</span>""";
    }
Page Navigation Function
    function Page::print_navigation() {}

Page view: the Entry

This is the function that gives structure and shape to your individual entries and forms the basis of the page you see when you click on Reply, when you click on Comment, or when the individual entry is directly linked to. 

    function Page::print_entry(Entry e) 
    {
    $e->print_wrapper_start();
    """<div class="header">\n""";
    $e->print_subject();
    $e->print_metatypes();
    $e->print_time();
    """</div>\n""";
    """<div>\n""";
    """<div class="contents">\n""";
    """<div class="inner">\n""";
    $e->print_userpic();
    $e->print_poster();
    $e->print_text();
    $e->print_metadata();
    """</div>\n""";
    """</div>\n""";
    """</div>\n""";
    """<div class="footer">\n""";
    """<div class="inner">\n""";
    $e->print_tags();
    $e->print_management_links();
    if ($this isa EntryPage) {
        """<hr class="above-entry-interaction-links" />""";
        $e->print_interaction_links("topcomment");
        $this->print_reply_container({ "target" => "topcomment" });
        """<hr class="below-reply-container" />""";
    }
    else {
        $e->print_interaction_links();
    }
    "</div>\n</div>\n";
    $e->print_wrapper_end();
}

The Breakdown

Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=Hierarchy&oldid=4833"