A Tour of Java Studio Creator

This chapter is from the book 

2.2 Creator Views

Figure 2-1 shows Creator's initial window layout in its default configuration. When you first bring it up, no projects are open and Creator displays its Welcome window.

Figure 2-1 Creator's initial window layout

There are other windows besides those shown in the initial window layout. As you'll see, you can hide and display windows, as well as move them around. As we begin this tour of Creator, you'll probably want to run Creator along with the text.

Welcome

The Welcome window lets you to create new projects or work on existing ones. Figure 2-2 shows the Welcome window in more detail. It lists the projects you've worked on recently and offers selection buttons for opening existing projects or creating new projects.

Figure 2-2 Creator's Welcome window

To demonstrate Creator, let's use a project that we've already built with Creator. The project is in directory FieldGuide/Examples/Projects/Login1.

1. Select the Open an Existing Project button and browse to the FieldGuide/Examples/Projects directory for Java Creator Field Guide.

2. Select Login1 (look for the projects icon) and double click. This opens the Login1 project and displays the design canvas for the project's first page.

Design Canvas

Figure 2-3 shows a close-up of the design canvas window for project Login1. You see the design grid and the components we've placed on the canvas. As you select the individual components, their properties appear in the Properties window (not shown here).

Figure 2-3 Creator's design canvas showing project Login1

Each project in Creator can have many files associated with it. Here, the design canvas window displays the design view of file Page1.jsp. You can have more than one of your project's files open at a time (currently, there's just one open). When you open other files, their file tab appears at the top of the editor pane. You use the File Tab to select other files.

The editor pane allows you to manipulate elements of your project. When the design canvas is showing, you can select components, validators, or converters from the palette. From the Server Navigator windows you can select nonvisual components, such as data sources or web services. In the design canvas, you see the components we've added to this page: a text field component, a secret field component, two component labels, two buttons, a message list component, and an output text component used as a page title.

Creator allows you to configure your display's workspace to suit the tasks you're working on. All the windows can be hidden when not needed (click the red X in a window's title bar to close it). To view the window again, select View from the menu bar and then the window name. You can dock Creator windows by selecting the pushpin in the window title bar. This action minimizes the window along the left or right side of the workspace. Make it visible again by moving the cursor over its docked position. Undock it by toggling the pushpin icon.

Select the button labeled "Login" on the design canvas. This will bring up the button component's Properties window, as shown in Figure 2-4.

Figure 2-4 Properties window for button component "Login"

Properties

Creator lets you configure the components you use by manipulating their properties. When you change a component's properties, Creator automatically updates the JSF source for you. Here are the login button's properties.

The id attribute uniquely identifies the component on the page. Creator generates the name for you, but you may want to change it (as we have in this example) to more easily work with the generated code. You can use the style attribute to change its appearance. If you click in the editing box opposite style, you can see what it's set to. The position attribute reflects the component's position on the page. When you move the button component, Creator updates this for you.

The value attribute under Data holds the button's label. Click on the Login button again in the design canvas and from the keyboard begin typing a new label. You'll see that Creator automatically selects the value attribute in the Properties window and enables editing as you begin typing. Finish editing with <Enter>.

Under Events, the action attribute is set to login_action(). This refers to an event handler method in the Java page bean that controls what happens when the user clicks the button.

Each component has a different list of attributes (although many attributes are the same). As you select other components in the design canvas, note that the list of attributes in the Properties window changes.

Palette

Figure 2-5 shows the JSF Standard Components window and JSF Validators/ Converters window. These are the palettes that let you select components and add them to your page. Page designers, for example, select a component and drag it to the design canvas, positioning it on the page. Once the component is on the page, you can configure it by changing the attributes in its Properties window.

Figure 2-5 JSF Standard Components and Validators/Converters windows

Click on the bar labeled JSF Validators/Converters to see these components. You can select these just like the standard components. When you drag one to the canvas and drop it on top of a component, the validator or converter will bind to that component. (To test this, select the Length Validator and drop it on top of the userName text field component. You'll see a length validator #{Page1.lengthValidator1.validate} defined for the text field's validator attribute in the Properties window.)

Note that the components, validators, and converters all have icons next to them. Creator uses these icons consistently so you can easily spot what kind of component you're looking at. For example, reselect the JSF Standard Components bar in the palette and then select the Login button component on the design canvas. Now look at the Application Outline view. You'll see that the icon next to the button component in the JSF Standard Components palette matches the Login button in the Application Outline window.

Application Outline

Figure 2-6 is the Application Outline window for project Login1. (Its default placement is in the lower-left portion of the display.) The Application Outline window is handy because it shows both visual and nonvisual components for the page that's currently displayed in the design canvas. You can select other pages (here we have LoginGood.jsp and LoginBad.jsp) as well as the preconfigured managed beans, SessionBean1 and ApplicationBean1. These JavaBeans components are handy to hold your project's data that belong in either session or application scope, respectively. (We discuss scope issues for web application objects in "Scope of Web Applications" on page 128.)

Figure 2-6 Creator's Application Outline window for project Login1

Some components are composite components, meaning that they contain nested elements. The Application Outline window will show this structure and allow you to expand and compress the display (using '+' and '-') as needed.

When you placed the length validator component on the userName text field, it appeared here as component lengthValidator1. Delete it by selecting it in the Application Outline view, then right-click and select Delete from the context menu. The validator should disappear from the Application Outline view. Select the text field component userName and reset its validator attribute to null.

Now let's look at the Project Navigator window.

Project Navigator

Figure 2-7 shows the Project Navigator window for project Login1. Its default location is in the lower-right corner. Whereas the Application Outline view displays the components for individual pages and managed beans, the Project Navigator window displays your entire project. Project Login1 contains three JSP pages: Page1.jsp, LoginGood.jsp, and LoginBad.jsp. Double-click on any one of them to pull it up in the design canvas. When the page opens, Creator displays a file name tab so you can easily switch among different files in the design canvas.

Figure 2-7 Creator's Project Navigator window for project Login1

When you create your own projects, each page comes with a Java component "page bean." These are Java classes that conform to the JavaBeans structure we mention in Chapter 1 (see "JavaBeans Components" on page 13). To see the Java files in this project, expand the Java Sources folder (click on the '+'), then the login1 folder. When you double-click on any of the Java files, Creator brings it up in the Java source editor. Without going to the editor, you can also see the Java classes, fields, constructors, and methods by expanding the '+' next to each level of the Java file.

The Project Navigator also lists the Resources node, which lives under the Web Pages node. The Resources node typically holds file stylesheet.css and any image files. The Library References node lists the libraries Creator needs to deploy your application. These are all of the JSF, Web Services, JDBC Rowset, and Exception Handler support classes. These class files (compiled Java classes) are stored in special archive files called JAR (Java Archive) files. You can see the name of the JAR files by expanding each of the nodes under Library References. ^[1] We show you how to add a Library Reference to your project in Chapter 5 (see "Add a Library Reference to Your Project" on page 133).

By default, the Project Navigator window shows you the Logical View of your project. Select the project name Login1, right-click, and choose Show FileSystem View from context menu, shown in Figure 2-8. The FileSystem View shows all of the files in your project. This is handy for editing a configuration file that doesn't have a "visual editing interface." For example, expand the view until you see file web.xml, as shown below. Double-click this file. Creator brings it up in the editor pane. You can close the window again by selecting its File Tab at the top of the editor pane, right-click, and choose Close.

Figure 2-8 The FileSystem View of the Project Navigator window.

JSP Source Editor

With Page1.jsp in the design editor, bring up the JSP for this page by clicking the tab labeled Source at the bottom of the editor pane. Figure 2-9 shows Creator's JSP Source Editor.

Figure 2-9 Page1.jsp Source window

This is the JSP source that Creator generates for your page. Normally, you will not need to edit this page directly, but studying it is a good way to understand how JSF components work and how you can configure them by managing their properties. You'll see a close correspondence between the JSF tags and the components' properties as shown in the Properties window.

You'll also note the JSF Expression Language (EL) used to refer to methods and properties in the Java page bean. For example, the login button's action attribute is set to #{Page1.login_action}, which is a method in class Page1.java.

Let's look at the Java source for Page1.java now. Return to the design canvas for this page (select the tab labeled Design at the bottom of the editor pane). Right-click on the design canvas and select View Page1 Java Class from the menu.

Java Source Editor

You're looking at Creator's Java source editor for Java file Page1.java, the page bean for Page1.jsp. This Java file is a bean (conforming to a JavaBeans structure). Its properties consist of the components we placed on the page: each component corresponds to a private variable and has a getter and setter. This allows the JSF EL expression to access the properties of the page bean.

There's a dropdown menu at the top left of the window. You can use this menu to locate a field, method, or constructor in the file. Open the dropdown menu and select method login_action. Figure 2-10 shows this view.

Figure 2-10 Page1.java Java source editor

There's much to learn about the Java source editor, so we'll just touch on a few tidbits now. First, we enabled line numbers here. To do this for your display, right-click in the margin (on the left-side of the editor window) and select Show Line Numbers. You see that method login_action() begins at line 166.

All of Creator's editors are based on NetBeans. The Editor Module is a full-featured source editor and provides code completion (we show an example shortly), a set of abbreviations, and fast import <Alt-Shift-I>.

To see the set of abbreviations, select Tools > Options from the menu bar. The Options dialog pops up. Under Options, select Editing > Editor Settings > Java Editor. On the right side of the display, click the small editing box next to Abbreviations. Creator pops up the window shown in Figure 2-11.

Figure 2-11 Java source editor list of abbreviations

The window lists the abbreviations in effect for your Java editor. (You can edit, add, or remove any item.) For example, to add a for loop to your Java source file, type the sequence fora (for array) followed by <Space>. The editor adds

for (int i = 0; i < .length; i++) {
   }
   

and places the cursor in front of .length so that you can add an array name. (.length refers to the length of the array object. This code snippet lets you easily loop through the elements of the array.)

The Java source editor also helps you with Java syntax and code completion. All Java keywords are bold, and variables and literal Strings have unique colors (you'll see that in your display; in the text here, it's different shades of gray).

When you add statements to your Java source code, the editor helps you by dynamically marking syntax errors (in red, of course). The editor also pops up windows to help with code completion or package location for classes you need to reference (press <Ctrl-Space> to activate the code completion window). For example, Figure 2-12 shows the code completion mechanism as you start to type a method that begins with "e" for a String object (on line 168).

Figure 2-12 Java source editor code completion

When you use the down-arrow to select method equals(), the help mechanism displays the Javadoc documentation about equals() for java.lang.String. With method equals() highlighted, press <Enter>. The code completion does more for you than you really want here. Delete all the characters after "equals" up to the parenthesis in front of "userName." The syntax errors should disappear. (To retrieve Javadoc documentation on any class in your source file, select it and press <Ctrl-Shift-Space>.)

Clips Palette

When the Java Source editor is displayed, Creator replaces the component palette with the Clips palette, as shown in Figure 2-13. Here we select the Java Basics Clips. Highlight clip Concatenate Strings. If you hold the cursor over the clip name, Creator displays a snippet window. You can drag and drop the clip directly into your Java source file. We do this when we build our first sample project in the next section.

Figure 2-13 Java Basics Clips Palette and Viewer

To view or edit a clip, select it, right-click, and choose Edit. The second window in Figure 2-13 shows the Concatenate Strings clip.

The Clips palette is divided into categories to show sample code for that general topic. For example, if you click Application Data, you'll see a listing of clips that shows you how to access objects defined in your web application's different scopes.

Page Navigation Editor

Return to the Java Source window and look at method login_action(). You'll see that this method returns one of two Strings: either "loginSuccess" or "loginFail". These Strings are returned to the action event handler, which then passes them to the navigation handler. The navigation handler manages page flow. Let's look at the Page Navigation editor now.

1. From the top of the Java source window, select the tab labeled Page1.jsp. This returns you to the design canvas for this page.

2. Now right-click in the design canvas and select Page Navigation from the context menu. Creator brings up the Page Navigation editor for project Login1, as shown in Figure 2-14.

   Figure 2-14 Page navigation editor for project Login1

We mentioned earlier that there were three pages in this project. The Page Navigation editor displays these pages and indicates page flow logic with labeled arrows. The two labels originating from page Page1.jsp correspond to the return Strings we just looked at in the action method login_action().

You learn how to specify Navigation in Chapter 4 (see "Page Navigation" on page 96). The Page Navigation editor is also a handy way to bring up any of the project's pages: just double-click inside the page. As you bring up each page, a corresponding file tab appears at the top of the editor pane. And once you've visited the Page Navigation editor, Creator displays a file tab called navigation.xml so you can easily return.

Before we explore our project any further, let's deploy and run the application. From the menu bar, select Build > Run Project. (Or, click the green chevron on the toolbar icon, which also builds and runs your project.)

Build Output Window

Figure 2-15 shows the build output window just as the application is finishing deployment. Creator uses the Ant build tool to control project builds. This Ant build process requires compiling Java source files and assembling the resources used by the project into an archive file called a WAR (Web Archive) file. Ant reads its instructions from a Creator-generated XML configuration file, called build.xml, in the project's directory structure.

Figure 2-15 Build Output window for project Login1

If problems occur during the build process, Creator displays messages in the Build Output window. A compilation error with the Java source is the type of error that causes the build to fail. When the build succeeds (the window will show BUILD SUCCESSFUL, as you see above), Creator tells the application server to deploy the application. If the application server is not running, Creator starts it for you. If errors occur in this step, messages come from the application server. Finally, it's possible for the deployment to be successful but for an exception to be shown in the browser's web page. A likely source of this type of error is a problem with JSF tags on the JSP page or a resource that is not available for the runtime class loader.

When the build/deployment process is complete, Creator brings up your browser with the correct URL. (The status window displays "Starting browser for http://localhost:18080/login1.") So, to run project Login1 with the Sun J2EE 1.4 Application Server, Creator uses this web address.

http://localhost:18080/login1/

You use localhost if you're running the application server on your own machine; otherwise, use the Internet address or host name where the server is running. The port number 18080 is unique to Sun's J2EE application server. Another server will use a different port number here.

The Context Root is /login1 for this application. The application server builds a directory structure for all its deployed applications, and the context root is the "base address" for all the resources that your application uses.

Figure 2-16 shows the Login1 project deployed and running in a browser. Type in some values for Username and Password. If you leave the Username field empty, you'll get a validation error. The correct Username and Password is "rave4u" for both fields.

Figure 2-16 Login page web application

If you type in the correct values and click the Login button, the program displays page LoginGood.jsp. Incorrect values display LoginBad.jsp. You'll build project Login1 from scratch in Chapter 4 ("Dynamic Navigation" on page 111).

It's time now to explore the Server Navigator window, located in the upper- left portion of your Creator display. Click the tab labeled Server Navigator.

Server Navigator

Figure 2-17 shows the Server Navigator window after you've deployed project Login1. Four categories of servers are listed here: Data Sources, Web Services, Deployment Server, and Database Server.

Figure 2-17 Server Navigator window

The Data Sources node is a JDBC database connection. The default database server is PointBase, but you can configure a different one. Creator comes configured with several sample databases, which are visible if you expand the Data Sources node.

Now expand the Travel > Tables node to see the database tables as shown (there are four). As you select different tables, Creator displays their properties in the Properties window.

You can expand each table further and see the database table field names. If you double-click on the table name, Creator displays the data in the editor pane, as shown in Figure 2-18. You can close the table view by selecting the tab labeled Table View, right-click, and select Close from the context menu. We discuss creating web applications that access databases in Chapter 7 (see "Accessing Databases" on page 204).

Figure 2-18 Selecting View Data under the Data Sources node

The second server type is Web Services, which provides access to remote APIs from Creator applications. This requires the cooperation of several Java technologies, which we discussed in Chapter 1. When you install Creator, it includes a web services API to access Google. In Chapter 6 we show you how to create an application that uses the Google web service API.

The third server type is the Deployment Server, which is the application server. Sun's J2EE 1.4 application server is Creator's default deployment server, which manages the deployment of web applications that you create. To start or stop the server, select the Deployment Server node, right-click, and select Start/Stop Server. Creator pops up a window that allows you to initiate one of these actions, or you can simply close the window.

If you expand the Deployment Server node, you'll see the Deployed Components node. Under this node are the deployed applications. The /login1 application is listed (since you deployed it). You can undeploy an application by right-clicking its node and selecting Undeploy.

The J2EE application server also has administration access through your browser at

http://localhost:14848/asadmin/

You can get there directly from Creator by selecting the Deployment Server node, right-clicking, and selecting Show Admin Console. (The application server must be running for access to the administration port.) Use user name admin and password adminadmin.

Debugger Window

Creator has a debugger that lets you trace the call stack, track local variables, and set watches. You can see this window by selecting View > Debugger Window from the toolbar. To run your application in "debug mode," click on Debug > Debug Project from the menu bar. The application server has to stop and restart if it's not already in debug mode. In Chapter 9 we walk you through the debugger options, setting breakpoints, stepping through code, and other debugging activities.

Figure 2-19 Creator debugger window

Creator Help System

The Creator Help System is probably the most useful window for readers new to Creator. This help system includes a search capability, contents, and an index. You access the help system by selecting Help > Help Contents in the menu bar. In Figure 2-20 we clicked the Index tab and selected entry "binding data to list components." The relevant information appears in the adjacent window.

Figure 2-20 Creator Help window