ICEmobile
  1. ICEmobile
  2. MOBI-192

scrollPane component

          Details

          • Type: New Feature New Feature
          • Status: Resolved
          • Priority: Major Major
          • Resolution: Won't Fix
          • Affects Version/s: 1.1 Final
          • Fix Version/s: 1.2 Beta
          • Component/s: None
          • Labels:
            None
          • Environment:
            mobile

            Description

            We have a composite component version of this component in the component showcase. In essence the component is simply a div with the CSS attributes, overflow: scroll and set dimensions. This allows a user to scroll content with out scrolling other blocks on the page.

            Once the basic component is setup, addition support could be added for auto adjusting either width of height to the size of the current window. This insures that when an orientation change takes place the panel will resize accordingly. But the first cut only needs to support overflow:scroll.

            I originally called the component panelScroller and Judy, scrollPane. I think we should go with scrollPanel to better line up with other components.



              Issue Links

              is duplicated by

              New Feature - A new feature of the product, which has yet to be developed. MOBI-313 create splitPane component to replace composite component panelScroller and to be used for other layout type attributes

              • Major - Major loss of function.
              • Resolved

                Activity

                Ascending order - Click to sort in descending order
                Hide
                Permalink
                Patrick Corless added a comment -

                I don't like the idea of specify a view layout by menu, or column1, column2, row 1, row2 etc. This means different thing to different people. The menu might go just below the header or on the right side, there really aren't any rules. A scroll panel can bet setup with some very simple css to meet N permutations.

                One could build a taptu or Pulse application interfaces as follows:

                <pagePanel>
                <facet name="body" >
                <outputList>
                <repeat value="#

                {bean.feeds}

                var="feed" >
                <outputListItem group="true">#

                {feed.title}

                </outputListItem>
                <outputListItem>
                <panelScroller autoHeight="false" style="height:120px;width:100%">
                <repeat value="#

                {feed.contents}

                var="content" >
                <outputLink value="#

                {content.link}

                >
                <graphicImage value="#

                {cotnent.image}

                />
                </ouputLink>
                </repeat>
                </panelScroller>
                </outputListItem>
                </repeat>
                <mobi:outputList>
                </facet>
                </pagePanel>

                Here is simpler example of how I would put a menu bar on the right hand side of the screen:
                <pagePanel>
                <facet name="header" >Dyanmic view Example</facet>
                <facet name="body" >
                <!-- menu on the right hand side -->
                <panelScroller style="width:70%">
                <include src="/WEB-INF/content/splash.xhtml" />
                </panelScroller>
                <panelScroller style="width:30%">
                <include src="/WEB-INF/content/menu.xhtml" />
                </panelScroller>
                </facet>
                </pagePanel>

                If I wanted a third column it would simply be

                <pagePanel>
                <facet name="header" >Dyanmic view Example</facet>
                <facet name="body" >
                <!-- menu on the right hand side -->
                <panelScroller style="width:3%">
                <include src="/WEB-INF/content/splash.xhtml" />
                </panelScroller>
                <panelScroller style="width:33%">
                <include src="/WEB-INF/content/menu_2.xhtml" />
                </panelScroller>
                <panelScroller style="width:33%">
                <include src="/WEB-INF/content/menu.xhtml" />
                </panelScroller>
                </facet>
                </pagePanel>

                Show
                Patrick Corless added a comment - I don't like the idea of specify a view layout by menu, or column1, column2, row 1, row2 etc. This means different thing to different people. The menu might go just below the header or on the right side, there really aren't any rules. A scroll panel can bet setup with some very simple css to meet N permutations. One could build a taptu or Pulse application interfaces as follows: <pagePanel> <facet name="body" > <outputList> <repeat value="# {bean.feeds} var="feed" > <outputListItem group="true"># {feed.title} </outputListItem> <outputListItem> <panelScroller autoHeight="false" style="height:120px;width:100%"> <repeat value="# {feed.contents} var="content" > <outputLink value="# {content.link} > <graphicImage value="# {cotnent.image} /> </ouputLink> </repeat> </panelScroller> </outputListItem> </repeat> <mobi:outputList> </facet> </pagePanel> Here is simpler example of how I would put a menu bar on the right hand side of the screen: <pagePanel> <facet name="header" >Dyanmic view Example</facet> <facet name="body" > <!-- menu on the right hand side --> <panelScroller style="width:70%"> <include src="/WEB-INF/content/splash.xhtml" /> </panelScroller> <panelScroller style="width:30%"> <include src="/WEB-INF/content/menu.xhtml" /> </panelScroller> </facet> </pagePanel> If I wanted a third column it would simply be <pagePanel> <facet name="header" >Dyanmic view Example</facet> <facet name="body" > <!-- menu on the right hand side --> <panelScroller style="width:3%"> <include src="/WEB-INF/content/splash.xhtml" /> </panelScroller> <panelScroller style="width:33%"> <include src="/WEB-INF/content/menu_2.xhtml" /> </panelScroller> <panelScroller style="width:33%"> <include src="/WEB-INF/content/menu.xhtml" /> </panelScroller> </facet> </pagePanel>
                Hide
                Permalink
                Judy Guglielmin added a comment -

                rather than have a scrolling component, it might be best to have a "scrollable" attribute which can be applied to both pagePanel and contentPane components (or any further layout components).
                Using device detection, we can either
                a) apply the applicable styling to the div's to allow the pane to scroll if supported (iOS5, Android...not sure about Blackberry, IE?)
                b) load the appropriate script for those that don't support css capability of scrolling within div's.

                or
                c) always use script in order to disable other touch events while scrolling.

                Show
                Judy Guglielmin added a comment - rather than have a scrolling component, it might be best to have a "scrollable" attribute which can be applied to both pagePanel and contentPane components (or any further layout components). Using device detection, we can either a) apply the applicable styling to the div's to allow the pane to scroll if supported (iOS5, Android...not sure about Blackberry, IE?) b) load the appropriate script for those that don't support css capability of scrolling within div's. or c) always use script in order to disable other touch events while scrolling.
                Hide
                Permalink
                Ted Goddard added a comment -

                This is a new feature so should be deferred after 1.1 Final.

                Show
                Ted Goddard added a comment - This is a new feature so should be deferred after 1.1 Final.
                Hide
                Permalink
                Steve Maryka added a comment - - edited

                Not sure if this is still a valid jira, but I have reassigned it to 1.2 Beta.

                Show
                Steve Maryka added a comment - - edited Not sure if this is still a valid jira, but I have reassigned it to 1.2 Beta.
                Hide
                Permalink
                Judy Guglielmin added a comment - - edited

                see jira for splitPane component

                Show
                Judy Guglielmin added a comment - - edited see jira for splitPane component
                Hide
                Permalink
                Migration added a comment -

                Not sure if this is still a valid jira, but I have reassigned it to 1.2 Beta.

                Show
                Migration added a comment - Not sure if this is still a valid jira, but I have reassigned it to 1.2 Beta.

                  People

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

                    Dates

                    • Created:
                      Updated:
                      Resolved: