Friday Jan 20, 2006

Aloha, Discovering via Code Completion, and a Page Fragment Tip

Chris: I love the Internet. Not only does it let me work with teams all over the world, such as when I worked with the NetBeans team in Prague, the Internet also enables me to work from anywhere. Today I am on the Big Island in Hawaii. It is a relief getting away from the constant rain and flooding in northern California. On the west side of the Big Island we have the opposite problem -- a severe drought.

I want to talk a bit about discovering how to use Creator's editing features to figure out how to solve your programming tasks on the fly. For example, someone asked in the EA forum how to figure out what column a component is in. I wasn't sure whether the person was asking about a Table component column or a database column so I answered both questions. I didn't really know the answer, so I opened the Java editor on a page that had a Table component, which was bound to a database table. To figure out how to get the Table Column that a component is in, I typed "hyperlink1.get" (where hyperlink1 is the id of a hyperlink component in a table column in my Table component) and pressed Ctrl+Space to raise the code completion box. In the list that appeared was getParent(). This seemed a likely candidate, so I chose that one. I typed ".get" and pressed Ctrl+Space again. In the list was getId(), and I chose that one.

I used the same process to discover how to get the database column associated with a component: hyperlink1.getValueBinding("text").getExpressionString().

It is kind of a bassackwards methodology, but sometimes I find the code completion method to be quicker than reading the Javadoc. If I want to learn more about a method that I have discovered using code completion, then I can look in the little Javadoc pop-up that appears above the code completion box, and I can open the various API references that are available from the Dynamic Help window. If you want to learn more, see the Using the Java Editor tutorial at http://developers.sun.com/prodtech/javatools/jscreator/ea/jsc2/learning /tutorials/javaeditor.html. My other friends for discovering and exploring are the Message Group component (where I use info(string) to send diagnostic messages at rendering time), and the server log (where I use log(string) to send lifecycle and event handling messages to the log).

Gail: This week a customer asked if he could use templates in Creator to create pages with the same header, footer and side menu. Page fragments are the perfect solution for this and the Page Fragment Box component is documented in our tutorial Using Page Fragments at http://developers.sun.com/prodtech/javatools/jscreator/ea/jsc2/learning/tutorials/pagefragments.html.

An updated version of this tutorial is coming out Wednesday, 1/25. The tutorial includes a page fragment that holds links for navigating between the pages in the application. While writing this tutorial, I discovered how to disable the link on the current page. Here are the instructions:

1. Create a new project.

2. Put a page fragment on the page (Page1). Name the page fragment Navigation.

3. Add a Hyperlink component to the page fragment. Set the hyperlink's id property to homeLink, text property to Home, and the url property to /faces/Page1.jsp.

4. Open the Java source code for Page1.

5. Add the following code to the prerender method:

public void prerender() { 
    Navigation navigationFragmentBean = (    
      Navigation)getBean("Navigation");
    Hyperlink homeLink = navigationFragmentBean.getHomeLink();
    homeLink.setDisabled(true);
 }

6. Right-click in the Java Editor and choose Fix Imports.

7. Run the application and verify that the link is disabled.

Saturday Jan 14, 2006

Links in Tables

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();
    
  9. 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.

About

divas

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today