ICEmobile
  1. ICEmobile
  2. MOBI-191

Create a page layout component for mobile screens

          Details

          • Type: New Feature New Feature
          • Status: Closed
          • Priority: Major Major
          • Resolution: Fixed
          • Affects Version/s: 1.1 Beta
          • Fix Version/s: 1.1 Final
          • Component/s: None
          • Labels:
            None
          • Environment:
            mobile

            Description

            The page Panel defines a header, body and footer facet and when used with combination with deviceStyleSheet will be styled for the detected device.

            <pagePanel>
            <facet name="header" />
            <facet name="body" />
            <facet name="footer" />
            </pagePanel>

            The component can be used in a panelStack or on its own or not at all. All depends on what the developer is up too. Here is simple mobile component example showing how to use a the camera component but will get a nice pretty wrapper.

            <pagePanel>
            <facet name="header" >Camera Example</facet>
            <facet name="body" >
            <fieldsetGroup>
                                 <fieldsetRow>
            <form>
            <camcorder id="cc" type="basic"
            value="#{camcorderBean.clip}"/>
            <thumbnail for="cc"/>
            <commandButton >
            </form>
                                 </fieldsetRow>
            </filedsetGroup>
            </facet>
            </pagePanel>

              Activity

              Descending order - Click to sort in ascending order
              Hide
              Permalink
              Philip Breau added a comment - - edited

              Revision: 28392
              Author: patrick.corless
              Date: March-19-12 10:15:48 AM
              Message:
              MOBI-191 addition of new component to handle default page layout of a header, body and footer.

              Modified : /icemobile/trunk/icemobile/components/component/build.xml
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/PagePanel.java
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/PagePanelMeta.java
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/PagePanelRenderer.java
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/android
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/android/default-page-panel.css
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/bberry
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/bberry/default-page-panel.css
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/honeycomb
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/honeycomb/default-page-panel.css
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/ipad
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/ipad/default-page-panel.css
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/ipad/header.png
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/ipad/pinstripes.png
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/iphone
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/iphone/default-page-panel.css
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/iphone/header.png
              Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/iphone/pinstripes.png
              Revision: 29880
              Author: greg.dick
              Date: July-09-12 5:44:48 PM
              Message:
              MOBI-217 Initial check in

              Added : /icemobile/trunk/icemobile/jsp/src/main/java/org/icemobile/jsp/tags/PagePanelTag.java (Copy from path: /icemobile/trunk/icemobile/jsp/src/main/java/org/icemobile/jsp/tags/OutputListTag.java, Revision, 29827)

              Show
              Philip Breau added a comment - - edited Revision: 28392 Author: patrick.corless Date: March-19-12 10:15:48 AM Message: MOBI-191 addition of new component to handle default page layout of a header, body and footer. Modified : /icemobile/trunk/icemobile/components/component/build.xml Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/PagePanel.java Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/PagePanelMeta.java Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/PagePanelRenderer.java Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/android Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/android/default-page-panel.css Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/bberry Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/bberry/default-page-panel.css Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/honeycomb Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/honeycomb/default-page-panel.css Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/ipad Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/ipad/default-page-panel.css Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/ipad/header.png Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/ipad/pinstripes.png Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/iphone Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/iphone/default-page-panel.css Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/iphone/header.png Added : /icemobile/trunk/icemobile/components/component/src/org/icefaces/mobi/component/pagepanel/iphone/pinstripes.png Revision: 29880 Author: greg.dick Date: July-09-12 5:44:48 PM Message: MOBI-217 Initial check in Added : /icemobile/trunk/icemobile/jsp/src/main/java/org/icemobile/jsp/tags/PagePanelTag.java (Copy from path: /icemobile/trunk/icemobile/jsp/src/main/java/org/icemobile/jsp/tags/OutputListTag.java, Revision, 29827)
              Hide
              Permalink
              Patrick Corless added a comment -

              Not sure How I did this but closed the the wrong bug.

              Show
              Patrick Corless added a comment - Not sure How I did this but closed the the wrong bug.
              Hide
              Permalink
              Patrick Corless added a comment -

              Changes have been checked in and I can no longer reproduce the problem where the spinner popup will not show on the nexus one running 2.3

              Show
              Patrick Corless added a comment - Changes have been checked in and I can no longer reproduce the problem where the spinner popup will not show on the nexus one running 2.3
              Hide
              Permalink
              Patrick Corless added a comment -

              Something else to keep in mind is that this follows KISS. A user might have their own navigation mechanism using normal JSF view handlers and navigation. In this case the component can be used as is, not extra overhead.

              If they want to use panelStack then they simply add the component to a new panelGroup in the panelStack.

              Alternatively like Judy's proof of concept the user may want to define a one and two column view depending on the view size that was detected. It would look something like this.

              <viewSelector>
              <facet name="small">
              <pagePanel />
              </facet>
              <facet name="large">
              <pagePanel />
              </facet>
              </viewSelector>

              Show
              Patrick Corless added a comment - Something else to keep in mind is that this follows KISS. A user might have their own navigation mechanism using normal JSF view handlers and navigation. In this case the component can be used as is, not extra overhead. If they want to use panelStack then they simply add the component to a new panelGroup in the panelStack. Alternatively like Judy's proof of concept the user may want to define a one and two column view depending on the view size that was detected. It would look something like this. <viewSelector> <facet name="small"> <pagePanel /> </facet> <facet name="large"> <pagePanel /> </facet> </viewSelector>
              Hide
              Permalink
              Patrick Corless added a comment -

              Checked in a new component that as defined above. I ported the themes from the orginal panelStack component and updated the large view themes to support a footer. The component will adjust the style if the header and/or footer has not been defined. In normal usuage I expect on ly the footer will be omitted but you never know.

              Hopefully in the future a touch event can be added to the component which will auto hide the footer/header.

              Show
              Patrick Corless added a comment - Checked in a new component that as defined above. I ported the themes from the orginal panelStack component and updated the large view themes to support a footer. The component will adjust the style if the header and/or footer has not been defined. In normal usuage I expect on ly the footer will be omitted but you never know. Hopefully in the future a touch event can be added to the component which will auto hide the footer/header.
              Hide
              Permalink
              Patrick Corless added a comment -

              Going to take a shot at this one.

              Show
              Patrick Corless added a comment - Going to take a shot at this one.

                People

                • Assignee:
                  Patrick Corless
                  Reporter:
                  Patrick Corless
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  1 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: