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 -

        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: