1 2 3 Previous Next 107 Replies Latest reply on Aug 31, 2010 8:59 PM by 696034

    Oracle UI Shell Functional Pattern

    696034
      Problem Description

      A chief challenge in UI development is rational consistency -- providing the user with predictable locations and behaviors for the most salient features.

      Technical Pattern Description

      The Oracle ADF UI Shell is a template that provides guidance to development teams working towards a consistent UI for their customers. Because it is reinforced in code, it augments the probability that UI specifications will be followed. The primary assumption of the Oracle ADF UI Shell is that each page based on the template will represent a significant module of an application, if not separate applications. As a consequence, the "boilerplate" portion of the UI (e.g., branding, ubiquitous controls, obligatory legal statements) are more easily held consistent in form, placement, and function -- as they are defined once. The more interactive portion of the application -- features and functions that define the application -- are presented in the "workarea" of the template. The Oracle ADF UI Shell template identifies those areas through named facets (e.g., navigation) and regions (e.g., dynamic tabs). Nearly all, if not all, of the product's value add can be surfaced in regions of a single page as bounded ADF taskflows. In the end, customers enjoy a more predictable user experience.

      Click here to see the document that describes this pattern.
        • 1. Re: Oracle UI Shell Functional Pattern
          Jai Om-Oracle
          Hi,

          We are currently evaluating the UI Shell for a possible use in our application.
          The question that I have, after playing around with UI Shell template, is that how do we capture the Tab Change event?
          Here is the simple use case:
          - User clicks in Navigation area and open Tab1 (implemented as bounded taskflow using page fragment)
          - User clicks again in Navigation area and open another Tab2 (implemented as bounded taskflow using page fragment)
          - User now switches between Tab1 and Tab2 and we want to capture this Tab Change event and know which Tab user has selected and do something..

          For simplicity, let's assume that when user is switching the tabs, he hasn't changed anything (meaning tabs are not dirty) to eliminate the warning part.
          I know TabContext API offers getSelectedTabIndex method but where to capture it, is where I am confused.

          Thanks,
          Jai
          • 2. Re: Oracle UI Shell Functional Pattern
            696034
            The selection of a tab itself does not fire an event wherein the application would know to make a request of getSelectedTabIndex. That is a feature under consideration.
            • 3. Re: Oracle UI Shell Functional Pattern
              Jai Om-Oracle
              Hi Richard,

              Thanks for your response.

              Is there any workaround available until template is enhanced to support it?
              Also what time frame are we looking for, to have this feature available with UI Shell Template?

              Thanks,
              Jai
              • 4. Re: Oracle UI Shell Functional Pattern
                696034
                The jar (oracle-page-templates-ext.jar) containing the Oracle Dynamic Tab Shell Template is located at C:\OracleHome\Oracle\Middleware\jdeveloper\adfv\jlib, where OracleHome is where the product was installed. You access that source do whatever you want. The caveat is to store that away and address delta's at the next release.
                • 5. Re: Oracle UI Shell Functional Pattern
                  Rommel Pino
                  Hi Experts,

                  This UI Shell pattern is great, but would appreciate if you could extend the sample to show a best practice test case having a list, query, create, and edit activity based on the HR Schema.

                  regards,
                  pino
                  • 6. Re: Oracle UI Shell Functional Pattern
                    696034
                    There are a few ways to interpret what you mean by a list. There are several different UI approaches to edit, create, and query. Each of these topics are covered straightforwardly in the ADF documentation. From there, you can adjust to what you want more specifically.

                    As an aside, take a look at our Master-Detail-MoreDetail Functional UI Pattern. There you may find what you are looking for as a start in an instructive nugget.

                    You might also download, play with, and inspect the source for the Fusion Order Demo - End to End Oracle ADF 11g Sample Application. You should find what you are looking for and more.
                    • 7. Re: Oracle UI Shell Functional Pattern
                      Rommel Pino
                      Hi Sir,

                      I feel sorry for myself for not being so clear. I've been into this "Master-Detail-MoreDetail Pattern", "Fusion Order Demo..." and so on and so forth... but what I was looking for earlier is somewhat like the fusion order demo (or just even a bit of it) based on the Oracle UI Shell Functional Pattern.
                      I guess, it would be great if you can upgrade your "End to End Oracle 11g Sample Application" to utilize this great pattern(after 3 JDeveloper official releases not counting Technology Previews) to give developers like me a concrete example of utilizing the great ADF Technology (especially ADF Faces RC). If I will look into the Fusion Developers Guide especially on Creating ADF Taskflows, I find it hard to relate on how would I design our taskflows while using this UI Shell pattern. I don't even know how would I pass a parameter to my bounded taskflow, in case I wanted to launched it to a separate Tab. Or maybe, I am just dull enough- and in that case- my apologies.

                      regards,

                      pino

                      Edited by: pino on 16-Dec-2009 09:42

                      Edited by: pino on 16-Dec-2009 09:45
                      • 8. Re: Oracle UI Shell Functional Pattern
                        Rommel Pino
                        Hi!

                        I have already figured out how to pass parameters to my bounded taskflow that I intend to launch on a separate tab. It would be the same way as how the UI Shell framework passes the TabContext object to the interested taskflows. This cannot be done though without extending the dynamicTabShellDefinition.xml. I am thinking, that this pertinent requirement can easily be supported by just pre-configuring the dynamic "parametersMap" attribute of the taskFlow binding definition to a value like "#{viewScope.parametersMap}". In this case, if I have something that I need to pass as parameter to my bounded taskflows, I just need to put the object on the parametersMap in view scope. I need to test this yet though.

                        Below is a quotation from the Fusion Developers' Guide about the parameterMap:
                        The <parameterMap> element specifies an EL expression that returns a java.Util.map object. The object contains task flow input parameter name/value pairs.
                        regards,

                        pino
                        • 9. Re: Oracle UI Shell Functional Pattern
                          696034
                          If I follow you, there is no need to extend the dynamicTabShellDefinition.xml (directly?) in order to pass parameters into a bounded taskflow used within the Shell. Parameters passed into bounded taskflows can be defined using the declarative Overview Editor of for that taskflow. An example of this is given in the UI Shell pattern.

                          For example, to access TabContext methods from within a task flow, define a parameter for TabContext in the task flow. The UI Shell template will make sure that the TabContext is passed in. To define a parameter for TabContext in the task flow, add the following to the taskflow definition via the Overview Editor for that taskflow. The values in the design time UI would look something like this:

                          name      tabContext
                          class      oracle.ui.pattern.dynamicShell.TabContext
                          required      true

                          The resulting xml would look like this:
                           <input-parameter-definition>
                             <name>tabContext</name>
                             <class>oracle.ui.pattern.dynamicShell.TabContext</class>
                             <required/>
                           </input-parameter-definition>
                          • 10. Re: Oracle UI Shell Functional Pattern
                            Rommel Pino
                            Hi Richard,

                            The configuration above is just half of the story.
                            The code below from the dynamicTabShellDefinition.xml is the answer to the question -"How the framework passed in the TabContext object?".
                             
                            <parameters>
                                    <parameter id="tabContext" value="${bindings.tabContext}"
                                               xmlns="http://xmlns.oracle.com/adfm/uimodel"/>
                            </parameters>
                            regards,

                            pino
                            • 11. Re: Oracle UI Shell Functional Pattern
                              biemond
                              Hi,

                              I want to use the default uishell ( not steve's version ) to pass on values between TF, I have a master tf ( table layout ) where i want to use conc. events or a command link on a row to show one or more details in a detail TF )
                              off course I can add a parameter to the detail TF but how can I fill this parameter, I don't have access to the dynamicTabShellDefinition.xml page definition

                              what is the best way when I want to use the standard uishel and don't want to use session bean,

                              thanks Edwin
                              • 12. Re: Oracle UI Shell Functional Pattern
                                Rommel Pino
                                I have already tested my understanding on the taskFlow binding "*parametersMap*" attribute above and it works!

                                First, I added an additional parameter in line with the tabContext parameter to my custom dynamicTabShellDefinition.xml. The parameter binding section will be as follows:
                                 <parameters>
                                    <parameter id="tabContext" value="${viewScope.tabContext}"/>
                                    <parameter id="parameterMap" value="${requestScope.parameterMap}"/>
                                  </parameters>
                                Note that instead of using ${viewScope.parameterMap}, I used ${requestScope.parameterMap} because it seems that when I passed a viewScope parameter from a backingBean inside one of my bounded task flows, it will not reach the initialization of my target task flow in the separate tab.

                                Second, I redefined all my taskFlow bindings to define the "*parametersMap*" attribute value to "*#{bindings.parameterMap}*". Please see below a redefined taskFlow definition:
                                <taskFlow id="r0"
                                              taskFlowId="${viewScope.tabContext.taskflowIds[0]}"
                                              activation="deferred"
                                              xmlns="http://xmlns.oracle.com/adf/controller/binding"
                                              parametersMap="#{bindings.parameterMap}">
                                      <parameters>
                                        <parameter id="tabContext" value="${bindings.tabContext}"
                                                   xmlns="http://xmlns.oracle.com/adfm/uimodel"/>
                                      </parameters>
                                </taskFlow>
                                With the steps above, I could already define any parameter that I need in the bounded taskflow: Please see below for a sample parameter definition:
                                <input-parameter-definition id="__2">
                                      <name id="__3">employeeId</name>
                                      <value>#{pageFlowScope.employeeId}</value>
                                      <required/>
                                </input-parameter-definition>
                                Just be sure that before you invoke the backing bean method that will call the TabContext addTab() method you already put the employeeId into the parameterMap and set the parameterMap into requestScope:
                                        ...
                                        Map<String, Object> parameterMap = new HashMap<String, Object>();
                                        parameterMap.put("employeeId",employee.getId());
                                        JSFUtils.setRequestAttribute("parameterMap", parameterMap);//JSFUtils is a utility class from FOD
                                        //direct or indirect call to the TabContext addTab() method here
                                I hope this will help others too.

                                regards,
                                pino
                                • 13. Re: Oracle UI Shell Functional Pattern
                                  biemond
                                  Great work,

                                  How did you create your own custom dynamicTabShellDefinition.xml , did you use the uishell project of Steve or used the default of jdeveloper and override the default dynamicTabShellDefinition.xml

                                  thanks Edwin
                                  • 14. Re: Oracle UI Shell Functional Pattern
                                    Rommel Pino
                                    Hi Edwin!

                                    I actually created a new template with my own classes patterned on the Oracle dynamicTabShell template built-in in JDeveloper 11.1.1.2 (I don't have idea of Steve's version). With this approach, we have the flexibility in case we need to extend the functionality of the UI Shell. We were able to do this because we have an active Oracle Support contract by which we were able to have access to the source code.

                                    Nevertheless, if you just need to support the "parametersMap" attribute above or do some modification on the layout of the template, you can do so by replacing the %MiddlewareHome%\jdeveloper\adfv\jlib\oracle-page-templates-ext.jar with a modified version since you can edit the dynamicTabShell.jspx and and the dynamicTabShellDefinition.xml after you extracted the files in the jar. Before the UI Shell source code came to us, I was actually able to successfully modified the layout of the UI Shell(I hated the too much space taken by the Legal area at the bottom part) and I was even able to pre-configure the branding bar, global links and Status/Login User display so that the pages need not re-implement those globally applicable facets.

                                    regards,
                                    pino
                                    1 2 3 Previous Next