The Table tutorial will not be available for awhile, so here is a mini-tutorial on putting links in tables. It is another quick and dirty tutorial that assumes you know how to do things like bind to database tables and add bean properties.

1. Drop a Table component on the page. Bind it to the Order > Tables > PRODUCT_TBL database table.
   
   
2. Right-click on on the table and choose Table Layout.
   
   
3. Have the table display the PRODUCT_NUM, PRODUCT_CODE, and DESCRIPTION.
   
   
4. Select the PRODUCT_TBL.PRODUCT_CODE item in the Selected listbox.
   
   
5. Choose Hyperlink from the drop-down list for the Component Type.
   
   
6. Click OK.
   
   
7. Double-click one of the abc text strings that appears in the column for the PRODUCT_CODE. The IDE adds a hyperlink1_action() method and opens the Java source at that method.
   
   
8. Replace the method's body with the following code:

     return hyperlink1.getText().toString();  
   

9. Click Design to switch to the Visual Designer.
   
   
10. Right-click and choose Page Navigation.
    
    
11. In the Page Navigation editor, right-click and choose New Page. Accept the default page name. Repeat until you have 6 pages in all.
    
    
12. Drag from Page1.jsp to Page2.jsp. Type HW (name the link HW) and press Enter. Repeat for pages 3 through 7, naming the links SW, FW, BK, CB, and MS respectively (these are the product codes that the hyperlink's action method returns). You can cheat and just add pages 2 and 3. Just don't expect the other links to work.
    
    
13. Go back to the source for Page1 and make sure the action method is still the same.
    
    
14. Run the project and see if the links work. You might want to put values in the title property for each page convince yourself that the links are going to the right pages.
    
    

Let's say that you do not want to show the product code in the table, but you instead want the descriptions to be links to the detail pages and the detail page for a product still be different depending on the product code. Here is how you would do that.

1. First add a String property to the request bean and name it productNum. (Right-click on Request Bean in the Projects window and choose Add > Property to open the dialog box for adding a property).
   
   
2. In the Visual Designer for Page 1, right-click on the table and choose Table Layout.
   
   
3. Select PRODUCT_TBL.PRODUCT_CODE and click the < button to move the product code from Selected to Available. This action removes that column from the Table component.
4. Select PRODUCT_TBL.DESCRIPTION.
   
   
5. Choose Hyperlink from the drop-down list for the Component Type.
   
   
6. Click OK.
   
   
7. Double-click one of the abc text strings that appears in the column for the PRODUCT_DESCRIPTION. The IDE adds a hyperlink action method and opens the Java source at that method. (While you are here, check to make sure the IDE removed the old hyperlink action method.)
   
   
8. Replace the body of the method with this code:

          // Find out what row was clicked
          RowKey rowkey = tableRowGroup1.getRowKey();
          // Save product number so detail page knows what product to
          // provide detail info for
          getRequestBean1().setProductNum(
              product_tblDataProvider.getValue(
              "PRODUCT_TBL.PRODUCT_NUM", rowkey).toString());
          // Go to the detail page for that product's type
          return product_tblDataProvider.getValue(
            "PRODUCT_TBL.PRODUCT_CODE", 
             rowkey).toString();
   

Right-click and choose Fix Imports. You might see a red squiggly line under the statement that calls getProductNum. This should go away after you build the application. Sometimes the synchronizer doesn't notice changes to the request bean until you compile all the files.

Run and test.

Now, let's say that you only want people to go to detail pages for HW and SW.

Here is how to disable the links for all other product codes.

1. Add this code to the Java source for Page1:

       private boolean linkDisabled;
       
       public boolean isLinkDisabled() {
           String productCode = product_tblDataProvider.getValue(
             "PRODUCT_TBL.PRODUCT_CODE", 
             tableRowGroup1.getRowKey()).toString();
           if (productCode.equals("HW") ||
                   productCode.equals("SW")) {
               return false;
           } else {
               return true;
           }
       }
   

2. In the Properties window for the hyperlink, click the (...) button for the disabled property.
   
   
3. Click Use Binding. Click the Bind to an Object tab. Select Page1 > linkDisabled.
   
   
4. Click OK.
   
   
5. Run and Test.
   
   

What if you only had two types of detail pages, one detail page for HW, SW, and FW and one detail page for all the other product codes. How would you do that? See if you can make it happen.

Thanks to Felix and Fredrik who motivated me to write this blog entry.

We have received quite a few requests for a tab tutorial. We are working with the engineers to come up with a good sample application. It will be awhile before we publish that tutorial, so here is a quick bare-bones mini-tutorial of how to use a TabSet component to set up page navigation.

1. In the Projects window, right-click Web Pages and choose New > Page Fragement. Name the page fragment BannerPF.
   
   
2. Drag a TabSet from the Layout section of the Palette and drop it on the upper-left corner of the page fragment. Resize as desired.
   
   
3. In the Outline window, right-click the TabSet and choose Add Tab.
   
   
4. Set the text for the tabs to A and B.
   
   
5. In the Layout section, expand the TabSet node to see the Tab node.
   
   
6. Drag a Tab component from the Palette and drop it on tab1 in the Outline window. Drag another and drop it on tab1 too. Set the text for these tabs to Page 1 and Page 2.
   
   
7. Drag 2 tabs and drop them on tab2. Set the text for these tabs to Page 3 and Page 4.
   
   You should now have tab3 and tab4 under tab1 and tab5 and tab6 under tab2.
   
   
   
   
8. For each of these tabs set the immediate property to true (check the checkbox). Whether you do this or not depends on whether you want people to be able to tab to another page without validating the page that they are on. Setting the immediate property to true means that the pages won't go through validation when the user clicks a tab. The pages will still go through validation when the user submits the page by clicking a button or changing a value in an Auto-Submit on Change component.
   
   
9. In the Outline window, right-click tab1 and choose Edit Action Event Handler. The IDE switches to the Java source and adds the tab1_action method.
   
   
10. Make the code look like this:

      
        public String tab1_action() {
            tabSet1.setSelected("tab3");
            return "case1";
        }
    

11. Paste the code below into the Java source under the tab1_action() method. Then, in the Outline window, select tab3. In the Properties window, click the ellipsis button (...) for the action property, choose tab3_action from the drop-down list, and click ok. Repeat for every tab and subtab. When you are done, the action property for each tab must name its action handler.

        public String tab2_action() {
            tabSet1.setSelected("tab5");
            return "case3";
        }
          
        public String tab3_action() {
            return "case1";
        }
        
        public String tab4_action() {
            return "case2";
        }
        
        public String tab5_action() {
            return "case3";
        }
        
        public String tab6_action() {
            return "case4";
        }    
    

12. Open Page1. In the Layout section of the Palette, double-click the Page Fragment Box. Click Close. The page fragment appears at the top of the page.
    
    
13. Create Page2, Page3, and Page4. Add the BannerPF to each of them using the same method.
    
    You might want to add a Static Text component to each page to label that page, such as "Page 1". Doing so makes it easier to test.
    
    
14. Right-click on a blank spot on one of the pages and choose Page Navigation. In the Page Navigation editor, click Source. Add the following after <faces-config>:

        <navigation-rule>
            <from-view-id>/*</from-view-id>
            <navigation-case>
                <from-outcome>case1</from-outcome>
                <to-view-id>/Page1.jsp</to-view-id>
            </navigation-case>
        </navigation-rule>
        <navigation-rule>
            <from-view-id>/*</from-view-id>
            <navigation-case>
                <from-outcome>case2</from-outcome>
                <to-view-id>/Page2.jsp</to-view-id>
            </navigation-case>
        </navigation-rule>
        <navigation-rule>
            <from-view-id>/*</from-view-id>
            <navigation-case>
                <from-outcome>case3</from-outcome>
                <to-view-id>/Page3.jsp</to-view-id>
            </navigation-case>
        </navigation-rule>
        <navigation-rule>
            <from-view-id>/*</from-view-id>
            <navigation-case>
                <from-outcome>case4</from-outcome>
                <to-view-id>/Page4.jsp</to-view-id>
            </navigation-case>
        </navigation-rule> 
    

15. Close the Page Navigation editor and click Save.
    
    
16. Open BannerPF in the Visual Designer. Click JSP to view the JSP source.
    
    
17. Look for this line:

    <ui:tabSet binding="#{BannerPF.tabSet1}" id="tabSet1" selected="tab6" style="position: absolute; left: 0px; top: 0px">
    

    Delete the selected="tabn" parameter. This is important. If you don't do that, then the current tab doesn't always highlight correctly because this JSP code is resetting the current selected value.
    
    Important: Every time you edit the page fragment, you have to remember to remove the selected parameter from the JSP code. The IDE will keep sticking it in whenever you click on one of the tabs in the Visual Designer. So, if your tabs look like they aren't working, this is the first place to look (the selected parameter in the JSP).
    
    
18. Run and test.
    
    Notice that the URL doesn't match page displayed. This is because of the forward dispatching mechanism which Winston explains in this blog entry.
    
    

As with any quick and dirty write-up, I am sure I left something out, wasn't detailed enough when I needed to be, or didn't take into consideration a common scenario that most people want to do. Post questions and frustrations to the comments.

Sept 2006 Update: SDN member MWH@Keystroke pointed out in the Sun Java Studio Creator forum a common scenario that this doesn't cover. I updated the tab1 and tab2 actions to better handle switching back to the major tabs. MWH replied as follows with some good points to remember:

"Of course there is still the issue that if you select tab 'B', then 'Page 4' within tab B; then select tab 'A'; then return to tab 'B' by selecting 'B' you return to 'Page 3' not 'Page 4'. The developer must maintain the state of each level 1 tab, say via a session bean and restore the proper state when the level 1 tab is selected. When tab 'B' 'Page 4' is selected, set the value in the session. When tab 'B' is selected, retrieve the last level 2 sub tab selected and set it via the tabset1.setSelected('xxx') method. That way the system returns the user to the proper state relative to tab 'B'. Of course the same holds for tab 'A'.

The key is that developers need to understand they are explicitly responsible for keeping the tab state and navigation state in synch if they are using tabsets for navigation from within a page fragment. Which is quite different from using the tabset object from within a single page."

I just finished upgrading the Using Databound Components to Access Databases for the final release of the product. Because this upgraded tutorial won't be published until after the final Creator 2 release comes out, I thought I would share the following piece of information that I added to the tutorial. I have seen several posts on the EA forum where people are asking how to reposition the cursor to a different table row. The answer is to call tableRowGroup1.setFirst(zero-based-index-value);.

If you use the table paging feature on a master detail page that is like the one in the tutorial (a drop-down list for the master data and a table for the detail data), you will see that when the user selects a different choice from the dropdown list, the table displays new data, but stays on the current page. For example, if the user switches to page 2 and then chooses a new item from the dropdown list, the table shows the second page of data for the new selection. To fix the problem, add the following code after the tripDataProvider.refresh() statement in the master component's value change event handler: tableRowGroup1.setFirst(0);. This ensures that the first page is always displayed when a new name is selected from the drop-down list.

A new tutorial, GoogleSearch Web Service Portlet, will be added to the EA tutorials page, hopefully today or tomorrow.

The upgrading of the Referencing Class Libraries tutorial from Creator 1 to Creator 2 was low on our priority list. However, several people sent a request for this tutorial to the CreatorDocsFeedback@Sun.Com alias. So, we have upgraded this tutorial and it is going through the engineering review process. Your input matters to us, so please continue to submit tutorial suggestions.