Before you use this tutorial, you should have the Java Studio Creator development environment installed on your system. A basic familiarity with the Java programming language and with simple object-oriented concepts is also useful.
Using the Sun Java Studio Creator Development Environment
The Sun Java Studio Creator development environment (the IDE) enables you to develop and deploy complex web applications quickly and easily. Using the IDE, you can do the following:
The Java Studio Creator development environment is built on the JavaServer Pages (JSP pages) and JavaServer Faces standard technologies. JavaServer Pages technology provides the web application framework, enabling the following:
JavaServer Faces technology provides a set of reusable UI components that include state management, input validation and conversion, event management, and exception handling.
To create a web application in the Java Studio Creator IDE, you do the following:
Using the IDE Workspace
Figure 1 shows the Java Studio Creator IDE workspace as it appears when you first launch the product.
The central editing area contains different editors depending on what you are editing. For example, the Visual Editor is used for creating the visual user interface of your page, the Java Editor is used for editing Java code, the Navigation Editor allows you to link pages together, and the Query Editor is used for editing SQL queries. This area also contains the Welcome screen, from which you can create new projects, open recent projects, or change Java Studio Creator development environment options.
Additional windows are displayed around the central editing area. There are eight of these windows that share the workspace, most of which will be described throughout this tutorial:
Each of these windows (except the central editing area) can be docked, that is, they can be minimized along the left or right sides of the IDE workspace by selecting the pushpin in the window title bar. Moving the mouse over the icon for that window expands the window and makes it temporarily available for use.
Clicking the red X in a title bar closes that workspace window. To re-open a closed window at any time, choose it from the View menu. Finally, windows can also be dragged and dropped to different positions within the Java Studio Creator workspace.
The project contains all the files that make up the web application. These include the source files for your pages, page fragments (portions of pages such as headers or navigation bars that can be reused in other pages), the Java code your pages use as well as other extra resources your web application may needs such as images, style sheets, or code libraries (such as JAR files). Many of these files are automatically created for you when you create the project for the first time or when you build your project; others you will create yourself or import into the project so that your application can use them.
To create a new project and explore its files, choose Create New Project from the Welcome screen, or select File > New Project. The Project Navigator is on the lower right side of the IDE workspace. If it is currently not visible, choose View > Project Navigator to view it. Figure 2 shows the Project Navigator.
The Project Navigator shows your project in one of two views: Logical or FileSystem. The default view is Logical view, that is, how your project is organized logically. The various nodes of the project include:
Logical view does not show all the files in your project; it hides configuration files related to the project itself and output files created by the build process. FileSystem view shows you all the files in the project organized as they are on your disk. To switch to FileSystem view, choose the topmost node of the project, right-click to bring up the context menu and then choose Show FileSystem View.
Using the Palette
You design the pages for your web application by dragging and dropping
components from the Palette onto the page in the Visual Editor.
Components are defined by the JavaServer Faces technology. Basic
components include form elements such as text fields, buttons, and check
boxes, as well as basic page elements such as hyperlinks and small
blocks of text, or components for data conversion and validation. You
can also import additional JavaServer Faces components that you write
yourself or acquire from others into the Java Studio Creator development
environment. All components have corresponding Java code in the page
bean that enables the values of those components to be bound to external
sources such as databases, web services, or other components. Components
also include event handlers in the page bean that are invoked when the
page is submitted to the server.
JSF Components are additionally organized into categories:
You can switch between categories in the Palette by clicking the tab for each category title. You will probably use the JSF Standard Components category most frequently.
Designing the Page
To add a component to a page, drag and drop that component from the Palette to the Visual Editor. You can also double-click a component, and it will be placed on the page in a default position (usually just to the right of the last-placed component).
The Visual Editor uses one of two methods to lay out the components on your page: Grid Layout or Flow Layout. The default is Grid Layout.
Grid Layout means that each component appears on the final HTML page precisely where you place it in the Visual Editor. The Java Studio Creator IDE uses Cascading Style Sheet (CSS) positioning to place the components on the final HTML page. In Grid Layout, a dotted-line grid appears on the page to help you line up individual page elements. Because Grid Layout assumes a specific page width and height, you cannot place page elements to the outside the IDE's page borders.
With Flow Layout, components are placed on the page from left to right and top to bottom, and re-flowed to fit the page based on the size of each component and the width of the page itself. This layout method will be more familiar to you if you are used to basic HTML web page design.
To switch a page from Grid Layout to Flow Layout, click the background of the page and view the property sheet for that page. The property sheet is in the upper right corner of the IDE; you may need to choose View > Properties to view it. Under the Page Layout property, pull down the menu and choose Flow Layout.
Selecting Page Elements
The Visual Editor shows all the visible components on your page. There are, however, many components and other page elements that do not have a visual representation. Some non-visual components – database and web service components, in particular – appear in a tray near the bottom of your screen if you use them. Others may be part of other components and thus may be hidden from view. Still others do not have a visual representation at all.
To view or select all the components or page elements, both visual and non-visual, use the Application Outline. The Application Outline is contained in the lower left of the IDE workspace. If it is currently not visible, choose View > Application Outline to view it. Figure 4 Shows the Application Outline.
The Application Outline contains separate sections for all the pages
web application (open pages are represented in boldface) as well as for
and application beans or other managed beans added to the project.
Click on the button to switch between them. The tree for each page
describes the outline of HTML tags and
components for that page, starting from the outermost
Selecting a page element in the Application Outline enables you to edit the properties for that element (see Using Properties for more information on properties). If the component also has a visual representation, it is selected in the Visual Editor. Conversely, if you select a component in the Visual Editor, it is also selected in the Application Outline.
The Application Outline also contains categories for your application's session and application beans and for any new managed beans you add to your project. The session and application beans are used to manage data across user sessions or the application as a whole. By default they are empty; those sections expand when you add properties to those beans (you might need to right-click and choose Refresh from the context menu for newly added properties to appear in the Application Outline). The italicized words page, session, and application refer to the scope of the data within that bean; data within a page is within request scope (it is only available for the life of the current page request), within a session it is available and continues to live for the user session, and within the application it is available to the entire web application as a whole.
Using the JSP Editor
Each time you add a component to the page, or change any page element's properties, you are also modifying the underlying JavaServer PagesTM (JSPTM pages) code for that page. You can view (or edit) that JSP code using the Source tab at the bottom of the Visual Editor. Use the JSP Editor to add additional HTML or JSP code to your page.
The JSP code for the page, its appearance in the Visual Editor, and the properties of each component are kept synchronized with each other by the Java Studio Creator development environment. If you modify the page or a component on the page in the Visual Editor, the Java Studio Creator development environment will change the JSP code, and vice versa.
Properties describe some aspect of a part of your project. The properties of a component include its appearance, behavior, or the data it contains. The properties of an external file might include its path name or modification date. An external data source might have properties including its URL, port number or user ID.
To view or modify the properties of any component, file,or any other part of your project, use the property sheet. The property sheet is in the upper right corner of the IDE workspace. It shares a window with the Dynamic Help window so you might need to click the Properties tab or choose View > Properties to view it. Figure 6 shows a sample property sheet for a Button component.
Select a page element or other part of your project to view or change its properties. You can select page elements in the Visual Editor or from the Application Outline if they do not have a visual representation.
Properties are arranged by category, such as General, Appearance, or Events. You can collapse a property category and hide its properties by choosing the minus sign next to the category name.
JSF components in particular have two important common properties to note: the ID and the value.
Properties that have text values can be changed either by choosing the … button and changing the text in the dialog box that appears, or by selecting the text in the property sheet directly, making your changes, and pressing Enter to save those changes. A shortcut for editing the value of many components (Button, Text Field, Output Text, among others) is to select that component in the Visual Editor and simply start typing. The property sheet will open if it is not already open, the value property will be selected, and the value will be changed. Press Enter to save your changes.
In addition to containing static values, properties are also bindable, that is, they can be attached to other components, component properties, to Java code in a managed bean or to hosted services such as database tables or web services. Binding a property enables it to be dynamically updated as the data within an application changes. Bind a property by right-clicking on a component and choosing Property Bindings.
Adding Behavior with Java Code
JSF component behavior is defined by Java code stored in the page bean, which is automatically created for every page you create in a web application. Page beans are one of a set of beans that run behind the scenes on your web application and are known as managed beans. There are also beans for the session and the application, for managing data that lives between user sessions and across the entire application scope.
Each page bean contains Java code for your page and the components on that page. As you add and delete components, or change their properties, the code in that backing file is automatically updated. The reverse is also true: if you change the code in the page bean that affects the appearance or properties of the components, the Java Studio Creator IDE will automatically pick up the changes. To view or edit the page bean, right-click anywhere on the page in the Visual Editor and choose Edit page_name Java Source. This displays the Java Editor in a new tab in the editing area.
Much of the Java code in the page bean code is standard page initialization
that you will not need to modify. The page bean, however, does include event handler
code for your components. Event handler methods are executed when the page is
submitted to the server for processing. They are only added to the page bean as
needed. To add an event handler for any component, return to the Visual Editor
and double-click the component for which you want to add an event handler. For
example, double-clicking a Button component creates an action method with the
same id as the button (for example,
The features of the Java Editor include the following:
Instead of typing code by hand into the Java Editor, you can also use code clips. Code clips are stored in the Palette under the Code Clips section. Drag and drop a clip or double-click it to place it at the current insertion point. You might want to right-click in the Java Editor and choose Reformat Code to format the code clip after inserting it.
Deploying and Running Applications
When you run your application the Java Studio Creator development environment builds all the Java files related to your project and then deploys your web application on the application server. You can then test that application from a web browser to make sure everything is running as expected. The Java Studio Creator development environment contains everything you need to deploy your application locally, so you don't have to set anything up.
Before deploying your application, make sure that your Java code does not contain any errors in the Java Editor (indicated by red underlines or red boxes along the left side). Your project will not build if there are errors in the code. If all is well, click the green arrow at the top of the screen, or choose Build > Run Project.
The Build Output window appears at the bottom of the screen, and relevant status messages are displayed. Once your application is built and deployed, a web browser is launched, and your web application appears. If your application contains multiple pages, the first page (Page1.jsp) will always be the first page displayed unless you set a different start page in the Project Navigator (right-click on a page and choose Set As Start Page to change the start page).
If you need help at any point while you are working in the Java Studio Creator development environment, there are a number of places where you can get it:
Congratulations! You've completed the Getting Started with Sun Java Studio Creator tutorial. In this tutorial, you learned about the major features of the Java Studio Creator development environment.
To further your introduction to the IDE's main concepts, please continue with these two walkthroughs:
See the following tutorials for information about features of the Sun Java Studio Creator IDE: