Site:Frontend:Introduction
MetrixAdmin (Talk | contribs) m (→Clearsilver) |
MetrixAdmin (Talk | contribs) m (MetrixAdmin moved page Site:Introduction to Site:Frontend:Introduction) |
||
| (11 intermediate revisions by one user not shown) | |||
| Line 7: | Line 7: | ||
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 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 context. | + | 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. |
| − | == | + | == Backend Query == |
| − | A | + | A Backend Query is a mechanism that retrieves data from the backend. |
| − | + | == 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. | |
| − | Pages also have the ability to specify additional 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. | + | Each page has the option of specifying a backend context. |
| + | |||
| + | == 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. | ||
| + | |||
| + | == 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. | ||
== Clearsilver == | == 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 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. |
Clearsilver is a language neutral template processing engine based on the MVC (Model View Control) design pattern. | Clearsilver is a language neutral template processing engine based on the MVC (Model View Control) design pattern. | ||
| Line 29: | Line 37: | ||
In general Clearsilver allows you to do the following: | In general Clearsilver allows you to do the following: | ||
| − | ===Output a variable from the HTML to the actual page=== | + | === Output a variable from the HTML to the actual page === |
Hey <?cs var:MS.site.user.username ?>, welcome back to our site! | 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 ?> | <?cs if:MS.site.user.loggedIn ?> | ||
| Line 41: | Line 49: | ||
<?cs /if ?> | <?cs /if ?> | ||
| − | ===Properly escape variables using html, javascript, and url escaping=== | + | === Looping through a list of items === |
| + | |||
| + | <?cs each:item = MS.content.items ?> | ||
| + | Title: <?cs var:item.title ?><nowiki><br /></nowiki> | ||
| + | <?cs /each ?> | ||
| + | |||
| + | === Properly escape variables using html, javascript, and url escaping === | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| Line 49: | Line 63: | ||
<input type="text" name="username" value="<?cs var:html_escape(MS.site.user.username) ?>"> | <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> | + | <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> | ||
| + | |||
| + | === 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/ | Detailed documentation of the Clearsilver language is available here: http://www.clearsilver.net/docs/ | ||
| Line 57: | Line 76: | ||
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. | 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. | |
| − | + | ||
| − | + | ||
| − | If you | + | |
| − | + | ||
| − | + | ||
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.
