Details
-
Type:
New Feature
-
Status: Closed
-
Priority:
Major
-
Resolution: Fixed
-
Affects Version/s: None
-
Component/s: MOBI-Components
-
Labels:None
-
Environment:ICEfaces 4
-
Assignee Priority:P1
-
Affects:Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial
Description
A View Manager component would aim at making standard mobile UIs easier for enterprise developers. The developer would define the contentPanes, which could be nested, their titles, the navigation pattern for different layouts, and the component would create the UI. The component would automatically handle navigation, and would not require the developer to write any backing bean code for navigation, or view switching.
<mobi:viewManager mobileNavigation="swipe" tabletNavigation="menu" appLabel="My App">
<mobi:contentPane id="a" title="Page A">
//content
</mobi:contentPane>
<mobi:contentPane id="b" title="Page B">
//content
</mobi:contentPane>
<mobi:contentPane id="b1" title="Page B1" childOf="b">
//content
</mobi:contentPane>
<mobi:contentPane id="c" title="Page C">
//content
</mobi:contentPane>
</mobi:viewManager>
In a mobile layout set to navigation='swipe' this would generate the following:
A <-- swipe to--> B <-- swipe to -->C
<--or click to --> B1
-------------------------- -------------------------- -------------------------- --------------------------
| A | | B <B1>| | <back> B1 | | C |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
------------------------- ------------------------- ------------------------- -------------------------
In a mobile layout set to navigation='menu' this would generate the following:
-------------------------- -------------------------- -------------------------- -------------------------- --------------------------
| My App | | A | | B <B1>| | <back> B1 | | C |
|------------------------| | | | | | | | |
| A > | | | | | | | | |
| B V | | | | | | | | |
| B1 > | | | | | | | | |
| C V | | | | | | | | |
------------------------- ------------------------- ------------------------- ------------------------- -------------------------
In a tablet layout this would generate the following:
____________________________________________
| My App |
|---------------------------------------------------------------------------|
| A > | |
| B V | |
| B1 > | Current Page |
| C V | |
| | |
| | |
| | |
|---------------------------------------------------------------------------|
<mobi:viewManager mobileNavigation="swipe" tabletNavigation="menu" appLabel="My App">
<mobi:contentPane id="a" title="Page A">
//content
</mobi:contentPane>
<mobi:contentPane id="b" title="Page B">
//content
</mobi:contentPane>
<mobi:contentPane id="b1" title="Page B1" childOf="b">
//content
</mobi:contentPane>
<mobi:contentPane id="c" title="Page C">
//content
</mobi:contentPane>
</mobi:viewManager>
In a mobile layout set to navigation='swipe' this would generate the following:
A <-- swipe to--> B <-- swipe to -->C
<--or click to --> B1
-------------------------- -------------------------- -------------------------- --------------------------
| A | | B <B1>| | <back> B1 | | C |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
------------------------- ------------------------- ------------------------- -------------------------
In a mobile layout set to navigation='menu' this would generate the following:
-------------------------- -------------------------- -------------------------- -------------------------- --------------------------
| My App | | A | | B <B1>| | <back> B1 | | C |
|------------------------| | | | | | | | |
| A > | | | | | | | | |
| B V | | | | | | | | |
| B1 > | | | | | | | | |
| C V | | | | | | | | |
------------------------- ------------------------- ------------------------- ------------------------- -------------------------
In a tablet layout this would generate the following:
____________________________________________
| My App |
|---------------------------------------------------------------------------|
| A > | |
| B V | |
| B1 > | Current Page |
| C V | |
| | |
| | |
| | |
|---------------------------------------------------------------------------|
Issue Links
- depends on
-
MOBI-342
View Manager Component
-
- Resolved
-
Activity
- All
- Comments
- History
- Activity
- Remote Attachments
- Subversion
Committed fixes for all issues at revision 40322: #1 fix for JS error; #2 fix to avoid exception when 'selected' attribute doesn't have a valid id; #3 added style and styleClass support to mobi:view; #4 improved TLD documentation.
Show
Arturo Zambrano
added a comment - Committed fixes for all issues at revision 40322: #1 fix for JS error; #2 fix to avoid exception when 'selected' attribute doesn't have a valid id; #3 added style and styleClass support to mobi:view; #4 improved TLD documentation.
Confirmed fixed, Icefaces 4 trunk revision #40322.
Show
Liana Munroe
added a comment - Confirmed fixed, Icefaces 4 trunk revision #40322.
Changed default value of view to "(no title)" in order to avoid exception when value is null at revision 40355.
Show
Arturo Zambrano
added a comment - Changed default value of view to "(no title)" in order to avoid exception when value is null at revision 40355.
1. In a test application, while interacting with mobi:view within mobi:viewManager, in Firefox the following error is seen:
{execute:'@form', render:'@all'}ReferenceError: event is not defined.
jsf.ajax.request(proxyFormId, event,
);
http://localhost:8080/view/javax.faces.resource/component.js.jsf?ln=org.icefaces.component.util&v=4_0_0_140304
Line 2293
2. The "selected" attribute can not be changed to any String value other than the default, an NPE occurs if it is changed.
3. Style and styleClass are not visible if applied to mobi:view. It seems they can only be applied with mobi:viewManager. If using a border style or styleClass in viewManager it does not size properly to smaller device views.
4. The tlddoc could be updated with more information. For example, what the choices are for menuIcon etc.
Test application located at:
http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Manual/view