JSP Basics with Java Studio Creator 2 for VB Programmers

Adding a button and a label

Drag and drop a button and a label from the Palette's Basic elements node as shown in the next picture. You can right click to produce a pop-up menu from which you can take several types of actions and changes.

The addition of these controls add the following code between <ui:form binding="# {Page1.form1}" id="form1"/> tags as shown. You can change the properties and placement of control  from here as well.

<ui:form binding="#{Page1.form1}" id="form1">
<ui:label binding="#{Page1.label1}" 
id="label1"
style="height: 24px; left: 36px; top: 36px; 

position: absolute; width: 
178px" 
text="Label"/>
<ui:button binding="#{Page1.button1}" 
id="button1" 
style="position: absolute; left: 36px; top: 96px; 

width: 144px; height: 24px" 
text="Button"/>
</ui:form>

Similarly the tabbed page Java gets changed to reflect these additions by adding two more imports,

import com.sun.rave.web.ui.component.Label; import com.sun.rave.web.ui.component.Button;

with the additional property get, set procedures for the added elements.

Changing the Text property of the elements

By right clicking the elements (controls) and choosing Edit Text from the drop down, the current text of the elements gets highlighted, which may now be typed over. The text "Button" was changed to "Greet" and the text label was changed to "Greet the visitor" as shown. You may verify that these get changed in the tabbed page, JSP. Also you change the "Greet the Visitor" text to "Greet the SUN Visitor" and it gets changed in the design page.  So changes made in Design get changed in JSP and vice versa.

Changing the labels with the button click

When you click the button in the tabbed page Design you open up the tabbed page Java as shown here.

We want to set the label's text property to something other than the current text, "Greet the SUN visitor." Let's change this to "Have a Cup of Java" by using the setValue() method. The picture also shows the code completion feature, which shows up as soon as you type label1 and the period. In some cases the code completion may not immediately show up. This picture shows that the method comes from the com.sun.rave.web.ui.component.Label class. Click on setValue(), which requires an argument.

The completed portion of the code is shown in the next window.  The return null; statement means the page is returned to the same page after the action is completed.