Details

    • Type: New Feature New Feature
    • Status: Open
    • Priority: Major Major
    • Resolution: Unresolved
    • Affects Version/s: 1.2 Final
    • Fix Version/s: 1.4 Beta
    • Component/s: Faces, Spring
    • Labels:
      None
    • Environment:
      n/a

      Description

      New Mobile Data Table
      1. dom-datatable-response.html
        190 kB
        Philip Breau
      2. json-datatable-response.html
        71 kB
        Philip Breau

        Activity

        Hide
        Philip Breau added a comment -

        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

        Show
        Philip Breau added a comment - 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
        Hide
        Philip Breau added a comment - - edited

        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
        Show
        Philip Breau added a comment - - edited 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
        Hide
        Philip Breau added a comment -

        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

        Show
        Philip Breau added a comment - 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
        Hide
        Ted Goddard added a comment -

        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.

        Show
        Ted Goddard added a comment - 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.
        Hide
        Ted Goddard added a comment -

        Moved ID feature to ICE-9005.

        Show
        Ted Goddard added a comment - Moved ID feature to ICE-9005.
        Hide
        Philip Breau added a comment -

        some recent group consensus for initial release:

        • no UIData, state-saving
        • no JSON
        Show
        Philip Breau added a comment - some recent group consensus for initial release: no UIData, state-saving no JSON
        Hide
        Philip Breau added a comment - - edited

        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>
        
        Show
        Philip Breau added a comment - - edited 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>
        Hide
        Nils Lundquist added a comment -

        <ace:dataView value="#

        {bean.cars}

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

        {bean.col}

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

        {car.id}" headerText="ID" />
               <ace:dataColumn value="#{car.name}" headerText="Name" />
               <ace:dataColumn value="#{car.chassis}" headerText="Chassis" />
               <ace:dataColumn value="#{car.id}

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

        {car.id}

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

        {car.name}

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

        {car.chassis}

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

        {car.setShowChart(not car.showChart)}

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

        {bean.getPerformanceData(car)}

        "
               xaxis="#

        {bean.xaxis}

        "
               yaxes="#

        {bean.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.

        Show
        Nils Lundquist added a comment - <ace:dataView value="# {bean.cars} "             var="car"             rows="10">    // Column Definitions    <ace:dataViewColumns value="# {bean.col} " />                                                      or    <ace:dataViewColumns> // ignore value if children present        <ace:dataColumn value="# {car.id}" headerText="ID" />        <ace:dataColumn value="#{car.name}" headerText="Name" />        <ace:dataColumn value="#{car.chassis}" headerText="Chassis" />        <ace:dataColumn value="#{car.id} " />    <ace:dataViewColumns>                // Detail Definition //    <h:panelGrid columns="2">              <f:facet name="header">                        <h:outputText value="# {car.id} " />        </f:facet>            Name:     <h:inputText value="# {car.name} " />        Chassis: <h:inputText value="# {car.chassis} " />            <f:facet name="footer">                        <h:commandButton actionListener="# {car.setShowChart(not car.showChart)} "                            value="Show/Hide Chart" />        </f:facet>      <h:panelGrid>                                        <ace:chart value="# {bean.getPerformanceData(car)} "        xaxis="# {bean.xaxis} "        yaxes="# {bean.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.
        Hide
        Nils Lundquist added a comment -

        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
        Show
        Nils Lundquist added a comment - 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
        Hide
        Nils Lundquist added a comment -

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

        Show
        Nils Lundquist added a comment - Work for 1.3 Release Completed. Retargeting to 1.4 to implement the 2nd tier of features from this JIRA.

          People

          • Assignee:
            Unassigned
            Reporter:
            Philip Breau
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated: