Developing Web Applications using Java Studio Creator

Once you have completed all the steps in the previous section, it is time to design the web page.  Go through the following steps to achieve the same:

• Using the "palette" tool window, drag a "label" from "basic" components onto the page.
• Once "label1" is selected, you will see all of its attributes/characteristics in the "properties" tool window. Using the "properties" window modify the following properties with the respective values given:

Id: modify the existing id "label1" to "lblMsg"

Text: remove all information here

Style: you can hit the "ellipsis" button (a button with three dots) and modify the appearance of the label

• Again using the "palette" tool window, drag a "button" from "basic" components onto the page
• Once "button1" is selected, change its "text" property to "Show" and "ID" property to "btnShow."  You can also adjust the width and height of the button visually.

At this point, when you switch to "JSP" mode, you should be able to see all the JSF (Java Server Faces) related tags as follows:

<?xml version="1.0" encoding="UTF-8"?>
<jsp:root version="1.2"xmlns:f=http://java.sun.com/jsf/core 

xmlns:h="http://java.sun.com/jsf/html"
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:ui="http://www.sun.com/web/ui">
    <jsp:directive.page contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"/>
    <f:view>
        <ui:page binding="#{Page1.page1}" id="page1">
            <ui:html binding="#{Page1.html1}" id="html1">
                <ui:head binding="#{Page1.head1}" id="head1">
                    <ui:link binding="#{Page1.link1}" id="link1"
url="/resources/stylesheet.css"/>
                </ui:head>
                <ui:body binding="#{Page1.body1}" id="body1" 

style="-rave-layout: grid">
                    <ui:form binding="#{Page1.form1}" id="form1">
                        <ui:button action="#{Page1.btnShow_action}"
binding="#{Page1.btnShow1}" id="btnShow1"
                            style="left: 23px; top: 48px;position: 
absolute; width: 71px" text="Show"/>
                        <ui:label binding="#{Page1.lblMsg}" id="lblMsg" 
style="left: 24px; top: 24px; position: absolute"/>
                    </ui:form>
                </ui:body>
            </ui:html>
        </ui:page>
    </f:view>
</jsp:root>

You can observe that we are not simply developing the traditional JSP applications. Instead, we are now working with advanced JSP controls together with JSP using Sun Java Studio Creator!