ui:slide-view

Purpose

Displays slides from a specified set. It presents one slide at a time. All slides must be of the same size. The contents of each slide is retrieved from the underlying model. The corresponding renderer defines how to display the data on an XDIME page.

Refer to Slide View for further information.

Styles

The ui:slide-view element supports all the common style properties that apply to block elements; by default:

ui|slide-view {
  display: block;
  overflow: hidden;
}

Attribute groups

Attributes

Attribute Description Type Default Options Use
model

The slide model. The attribute must refer to the id of a JavaScript component, not an XML element.

 xs:IDREF     optional 
renderer

The slide renderer. The attribute must refer to the id of a JavaScript component, not an XML element.

 xs:IDREF     optional 

Example

The script policies defining the slide model and renderer can be found in the ${MCS_HOME}/webapps/mcs.war/projects/examples/policies/scripts directory.

        
<?xml version="1.0" encoding="UTF-8"?>
<html
  xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"  
  xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"  
  xmlns:event="http://www.w3.org/2001/xml-events">
  <head>
    <title>CF2 SlideView component example</title>
    
    <mcs:script src="/scripts/dom-slide-model.mscr"/>
    <mcs:script src="/scripts/dom-slide-renderer.mscr"/>
    <mcs:script src="/scripts/img-slide-model.mscr"/>
    <mcs:script src="/scripts/img-slide-renderer.mscr"/>
    <mcs:script src="/scripts/slide-view.mscr"/>
    
  </head>
  <body id="bodyID">
    <div> 
      <ui:slide-view id="slide1" model="model1" renderer="renderer1"/> 
      <ui:slide-view id="slide2" model="model2" renderer="renderer2"/>
      
      <ui:box style="visibility: hidden" id="smb2">
        <object src="images/s1.mimg" />
        <object src="images/s2.mimg" />
        <object src="images/s3.mimg" />
        <object src="images/s4.mimg" /> 
      </ui:box>
    </div>
    
  </body>
</html>

Related topics