Simple Navigation

Note: This post was written using Oracle JDeveloper, running in 64-bit mode on 64-bit Ubuntu 10.04 LTS, but will work with JDeveloper 11.x on any platform.

This post is part of a series on Oracle Application Development Framework (ADF).  This post assumes that you have completed the example in the previous “Hello World!” post.  Subsequent posts will build on this post with increasing, additional functionality.

Let’s return to the application we started in the previous post.  In the Application Navigator navigate to the adfc-config file in your ViewController project under Web Content then Page Flows.  If you have just completed the previous post, this file will probably still be open.  If you can’t see the Application Navigator, you can open it by selecting Application Navigator from the View menu.

Add two new pages to the diagram by dragging a View from the Component Palette onto the canvas, like we did in the previous post.  If you don’t see the Component Palette, select it from the View menu.  Name these new pages “one” and “two” as shown in the image below.  If you accidentally lose focus on the name before you have typed in the name you want, just click on the text again and you will be able to edit it.

Now we will create some rules that determine how users can navigate around our application.  In this example we are going to create some very simple rules, but later on we will see how we can have more complex navigation rules including conditions and “sub-navigation.”  For now, click on the Control Flow Case in the Component Palette, then click on the the home page to start an arrow and then the one page to end the arrow.  Your screen should look like the image below.  Type in one to name this arrow.  If you lose focus, just click on the name to change it.

We named this arrow the same as the view that it is pointing to.  This is not mandatory, but in this example it does make it a little clearer what it happening.  The name of the arrow is important though.  When we are developing our views (pages) and we want to have a component (like a button for example) cause the application to follow a navigation path (one of these arrows), we will be selecting the name of the arrow from a list.  So choosing good names will make life easier for us later.

Go ahead and create some more arrows so that users will be able to navigate from any page to any other page, as shown below.  The details of the arrows are as follows:

Source        Target        Name
------------  ------------  ------------
home          one           one
home          two           two
one           home          home
one           two           two
two           home          home
two           one           one

Your project should look like this:

Save your work by selecting Save All from the File menu.  Now that we have defined our views (pages) and navigation (arrows), we are ready to create the views (pages).  Just like we did in the last post, double click on each new page in turn (one and two) and create the page.  You can just accept the default name, which is the same as the view name with .jspx on the end, but make sure you choose the Oracle Three Column Layout template.

Note: there is nothing special about this template.  You could complete the example without using it, but we plan to put things in to the columns in later posts, and it is nice for all our pages to look the same.

Now let’s use some buttons to allow the user to navigate around the pages.  Button is not the only component that allows navigation, in fact there are many components that we could use, but button is simple to use and understand, so it is a good choice for this example.

Open up your home view and drag two buttons from the Component Palette right after your Output Text which we set to display Hello World! in the previous post.  Your screen should now look like this:

You may want to open the Structure view (from the View menu) at this point.  We don’t really need it right now, but it is something that you will definitely want to use later on, as your pages get more complex, so it is a good idea to get used to using it now.  You can see it there on the left hand side of the next image.  It shows all of the components on the page (in this case) in a tabular format.  This makes it easy for us to navigate through the page structure and select components we want to work on.  Notice that the first button is highlighted in the Structure view, and also in the graphical design view.  If you select a component in either of these two views, it will also be selected in the other.  When you have a lot of components on a page, you will find it is much easier to select the exact component you want from the structure view.

Notice also, that when a component is highlighted in the Structure view, its properties are displayed in the Property Inspector which is visible on the right hand side in the image below.  If you don’t see it, you can open it by selecting Property Inspector from the View menu.  Take a moment now to notice that you can move these views around the screen to set them up however you like.  Grab the title bar of a view with your mouse and drag it around.  Notice that you can drop it on top of another view and you will get tabbed views, like you see in the image below.  Notice that I have the Application Navigator and the Structure view sharing the left hand side of the screen (see the tabs at the top), and the Component Palette, Resource Palette and Property Inspector sharing the right hand side.  You can also double click on the title bar of a view to maximise it, and then again to restore it.

If you accidentally lose a view you want, you can always reopen them from the View menu, as you have seen previously.  If you get your screen all messed up and you can’t work out where things are, you can always select Reset windows to factory settings from the Window menu to get back to a sane and reasonable layout.

Now, back to our application!  Select the first button and use the Property Inspector to change its Text property to Go to page one and its Action property to one, as shown in the image below.  Note that the drop down box for the Action property contains the names we gave to the arrows that originate at this particular view.

Select the second button and set its Text property to Go to page two and its Action to two.

Your page should now look like the image below.  Save your work by selecting Save All from the File menu.  Also, notice that JDeveloper automatically added a Group component to hold your Output Text and two Buttons.  You can see it in the Structure view.  I have highlighted it in the image below.  This is not important right now, but we will look at it in the next post, when we start to care about the layout of our components.  For now, you might want to just take note that whenever we put multiple components in to a facet – like the center facet we got from our Oracle Three Column Layout page template, we need to put them into some kind of layout container.

Now go ahead and add an Output Text and two Buttons to page one.  Set the Value property of the Output Text component to This is page one.  For the first button, set Text to Go to home page and Action to home.  For the second button, set Text to Go to page two and Action to two.  Save your work.

Similarly, on page two, add an Output Text with Value set to This is page two, followed by a button with Text set to Go to home page and Action set to home, followed by a second button with Text set to Go to page one and Action set to one.  Save your work.

Now we are ready to run our application and try it out!  Return to the the home page and right click on the page in the design area.  Select Run from the popup menu as shown below.

After a few moments (or minutes if you have shut down your test server since you did the last exercise) the update page should appear in your browser, as shown below.

Go ahead and click on the buttons to navigate around your application.   Here is page one:

And page two:

That completes this exercise!  Now we have seen how to add additional pages to our application, and one simple way of creating navigation using buttons.  In future posts, we will look at a number of other approaches to navigation, but first, we will explore layouts.  Stay tuned!

This entry was posted in Uncategorized and tagged . Bookmark the permalink.

One Response to Simple Navigation

  1. Very nice post. Thank you!! Can you write how can open an external link page with an adf button?

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s