Revision: 33378
Author: philip.breau
Date: February-11-13 3:03:10 PM
Message:
MOBI-651 Mobile Data Table prototype

Added : /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/java/org/icemobile/samples/mobileshowcase/view/examples/layout/datatable
Added : /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/java/org/icemobile/samples/mobileshowcase/view/examples/layout/datatable/Car.java
Added : /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/java/org/icemobile/samples/mobileshowcase/view/examples/layout/datatable/DataTableBean.java
Added : /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/java/org/icemobile/samples/mobileshowcase/view/examples/layout/datatable/DataTableData.java
Added : /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/java/org/icemobile/samples/mobileshowcase/view/examples/layout/datatable/VehicleGenerator.java
Modified : /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/java/org/icemobile/samples/mobileshowcase/view/navigation/LayoutAndNavigationMenu.java
Modified : /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/resources/org/icemobile/samples/mobileshowcase/view/resources/messages.properties
Modified : /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/webapp/WEB-INF/includes/content/content-stack.xhtml
Added : /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/webapp/WEB-INF/includes/examples/layout/datatable-desc.xhtml
Added : /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/webapp/WEB-INF/includes/examples/layout/datatable-example.xhtml
Added : /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/webapp/WEB-INF/includes/examples/layout/datatable.xhtml
Added : /icemobile/trunk/icemobile/samples/mobileshowcase/src/main/webapp/resources/components/dataTable.xhtml

Considerations:

• jsp + jsf support
• detail orientation
• 'load more data' at bottom of paged data
• hide headers on scroll?
• toggleable fixed top filter
• ellipsed overflow on table cells

h:dataTable-based
~ 630kb for large view
time to first paint = 1.49seconds

json datatable
62 kb (small view)
time to first paint = 0.52seconds
time to last paint = 1.25

dom datatable
190 kb (small view)
time to first paint = 0.6seconds
time to last paint = 0.65

As Mark and Nils mentioned in the component meeting, in some cases the clientID is parsed by VisitTree. PartialVisitContext parses the IDs that appear in execute and render lists. It is possible that execute and render lists do not have convertClientID applied, however.

Moved ID feature to ICE-9005.

some recent group consensus for initial release:

• no UIData, state-saving
• no JSON

Revision: 33741 has a prototype JSF version with the following features;

• clientSide row selection
• clientSide detail section
• optimized column el
• custom small/large view orientation
• responsive CSS for columns with minDeviceWidth

 
<mobi:dataTable id="dt" value="#{dataTableBean.dataList}"
    var="car" largeViewDetailOrientation="left" clientSide="true">
    <mobi:column headerText="ID" value="#{car.id}" property="id"
        optimizeExpression="true"/>
    <mobi:column headerText="Name" value="#{car.name}" property="name"
        optimizeExpression="true"/>
    <mobi:column headerText="Chassis" value="#{car.chassis}" property="chassis"
        optimizeExpress="true"/>
    <mobi:column headerText="Weight" value="#{car.weight}lbs." property="weight"
        optimizeExpression="true"/>
    <mobi:column headerText="Accel" value="#{car.acceleration}" property="acceleration"
        optimizeExpression="true" minDeviceWidth="600px"/>
    <mobi:column headerText="MPG" value="#{car.mpg}" property="mpg"
        optimizeExpression="true"  minDeviceWidth="440px"/>
    <f:facet name="detail">
        <h2 style="font-size:20px;font-style:italic;">{{name}}</h2>
        <hr/>
        <label style="width: 40%;display:inline-block">ID</label>
        <span style="width: 40%;display:inline-block">{{id}}</span>
        <label style="width: 40%;display:inline-block">Chassis</label>
        <span style="width: 40%;display:inline-block">{{chassis}}</span>
        <label style="width: 40%;display:inline-block">Weight</label>
        <span style="width: 40%;display:inline-block">{{weight}}</span>
        <label style="width: 40%;display:inline-block">Acceleration</label>
        <span style="width: 40%;display:inline-block">{{acceleration}}</span>
        <label style="width: 40%;display:inline-block">Miles per Gallon</label>
        <span style="width: 40%;display:inline-block">{{mpg}}</span>
    </f:facet>
</mobi:dataTable>

<ace:dataView value="#

"
            var="car"
            rows="10">
   // Column Definitions
   <ace:dataViewColumns value="#

" />                                                  
   or
   <ace:dataViewColumns> // ignore value if children present
       <ace:dataColumn value="#

" />
   <ace:dataViewColumns>
           
   // Detail Definition //
   <h:panelGrid columns="2">      
       <f:facet name="header">            
           <h:outputText value="#

" />
       </f:facet>
   
       Name:     <h:inputText value="#

" />
       Chassis: <h:inputText value="#

" />
   
       <f:facet name="footer">            
           <h:commandButton actionListener="#

"
                           value="Show/Hide Chart" />
       </f:facet>  
   <h:panelGrid>                                
   
   <ace:chart value="#

"
       xaxis="#

"
       yaxes="#

" />
</ace:dataView>

As mentioned above, there is no mixing of the column definition types. If use a programmatic model, the declarative child components are ignored.

need to add broad requirements list from email thread to MOBI-651

1st commit coming tomorrow

• bit of repackaging to do
• have to re-revert phils prototypes
• includes markup, structural css & js, mobishowcase example
• markup thus far as described in MOBI-651
• dynamic size, fixed position header / footer
• component fills all available space of parent container
• prevents scrollbar in parent container even when containing siblings
• quirk of css in iphone / android (plain) themes causes a sizing error in
  this logic, all other themes work fine

• includes per-row ValueHolder encoding used for basic client side row activation

Primary Feature Development:

• Add (limited?) client side row activation
• Add server side row activation
• Add column output types
• Add client side sort
• Add client side filter
• Add device width row visibility mechanism

Secondary Feature Development:

• horizontally aligned details region?
• client pagination
• server pagination
• server sort (req when server pagination)
• server filter (req when server pagination)

• Supported Column Types
• Text
• Boolean (renders checkmark / crossout image)
• Date (renders according to given format string / locale)
• Image
• Simple UL/LI String List?
• Arbitrary HTML

• Client Side Activation Supported Detail Components
  UICommand - 'value'
  ValueHolder - 'value'

1st Tier

• h:commandButton
• h:commandLink
• h:inputText
• h:inputTextarea
• h:outputLabel
• h:outputText
• h:inputSecret
• h:selectBooleanCheckbox

2nd Tier

• h:graphicImage - url swapping
• h:selectManyListbox
• h:selectManyMenu
• h:selectOneListbox
• h:selectOneMenu
• h:selectOneRadio

3rd Tier

• h:selectManyCheckbox
• h:outputLink

Work for 1.3 Release Completed. Retargeting to 1.4 to implement the 2nd tier of features from this JIRA.