Using JDeveloper

Today we built the infrastructure to display hierarchical trees.  This involved implementing TreeNode classes for each our objects and defining which object is the child of our current object.  We could then point our af:tree at a view object that we built that would know how to display the trees.  All good, all working fine. 

But our tree nodes represent different types of objects and we want to do the traditional display of an Icon next to our tree node name.  To do this, we added an abstract class to our base class:

public abstract String getIcon();

Now each of our tree objects that derives from our base class would have to implement this method and return the name of the icon that best represents them:

@Override

public String getIcon()

{

     return "/css/icons/server.png";

}

In our tree component, we create a Node Stamp to represent what we want each tree node to look like.  Here's our tree source:

<af:tree id="myTree" value="#{tree_view_object}" var="node" rowSelection="single"

        initiallyExpanded="false">

     <f:facet name="nodeStamp">

          <af:group id="g1">

               <af:image id="i1" source="#{node.icon}" inlineStyle="vertical-align:middle;

                  margin-right:3.0px;"/>

               <af:outputText value="#{node.name}" id="ot1"/>

           </af:group>

     </f:facet>

</af:tree>

Note the inlineStyle value used to make our tree icons line up better with out text.  We drew all our icons using 16x16 transparent png files by the way.

Here's what our tree looks like:

Now to figure out what to do when a user selects something in our tree!  That's next....

How should I set up my strings so that they can be translated to other languages?  JDeveloper does a very nice job of automatically creating a resource bundle that contains your strings.  Let's say you are creating a new button:

By default, "commandButton 1" is the name that this button will display.  Now you can change this Text to be a value from your resource bundle and you can also define an AccessKey, something like "Close" with "C" will name your button "Close" with the "C" underlined as your accelerator.  However, if someone later translates "Close" to a language where "C" is no longer part of the new word, then your "C" AccessKey won't work.  What to do? 

Use the TextAndAccessKey field instead.  Click on the little down arrow next to the field and select "Select Text Resource..."

Then enter your desired value with the AccessKey directly in the string:

By using "&" before the letter "C", you are asking that "C" be the AccessKey.  JDeveloper will automatically underline the "C" for you and provide accelerator functionality.  Now if someone were to translate "Close" to another language, they would see that "C" is the AccessKey and they could pick a new AccessKey and not lose the accelerator functionality that JDeveloper provides.

Menu items can have a natural grouping where related items are listed one after another and a seperator is used between them.  You've seen these in many applications.  The File menu in your browser right now has groupings.  So how do you do this with JDeveloper?   My goal was to have a menu that looked like this:

Menu

   Option A

   Option B

   ---------------

   Option C

My initial thought was to build the Menu, create a group around Option A and B and be done with it, however this didn't work.  JDeveloper didn't like my nested groupings since I was using a template with a facet for the Menu, essentially:

Menu

    Group 1

        Group 2

            Option A

            Option B

        /Group2

        Option C

    /Group1

/Menu

To make this work, I had to put a group around Option C and then everything worked fine.  If I was not using a template with a facet, then my original plan would have worked.  Here's a template/facet based menu grouping example:

        <f:facet name="menuFacet">
            <af:group id="g2">
              <af:commandMenuItem id="MenuOption1"
                                  textAndAccessKey="#{viewcontrollerBundle.OPTION1}"/>
              <af:commandMenuItem id="MenuOption2"
                                  textAndAccessKey="#{viewcontrollerBundle.OPTION2}"/>

              <af:group id="g21">
              <af:commandMenuItem id="MenuOption3"
                                  textAndAccessKey="#{viewcontrollerBundle.OPTION3}"/>
              </af:group>
            </af:group>
          </f:facet>

My menu items that are completely contained in my template worked fine, it was the facet based menu that required this grouping technique.