widget:block

Purpose

Displays content specified by the widget:block-content element or provided by the one of the dynamic actions - fetch, load or refresh. This element supports transition effects.

Note:

widget:load, widget:refresh or widget:fetch must be placed before the widget:block-content element.

Contains

Attribute groups

Attribute

Attribute Description Type Default Options Use
content Identifies the widget:block-content element containing data to be displayed xs:string     optional 

Actions

Action Description
clear-content Clears displayed content. Equivalent to setting content property to empty string.
hide Hides the widget:block element using specified transition effect
hide-content Hides displayed content using specified transition effect
show Shows the widget:block element using specified transition effect
show-content Shows hidden content using specified transition effect

Properties

Property Description Type Access
content Replaces displayed content with a new data specified by the widget:block-content element xs:string read/write 
content-status Status of the widget:block-content element. Possible values are: hiding, hidden, showing, shown, none. xs:string read 
displayed-content Identifies currently displayed widget:block-content xs:string read 
fetch Identifies the widget:fetch element xs:string read 
load Identifies the widget:load element xs:string read 
refresh Identifies the widget:refresh element xs:string read 
status Status of the widget:widget element. Possible values are: hiding, hidden, showing, shown. xs:string read 

Examples

<?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>Block widget</title>
    <style type="text/css">
      widget|block {
        padding: 0.5em;
        background-color: #ccc;
      }
      widget|block-content {
        padding: 0.5em;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <widget:block id="myBlock" class="widget">
      <widget:block-content> The <em>content</em> of the <strong>block</strong> widget.
      </widget:block-content>
    </widget:block>
    <div>
      <strong>Block:</strong>
      <widget:display property="myBlock#status"/>
      <strong>Content:</strong>
      <widget:display property="myBlock#content-status"/>
    </div>
    <div class="buttons">
      <widget:button action="myBlock#show">show</widget:button>
      <widget:button action="myBlock#hide">hide</widget:button>
    </div>
    <div class="buttons">
      <widget:button action="myBlock#show-content">show content</widget:button>
      <widget:button action="myBlock#hide-content">hide content</widget:button>
    </div>
  </body>
</html>

The following example illustrates the use of the widget:block element with widget:load.

<?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:block with widget:load</title>
  </head>
  <body>
    <div style="border: dotted #C0c0c0 1px;">
      <p>block:</p>
      <widget:block>
        <widget:load src="feed.xdime" when="onload"/>
      </widget:block>
    </div>
  </body>
</html>

The widget response may have the following structure.

<response:response xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:response="http://www.volantis.com/xmlns/2006/05/widget/response"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
  <response:head/>
  <response:body>
    <widget:block-content>
      <div>Example content.</div>
    </widget:block-content>
  </response:body>
</response:response>

Related topics