Mandatory Placeholders
Release 1.0 - ...
Adding CSS and JavaScript includes from any place is possible using placeholders. Because some modules are expected to add includes, and to keep the output as proper XHTML, some mandatory placeholders are defined within the Smartsite.config. These placeholders should used within Rendertemplates and added to the head-section of the resulting XHTML:
- placeholder.cssinclude
- placeholder.css
- placeholder.javascriptinclude
- placeholder.javascript
- placeholder.javascriptonload
| Smartsite SXML |
Copy Code
|
|---|---|
...
<head>
<title>{itemdata.field(title)</title>
<se:placeholder.cssinclude />
<se:placeholder.css />
<se:placeholder.javascriptinclude />
<se:placeholder.javascriptonload />
<se:placeholder.javascript />
</head>
...
|
|
Note that the placeholder.javascriptonload depends on placeholder.javascript.
Each of these virtual macros implements their own virtual parameters. For example, the placeholder.cssinclude macro has these parameters:
- url
- media
- priority
These placeholders should be present in all iXperion sites. Some modules (macros and vipers) add contents to these placeholders. If missing, the components will raise an error.
Although these placeholders are mandatory, the formatting can be modified to accomodate for specific needs such as layout requirements or integration with a client platform.
| XML |
Copy Code
|
|---|---|
<!-- Start of Mandatory css and javascript placeholders -->
<!--
These five placeholder must be rendered in the head section of the XHTML page:
<se:placeholder.cssinclude />
<se:placeholder.javascriptinclude />
<se:placeholder.css />
<se:placeholder.javascriptonload />
<se:placeholder.javascript />
Data can be added to these placeholders by using the placeholder.addXXX macros or placeholder.addXXX vipers.
Example: <se:placeholder.addjavascriptinclude url="{channel.link('/res/scripts/webcontrols.js')}" />
{placeholder.addjavascriptinclude(channel.link('/res/scripts/webcontrols.js'))}
-->
<add macro="placeholder.cssinclude" inherit="placeholder" description="CSS includes to render in the Html Head section.">
<set parameter="id" overridable="false">cssinclude</set>
<set parameter="fieldnames" overridable="false">
<![CDATA[
<se:collection>
<se:member name="url" type="locator" primarykey="true"></se:member>
<se:member name="media" type="string" primarykey="true"></se:member>
<se:member name="priority" type="integer"></se:member>
</se:collection>
]]>
</set>
<set parameter="ignoreduplicates" overridable="false">true</set>
<set parameter="sortcolumn" overridable="false">priority desc</set>
<set parameter="rowformat">
<![CDATA[<link rel="stylesheet" type="text/css" href="{this.field(url)}"{sys.iif(string.length(this.field(media,default='')) GT 0,' media="'+this.field(media)+'"')} />]]>
</set>
<set parameter="rowdelimiter">{char.crlf()}</set>
</add>
<add macro="placeholder.addcssinclude" inherit="text" description="Add a CSS include to the Html Head section.">
<set parameter="value" overridable="false"></set>
<set parameter="targetid" overridable="false">cssinclude</set>
<set parameter="resulttype" overridable="false">none</set>
<set parameter="url" type="locator" options="IsRequired" description="Url of the CSS include file."></set>
<set parameter="media" type="string" description="Media type for the CSS."></set>
<set parameter="priority" type="integer" description="Priority of the entry (default is 0)."></set>
<set parameter="save" overridable="false">
<![CDATA[
<se:collection>
<se:member>placeholder.addcssinclude(this.getparameter(url), this.getparameter(media, default=''), this.getparameter(priority, default=0))</se:member>
</se:collection>
]]>
</set>
</add>
<add macro="placeholder.javascriptinclude" inherit="placeholder" description="Javascript includes to render in the Html Head section.">
<set parameter="id" overridable="false">javascriptinclude</set>
<set parameter="fieldnames" overridable="false">
<![CDATA[
<se:collection>
<se:member name="url" type="locator" primarykey="true"></se:member>
<se:member name="defer" type="boolean"></se:member>
<se:member name="priority" type="integer"></se:member>
</se:collection>
]]>
</set>
<set parameter="ignoreduplicates" overridable="false">true</set>
<set parameter="sortcolumn" overridable="false">priority desc</set>
<set parameter="rowformat">
<![CDATA[<script type="text/javascript" src="{this.field(url)}"{sys.iif(this.field(defer,default=false),' defer="true"')}></script>]]>
</set>
<set parameter="rowdelimiter">{char.crlf()}</set>
</add>
<add macro="placeholder.addjavascriptinclude" inherit="text" description="Add a Javascript include to the Html Head section.">
<set parameter="value" overridable="false"></set>
<set parameter="targetid" overridable="false">javascriptinclude</set>
<set parameter="resulttype" overridable="false">none</set>
<set parameter="url" options="IsRequired" type="locator" description="Url of the Javascript include file."></set>
<set parameter="defer" type="boolean" description="Use defer on the script tag."></set>
<set parameter="priority" type="integer" description="Priority of the entry (default is 0)."></set>
<set parameter="save" overridable="false">
<![CDATA[
<se:collection>
<se:member>placeholder.addjavascriptinclude(this.getparameter(url), this.getparameter(defer, default=false), this.getparameter(priority, default=0))</se:member>
</se:collection>
]]>
</set>
</add>
<add macro="placeholder.css" inherit="placeholder" description="Renders a CSS style block in the Html Head section.">
<set parameter="id" overridable="false">css</set>
<set parameter="fieldnames" overridable="false">
<![CDATA[
<se:collection>
<se:member name="css" type="string"></se:member>
<se:member name="priority" type="integer"></se:member>
</se:collection>
]]>
</set>
<set parameter="sortcolumn" overridable="false">priority desc</set>
<set parameter="rowformat">{string.indent(this.field(css),1,true,true)}{char.crlf()}</set>
<set parameter="resultformat"><![CDATA[<style type="text/css">{char.crlf()}{this.result()}</style>]]></set>
</add>
<add macro="placeholder.addcss" inherit="text" description="Add CSS style rules for rendering in the Html Head section.">
<set parameter="value" name="css" description="The CSS style rule(s) to add."></set>
<set parameter="targetid" overridable="false">css</set>
<set parameter="resulttype" overridable="false">none</set>
<set parameter="priority" type="integer" description="Priority of the entry (default is 0)."></set>
<set parameter="save" overridable="false">
<![CDATA[
<se:collection>
<se:member>placeholder.addcss(this.getparameter(css), this.getparameter(priority, default=0))</se:member>
</se:collection>
]]>
</set>
</add>
<add macro="placeholder.javascriptonload" inherit="placeholder" description="Renders a Javascript function that will be executed from the page load event.">
<set parameter="id" overridable="false">javascriptonload</set>
<set parameter="fieldnames" overridable="false">
<![CDATA[
<se:collection>
<se:member name="javascript" type="string"></se:member>
<se:member name="priority" type="integer"></se:member>
</se:collection>
]]>
</set>
<set parameter="sortcolumn" overridable="false">priority desc</set>
<set parameter="rowformat">{string.appendifmissingany(string.indent(this.field(javascript),1,true,true), '};', ';')}{char.crlf()}</set>
<set parameter="resultformat">{placeholder.addjavascript('function onLoad() {'+char.crlf()+this.result()+'}')}</set>
<set parameter="default">{placeholder.addjavascript('function onLoad() {'+char.crlf()+'//empty'+char.crlf()+'}')}</set>
</add>
<add macro="placeholder.addjavascriptonload" inherit="text" description="Add Javascript statements to be executed from the page load event.">
<set parameter="value" name="script" options="IsRequired" description="The javascript add to the page load."></set>
<set parameter="targetid" overridable="false">javascriptonload</set>
<set parameter="resulttype" overridable="false">none</set>
<set parameter="priority" type="integer" description="Priority of the entry (default is 0)."></set>
<set parameter="save" overridable="false">
<![CDATA[
<se:collection>
<se:member>placeholder.addjavascriptonload(this.getparameter(script), this.getparameter(priority, default=0))</se:member>
</se:collection>
]]>
</set>
</add>
<add macro="placeholder.javascript" inherit="placeholder" description="Renders a Javascript section in the Html Head section.">
<set parameter="id" overridable="false">javascript</set>
<set parameter="fieldnames" overridable="false">
<![CDATA[
<se:collection>
<se:member name="javascript" type="string"></se:member>
<se:member name="priority" type="integer">0</se:member>
</se:collection>
]]>
</set>
<set parameter="sortcolumn" overridable="false">priority desc</set>
<set parameter="rowformat">{string.appendifmissingany(string.indent(this.field(javascript),1,true,true), '};', ';')}{char.crlf()}</set>
<set parameter="resultformat">
<![CDATA[<script type="text/javascript">{char.crlf()}/*<![CDATA[*/{char.crlf()}{this.result()}/*]]>*/{char.crlf()}</script>]]>
</set>
</add>
<add macro="placeholder.addjavascript" inherit="text" description="Add Javascript statements or functions to the javascript block Html Head section.">
<set parameter="value" name="script" options="IsRequired" description="The Javascript to add."></set>
<set parameter="targetid" overridable="false">javascript</set>
<set parameter="resulttype" overridable="false">none</set>
<set parameter="priority" type="integer" description="Priority of the entry (default is 0)."></set>
<set parameter="save" overridable="false">
<![CDATA[
<se:collection>
<se:member>placeholder.addjavascript(this.getparameter(script), this.getparameter(priority, default=0))</se:member>
</se:collection>
]]>
</set>
</add>
<!-- End of Mandatory css and javascript placeholders -->
|
|