Thursday Feb 02, 2006

Creator Tip: How to create single selectable row Table component

This tip shows how to create a single selectable row table component. A column of radiobutton components could be used to select a single table row. Dynamic row highlighting is set when ever the state of the radiobutton changes.

You can download the working project here .

Steps

  • Create a project called SingleSelectTable.
  • Add a table component.
  • From the Servers tab drag and drop Data Sources->Travel->Tables->Trip on to the table component.
  • Right Click on the Table Component and Select Table Layout.
    Click on the "New" button to add a new column.
    Using "Up" button move the newly added column to the top of the list.
    Remove the header text.
    Select Radio Button for component type and remove the text in Value Expression Field.
  • Go to JSP page and remove other Java Scripts added to the table component except the following. Make sure the generated code is similar to the following
<script>
  function initAllRows() {
   var table = document.getElementById("form1:table1");
   table.initAllRows();
  }
</script>

You need to write some logic to hold information about the selected radio button in the Page1.java. So add the follwoing code to the Page1.java

 
    private TableSelectPhaseListener tablePhaseListener = new TableSelectPhaseListener();
    
    public void setSelected(Object object) {
        RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
        if (rowKey != null) {
            tablePhaseListener.setSelected(rowKey, object);
        }
    }
    
    public Object getSelected(){
        RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
        return tablePhaseListener.getSelected(rowKey);
        
    }
    
    public Object getSelectedValue() {
        RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
        return (rowKey != null) ? rowKey.getRowId() : null;
        
    }
    
    public boolean getSelectedState() {
        RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
        return tablePhaseListener.isSelected(rowKey);
    }

Press Alt-SHift-F to fix the imports.

Now do the following to tell the table component to keep track of selection.

  • Select the Radio Button (from outline) and set the properties
    selected="#{Page1.selected}"
    selectedValue="#{Page1.selectedValue}"
    name="radioButton1" (for browser compatibility)
  • select the corresponding table column and set the properties
    onClick="setTimeout('initAllRows()', 0)"
    selectId="radioButton1"
  • Select the rowgroup and set the property
    selected=#{Page1.selectedState}

Let us add a button, which on click would display the number of the row being selected.

  • Add a Button (may change the text to "display row no.")
  • Add a Message Group to display the message after clicking the button.
  • Double click on the button and add the following code.
 
  public String button1_action() {
        int selectedRows = getTableRowGroup1().getSelectedRowsCount();
        RowKey[] selectedRowKeys = getTableRowGroup1().getSelectedRowKeys();
        for(int i=0; i< selectedRowKeys.length; i++){
            int rowId = Integer.parseInt(selectedRowKeys[i].getRowId()) + 1;
            info("Row " + rowId  + " is selected");
        }
        return null;
    }    

Deploy the application and in the displayed table component select the radio buttons. Only one row should be selected and highlighted at a time as shown below.


Click on the button and you should see message of the row number being selected as below.


Friday Jan 27, 2006

Creator Tip: Adding Calendar component to Table component

Several Sun Java Studio Creator customers have asked, how to add Calendar component to a Table Component. Unfortunately in Creator 2, it is not possible to use Table Layout for this purpose. With a little bit of hand coding this could be achieved. Here is the tip on how to accomplish this.

Step1: Add the Calendar Component to the Table COmponent
  • Create a Project
  • Drag and drop Table Component on to the design surface
  • Drag and drop the JDBC table Data Sources -> Travel -> Trip on to the Table Component.
    Optional: Using table layout remove the TRIPID and TRIPTYPEID
  • Using Table layout set the Pagination of the table and page size 5.
  • Drag and drop a Calendar component on to the design surface (not on the table component)
  • Edit the JSP page and move the Calendar Tag to the Table Column Corresponding to DEPDATE
  • From the outline Panel remove the extra StaticText component in the DEPDATE column.
    Do not remove it in the JSP
  • Remove the style attribute from the Calendar Tag
Now the DEPDATE tablecolumn tag in JSP should look like
 
<ui:tableColumn binding="#{Page1.tableColumn3}" headerText="DEPDATE" id="tableColumn3" >
  <ui:calendar binding="#{Page1.calendar1}" id="calendar1"/>
</ui:tableColumn>

If you deploy the project, you'd see the Calendar component inside the table component. But no date is displayed in it. We have not yet hooked the Calendar component to the data provider used by the table component

Note: The Calendar inside the Table component will have a border around it. If you wish to remove it add the following CSS rule (overriding the theme) to the resources/stylesheet.css.

table.CalRootTbl td{
 border: none
} 
Step2: Bind the Calendar component to the dataprovider

In the Page1.java, add a property called "date" of type java.util.Date and add the following code to it.

public java.util.Date getDate(){
   return (java.util.Date) getValue("#{currentRow.value['TRIP.DEPDATE']}");
}

public java.util.Date setDate(){
   return setValue("#{currentRow.value['TRIP.DEPDATE']}", new java.sql.Date(date.getTime())));
}

Right click on the [..] button of SelectedDate property of Calendar component. In the binding dialog select "date" from Page1. In the JSP the DEPDATE tablecolumn tag should look like

 
<ui:tableColumn binding="#{Page1.tableColumn3}" headerText="DEPDATE" id="tableColumn3" >
  <ui:calendar binding="#{Page1.calendar1}" id="calendar1" selectedDate="#{Page1.date}"/>    
</ui:tableColumn>

For the calendar componet to work correctly you need to set the MinDate and MaxDate to the date range in the table column. You can do this in the Page1.Java init() method.

java.util.GregorianCalendar gcalendar = new java.util.GregorianCalendar();
gcalendar.set(1990,1,1);
calendar1.setMinDate(gcalendar.getTime());
java.util.GregorianCalendar gcalendar1 = new java.util.GregorianCalendar();
gcalendar1.set(2010,1,1);
calendar1.setMaxDate(gcalendar1.getTime());
Step3: Saving the Calendar Component value to the Database
  • Add a button to the table. Change it text to "Save changes"
  • Double click on the button and add the following code.
public String saveButton_action() { 
 // TODO: Process the button click action. Return value is a navigation 
 // case name where null will return to the same page. 
 tripDataProvider.commitChanges(); 
 return null; 
} 

Deploy the project and change the date and click save Changes. The changes should be saved to your database. The Table component in the browser should look like

Tuesday Jan 24, 2006

Sun Java Studio Creator 2 is released!

Yes, it is official! Award winning Sun Java Studio Creator is released today and available for download. Most importantly it is free. After a year of development it is finally out.

Available Free!
Sun Java Studio Creator 2 makes visual web application and portlet development easy. » Learn More

Sun Studio Creator 2 is a proud recipient of three awards.

Developer.com Product of the Year 2006

eWEEK Labs Top Products of 2005 Picks

2005 Java Developer’s Journal Readers’ Choice Awards (runner up)

Along with English, Creator will also be made available in other languages such as Japanes, Simplified Chinese, Spanish, French and Korean.

Read in detail the complete Features & Benefits here.

Our main thanks go to the 21,000 or so registered Early Acces customers. You were simply awsome, with constructive criticism, thoughtful tips and pin pointing the flaws.

We are not done yet. Another year worth of development for Creator 3.0 is already in the plans. Let the comments keep coming in the forum.

Thursday Jan 12, 2006

Creator Tip: Setting table column or row style

During a meeting with Dick Wall of New Energy at Sun Executive Briefing Center, a question came up. How do I flag (set the colors of the text) of a particular cell in the Table Component based on some predefined condition. Here is a tip on how to do this.

Let's start with a Creator project with single Page and a table component. Drag and drop the person table on to table component. Assume we should color the text of the names column with a light blue background, if the name matches "Black" or "Chen" and the job title with light red background if it matches "VP".

Here is how to do this.

Add two methods "getNameStyleClass" and "GetJobStyleClass"

public String getNameStyleClass() {
  String name = (String) getValue("#{currentRow.value['PERSON.NAME']}");
  if ((name != null) && (name.startsWith("Black") || name.startsWith("Chen"))){
    return "nameStyleClass";
  }else{
    return "noStyleClass";
  }
} 
public String getJobStyleClass() {
  String name = (String) getValue("#{currentRow.value['PERSON.JOBTITLE']}");
  if ((name != null) && (name.startsWith("VP") )){
    return "jobStyleClass";
  }else{
    return "noStyleClass";
  }
}

Tip: "#{currentRow.value['PERSON.JOBTITLE']}" is same as what is set to the text property of the StaticText in the Column of the Table Component in the JSP page. You could simple copy and paste it here.

Add three CSS style classes to the resources/stylesheet.css

.noStyleClass{
}

.nameStyleClass {
  background-color: #ccccff;
  border-color: #0000ff;
  border-style: solid;
  border-width: 1px
}

.jobStyleClass {
  background-color: #ffcccc;
  border-color: #0000ff;
  border-style: solid;
  border-width: 1px
}

Select the StaticText component corresponding to the "Name" TableColumn in the Outline View. Click  the Custom Property Editor ([...] button) of the styleclass. From the "Use binding" panel select the getNameStyleClass. Similarly bind getJobStyleClass to styleclass property of StaticText component of "Job Title" Table Column.

After executing the project the table component should display like

Table with Column Styles

Another trick is to make the table to display odd and even rows with different styles. Add the following method to your Page1.java

    public String getColumnStyle(){
        TableRowDataProvider trdp = (TableRowDataProvider) getBean("currentRow");
        RowKey rowKey = trdp.getTableRow();
        if ((Integer.parseInt(rowKey.getRowId()) % 2) == 0){
            return " ";
        }else{
            return "background-color: #eeeeee";
        }
    }

Now select each table column in the outline and click on the [...] of the "style" property in the property sheet. Using the "Use Binding panel -> Bind to Object" dialog, bind the "style" to the Page1.columnStyle property.

The result may not be visible at design time. But at run time you should see something like

Table with Alternate row Styles

Thursday Jan 05, 2006

eWeek Lab picks Sun Java Studuio Creator as product of the year

Along with Solaris 10 (favorite product), Sun Java Studio Creator 2 has been picked as developer product of the year. Interestingly, the Sun Java Studio Creator 2 is not yet released. The decision is based on the Early Access release 2 of the product.

Peter Coffee writes

I found Sun's NetBeans-powered Java Studio Creator 2, which I reviewed in its first Early Access release, the most attractive developer product of this year.

Read more at

http://www.eweek.com/article2/0,1895,1901684,00.asp

Tuesday Dec 13, 2005

Creator Tip: Using CSS Layout Technique

Some Creator customers have asked if the page-fragments can be placed such a way that a single page can be subdivided in to 4 parts:

  • The first part is the top of the page where the user puts the application name and application's logo.
  • The second part comes after the top part and uses 20% of the screen width in the left side. In this part, user would like to put a tree view component representing the menu of the application.
  • The third part is the place where user wants to launch the page (customer form for example). This part is resides besides the second part and uses 80% of the screen width.
  • The final part is the place below the 2nd and 3rd part where user puts the page footer.

The best approach is to provide a Layout Component to lay out the components added to it, may be using a <table> element. In the absence of such a component, let us see how this can be done. Here is a hint on how to achieve this using CSS Layout Technique.

Let us use three page-fragments for header, footer and side navigation bar. For the middle let us use a LayoutPanel with Grid-Layout so that user can set the components in absolute layout mode. Now do the following

Page Fragment1

  • Set the width 100%
  • Set the height as 10% or 100px

Page Fragment2

  • Set the width 20% or 150px
  • Set the height as 500px or 100%

Page Fragment3

  • Set the width 100%
  • Set the height as 10% or 100px

Note: Percentage works fine in Firefox but fails in IE6. So better to use pixels than percentage at least for Page Fragment height, to support correctly in IE. The height and width can be set using the property sheet of each page fragment.

The components can be added to the page fragments in the usual manner. I've added StaticText with some text that displays location of the page-fragment and the Layout Panel.

Add the following to the resources/stylesheet.css

.top{ 
  background-color: #ccccff; 
  bottom: auto; 
  height: 10%; 
  left: 0; 
  position: fixed; 
  right: 0; 
  top: 0; 
  width: 100% 
} 
.left{ 
  background-color: #ffffcc; 
  color: #000000; 
  height: 80%; 
  left: 0;  
  position: fixed; 
  top: 10%; 
  width: 20%; 
  overflow : auto 
} 
.bottom { 
  background-color: #ccffcc; 
  bottom: 0; 
  height: 10%; 
  position: fixed; 
  right: 0; 
  top: auto; 
  width: 100% 
}

Now add the three page-fragments to a page. When each page-fragment is added  an enclosing <div> is added for each page-fragment in the page. This is visible in the outline. Select the <div> in the out line and unset the style property on each of the <div> (Note: This is import other wise settings in the style property takes precedence. Now set the styleClass of each page-fragment as top for header , left for navigation, bottom for footer.

Add a LayoutPanel to the page. Set its style property as

background-color: #abaaed; position: absolute; width: 80%; height: 80%; left: 20%; top: 10% 

If you deploy the application you should see something like in the picture below. Try resizing the page in the browser and see the results. If percentage is used, the resizing of the page fragments will be much more fluid (works well in Firefox). 

PS: I've tested this only with Firefox and IE 6. Firefox is more accurate in positioning the page-fragments  using %. IE has some overlap and shrinks to fit the page fragment content . Experiment with pixels (ex. height=500px instead of 100% for left navigation page fragment) to get better results uniformly on all browsers.

Sunday Nov 13, 2005

How to create a file download link ina JSF page?

Suppose you want to create a page and place lots of links in it. What you want is, when your user clicks on a link, it should open the browser's standard Save as dialog box, even if the browser knows how to handle the MIME type. Your user can then choose a location to save the file and move on. How to do this using a hyperlink component in Sun Java Studio Creator 2?

Read more about the tip at

http://winstonprakash.com/articles/jsf/file_download_link

Friday Nov 11, 2005

Code Google Search in no time using Creator 2.

Java Studio Creator is bundled with a very powerful data handling layer between the components and the underlying data. Data Provider allows the users to access data in a consistent way, even though the data may come from different sources such as Database, EJB or a Web Service. In this blog I want to show how to use Data Provider to connect to Google Search Web Service to fetch data and display it in a table with proper link to web sites. Every thing is done graphically except for 2 line of code user needs to write in the Java file. Yes, just 2 line - it is not a typo!

This is what you need to do after creating a creating a project in Creator 2. Lets call the project GoogleSearch.

Adding components

  • Add a Text Field
  • Add a button  (text - Google Search)
  • Add a Table component

Adding Web Service

  • Drag and Drop
        Servers -> Web Services -> samples -> GoogleSearch -> doGoogleSearch
        (This adds W/S client googleSearchClient1 & MethodResultTableDataProvider
          googleSearchDoGoogleSearch1)
  • Select googleSearchDoGoogleSearch1 in the out line and modify in the property sheet
          key - <your Google search key>  (Note: You need to register and get a
                    key at http://www.google.com/apis)
          maxResults = 10
          q - Sun Java Studio Creator (Initial search, you can change it
          later in the text field)

Adding Data Provider

  • Drag and Drop an Object Array Data Provider. (id - resultArrayDataProvider) 
  • Add an indexed property called "resultArray" of type webservice.googlesearchservice.ResultElement[]
  • Select resultArrayDataProvider and set its array property to "resultArray"

Setting Data Provider to Table

  • Right click on table and select Table layout and then select Data Provider resultArrayDataProvider
  • Remove all columns except URL, snippet, summary and title
  • Select HyperLink for component type for the column URL
  • In the Outline Select tableColumn1 -> hyperlink and click [...] for the "url" property in the property sheet
  • Deselect "escapt" property of  tableColumn2 -> staticText1, tableColumn3 -> staticText2, tableColumn3 -> staticText2

Setting Text Field Value to googleSearchDoGoogleSearch1

  • Right click on TextField and  select property binding and set the binding to googleSearchDoGoogleSearch1
       (The text should be - Sun Java Studio Creator)

Setting the Search Result to resultArrayDataProvider

  • Double click on "Google Search" button and add code
 resultArray = (ResultElement[]) ((GoogleSearchResult) getGoogleSearchDoGoogleSearch1()
               .getResultObject()).getResultElements();
 resultArrayDataProvider.setArray(resultArray);

Deploy and see the result after clicking on the "Google Search" button.

Google Search result output

Note: Our document team is in the process of writing a more elaborate tutorial on this subject. Stay tuned

Thursday Nov 03, 2005

Creating a Multi-Row Selectable CheckBox Table

Some Java Studio Creator users have asked in the forum, if it is possible to make the new Table component to behave like a multi column check box. The answer is - yes. The new table component bundled with Creator 2 is a very flexible component and you can easily write some code to make it work as desired above.  Read more at

http://winstonprakash.com/articles/jsf/multi_select_table

Tuesday Oct 11, 2005

Runtime exception if datasource is hand coded manually

Common way to bind JDBC datasource to components in a Creator generated web application is by drag and drop the database tables from the Data Sources node in the Servers tab. However, users can still add JDBC datasources by manually editing the java source or by using a third party library that has JDBC datasource coded inside its classes.

As observed by some users, this fails while deploying the application to the bundled test container. Let us analyze why it happens and finally I'll explain how to work around this.

When the user drag and drop the database table, a RowSet is added to the managed bean (Ex. SessionBean1.java). Simultaneously, the Design Time System creates a reference entry to the Data Source References node of the project. When the user hits the little green button in the toolbar to execute the application, the Deployment Manager kicks in and deploys the application to the bundled appserver. While deploying the application, it also obtains the datasources information from the Data Source References node and adds the datasource info to the JDBC connection pool maintained by the appserver. This way user need not to have to manually add the datasource while testing the application using bundled appserver. Note, user must manually add the datasource, if the application is deployed to another appserver (Ex. a production server).

So, if the datasource is hand coded in the application, corresponding reference entry is not created in the Data Source References node of the project. So the Deployment Manager is not aware of the required connection and does not add the datasource information to the appserver's connection pool, causing a run time SQL exception. 

Now, the solution ..

- Get the data source info (may be from the documentation of the third party library) and add the data source to the Data Sources Node in the Servers tab (don't forget to test the connection using "test connection button" in the Add Data Dource dialog).

- Right click on the Data Source References node in the project and select Add Data Source Reference menu item. In the resulting dialog select the recently added datasource (it should appear in the list) and hit add button. Now, the added datasource should appear as a child node to the Data Source References node.

Data Source References node in the Creator project

Deploy the application .. and .. no more run time SQL exception!

Wednesday Sep 28, 2005

Forward vs Redirect dispatching in a JSF application

Couple of Creator users have reported problems with relative URLs in their JSF web application. To solve these problems it is necessary to understand the JSF Controller Servlet request dispatch mechanism. While navigating to another page, the JSF Controller Servlet can either do a forward or a redirect dispatching. Read more details at

http://winstonprakash.com/articles/jsf/jsf_url_dispatch

Monday Sep 19, 2005

Most popular Java T-Shirt distributed at Microsoft Conference 2005

The most popular and likable T-Shirt distributed at the Microsoft Professional Developer Conference (PDC) reads

Popular Java T-Shirt at Microsoft Conference 2005

Meet Sharat Chander (Shar) the designer of the t-shirt and the hero behind the successful Sun Microsystems booth in the Microsoft Developer Conference. The slogan that put smile on the people's face when they got the t-shirt was also written by him. I personally heard people saying "It is so cool, I gotta have one", "I heard that you are handing out some cool t-shirts, can I have one of them". Several Microsoft employees stopped by to pick one too!. Second day itself we ran out of t-shirts after distributing about 1000 t-shirts.

Designer of Popular Java T-Shirt at Microsoft Conference 2005

First day a Microsoft rep stopped by Sun booth and told Shar (he was wearing the t-shirt then) that the slogan is some what controversial and it is better if he doesn't wear it. However, he had no choice but to retreat when Shar showed him the written consent he got from Microsoft to distribute the t-shirt at the conference expo.

Sunday Sep 18, 2005

Authenticating JSF web application using Microsoft Active Directory Service

At Microsoft Professional Developer Conference (PDC) 2005, in the Sun booth we talked about interoperability between .NET and Java. One of the demo we showed is about authenticating a JSF web application (created using Sun Java Studio Creator) using Microsoft Active Directory Service running in a Windows 2003 box. Several participants showed interest and wanted to know the detail behind it. Read the details at

http://winstonprakash.com/articles/jsf/authenticating_using_active_directory


Search

Categories
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