You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by Apache Wiki <wi...@apache.org> on 2007/09/12 03:05:40 UTC
[Myfaces Wiki] Update of "from ADF to Trinidad" by GaryKind
Dear Wiki user,
You have subscribed to a wiki page or wiki category on "Myfaces Wiki" for change notification.
The following page has been changed by GaryKind:
http://wiki.apache.org/myfaces/from_ADF_to_Trinidad
------------------------------------------------------------------------------
There have been discussions about this on the Trinidad user and dev lists where you can look for the most
recent information on this.
- == XMLMenuModel ==
+ == Converting ADF 10.1.3 Menus to Trinidad Menus XMLMenuModel ==
+
Trinidad adds an out-of-the-box menu model to easily create your menu system...
- TBD
+ === The ADF Faces 10.1.3 Menu Model ===
+
+ It is important that the reader go to ["http://bali.us.oracle.com:2020/releases/oracle.faces/ea19/devguide/menus.html"]
+ (note: this link will change over time as ADF Faces continues in its
+ development, so please check to make sure you are looking at the latest
+ iteration of the menu mode documentation) and carefully read the entire
+ contents of this page which describes the menu model developed in ADF Faces for
+ 10.1.3.
+
+ ==== Specifying the 10.1.3 Menu Nodes and Their Attributes ====
+
+ Let's start with a sample menu/navigation tree:
+
+ <img border=0 width=356 height=233
+ src="./TrinidadPageMenu_files/image001.gif" v:shapes="_x0000_i1051"><![endif]></p>
+
+ ===== 10.1.3 Menu Nodes as Beans in faces-config.xml =====
+
+ In 10.1.3, these nodes would be represented as managed beans in the faces-config.xml
+ file. This is lengthy, unwieldy
+ and does not allow one to easily understand the hierarchical structure of the tree at a glance.
+ The following is how the nodes would be represented for our sample tree:
+ {{{
+ <!-- create the menuModel nodes -->
+
+ <managed-bean>
+ <managed-bean-name>global2</managed-bean-name>
+ <managed-bean-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</managed-bean-class>
+ <managed-bean-scope>none</managed-bean-scope>
+ <managed-property>
+ <property-name>label</property-name>
+ <value>Global2</value>
+ </managed-property>
+ <managed-property>
+ <property-name>viewId</property-name>
+ <value>/components/page_global0.jspx</value>
+ </managed-property>
+ <managed-property>
+ <property-name>outcome</property-name>
+ <value>goToGlobal2</value>
+ </managed-property>
+ </managed-bean>
+
+ <managed-bean>
+ <managed-bean-name>global1</managed-bean-name>
+ <managed-bean-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</managed-bean-class>
+ <managed-bean-scope>none</managed-bean-scope>
+ <managed-property>
+ <property-name>label</property-name>
+ <value>Global1</value>
+ </managed-property>
+ <managed-property>
+ <property-name>viewId</property-name>
+ <value>/components/page_global1.jspx</value>
+ </managed-property>
+ <managed-property>
+ <property-name>outcome</property-name>
+ <value>goToGlobal1</value>
+ </managed-property>
+ </managed-bean>
+
+ <managed-bean>
+ <managed-bean-name>global0</managed-bean-name>
+ <managed-bean-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</managed-bean-class>
+ <managed-bean-scope>none</managed-bean-scope>
+ <managed-property>
+ <property-name>children</property-name>
+ <list-entries>
+ <value-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</value-class>
+ <value>#{tab1}</value>
+ <value-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</value-class>
+ <value>#{tab2}</value>
+ </list-entries>
+ </managed-property>
+ <managed-property>
+ <property-name>label</property-name>
+ <value>Global0</value>
+ </managed-property>
+ <managed-property>
+ <property-name>viewId</property-name>
+ <value>/components/page_global0.jspx</value>
+ </managed-property>
+ <managed-property>
+ <property-name>outcome</property-name>
+ <value>goToGlobal0</value>
+ </managed-property>
+ </managed-bean>
+
+ <managed-bean>
+ <managed-bean-name>tab1</managed-bean-name>
+ <managed-bean-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</managed-bean-class>
+ <managed-bean-scope>none</managed-bean-scope>
+ <managed-property>
+ <property-name>children</property-name>
+ <list-entries>
+ <value-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</value-class>
+ <value>#{subTab1}</value>
+ <value-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</value-class>
+ <value>#{subTab2}</value>
+ </list-entries>
+ </managed-property>
+ <managed-property>
+ <property-name>label</property-name>
+ <value>Tab1</value>
+ </managed-property>
+ <managed-property>
+ <property-name>viewId</property-name>
+ <value>/components/page_tab1.jspx</value>
+ </managed-property>
+ <managed-property>
+ <property-name>outcome</property-name>
+ <value>goToTab1</value>
+ </managed-property>
+ </managed-bean>
+
+ <managed-bean>
+ <managed-bean-name>tab2</managed-bean-name>
+ <managed-bean-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</managed-bean-class>
+ <managed-bean-scope>none</managed-bean-scope>
+ <managed-property>
+ <property-name>label</property-name>
+ <value>Tab2</value>
+ </managed-property>
+ <managed-property>
+ <property-name>viewId</property-name>
+ <value>/components/page_tab2.jspx</value>
+ </managed-property>
+ <managed-property>
+ <property-name>outcome</property-name>
+ <value>goToTab2</value>
+ </managed-property>
+ </managed-bean>
+
+ <managed-bean>
+ <managed-bean-name>subTab1</managed-bean-name>
+ <managed-bean-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</managed-bean-class>
+ <managed-bean-scope>none</managed-bean-scope>
+ <managed-property>
+ <property-name>label</property-name>
+ <value>Subtab1</value>
+ </managed-property>
+ <managed-property>
+ <property-name>viewId</property-name>
+ <value>/components/page_subtab1.jspx</value>
+ </managed-property>
+ <managed-property>
+ <property-name>outcome</property-name>
+ <value>goToSubTab1</value>
+ </managed-property>
+ </managed-bean>
+
+ <managed-bean>
+ <managed-bean-name>subTab2</managed-bean-name>
+ <managed-bean-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</managed-bean-class>
+ <managed-bean-scope>none</managed-bean-scope>
+ <managed-property>
+ <property-name>label</property-name>
+ <value>Subtab2</value>
+ </managed-property>
+ <managed-property>
+ <property-name>viewId</property-name>
+ <value>/components/page_subtab2.jspx</value>
+ </managed-property>
+ <managed-property>
+ <property-name>outcome</property-name>
+ <value>goToSubTab2</value>
+ </managed-property>
+ </managed-bean>
+ }}}
+ === Specifying the Trinidad XML Menu Model Nodes ===
+
+ In the XML Menu Model, the Nodes and their attributes are specified in one or more
+ xml files via metadata. This
+ is much less unwieldy than the 10.1.3 method, a lot more easily edited, and
+ clearly shows the hierarchical structure of the menu tree through its
+ indentation levels. We start with
+ a brief explanation of the menu metadata before showing the actual metadata for
+ our sample tree.
+
+ ==== XMLMenuModel Menu Metadata ====
+
+ There are four possible, different node types in a menu model's metdata:
+
+ * menu
+ * groupNode
+ * itemNode
+ * sharedNode
+
+ To learn about each of the attributes of these nodes, it is strongly suggested that the reader go to ["http://aseng-wiki.us.oracle.com/asengwiki/display/ASDevADFFaces/XMLMenuModel+Runtime#metadata"] and read about each type
+ of node and its attributes.
+
+ ==== XMLMenuModel Custom Node Attributes ====
+
+ Please see ["http://aseng-wiki.us.oracle.com/asengwiki/display/ASDevADFFaces/XMLMenuModel+Runtime#CustomAttributes"] for a complete explanation of
+ custom node attributes in the XMLMenuModel.
+
+ ==== XMLMenuModel Sample Menu Metadata ====
+
+ Here again is our sample tree structure representing a menu.
+
+ <p><img border=0 width=356 height=233
+ src="./TrinidadPageMenu_files/image001.gif" v:shapes="_x0000_i1049"></p>
+
+ The metadata for such a structure would look like this:
+ {{{
+ <?xml version="1.0" encoding="iso-8859-1"?>
+ <menu xmlns:"http://myfaces.apache.org/trinidad/menu">
+ <itemNode id="gin0" label="global0" action="goToGlobal0"
+ focusViewId="/menuDemo/global0.jspx">
+ <itemNode id="in1" label="tab1" action="goToTab1"
+ focusViewId="/menuDemo/tab1.jspx">
+ <itemNode id="in11" label="subtab1" action="goToSubTab1"
+ focusViewId="/menuDemo/subtab1.jspx"/>
+ <itemNode id="in12" label="subtab2" action="goToSubTab2"
+ focusViewId="/menuDemo/subtab2.jspx"
+ customAttribute1="myCustomAttrValue"/> <!-- example custom attribute -->
+ </itemNode>
+ <itemNode id="in2" label="tab2" destination="/faces/menuDemo/tab2.jspx"/
+ focusViewId="/menuDemo/tab2.jspx"/>
+ </itemNode>
+ <itemNode id="gin1" label="global1" icon="/components/images/globalhelp.gif"
+ action="goToGlobal1"
+ focusViewId="/menuDemo/global1.jspx"/>
+ <itemNode id="gin2" label="global2" icon="/components/images/globalprefs.gif
+ destination="/faces/menuDemo/global2.jspx"
+ focusViewId="/menuDemo/global2.jspx"/>
+ </menu>
+ }}}
+ === Specifying the Menu Model ===
+
+ In 10.1.3, the Menu Model is specified by 2 managed beans in the
+ faces-config.xml The first bean (at the bottom) is an adapter bean that
+ actually calls another bean to get is model:
+ {{{
+ <!-- create the treemodel -->
+ <managed-bean>
+ <managed-bean-name>menuTreeModel</managed-bean-name>
+ <managed-bean-class>oracle.adfdemo.view.faces.TreeModelAdapter</managed-bean-class>
+ <managed-bean-scope>none</managed-bean-scope>
+ <managed-property>
+ <property-name>childProperty</property-name>
+ <value>children</value>
+ </managed-property>
+ <managed-property>
+ <property-name>listInstance</property-name>
+ <list-entries>
+ <value-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</value-class>
+ <value>#{global0}</value>
+ <value>#{global1}</value>
+ <value>#{global2}</value>
+ </list-entries>
+ </managed-property>
+ </managed-bean>
+
+ <!-- create the menuModel -->
+ <managed-bean>
+ <managed-bean-name>menuModel</managed-bean-name>
+ <managed-bean-class>oracle.adfdemo.view.faces.menu.MenuModelAdapter</managed-bean-class>
+ <managed-bean-scope>session</managed-bean-scope>
+ <managed-property>
+ <property-name>viewIdProperty</property-name>
+ <value>viewId</value>
+ </managed-property>
+ <managed-property>
+ <property-name>instance</property-name>
+ <value>#{menuTreeModel.model}</value>
+ </managed-property>
+ </managed-bean>
+ }}}
+ In the XMLMenuModel, the bean is the model. The "source" managed-property contains the path to the menu’s metadata.
+ {{{
+ <!-- managed bean menu model -->
+ <managed-bean>
+ <managed-bean-name>root_menu</managed-bean-name>
+ <managed-bean-class>org.apache.myfaces.trinidad.model.XMLMenuModel</managed-bean-class>
+ <managed-bean-scope>request</managed-bean-scope>
+ <managed-property>
+ <property-name>source</property-name>
+ <value>/WEB-INF/menu-metadata.xml</value>
+ </managed-property>
+ </managed-bean>
+ }}}
+ The "setSource" method of the XMLMenuModel will be called with the location of the menu model's metadata, as specified in the "managed-property" element. IMPORTANT NOTE: the scope for the menu model MUST be "request".
+
+ === Navigation ===
+
+ Navigation-rules and cases are the same in the faces-config.xml in 10.1.3 as they are using the
+ XMLMenuModel. The difference lies in how the navigation-case <from-outcome> is specified by each model. For example, in the case of the
+ 10.1.3 model, each menu node is specified by a bean in the faces-config.xml. The managed bean
+ for our "global0" menu node is:
+ {{{
+ <managed-bean>
+ <managed-bean-name>menuItem_a1b1c1d1</managed-bean-name>
+ <managed-bean-class>oracle.adfdemo.view.faces.menu.DemoMenuItem</managed-bean-class>
+ <managed-bean-scope>none</managed-bean-scope>
+ <managed-property>
+ <property-name>label</property-name>
+ <value>a1b1c1d1</value>
+ </managed-property>
+ <managed-property>
+ <property-name>viewId</property-name>
+ <value>/components/page_a1b1c1d1.jspx</value>
+ </managed-property>
+ <managed-property>
+ <property-name>outcome</property-name>
+ <value>goToGlobal0</value>
+ </managed-property>
+ </managed-bean>
+ }}}
+ while the metadata for the same node in the XMLMenuModel is simply:
+ {{{
+ <itemNode id="gin0" label="global0" action="goToGlobal0"
+ focusViewId="/menuDemo/global0.jspx">
+ }}}
+ Both would have the same navigation-case in the faces-config.xml file:
+ {{{
+ <navigation-rule>
+ <navigation-case>
+ <from-outcome>goToGlobal0</from-outcome>
+ <to-view-id>/menuDemo/global0.jspx</to-view-id>
+ </navigation-case>
+ .
+ .
+ .
+ </navigation-rule>
+ }}}
+ === Adding a Menu to a Page ===
+
+ Below is an example of syntax typical of a .jspx file that adds a menu (using a menu model) to an af:page in 10.1.3:
+ {{{
+ <?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>
+ <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="1.2"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:af="http://xmlns.oracle.com/adf/faces" >
+ <jsp:directive.page contentType="text/html;charset=utf-8"/>
+ <f:view>
+ <af:document title="Menu Demo">
+ <af:form>
+ <af:page var="foo" value="#{menuModel.model}" title="Title">
+ <f:facet name="nodeStamp">
+ <af:commandMenuItem text="#{foo.label}"
+ action="#{foo.getOutcome}"
+ type="#{foo.type}"/>
+ </f:facet>
+ <!-- the Page Contents here -->
+ <jsp:include page="/menuDemo/menuDemo_content.jspx"/>
+ </af:page>
+ </af:form>
+ </af:document>
+ </f:view>
+ </jsp:root>
+ }}}
+ Using the Trinidad XMLMenuModel, as seen below, there are differences of note. Notice that almost all of the tags are Trinidad tags (<tr:…/>) instead of the adf-faces <af:…/> tags. Also notice that inside of the nodestamping, a “commandNavigationItem” is used instead of “commandMenuItem”.
+ {{{
+ <?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>
+ <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="1.2"
+ xmlns:f="http://java.sun.com/jsf/core"
+ xmlns:tr="http://myfaces.apache.org/trinidad" >
+ <jsp:directive.page contentType="text/html;charset=utf-8"/>
+ <f:view>
+ <tr:document title="Trinidad Menu Demo">
+ <tr:form>
+ <tr:page title="Welcome to the Trinidad Menu Demo"
+ var="menuInfo" value="#{root_menu}">
+ <f:facet name="nodeStamp">
+ <tr:commandNavigationItem label="#{menuInfo.label}"
+ action="#{menuInfo.doAction}"
+ destination="#{menuInfo.destination}"
+ icon="#{menuInfo.ico}"
+ rendered="#{menuInfo.rendered}"/>
+ </f:facet>
+ <!-- the Page Contents here -->
+ <jsp:include page="/menuDemo/menuDemo_content.jspx"/>
+ </tr:page>
+ </tr:form>
+ </tr:document>
+ </f:view>
+ </jsp:root>
+ }}}
= 3.) Java files =