Site:Frontend:Introduction

From Metrixstream
(Difference between revisions)
Jump to: navigation, search
(→‎Labels)
m (MetrixAdmin moved page Site:Introduction to Site:Frontend:Introduction)
 
(15 intermediate revisions by one user not shown)
Line 1: Line 1:
 
== Getting Started ==
 
== Getting Started ==
  
−
Before you master creating websites within Metrixstream, you first need to know the basics, such as: the templating engine, how information is presented to the templating engine, default site settings, default page settings, system hooks to add custom code around actions, contexts available to pages, and methods for partitioning content and profiles.
+
Before you master creating websites within Metrixstream, you first need to know the basics. Read through the various sections below to give you a basic understanding of how things work and then continue on to the other sections for more detailed explainations.
  
−
== Clearsilver ==
+
== Backend ==
  
−
Clearsilver is a language neutral template processing engine based on the MVC (Model View Control) design pattern.
+
The backend is responsible for coming up with efficient and scalable database queries so that you can reliably use them as you create your web pages.
  
−
The idea behind it is that the backend does its magic, which results in an HDF object. This object is supposed to contain all the necessary information required to generate the website page that the user sees. This object is passed to the template processing engine, which you have control of. The template's responsibility is to reference the various information in the HDF, so that it can have the necessary context to generate the page.
+
Throughout your site building, you will most likely never be accessing the backend directly. This is all provided for you through a backend context, which describes how a backend query should be executed.
  
−
Documentation of the Clearsilver language is available here: http://www.clearsilver.net/docs/
+
== Backend Query ==
  
−
== HDF Object ==
+
A Backend Query is a mechanism that retrieves data from the backend.
  
−
The HDF component is all of the relevant information necessary to create your page. It is a simple object composed of a list of key-value pairs. This usually consists of content titles, player urls, image urls, user information, etc. The job of the template is to reference the HDF keys, so you can output the HDF values.
+
== Backend Context ==
  
−
=== Example ===
+
A Backend Context is a configuration for how a Backend Query should be executed. This configuration commonly includes # of objects, sorting field, ordering method, etc.
−
<?cs if:MS.site.user.loggedIn ?>
+
−
  Thank you for logging in, <?cs var:MS.site.user.username ?>.
+
−
<?cs else ?>
+
−
  Please login!
+
−
<?cs /if ?>
+
  
−
If you are unable to create the page you want, then you either aren't using the right context, or you need a custom extension to add additional fields to the HDF. Contact [mailto:support@metrixstream.com support@metrixstream.com] for a quick consultation on how to accomplish what you want.
+
Each page has the option of specifying a backend context.
  
−
If you ever aren't sure what fields are available, add &hdf to the end of your site URL. It will output all the available HDF keys.
+
== Additional Backend Context ==
  
−
== Pages ==
+
Pages also have the ability to specify additional backend contexts, which let you create a modular structure to your page, such as popular videos in the upper right, latest comments in the upper left, and staff favorite content on the rest of the page. That example would be handled by creating a primary context and then two additional contexts.
  
−
Pages are the most basic requirement for building a site. A page consists of the HTML necessary to display your page. Pages have the ability to reference the template engine, but this is entirely optional.
+
== Frontend ==
  
−
=== Example: Create a "Hello World" page ===
+
The frontend is responsible for choosing what backend queries to use per page and then using the results to generate the page through the Clearsilver templating language.
  
−
#Create a new Site by clicking Add > Site and enter a site name.
+
== Clearsilver ==
−
#Click on the pages tab, click Add Page, and choose a name for your page.
+
−
#Enter the following HTML and click save.
+
  
−
<html>
+
Clearsilver is the mechanism used to interpret information received from a context. Information received from a context is populated into the [[#HDF|HDF]], which you can reference using Clearsilver.
−
<head>
+
−
  <title>This is an example page.</title>
+
−
</head>
+
−
<body>
+
−
  HELLO WORLD
+
−
</body>
+
−
</html>
+
  
 +
Clearsilver is a language neutral template processing engine based on the MVC (Model View Control) design pattern.
 +
 +
The idea behind it is that the backend processes contexts, which results in an HDF object. This object contains all the necessary information required to generate the page that you want to create.
 +
 +
In general Clearsilver allows you to do the following:
 +
 +
=== Output a variable from the HTML to the actual page ===
 +
 +
Hey <?cs var:MS.site.user.username ?>, welcome back to our site!
 +
 +
=== Simple conditional logic checks with if/then statements ===
 +
 +
<?cs if:MS.site.user.loggedIn ?>
 +
  Thank you for logging in, <?cs var:MS.site.user.username ?>.
 +
<?cs else ?>
 +
  Please login!
 +
<?cs /if ?>
  
−
== Labels ==
+
=== Looping through a list of items ===
  
−
Labels are the building blocks of organizing your content. Labels are a backend filter. They can not be specified in the URL. This makes them a secure filtering solution, because you can limit your site pages to content of a certain label and not worry about a user accessing content outside of that label.
+
<?cs each:item = MS.content.items ?>
−
+
  Title: <?cs var:item.title ?><nowiki><br /></nowiki>
−
You can add labels in batch or on a per content basis. Labels can be added in batch under the "bulk operations" widget on the "browse content" page. Labels can be added manually on an individual content item, by clicking on the "edit properties" link on the content page.
+
<?cs /each ?>
  
−
== Tags ==  
+
=== Properly escape variables using html, javascript, and url escaping ===
  
−
Tags are essentially public labels. Tags can be specified in the URL. Tags usually show up on content pages, so you can browse similiar content. The tagging system can be accomplished via the Category system, but it shouldn't because tags are considered a light weird mechanism you can create on the fly. Also keeping tags seperate from categories allow you to browse tags within a category.
+
  <script type="text/javascript">
−
   
+
  var username = "<?cs var:js_escape(MS.site.user.username) ?>";
−
You can add tags in batch or on a per content basis. Tags can be added in batch under the "bulk operations" widget on the "browse content" page. Tags can be added manually on an individual content item, by clicking on the "edit properties" link on the content page.
+
</script>
  
−
== Categories ==
+
<input type="text" name="username" value="<?cs var:html_escape(MS.site.user.username) ?>">
  
−
Categories are robust tags. The tagging system could be created under the category system by creating a root category called "Tag" and then creating sub-categories with the actual tag names. This is a cumbersom process, which is why the there is a seperate light weight tagging system. Categories also allow heirarchy support with as many levels as you want. Example: DVDS -> USA -> California -> Genre -> Action. Categories can be specified in the URL.
+
<nowiki>
−
+
<a href="http://www.test.com/?user=<?cs var:url_escape(MS.site.user.username) ?>">click here to go to your public profile page</a></nowiki>
−
You have to first create categories on the category page. Once they are created, you can add them to the appropriate content.
+
−
+
−
You can add categories in batch or on a per content basis. Categories can be added in batch under the "bulk operations" widget on the "browse content" page. Categories can be added manually on an individual content item, by clicking on the "edit properties" link on the content page.
+
  
−
== Associations ==
+
=== Use a built-in macro ===
  
−
Associations are a term used to map content with accounts via a term. A common term would be "Cast". Videos normally have people in them, so you can associate the people with the videos via the "Cast" term. Other common associations are director, producer, writter, production company, etc.
+
<img src="<?cs call:getStaticUrl("logo.jpg") ?>" />
−
+
−
You have to first create associations on the associations page. Once they are created, you can make associations with the appropriate content.
+
−
+
−
You can make associations in batch. Associations can be made in batch under the "bulk operations" widget on the "browse content" page.
+
  
−
== Relationships ==
+
Detailed documentation of the Clearsilver language is available here: http://www.clearsilver.net/docs/
  
−
Relationships are a term used to map content with other content via a term. A common example is linking up scenes of a video into a DVD object, DVDs to a Box Set, etc. Relationships allow you to make this connection.
+
== HDF ==
−
+
−
You have to first create relationships on the relationships page. Once they are created, you can make relationships with the appropriate content.
+
−
+
−
You can make relationships in batch. Relationships can be made in batch under the "bulk operations" widget on the "browse content" page.
+
  
−
== Custom Fields ==
+
The HDF is simply a term of a list of key-value pairs. This usually consists of content titles, player urls, image urls, user information, etc. The job of each page is to reference the HDF object through Clearsilver the template is to reference the HDF keys, so you can output the HDF values.
  
−
Custom fields allow you to store additional information on objects. This can be public information like eye color for accounts, or internal information like account type that is used with the [[Site:Faceted Search|faceted search]] mechanism.
+
If you aren't sure what fields are available, add the hdf parameter to the end of your site URL. (Example: http://www.test.com/?hdf) It will output all the available HDF keys.

Latest revision as of 13:24, 1 July 2012

Contents

[edit] Getting Started

Before you master creating websites within Metrixstream, you first need to know the basics. Read through the various sections below to give you a basic understanding of how things work and then continue on to the other sections for more detailed explainations.

[edit] Backend

The backend is responsible for coming up with efficient and scalable database queries so that you can reliably use them as you create your web pages.

Throughout your site building, you will most likely never be accessing the backend directly. This is all provided for you through a backend context, which describes how a backend query should be executed.

[edit] Backend Query

A Backend Query is a mechanism that retrieves data from the backend.

[edit] Backend Context

A Backend Context is a configuration for how a Backend Query should be executed. This configuration commonly includes # of objects, sorting field, ordering method, etc.

Each page has the option of specifying a backend context.

[edit] Additional Backend Context

Pages also have the ability to specify additional backend contexts, which let you create a modular structure to your page, such as popular videos in the upper right, latest comments in the upper left, and staff favorite content on the rest of the page. That example would be handled by creating a primary context and then two additional contexts.

[edit] Frontend

The frontend is responsible for choosing what backend queries to use per page and then using the results to generate the page through the Clearsilver templating language.

[edit] Clearsilver

Clearsilver is the mechanism used to interpret information received from a context. Information received from a context is populated into the HDF, which you can reference using Clearsilver.

Clearsilver is a language neutral template processing engine based on the MVC (Model View Control) design pattern.

The idea behind it is that the backend processes contexts, which results in an HDF object. This object contains all the necessary information required to generate the page that you want to create.

In general Clearsilver allows you to do the following:

[edit] Output a variable from the HTML to the actual page 

Hey <?cs var:MS.site.user.username ?>, welcome back to our site!

[edit] Simple conditional logic checks with if/then statements 

<?cs if:MS.site.user.loggedIn ?>
  Thank you for logging in, <?cs var:MS.site.user.username ?>.
<?cs else ?>
  Please login!
<?cs /if ?>

[edit] Looping through a list of items 

<?cs each:item = MS.content.items ?>
  Title: <?cs var:item.title ?><br />
<?cs /each ?>

[edit] Properly escape variables using html, javascript, and url escaping 

<script type="text/javascript">
  var username = "<?cs var:js_escape(MS.site.user.username) ?>";
</script>

<input type="text" name="username" value="<?cs var:html_escape(MS.site.user.username) ?>">

 <a href="http://www.test.com/?user=<?cs var:url_escape(MS.site.user.username) ?>">click here to go to your public profile page</a>

[edit] Use a built-in macro 

<img src="<?cs call:getStaticUrl("logo.jpg") ?>" />

Detailed documentation of the Clearsilver language is available here: http://www.clearsilver.net/docs/

[edit] HDF

The HDF is simply a term of a list of key-value pairs. This usually consists of content titles, player urls, image urls, user information, etc. The job of each page is to reference the HDF object through Clearsilver the template is to reference the HDF keys, so you can output the HDF values.

If you aren't sure what fields are available, add the hdf parameter to the end of your site URL. (Example: http://www.test.com/?hdf) It will output all the available HDF keys.

Retrieved from "http://dev.metrixstream.com/w/index.php?title=Site:Frontend:Introduction&oldid=491"
Personal tools