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.

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:

• Design a web-based user interface for your web application using drag-and-drop user interface components.
  
  
• Connect your components to data or services (if needed). The components on your page can be bound to databases or web services. The Java Studio Creator development environment includes the PointBase Embedded database, a Java-based DBMS which includes sample data for use with this tutorial and others, or can be used for building your own application.
  
  
• Define the application behavior using Java.
  
  
• Link multiple pages together to build a complex application.
  
  
• Build and deploy the application. The Java Studio Creator development environment includes everything you need to build and deploy the application for testing on your system, including the Sun Java System Application Server Platform Edition 8. Deployed applications are contained on the application server and available to run in a web browser.

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:

• development of complex, distributed web-based applications
• the separation of the client-side user interface from the server-side execution

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:

1. Create a project.
   
   The project file keeps track of all the files your application uses, both those you edit directly and those that are used by that application.
   
   
2. Design the user interface for each page in your web application.
   
   A page, as we refer to it in the Java Studio Creator development environment, is the area on which you drag and drop components in the Visual Editor. The page is composed of static HTML, JSP code, and JSF components. When the web application is built and deployed, this page eventually becomes a standard HTML page when the client browser requests it from the server. The Java Studio Creator development environment pages are analogous to Web Forms in ASP.net.
   
   
3. Connect to databases or web services.
   
   The Java Studio Creator development environment provides simplified access to database and web services. Database access is based on the JDBC rowset technology.
   
   
4. Program application behavior using Java.
   
   Web applications in the Java Studio Creator development environment are supported by a set of JavaBeans components, called managed beans, which provide the logic for initializing and controlling JSF components and for managing data across page requests (a single round trip between the client and server), user sessions, or the application as a whole. When you add your own code to components and to the application, you will be adding Java code to these beans. Most commonly you will be working with the page bean, the managed bean associated with each page and each page request.
   
   
5. Link multiple pages together.
   
   The Java Studio Creator IDE includes a Navigation Editor that enables you to quickly link pages together and define the rules for navigating between them.
   
   
6. Build and deploy the application.

Figure 1 shows the Java Studio Creator IDE workspace as it appears when you first launch the product.

Figure 1: Java Studio Creator Workspace.

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:

• Palette contains components and code clips for use while building applications.
  
  
• Server Navigator (behind Palette) displays hosted services such as databases, web services, and application servers.
  
  
• Application Outline shows all the visual and non visual components and other page elements used by all the pages in your web application. The application outline also includes sections for the application's managed beans – its session and application beans, as well as any additional managed beans you add.
  
  
• Properties displays and enables you to edit properties of components and other application elements.
  
  
• Dynamic Help (behind Properties) provides help topics on the active page.
  
  
• Project Navigator displays files related to the project.
  
  
• Debugger displays the debugger (not displayed by default).
  
  
• Build Output shows build information (displayed only when a project is built).

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.

Figure 2: 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:

• Web Pages: The individual pages and page fragments that make up your web application. This node also includes a folder for Resources, which stores the assets and other external files used by your project, for example, images or CSS style sheets.
  
  
• Page Navigation: An XML file that describes how your pages link together. Double-clicking Page Navigation displays the Navigation Editor.
  
  
• Managed Beans: An XML file that describes the managed beans (the page bean, the session bean, and the application bean) for your web application.
  
  
• Java Sources: The Java source files that relate to your project. Many of these Java files are the source for the managed beans for your project and are generated when the project is created. In addition, you can add other Java sources you use here. Java sources are organized in subdirectories by package name.
  
  
• Library References: External files, objects or libraries that the project refers to, for example, JAR files containing Java classes used by your project.
  
  
• Data Source References: References to hosted data sources such as databases that your web application uses.

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.

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.

Components are available from the Palette, which is in the upper left corner of the IDE workspace. It shares a window with the Server Navigator so you might need to click the Palette tab or choose View > Palette to display it. Figure 3 shows the Palette.

Figure 3: Palette.

Use the buttons along the top of the Palette to choose Standard components or Code Clips. Components were described above. Code clips are bits of JSP, Java, or JavaScript code that you might need to complete this or other tutorials, or are otherwise frequently used in building web applications with the Java Studio Creator IDE. Right-click a clip and choose Edit to view or edit its contents. Drag and drop any clip from the Palette or double-click the clip to place it into a JSP or Java code file at the current insertion point.

JSF Components are additionally organized into categories:

• Added Components: JSF Components you have written or acquired elsewhere and imported into the Java Studio Creator development environment
  
  
• JSF Standard Components: The basic set of components including form fields, hyperlinks, labels and text. The JSF components are organized into logical groups by function; you can also alphabetize the list by right-clicking and choosing Show Alphabetically.
  
  
• JSF Validators /Converters: Components that modify or validate data in other components but are not themselves displayed.
  
  
• Advanced: JSP tags for advanced JSF features. These tags generally do not have a visual appearance and are only useful if you are familiar with both the JSP and JSF technologies.

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.

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.

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.

Figure 4: Application Outline.

The Application Outline contains separate sections for all the pages in your web application (open pages are represented in boldface) as well as for the session 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 <html> tag and nesting inward to all HTML elements and components the page contains.

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.

Each time you add a component to the page, or change any page element's properties, you are also modifying the underlying JavaServer Pages^TM (JSP^TM 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.

Figure 5: JSP Code.

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.

Figure 6: Property Sheet.

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.

• The ID property is at the top under the General category (General > (id)). The ID is a unique identifier (the variable name) for that component. That name is used to refer to the component in the Application Outline, and is also used to refer to this component when you modify the Java code that backs this page (the page bean). IDs are assigned automatically as you create new components, although it is always a good idea to change them to refer to your components by more specific names.
  
  
• The value property is in the Data category of the property sheet (Data > value). Most components have a value, although what that value refers to varies depending on the component. For example, for the Button component, the value refers to the text that appears on the button itself when it is displayed. For Text Field or Output Text components, the value is the actual text that field contains which is displayed on the page.

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.

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, button1_action). Add the Java code for the behavior of your web application to this method.

The features of the Java Editor include the following:

• You can hide the body of any method in the page bean (or in any file you edit in the Java Editor) by selecting the minus sign next to the method signature. This collapses or "folds" the body of the method, hiding it from view and providing a more compact overview of the file.
  
  
• Code with syntax errors is underlined in red, and a red box appears along the left edge of the editing area. If you type something wrong or forget a semicolon, you'll need to fix those lines before your Java code will compile. Hovering over the line with the mouse will bring up a tool tip explaining the error.
  
  
• As you type, menus of available options (for example, methods and variables for the current object) appear at the insertion point. As you continue typing, the number of available options decreases. You can open Javadoc tool-generated documentation for any of the options in these menus by selecting an item from the menu. Double-click any item in the menu for its code to be inserted for you.
  
  
• To display the documentation for any class, variable or method name, place the cursor on the item for which you need help and then press Ctrl+Shift+Space.

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.

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:

• The Dynamic Help window displays general help topics about the development environment and the kinds of tasks you can accomplish in the Java Studio Creator IDE. The Dynamic Help window is in the upper right corner of the IDE workspace, behind the property sheet. Click the Dynamic Help tab at the bottom of the property sheet to view it, or choose use View > Dynamic Help.
  
  
• Context-sensitive help is available for many elements of the IDE workspace. To access context-sensitive help, move the mouse over the element you want help with, and press the F1 key. A help screen appears and help is displayed in that screen.
  
  
• The Java Studio Creator Developer Program Portal with tutorials, FAQs, and online forums where you can discuss issues with our developer support and other developers. You can access this web site from inside the IDE from Help > Creator Developer Portal > Home.

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:

• Developing a Web Application
• Linking Components to Data

See Also

See the following tutorials for information about features of the Sun Java Studio Creator IDE:

• Application Model. Application Infrastructure: What the IDE Provides describes the end-to-end application development model provided.
• Components. See About Components for an overview of the standard components and how to use them.
  
• Page Navigation. See Using Simple Page Navigation for more information about the Navigation Editor and how to start linking pages.
  
• Converter and Validator Components. These components operate on the data contained in other components. See Using Validators and Converters for more information.
  
• Database Queries. The Query Editor enables you to edit the SQL query for rowsets you place in your web application. See Using Databound Components to Access Databases for more information on using databases in your web application.
  
• Using Web Services. Web services are available from the Server Navigator. See Accessing Web Services for more information.