The Deck widget

The Deck widget presents data as a series of pages. The content of the widget may be specified directly on an XDIME page, or can be downloaded from an external source using AJAX.

Note:

This solution is independent from the dissection provided by MCS.

Visual appearance

Initially, only the first portion of content, along with the navigational controls, are visible. The Deck widget may work in two modes. In unfold mode, the consecutive page is displayed after the one already visible. In switch mode a new portion of content replaces the one being displayed.

The Deck widget can be placed within other data containing widgets, for example tabs or a popup.

User interactions

The user may freely switch to the next, previous, first and last page of the widget.

XDIME 2 elements

The widget:deck element defines the widget. The content of a single page is specified by widget:deck-page. It can be used directly on the XDIME page or in a response provided by an external service.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
  <head>
    <title>widget:deck</title>
  </head>
  <body>
    <widget:deck id="deck" style="mcs-deck-mode:switch">
      <widget:deck-page>
        <h1 style="text-align:center">Deck Widget</h1>
      </widget:deck-page>
      <widget:deck-page>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      </widget:deck-page>
      <widget:deck-page>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
          himenaeos.</p>
      </widget:deck-page>
      <widget:deck-page>
        <p>Aliquam turpis turpis, fermentum at, dapibus sed, scelerisque eget, elit. Etiam
        augue.</p>
      </widget:deck-page>
    </widget:deck>
    <table style="width:100%">
      <tr>
        <td style="text-align:left">
          <widget:button action="deck#first-page">&lt;&lt;</widget:button>
          <widget:button action="deck#previous-page">&lt;</widget:button>
        </td>
        <td style="text-align:center">
          <widget:display property="deck#displayed-page-number"/> of <widget:display
            property="deck#pages-count"/>
        </td>
        <td style="text-align:right">
          <widget:button action="deck#next-page">&gt;</widget:button>
          <widget:button action="deck#last-page">&gt;&gt;</widget:button>
        </td>
      </tr>
    </table>
  </body>
</html>

You may use the load action to download data from an external source, and to control when the widget loads its content. See Load, refresh and fetch actions for more information.

<?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:template="http://www.volantis.com/xmlns/marlin-template"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget"
  xmlns:event="http://www.w3.org/2001/xml-events">
  <head>
    <title>Deck w/AJAX</title>
    <link rel="mcs:theme" href="/themes/main.mthm"/>
    <link rel="mcs:layout" href="/layouts/main.mlyt"/>
  </head>
  <body>
    <template:apply href="templates/demo-main.xdtpl">
      <template:binding name="title" value="Deck w/AJAX (switch mode)"/>
      <template:binding name="content">
        <template:complexValue>
          <div>
            <table style="width:100%">
              <tr>
                <td style="text-align:left">
                  <widget:button action="deck#first-page">&lt;&lt;</widget:button>
                  <widget:button action="deck#previous-page">&lt;</widget:button>
                </td>
                <td style="text-align:center">
                  <widget:display property="deck#displayed-page-number"/> of
                  <widget:display property="deck#pages-count"/>
                </td>
                <td style="text-align:right">
                  <widget:button action="deck#next-page">&gt;</widget:button>
                  <widget:button action="deck#last-page">&gt;&gt;</widget:button>
                </td>
              </tr>
            </table>
          </div>
          <widget:deck id="deck" style="mcs-deck-mode:switch">
            <widget:load src="service/deck" when="defer"/>
          </widget:deck>
          <div>
            <table style="width:100%">
              <tr>
                <td style="text-align:left">
                  <widget:button action="deck#first-page">&lt;&lt;</widget:button>
                  <widget:button action="deck#previous-page">&lt;</widget:button>
                </td>
                <td style="text-align:center">
                  <widget:display property="deck#displayed-page-number"/> of
                  <widget:display property="deck#pages-count"/>
                </td>
                <td style="text-align:right">
                  <widget:button action="deck#next-page">&gt;</widget:button>
                  <widget:button action="deck#last-page">&gt;&gt;</widget:button>
                </td>
              </tr>
            </table>
          </div>
        </template:complexValue>
      </template:binding>
    </template:apply>
  </body>
</html>

The mcs-start and mcs-end query parameters can optionally be added to the requesting URL. The mcs-start parameter defines the number of the first page to load. The default value is 1. The mcs-end parameter defines the number of the last page to load. The default value equals to the total number of pages.

The widget response returns the requested content. The mandatory total-pages-count attribute specifies the total number of available pages.

<?xml version="1.0" encoding="UTF-8"?>
<response:response xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget"
  xmlns:response="http://www.volantis.com/xmlns/2006/05/widget/response">
  <response:head>
    <response:link rel="mcs:theme" href="/themes/main.mthm"/>
  </response:head>
  <response:body>
    <response:deck total-pages-count="14">
      <widget:deck-page>
        <h1 style="text-align:center">Dorothy and the Wizard in Oz</h1>
        <h2 style="text-align:center">by L. Frank Baum</h2>
      </widget:deck-page>
      <widget:deck-page>
        <h4 style="text-align:center">Chapter 1: The Earthquake</h4>
        <p>The train from &apos;Frisco was very late. It should have arrived at
          Hugson&apos;s Siding at midnight, but it was already five o&apos;clock
          and the gray dawn was breaking in the east when the little train slowly
          rumbled up to the open shed that served for the station-house.
          As it came to a stop the conductor called out in a loud voice:</p>
        <p>&quot;Hugson&apos;s Siding!&quot;</p>
      </widget:deck-page>
      ...
    </response:deck>
  </response:body>
</response:response>

Note:

The HTTP code 500 error will be returned if mcs-start and/or mcs-end is not a positive integer, is equal or greater than 2^31, or mcs-start is greater than mcs-end.

Styling the widget

The mcs-deck-mode property allows authors to control the Deck widget mode. When it is set to 'switch' (default), deck will display a single page. When it is set to 'unfold', the consecutive pages will be displayed after those already visible.

Non-client fallback

If the widget content is defined directly on a XDIME page, everything will be shown at once. If the load action is used, the widget will be ignored.