A prototype within the Client Framework 2 user interface.
Refer to Prototype for further information.
The use of XForms elements inside ui:prototype is not supported and will result in undefined behavior.
The styles on the ui:prototype element are used as the styles on the root element of all prototype instances created from that prototype. As the instances can be placed anywhere in the page it is necessary to protect them from inheriting the wrong styles. The mcs-mobility property indicates whether the element is moved from one place to another using client-side scripting, and allows authors to control inheritance of styles. Refer to theme_css_prop.html#mcs-mobility for more information.
Each prototype is bound to an anonymous layout container in order to prevent page authors from using the mcs-container property to target containers outside the scope of the prototype.
The following styles apply to ui:prototype by default.
ui|prototype {
mcs-mobility: mobile;
}| Attribute | Description | Type | Default | Options | Use |
|---|---|---|---|---|---|
| uses | The list of component ids that are used from within the prototype and need to be made available during instance construction. | xs:IDREFS | optional |
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"
xmlns:json="http://www.volantis.com/xmlns/2009/07/json"
xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
xmlns:cst="http://www.volantis.com/xmlns/2009/07/cf2/template"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xsi:schemaLocation="http://www.w3.org/2002/06/xhtml2
http://www.volantis.com/schema/2006/01/xdime2/xdime2.xsd">
<head>
<title>Prototype Example</title>
<mcs:script src="/scripts/dom-slide-model.mscr"/>
<mcs:script src="/scripts/dom-slide-renderer.mscr"/>
<mcs:script src="/scripts/prototype.mscr"/>
</head>
<body>
<!-- Create a component into which messages can be added. -->
<ui:box id="messages">
<p>Status messages appear here</p>
</ui:box>
<!--
Define a prototype for use on the client.
The messages component is used from within the prototype
so is listed in the uses attribute.
-->
<div style="background-color: green" >
<ui:prototype id="prototype" uses="messages">
<cst:template id="channel-template">
<div id="template-root" style="background-color:green">
<p><span>This is a template created by prototype</span></p>
<div><cst:a href="href"><cst:image path="icon"/></cst:a></div>
<div><cst:a href="href"><cst:value path="title"/></cst:a></div>
<cst:switch path="type">
<cst:case string="feed">
<p><span>Type: <cst:value path="type"/></span></p>
<!-- A slide view to display the feed items. -->
<ui:slide-view id="slides" model="model" renderer="renderer"/>
<ui:box id="ubx">
<cst:value path="items[0].title"/>
<cst:value path="items[1].title"/>
<cst:value path="items[2].title"/>
</ui:box>
<!-- Create a custom slide model. -->
<mcs:script type="text/javascript">
V$C.creation(function(c) {
var m = new DOMSlideModel();
var r = new DOMSlideRenderer();
m._bindToDOM('ubx');
c.add("model", m);
c.add("renderer", r);
});
V$C.starting(function(c) {
c.get('slides').setLoop(true);
var timer = new V$.cf2.TimerQueue();
var id = timer.every(function(){c.get('slides').next()}, 1000);
});
</mcs:script>
<!--Register a handler that will trigger when -->
<!--the data associated with the template-->
<!--changes, will pass 'feed.items' from the-->
<!--template as a parameter to a custom -->
<!--handler that will use the information-->
<!--to update the slide model.-->
<!---->
<!--If an error occurs then add a message to the-->
<!--messages component.-->
<!---->
</cst:case>
<cst:case string="weather">
<p><span>Type: <cst:value path="type"/></span></p>
<cst:image path="weather"/>
</cst:case>
</cst:switch>
</div>
</cst:template>
</ui:prototype>
</div>
<json:inline id="channels">
<json:array>
<json:object>
<json:property name="title">
<json:string>Channel 1</json:string>
</json:property>
<json:property name="icon">
<json:object>
<json:property name="src">
<json:string>assets/images/slide1.png</json:string>
</json:property>
<json:property name="alt">
<json:string>News</json:string>
</json:property>
</json:object>
</json:property>
<json:property name="type">
<json:string>feed</json:string>
</json:property>
<json:property name="href">
<json:string>channel1.xdime</json:string>
</json:property>
<json:property name="items">
<json:array>
<json:object>
<json:property name="title">
<json:string>News Headline</json:string>
</json:property>
<json:property name="href">
<json:string>channel1/news.xdime</json:string>
</json:property>
</json:object>
<json:object>
<json:property name="title">
<json:string>Sports Headline</json:string>
</json:property>
<json:property name="href">
<json:string>channel1/sports.xdime</json:string>
</json:property>
</json:object>
<json:object>
<json:property name="title">
<json:string>Fashion Headline</json:string>
</json:property>
<json:property name="href">
<json:string>channel1/fashion.xdime</json:string>
</json:property>
</json:object>
</json:array>
</json:property>
</json:object>
<json:object>
<json:property name="title">
<json:string>Channel 2</json:string>
</json:property>
<json:property name="icon">
<json:object>
<json:property name="src">
<json:string>assets/images/slide2.png</json:string>
</json:property>
<json:property name="alt">
<json:string>Weather</json:string>
</json:property>
</json:object>
</json:property>
<json:property name="type">
<json:string>weather</json:string>
</json:property>
<json:property name="href">
<json:string>weather.xdime</json:string>
</json:property>
<json:property name="weather">
<json:object>
<json:property name="src">
<json:string>assets/images/gallery/photos/img4.jpg</json:string>
</json:property>
<json:property name="alt">
<json:string>Test</json:string>
</json:property>
</json:object>
</json:property>
</json:object>
</json:array>
</json:inline>
<div style="background-color:red">
<ui:box id="placeholder">
<p>Please wait while templates load.</p>
</ui:box>
</div>
</body>
</html>The prototype.mscr policy references the following script:
V$C.linking(function(c) {
var ch = c.get("channels");
c.add("ch0", ch[1]);
});
V$C.starting(function(c) {
var box = c.get("placeholder");
var container = box.inner();
container.removeChild(container.childNodes[0]);
var prototype = c.get("prototype");
var channels = c.get("channels");
for (var j = 0; j < 1; j++) {
for (var i = 0; i < channels.length; i++) {
var pi = prototype.construct();
var template = pi.get("channel-template");
var r = pi.outer();
container.appendChild(r);
template.setData(channels[i]);
}
}
});