DataView

compared with
Current by Nils Lundquist
on Jun 07, 2013 13:23.


 
Key
These lines were removed. This word was removed.
These lines were added. This word was added.

View page history


There are 5 changes. View first change.

 h2. DataView
  
 h3. Information
  
 The DataView component is designed to enable lightweight viewing and editing of object collections. The component renders a table region for iterative output using columns defined with the required DataViewColumns component child. Also rendered is a detail region for in-depth viewing (and editing) of the row objects of the table model. The detail region is defined with the DataViewDetails child component and it's contents are displayed when a row of table region is activated, typically by a row tap.
  
 The most important attributes of the {{<mobi:dataview>}} are comparable JSF components like h:dataTable:
  The most important attributes of the {{<mobi:dataview>}} are comparable to those on a component like h:dataTable:
 {panel}
 *value* - Bind a List or DataViewLazyDataModel to use as the iterative object collection
 *var* - Define the EL variable to expose the individual iterative objects with during iteration
 {panel}
  
 In addition to these attributes, there is another that particularly important attribute to the functioning of the details region.
  
 {panel}
*activationMode* - This enumeration defines the operation of the detail region. When set to 'server' (the default) the detail region may contain arbitrary JSF components and is rendered by an ajax request. When set to 'client' an activation 'renders' the detail region by updating, entirely on the client, an existing rendering with the dynamic attributes unique to an iterative rendering. The components and attributes supported for client encoding are limited, though growing with new releases and user desire.
  *activationMode* - This enumeration defines the operation of the detail region. When set to 'server' (the default) the detail region may contain arbitrary JSF components and is rendered by an ajax request. When set to 'client' an activation 'renders' the detail region by updating, entirely on the client, an existing rendering with the dynamic attributes unique to an iterative rendering. The components and attributes supported for client encoding are limited, though growing with new releases and user desires.
 {panel}
  
 The components and attributes currently supported for client activationMode alteration are:
 ||Component||Attributes||
 |JSF h: taglib UIInput Components| value |
 |JSF h: taglib UIOutput Components| value |
 |JSF h: taglib UICommand Components| value |
 |mobi:inputText| value, type, placeholder, readonly, maxlength, size, required, results, title, min, max, step, disable, style, styleClass |
  
 h3. Usage:
 {code:xml}
<h:form id="form1">
  <h:outputText value="Select values for execute and render below to test"/>
  <mobi:flipswitch value="#{input.boolean1}" id="ajaxOne" labelOn="ON" labelOff="OFF">
  <mobi:ajax event="activate" execute="@this" render="valueA" />
  </mobi:flipswitch>
  <h3>Form 1</h3>
  <span>Value A: </span><h:inputText id="valueA" value="#{input.testBool}" />
  <span>Value B: </span><h:inputText id="valueB" value="#{input.testBool}" />
  <h:form>
  <mobi:dataView value="#{dataViewBean.cars}" var="car">
  <mobi:dataViewColumns>
  <mobi:dataViewColumn headerText="Company" value="#{car.company}" />
  <mobi:dataViewColumn headerText="Model" value="#{car.model}" />
  </mobi:dataViewColumns>
  
  <mobi:dataViewDetails>
  <h3>Details</h3>
  <h:panelGrid columns="2">
  <h:outputText value="Company" />
  <h:outputText value="Model" />
  
  <h:inputText value="#{car.company}">
  <f:ajax execute="@this" render="@form" />
  </h:inputText>
  <h:inputText value="#{car.model}">
  <f:ajax execute="@this" render="@form" />
  </h:inputText>
  </h:panelGrid>
  </mobi:dataViewDetails>
  </mobi:dataView>
 </h:form>
 {code}
this will execute the flipswitch element and update only the valueA area. Using singleSubmit to true on this component is equivalent to execute="@this" render="@all".
  The example above is a simple use case of the DataView to show two columns of text information, and have the components to edit that information rendered in the detail view.
  
 To see in detail how this example works refer to the tutorial [here|http://www.icesoft.org/wiki/display/icemobile/DataView+Tutorial].
  
  
 {tip:title=Documentation}This section covers attributes involved in the typical use-cases for this component. The complete taglib documentation for this component is available [here|http://res.icesoft.org/docs/icemobile/v1_latest/jsf/tld/mobi/dataView.html].{tip}
  
 h3. Tag Handler Documentation
 [dataView|http://res.icesoft.org/docs/icemobile/v1_latest/jsf/tld/mobi/dataView.html]

© Copyright 2016 ICEsoft Technologies Canada Corp.