Site:Frontend:Modules
MetrixJustin (Talk | contribs) |
MetrixJustin (Talk | contribs) (→Creating a Module) |
||
| Line 61: | Line 61: | ||
If you're using the stack module, all CSS/JS stack includes would be called here | If you're using the stack module, all CSS/JS stack includes would be called here | ||
| + | |||
| + | == Javascript Controller == | ||
| + | |||
| + | Each module that requires javascript should have its own controller. The controller is made up of classes that control different parts of the module. This allows us to only enable functions and listeners that are required on the page, instead of having them always active. This also ensures that when concatenating the javascript file that function and listeners wont overlap. | ||
Revision as of 10:13, 18 June 2012
Contents |
Introduction
Modules contain stand-alone code, files, pages, and page includes required to perform the tasks of the module.
Module Integration
Adding a Module to a Page
After a module is created or imported, it will be listed under Module Integration while editing a site page.
Selecting the module will populate MS.module.data with the contents of the module. Calling MS.module.data on the page will inject the contents onto the page.
<html>
<head>
<title>Module Test</title>
</head>
<body>
<?cs var:MS.module.data ?>
</body>
</html>
Accessing Module Pages
Since modules are injected into a parent page, pages within a module need to be called with the mpage URL parameter.
For example, if your parent page is "auth" and your module page is "login":
http://example.com/?page=auth&mpage=login
Module Only
Some modules contain pages that serve up JSON or XML content and should ignore the included header and footer. This can be done by adding the URL parameter "output=moduleonly"
Example:
http://example.com/?page=auth&mpage=users.json&output=moduleonly
Creating a Module
Common
Default Page
This is the default page that loads when no mpage is set.
Autoload
Autoloaded modules will be included on every page of the site. This is helpful for caching and including JS and CSS files throughout the site.
Key / Value Pairs
Key / Value pairs are module-wide variables that can easily be changed. These are often used as settings for the module.
For example, if we have a setting called "show_stats" and want to see if its set to "yes"
<?cs if:'<!show_stats!>' == 'yes' ?> Showing Stats <?cs /if ?>
Initialization
Initialization is the first part of the module that is loaded. If there are any required modules to be loaded before this module you will need to include them here.
If you're using the stack module, all CSS/JS stack includes would be called here
Javascript Controller
Each module that requires javascript should have its own controller. The controller is made up of classes that control different parts of the module. This allows us to only enable functions and listeners that are required on the page, instead of having them always active. This also ensures that when concatenating the javascript file that function and listeners wont overlap.
