Metrixstream - User contributions [en]

Site:API:Authentication

2012-07-03T00:53:19Z

MetrixJustin: /* Login */

= Login =

== Post URL ==

The login post URL can be generated using the getLoginPostUrl() macro, or posting to getBasePostUrl() with an action of login.

Example:
<?cs call:getLoginPostUrl() ?>
or
<?cs call:getBasePostUrl() ?>?action=login

== Required Parameters ==
Username
Password

== Optional Parameters ==
mode
continue
retry

== Error Handling ==
A failed form submission will populate MS.error in the retry page HDF with the reason why the form has failed.

== Complete Example ==

<nowiki><form action="<?cs call:getLoginPostUrl() ?>" method="post">
<input type="hidden" name="continue" value="<?cs call:getPageUrl('successPage') ?>" />
<input type="hidden" name="retry" value="<?cs call:getPageUrl('retryPage') ?>" />

<?cs if:MS.error ?>
<div id="error"><?cs var:MS.error ?></div>
<?cs /if ?>

<label>Username</label>
<input type="text" name="username" value="" />

<label>Password</label>
<input type="text" name="password" value="" />

<input type="submit" value="Login" />
</form></nowiki>

= Signup =

= Logout =

Site:API:Authentication

2012-07-03T00:52:28Z

MetrixJustin: /* Error Handling */

Site:API:Authentication

2012-07-03T00:51:45Z

MetrixJustin: /* Complete Example */

= Login =

== Post URL ==

The login post URL can be generated using the getLoginPostUrl() macro, or posting to getBasePostUrl() with an action of login.

Example:
<?cs call:getLoginPostUrl() ?>
or
<?cs call:getBasePostUrl() ?>?action=login

== Required Parameters ==
Username
Password

== Optional Parameters ==
mode
continue
retry

== Error Handling ==
A failed form submission will populate MS.error in the retry page HDF

== Complete Example ==

<nowiki><form action="<?cs call:getLoginPostUrl() ?>" method="post">
<input type="hidden" name="continue" value="<?cs call:getPageUrl('successPage') ?>" />
<input type="hidden" name="retry" value="<?cs call:getPageUrl('retryPage') ?>" />

<?cs if:MS.error ?>
<div id="error"><?cs var:MS.error ?></div>
<?cs /if ?>

<label>Username</label>
<input type="text" name="username" value="" />

<label>Password</label>
<input type="text" name="password" value="" />

<input type="submit" value="Login" />
</form></nowiki>

Site:API:Authentication

2012-07-03T00:51:35Z

MetrixJustin: /* Login */

= Login =

== Post URL ==

The login post URL can be generated using the getLoginPostUrl() macro, or posting to getBasePostUrl() with an action of login.

Example:
<?cs call:getLoginPostUrl() ?>
or
<?cs call:getBasePostUrl() ?>?action=login

== Required Parameters ==
Username
Password

== Optional Parameters ==
mode
continue
retry

== Error Handling ==
A failed form submission will populate MS.error in the retry page HDF

== Complete Example ==

<form action="<?cs call:getLoginPostUrl() ?>" method="post">
<input type="hidden" name="continue" value="<?cs call:getPageUrl('successPage') ?>" />
<input type="hidden" name="retry" value="<?cs call:getPageUrl('retryPage') ?>" />

<?cs if:MS.error ?>
<div id="error"><?cs var:MS.error ?></div>
<?cs /if ?>

<label>Username</label>
<input type="text" name="username" value="" />

<label>Password</label>
<input type="text" name="password" value="" />

<input type="submit" value="Login" />
</form>

Site:API:Authentication

2012-07-03T00:45:01Z

MetrixJustin: /* Login */

= Login =

== Post URL ==

== Required Parameters ==

== Optional Parameters ==

== Error Handling ==

Site:API:Authentication

2012-07-03T00:42:43Z

MetrixJustin: Created page with "= Login = == Post URL == == Required Parameters == == Error Handling =="

= Login =

== Post URL ==

== Required Parameters ==

== Error Handling ==

Site:Frontend:Forms

2012-07-02T16:49:40Z

MetrixJustin: /* Custom Fields */

= Introduction =

= Parameters =

== Mode ==

This optional parameter sets the response type.

Avaliable modes: xml, json

<input type="hidden" name="mode" value="xml" />

== Continue ==

This optional parameter is the page you will be redirected to after a successful form submit.

<input type="hidden" name="continue" value="http://example.com/?page=some-successful-page" />

== Retry ==

This optional parameter is the page you will be redirected to after a unsuccessful form submit. This page will also contain the MS.error HDF value with the error/reason why the form wasn't successful.

<input type="hidden" name="continue" value="http://example.com/?page=some-failed-page" />

= Ajax Forms =

The jQuery javascript library offers a simple function to handle your forms using Ajax. This allows you to send form data and get the response from the server without having to reload the page.

== Basic Script ==

The following snippet will listen for a form with the ID of "someFormId" to be submitted.

$('#someFormId').submit(function(e) {
e.preventDefault();
var form = $(this):

if(form.data('disabled') == 'true') return;
form.data('disabled', 'true');

$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(data) {
if('ok' == $('status', data).text()) {
// Form has returned successfully
} else {
// Form has returned with an error
}
form.removeData('disabled');
},
error: function() {
// Could not get data back from the post
}
});
});

This script should be placed in the appropriate controller and instantiated only when necessary.

= Custom Fields =

Custom fields can be updated just like other form fields but require different naming. The custom field is prefixed with cst_ followed by the custom field name.

Ex. If a custom field on a user object is "specialNote", the input name would be "cst_specialNote".

<input type="text" name="cst_specialNote" value="<?cs var:MS.site.user.custom.specialNote.value ?>" />

Site:Frontend:Forms

2012-07-02T16:48:54Z

MetrixJustin:

= Introduction =

= Parameters =

== Mode ==

This optional parameter sets the response type.

Avaliable modes: xml, json

<input type="hidden" name="mode" value="xml" />

== Continue ==

This optional parameter is the page you will be redirected to after a successful form submit.

<input type="hidden" name="continue" value="http://example.com/?page=some-successful-page" />

== Retry ==

This optional parameter is the page you will be redirected to after a unsuccessful form submit. This page will also contain the MS.error HDF value with the error/reason why the form wasn't successful.

<input type="hidden" name="continue" value="http://example.com/?page=some-failed-page" />

= Ajax Forms =

The jQuery javascript library offers a simple function to handle your forms using Ajax. This allows you to send form data and get the response from the server without having to reload the page.

== Basic Script ==

The following snippet will listen for a form with the ID of "someFormId" to be submitted.

$('#someFormId').submit(function(e) {
e.preventDefault();
var form = $(this):

if(form.data('disabled') == 'true') return;
form.data('disabled', 'true');

$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(data) {
if('ok' == $('status', data).text()) {
// Form has returned successfully
} else {
// Form has returned with an error
}
form.removeData('disabled');
},
error: function() {
// Could not get data back from the post
}
});
});

This script should be placed in the appropriate controller and instantiated only when necessary.

= Custom Fields =

Custom fields can be updated just like other form fields but require different naming.

Ex. If a custom field on a user object is "specialNote", the input name would be "cst_specialNote".

<input type="text" name="cst_specialNote" value="<?cs var:MS.site.user.custom.specialNote.value ?>" />

Site:Frontend:Controllers

2012-06-20T17:56:16Z

MetrixJustin: /* Basic Site Controller */

= Introduction =

A Controller is a javascript class that will manage all the necessary javascript. This class is broken down by functionality and should only be instantiated when necessary.

= Basic Site Controller =

<script type="text/javascript">
function siteController(authUser, publicUser, publicContentId) {
this.authUser = authUser;
this.publicUser = publicUser;
this.contentId = publicContentId;
this.urls = [];
}

siteController.prototype.registerUrls = function(urls) {
this.urls = urls;
};

siteController.prototype.registerProfileFunctions = function() {
var myThis = this;

$('#getUserState').click(function(e) {
e.preventDefault();
$.ajax({
type: 'get',
url: myThis.urls['userStateUrl'],
data: {
'user': myThis.publicUser
},
success: function(data) {
alert('This user is '+ data.state);
}
});
});
};
</script>

== Instantiating ==

In the example controller, siteController is instantiated with the authenticated username, the public username, and the public contentId which are stored so they can be accessed throughout the class.

<script type="text/javascript">
var site = new siteController('Justin', 'Roy', <nowiki>''</nowiki>);
$(document).ready(function() {
site.registerUrls({
'userStateUrl' : 'http://example.com/userstate'
});
});
</script>

== Using registerProfileFunctions ==

In the example above, we never created an instance of registerProfileFunctions meaning the getUserState listener is never active.

Example
site.registerProfileFunctions();

Once its active and getUserState is clicked, the script references myThis.urls['userStateUrl'] which was set earlier in the registerUrls function.

Site:Frontend:Controllers

2012-06-20T17:47:16Z

MetrixJustin: /* Instantiating */

= Introduction =

A Controller is a javascript class that will manage all the necessary javascript. This class is broken down by functionality and should only be instantiated when necessary.

= Basic Site Controller =

== Example Controller ==

<script type="text/javascript">
function siteController(authUser, publicUser, publicContentId) {
this.authUser = authUser;
this.publicUser = publicUser;
this.contentId = publicContentId;
this.urls = [];
}

siteController.prototype.registerUrls = function(urls) {
this.urls = urls;
};

siteController.prototype.registerProfileFunctions = function() {
var myThis = this;

$('#getUserState').click(function(e) {
e.preventDefault();
$.ajax({
type: 'get',
url: myThis.urls['userStateUrl'],
data: {
'user': myThis.publicUser
},
success: function(data) {
alert('This user is '+ data.state);
}
});
});
};
</script>

== Instantiating ==

In the example controller, siteController is instantiated with the authenticated username, the public username, and the public contentId which are stored so they can be accessed throughout the class.

<script type="text/javascript">
var site = new siteController('Justin', 'Roy', <nowiki>''</nowiki>);
$(document).ready(function() {
site.registerUrls({
'userStateUrl' : 'http://example.com/userstate'
});
});
</script>

Site:Frontend:Controllers

2012-06-20T17:38:23Z

MetrixJustin: /* Instantiating */

= Introduction =

A Controller is a javascript class that will manage all the necessary javascript. This class is broken down by functionality and should only be instantiated when necessary.

= Basic Site Controller =

== Example Controller ==

<script type="text/javascript">
function siteController(authUser, publicUser, publicContentId) {
this.authUser = authUser;
this.publicUser = publicUser;
this.contentId = publicContentId;
this.urls = [];
}

siteController.prototype.registerUrls = function(urls) {
this.urls = urls;
};

siteController.prototype.registerProfileFunctions = function() {
var myThis = this;

$('#getUserState').click(function(e) {
e.preventDefault();
$.ajax({
type: 'get',
url: myThis.urls['userStateUrl'],
data: {
'user': myThis.publicUser
},
success: function(data) {
alert('This user is '+ data.state);
}
});
});
};
</script>

== Instantiating ==

In the example controller, siteController is instantiated with the authenticated username, the public username (if avaliable), and the public contentId (if avaliable) which are stored so they can be accessed throughout the class.

<script type="text/javascript">
var site = new siteController('Justin', 'Roy', <nowiki>''</nowiki>);
$(document).ready(function() {
site.registerUrls({
'userStateUrl' : 'http://example.com/userstate'
});
});
</script>

Site:Frontend:Controllers

2012-06-20T17:37:55Z

MetrixJustin: /* Instantiating */

= Introduction =

A Controller is a javascript class that will manage all the necessary javascript. This class is broken down by functionality and should only be instantiated when necessary.

= Basic Site Controller =

== Example Controller ==

<script type="text/javascript">
function siteController(authUser, publicUser, publicContentId) {
this.authUser = authUser;
this.publicUser = publicUser;
this.contentId = publicContentId;
this.urls = [];
}

siteController.prototype.registerUrls = function(urls) {
this.urls = urls;
};

siteController.prototype.registerProfileFunctions = function() {
var myThis = this;

$('#getUserState').click(function(e) {
e.preventDefault();
$.ajax({
type: 'get',
url: myThis.urls['userStateUrl'],
data: {
'user': myThis.publicUser
},
success: function(data) {
alert('This user is '+ data.state);
}
});
});
};
</script>

== Instantiating ==

In the example controller, siteController is instantiated with the authenticated username, the public username (if avaliable), and the public contentId (if avaliable) which are stored so they can be accessed throughout the class.

<script type="text/javascript">
var site = new siteController('Justin', 'Roy', <nowiki>''</nowiki>);
$(document).ready(function() {
site.registerUrls({
'someUrl':'http://somesite.com'
});
});
</script>

Site:Frontend:Controllers

2012-06-20T17:37:32Z

MetrixJustin: /* Instantiating */

= Introduction =

A Controller is a javascript class that will manage all the necessary javascript. This class is broken down by functionality and should only be instantiated when necessary.

= Basic Site Controller =

== Example Controller ==

<script type="text/javascript">
function siteController(authUser, publicUser, publicContentId) {
this.authUser = authUser;
this.publicUser = publicUser;
this.contentId = publicContentId;
this.urls = [];
}

siteController.prototype.registerUrls = function(urls) {
this.urls = urls;
};

siteController.prototype.registerProfileFunctions = function() {
var myThis = this;

$('#getUserState').click(function(e) {
e.preventDefault();
$.ajax({
type: 'get',
url: myThis.urls['userStateUrl'],
data: {
'user': myThis.publicUser
},
success: function(data) {
alert('This user is '+ data.state);
}
});
});
};
</script>

== Instantiating ==

In the example controller, siteController is instantiated with the authenticated username, the public username (if avaliable), and the public contentId (if avaliable) which are stored so they can be accessed throughout the class.

<script type="text/javascript">
var site = new siteController('Justin', 'Roy', '');
$(document).ready(function() {
site.registerUrls({
'someUrl':'http://somesite.com'
});
});
</script>

Site:Frontend:Controllers

2012-06-20T17:36:16Z

MetrixJustin:

Site:Frontend:Controllers

2012-06-20T17:34:51Z

MetrixJustin:

= Introduction =

A Controller is a javascript class that will manage all the necessary javascript. This class is broken down by functionality and should only be instantiated when necessary.

= Basic Site Controller =

Example Controller:

<script type="text/javascript">
function siteController(authUser, publicUser, publicContentId) {
this.authUser = authUser;
this.publicUser = publicUser;
this.contentId = publicContentId;
this.urls = [];
}

siteController.prototype.registerUrls = function(urls) {
this.urls = urls;
};

siteController.prototype.registerProfileFunctions = function() {
var myThis = this;

$('#getUserState').click(function(e) {
e.preventDefault();
$.ajax({
type: 'get',
url: myThis.urls['userStateUrl'],
data: {
'user': myThis.publicUser
},
success: function(data) {
alert('This user is '+ data.state);
}
});
});
};
</script>

In the example controller, siteController is instantiated with the authenticated username, the public username (if avaliable), and the public contentId (if avaliable) which are stored so they can be accessed throughout the class.

The

<script type="text/javascript">
var site = new siteController('<?cs var:MS.site.auth.username ?>', '<?cs var:MS.activeUser.username ?>', '<?cs var:MS.activeContent.id');
$(document).ready(function() {
site.registerUrls({
'someUrl':'http://somesite.com'
});
});
</script>

Site:Frontend:Controllers

2012-06-20T17:31:42Z

MetrixJustin: Created page with "= Introduction = A Controller is a javascript class that will manage all the necessary javascript. This class is broken down by functionality and should only be instantiated whe..."

Site:Frontend

2012-06-20T17:16:31Z

MetrixJustin:

== Introduction ==

Below you will find links to each particular component of the Frontend Site API. Detailed API information is available by clicking on each link.

=== Main Sections ===

; [[Site:Frontend:BestPractices|Best Practices]]
; [[Site:Frontend:Controllers|Controllers]]
; [[Site:Frontend:Forms|Forms]]
; [[Site:Frontend:Macros|Macros]]
; [[Site:Frontend:Modules|Modules]]

Site:Frontend:Modules

2012-06-18T17:42:50Z

MetrixJustin: /* Listing Content */

= 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.

== Listing Content ==

Listing content relies on the context of module page, not the parent page. For example if the parent page has a context of "My Videos" but the module page doesn't have a context nothing will be listed on the page.

The HDF keys/values will still remain the same, so they can be accessed the same way as a regular page.

Example: Listing the titles of the context Content: All

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

Site:Frontend:Modules

2012-06-18T17:42:19Z

MetrixJustin: /* Listing Content */

= 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.

== Listing Content ==

Listing content relies on the context of module page, not the parent page. For example if the parent page has a context of "My Videos" but the module page doesn't have a context nothing will be listed on the page.

The HDF keys/values will still remain the same, so they can be accessed the same way as a regular page.

Example: Listing the titles of the context Content: All

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

Site:Frontend:Modules

2012-06-18T17:42:02Z

MetrixJustin: /* Listing Content */

= 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.

== Listing Content ==

Listing content relies on the context of module page, not the parent page. For example if the parent page has a context of "My Videos" but the module page doesn't have a context nothing will be listed on the page.

The HDF keys/values will still remain the same, so they can be accessed the same way as a regular page.

Example: Listing the titles of the context Content: All

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

Site:Frontend:Modules

2012-06-18T17:38:34Z

MetrixJustin:

= 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.

== Listing Content ==

Listing content relies on the context of module page, not the parent page.

For example if the parent page has a context of "My Videos" but the module page doesn't have a context nothing will be listed on the page.

Site:Frontend:Forms

2012-06-18T17:32:27Z

MetrixJustin: /* Basic Script */

Site:Frontend:Forms

2012-06-18T17:31:34Z

MetrixJustin: /* Basic Script */

Site:Frontend:Forms

2012-06-18T17:31:06Z

MetrixJustin: /* Basic Script */

= Introduction =

= Parameters =

== Mode ==

This optional parameter sets the response type.

Avaliable modes: xml, json

<input type="hidden" name="mode" value="xml" />

== Continue ==

This optional parameter is the page you will be redirected to after a successful form submit.

<input type="hidden" name="continue" value="http://example.com/?page=some-successful-page" />

== Retry ==

This optional parameter is the page you will be redirected to after a unsuccessful form submit. This page will also contain the MS.error HDF value with the error/reason why the form wasn't successful.

<input type="hidden" name="continue" value="http://example.com/?page=some-failed-page" />

= Ajax Forms =

The jQuery javascript library offers a simple function to handle your forms using Ajax. This allows you to send form data and get the response from the server without having to reload the page.

== Basic Script ==

The following snippet will listen for a form with the ID of "someFormId" to be submitted.

<script type="text/javascript">
$(document).ready(function() {
$('#someFormId').submit(function(e) {
e.preventDefault();
var form = $(this):

if(form.data('disabled') == 'true') return;
form.data('disabled', 'true');

$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(data) {
if('ok' == $('status', data).text()) {
// Form has returned successfully
} else {
// Form has returned with an error
}
form.removeData('disabled');
},
error: function() {
// Could not get data back from the post
}
});
});
});
</script>

This script should be placed in the appropriate controller and instantiated only when necessary.

Site:Frontend:BestPractices

2012-06-18T17:29:00Z

MetrixJustin: Created page with "= Readability and Whitespace = Keeping one line of clearsilver per line ends up being hard to read, as well as added markup since each line of clearsilver turns into a blank lin..."

= Readability and Whitespace =

Keeping one line of clearsilver per line ends up being hard to read, as well as added markup since each line of clearsilver turns into a blank line in the finalized document. To keep things neat we wrap the beginning clearsilver line with the line above it.

This
<nowiki><h1>News</h1></nowiki>
<?cs if:News ?>
<?cs call:showNews() ?>
<?cs /if ?>

Would turn into
<nowiki><h1>News</h1></nowiki><?cs
if:News ?><?cs
call:showNews() ?><?cs
/if ?>

This keeps the white space away and you can easily scan the beginning of each line to clearly see what is happening in the code.

= Site and Module Controllers =

Each site should have a siteController.js file containing all the javascript required to run the site. Each stand-alone module will also have its own controller managing functions specific to that module.

The controller is made up of classes that control different parts of the site/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.

Site:Frontend

2012-06-18T17:28:26Z

MetrixJustin: /* Main Sections */

== Introduction ==

Below you will find links to each particular component of the Frontend Site API. Detailed API information is available by clicking on each link.

=== Main Sections ===

; [[Site:Frontend:Forms|Forms]]
; [[Site:Frontend:Macros|Macros]]
; [[Site:Frontend:Modules|Modules]]
; [[Site:Frontend:BestPractices|Best Practices]]

Site:Frontend:BestPrices

2012-06-18T17:27:52Z

MetrixJustin: /* Readability and Whitespace */

Site:Frontend:BestPrices

2012-06-18T17:27:06Z

= Readability and Whitespace =

Keeping one line of clearsilver per line ends up being hard to read, as well as added markup since each line of clearsilver turns into a blank line in the finalized document. To keep things neat we wrap the beginning clearsilver line with the line above it.

This
<h1>News</h1>
<?cs if:News ?>
<?cs call:showNews() ?>
<?cs /if ?>

Would turn into
<h1>News</h1><?cs
if:News ?><?cs
call:showNews() ?><?cs
/if ?>

This keeps the white space away and you can easily scan the beginning of each line to clearly see what is happening in the code.

= Site and Module Controllers =

Each site should have a siteController.js file containing all the javascript required to run the site. Each stand-alone module will also have its own controller managing functions specific to that module.

The controller is made up of classes that control different parts of the site/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.

Site:Frontend:Modules

2012-06-18T17:13:38Z

MetrixJustin: /* Creating a Module */

Site:Frontend

2012-06-15T23:19:37Z

MetrixJustin: /* Main Sections */

== Introduction ==

Below you will find links to each particular component of the Frontend Site API. Detailed API information is available by clicking on each link.

=== Main Sections ===

; [[Site:Frontend:Forms|Forms]]
; [[Site:Frontend:Macros|Macros]]
; [[Site:Frontend:Modules|Modules]]
; [[Site:Frontend:BestPrices|Best Practices]]

Site:Frontend:Forms

2012-06-15T23:18:19Z

MetrixJustin: /* Ajax Forms */

= Introduction =

= Parameters =

== Mode ==

This optional parameter sets the response type.

Avaliable modes: xml, json

<input type="hidden" name="mode" value="xml" />

== Continue ==

This optional parameter is the page you will be redirected to after a successful form submit.

<input type="hidden" name="continue" value="http://example.com/?page=some-successful-page" />

== Retry ==

This optional parameter is the page you will be redirected to after a unsuccessful form submit. This page will also contain the MS.error HDF value with the error/reason why the form wasn't successful.

<input type="hidden" name="continue" value="http://example.com/?page=some-failed-page" />

= Ajax Forms =

The jQuery javascript library offers a simple function to handle your forms using Ajax. This allows you to send form data and get the response from the server without having to reload the page.

== Basic Script ==

The following snippet will listen for a form with the ID of "someFormId" to be submitted.

<script type="text/javascript">
$(document).ready(function() {
$('#someFormId').submit(function(e) {
e.preventDefault();
var form = $(this):

if(form.data('disabled') == 'true') return;
form.data('disabled', 'true');

$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(data) {
if('ok' == $('status', data).text()) {
// Form has returned successfully
} else {
// Form has returned with an error
}
form.removeData('disabled');
},
error: function() {
// Could not get data back from the post
}
});
});
});
</script>

Site:Frontend:Forms

2012-06-15T23:16:00Z

MetrixJustin: /* Ajax Forms */

= Introduction =

= Parameters =

== Mode ==

This optional parameter sets the response type.

Avaliable modes: xml, json

<input type="hidden" name="mode" value="xml" />

== Continue ==

This optional parameter is the page you will be redirected to after a successful form submit.

<input type="hidden" name="continue" value="http://example.com/?page=some-successful-page" />

== Retry ==

This optional parameter is the page you will be redirected to after a unsuccessful form submit. This page will also contain the MS.error HDF value with the error/reason why the form wasn't successful.

<input type="hidden" name="continue" value="http://example.com/?page=some-failed-page" />

= Ajax Forms =

The jQuery javascript library offers a simple function to handle your forms using Ajax. This allows you to send form data and get the response from the server without having to reload the page.

<script type="text/javascript">
$(document).ready(function() {
$('#someFormId').submit(function(e) {
e.preventDefault();
var form = $(this):

if(form.data('disabled') == 'true') return;
form.data('disabled', 'true');

$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(data) {
if('ok' == $('status', data).text()) {
// Form has returned successfully
} else {
// Form has returned with an error
}
form.removeData('disabled');
},
error: function() {
// Could not get data back from the post
}
});
});
});
</script>

Site:Frontend:Forms

2012-06-15T23:15:40Z

MetrixJustin: /* AJAX Forms */

= Introduction =

= Parameters =

== Mode ==

This optional parameter sets the response type.

Avaliable modes: xml, json

<input type="hidden" name="mode" value="xml" />

== Continue ==

This optional parameter is the page you will be redirected to after a successful form submit.

<input type="hidden" name="continue" value="http://example.com/?page=some-successful-page" />

== Retry ==

This optional parameter is the page you will be redirected to after a unsuccessful form submit. This page will also contain the MS.error HDF value with the error/reason why the form wasn't successful.

<input type="hidden" name="continue" value="http://example.com/?page=some-failed-page" />

= Ajax Forms =

The jQuery javascript library offers a simple function to handle your forms using Ajax. This allows you to send form data and get the response from the server without having to reload the page.

<script type="text/javascript">
$(document).ready(function() {
$('#someFormId').submit(function(e) {
e.preventDefault();
var form = $(this):

if(form.data('disabled') == 'true') return;
form.data('disabled', 'true');

$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(data) {
if('ok' == $('status', data).text()) {
// Form has returned successfully
} else {
// Form has returned with an error
}
form.removeData('disabled');
},
error: function() {
// Could not get data back from the post
}
});
});
});
</script>

Site:Frontend:Forms

2012-06-15T23:04:54Z

MetrixJustin:

Site:Frontend:Forms

2012-06-15T21:04:24Z

MetrixJustin: /* Parameters */

Site:Frontend:Forms

2012-06-15T21:03:46Z

MetrixJustin:

= Introduction =

= Parameters =

== Action ==

== Verb ==

== Mode ==

This optional parameter sets the response type.

Avaliable modes: xml, json

<input type="hidden" name="mode" value="xml" />

== Continue ==

This optional parameter is the page you will be redirected to after a successful form submit.

<input type="hidden" name="continue" value="http://example.com/?page=some-successful-page" />

== Retry ==

This optional parameter is the page you will be redirected to after a unsuccessful form submit. This page will also contain the MS.error HDF value with the error/reason why the form wasn't successful.

<input type="hidden" name="continue" value="http://example.com/?page=some-failed-page" />

Site:Frontend:Modules

2012-06-15T21:00:31Z

MetrixJustin:

Site:Frontend:Modules

2012-06-15T20:59:59Z

MetrixJustin:

Site:Frontend:Modules

2012-06-15T20:59:15Z

MetrixJustin: /* Common */

== 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

Site:Frontend:Modules

2012-06-15T19:56:57Z

MetrixJustin: /* Module Only */

== 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

Site:Frontend:Macros

2012-06-15T19:54:13Z

MetrixJustin: /* Introduction */

=== Introduction ===

Macros are the Clearsilver equivalent to functions. Macros let you define a block of code that can be re-used throughout the site.

=== Creating a Macro ===

Macros are made by starting and ending a new clearsilver block with def.

<?cs def:getUsername() ?>
<?cs var:MS.site.auth.username ?>
<?cs /def ?>

With macros there is no returning specific data, anything in the macro will be placed where its called.

=== Macro Parameters ===

You can pass parameters into the macro by setting them after the macro name

<?cs def:getUsername(user) ?>
<?cs var:user.username ?>
<?cs /def ?>

This macro requires the user parameter to generate the username.

Site:Frontend:Macros

2012-06-15T19:54:05Z

MetrixJustin: /* Creating a Macro */

Site:Frontend:Forms

2012-06-15T19:52:57Z

MetrixJustin:

== Introduction ==

== Parameters ==

=== Action ===

=== Verb ===

=== Mode ===

This optional parameter sets the response type.

Avaliable modes: xml, json

<input type="hidden" name="mode" value="xml" />

=== Continue ===

This optional parameter is the page you will be redirected to after a successful form submit.

<input type="hidden" name="continue" value="http://example.com/?page=some-successful-page" />

=== Retry ===

This optional parameter is the page you will be redirected to after a unsuccessful form submit. This page will also contain the MS.error HDF value with the error/reason why the form wasn't successful.

<input type="hidden" name="continue" value="http://example.com/?page=some-failed-page" />

Site:Frontend:Forms

2012-06-15T19:52:27Z

MetrixJustin: /* Mode */

== Introduction ==

== Parameters ==

=== Action ===

=== Verb ===
This optional

=== Mode ===

This optional parameter sets the response type.

Avaliable modes: xml, json

<input type="hidden" name="mode" value="xml" />

=== Continue ===

This optional parameter is the page you will be redirected to after a successful form submit.

<input type="hidden" name="continue" value="http://example.com/?page=some-successful-page" />

=== Retry ===

This optional parameter is the page you will be redirected to after a unsuccessful form submit. This page will also contain the MS.error HDF value with the error/reason why the form wasn't successful.

<input type="hidden" name="continue" value="http://example.com/?page=some-failed-page" />

Site:Frontend:Forms

2012-06-15T19:52:15Z

MetrixJustin:

Site:Frontend:Forms

2012-06-15T19:38:48Z

MetrixJustin: Created page with "== Introduction == == Error Handling == == AJAX Form == === XML === === JSON ==="

== Introduction ==

== Error Handling ==

== AJAX Form ==

=== XML ===

=== JSON ===

Site:Frontend:Modules

2012-06-15T19:25:54Z

MetrixJustin:

== 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

Site:Frontend:Modules

2012-06-15T19:15:51Z

MetrixJustin:

Site:Frontend:Modules

2012-06-15T19:08:57Z

MetrixJustin:

== Introduction ==

Modules contain stand-alone code, files, pages, and page includes required to perform the tasks of the module.

== Module Integration ==

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

Site:Frontend:Modules

2012-06-15T19:08:06Z

MetrixJustin:

== Introduction ==

Modules contain stand-alone code, files, pages, and page includes required to perform the tasks of the module.

== Module Integration ==

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

Site:Frontend:Modules

2012-06-15T19:05:03Z

MetrixJustin: