6 A quick tour of the editor
This chapter provides a quick tour of the Carousel editor within NetBeans. The main features of the editor and the main steps involved in creating an application are described. The chapter is intended only as an introduction so that you can begin exploring the features built into the editor. Later chapters will cover each of the topics in more detail.
Creating a new project
NetBeans includes a range of templates for creating various pieces of applications. The Carousel templates are unsurprisingly listed under the Carousel heading.
To access the templates choose File | New from the main menu.
The templates included in Carousel are as follows:
New Project: Creates a the stub of a new project
New Page: Creates a blank page within the current project
To create a new project choose the New Project template. The template is shown below
.
To complete the template you must choose a directory into which the new project will be generated. To get started quickly you can just choose the default settings once you have set the target directory.
For the most part the options for creation of the new project are simple.
The settings page also gives options for the project name, which is the name that will be used to identify the project within NetBeans. The application title is the text that appears in the application title bar, this is also the text that some operating systems used to identify the running application. The remaining settings affect the way the application is presented and behaves.
When the application first appears it can be centred on screen or it can appear in the top left of the desktop, the ' Center on screen ' checkbox controls this behavior. The application may also be embedded in an HTML page as an applet or it may be run as a standalone application. In either case it is possible to show the applet/application in a popup window. This window does not have the usual sizeable window border. The ' Popup Window ' checkbox controls this option.
The ' Window Size ' section is straightforward and simply lists some standard window sizes for the new application.
By default the first page displayed is called ' welcome.xml ', but you can choose to display a different page at startup by entering the name of the first page. There is no need to specify the ' .XML ' suffix as this will be assumed, if there is no Java class called by the name of the startup page.
One option you should take care to set correctly is the package name. This can often be confused with a path and instead it is the Java Language package name. For anyone not familiar with package names the appendix gives a brief overview of this language feature
The ' Log level ' controls the amount of information that is displayed in the console while running the application. This applies only when running the application with debug versions of the libraries (the default in Carousel).
The Frameset Configuration optionally allows you to configure your application as multiple pages within a single frame or as a single page. Sometimes a frameset is used when common elements repeat across multiple screens, say for example a navigational control panel or a banner headline.
The project is configured with multiple files to help separate the various forms of content. The most important of these are listed in the ' File name configuration ' page.
The final page of the new project wizard provides a place to configure some add-ons for Carousel. These options are intended for more experienced users but essentially they allow you to extend the types of components, data bindings and validations that can be used in an application. The parameters are all class names. More details about these options will be given in later chapters.
Once the new project has been created the various folders and configuration files are setup. Some page stubs will also be created ready for you to start building content.
If you have any doubts about the options when creating the project there is no need to worry as all the options available in the new project wizard are also available on the project page. This page is opened once the initial generation of the project is finished.
Once the project is created it is shown in the Project view, which shows all the classes and packages within the project. The Files view shows all the files and resources that are used in the project.
The build.xml file is listed in this view and can be used to trigger actions such as the compiling, building and testing of the application.
A number of directories are created under the project's main directory or folder. The directories are as follows:
Table 6-1 - Project folders
|
|
|
|
|
Stores the XML page declarations.
|
|
|
Stores the language files used for translation of the application.
|
|
|
Holds various resources used in the project including graphics, configuration files and so on.
|
|
|
The source code for the Java classes is held in this folder. Another folder (classes) may also be created depending on the configuration. The classes folder is a temporary folder and may be deleted at any time.
|
The project view
Once a new project has been created the project is automatically opened. The project editor contains much of the information that was in the New Project template and allows you change the project settings at any time during the project lifecycle.
At the top of the project view there is a set of buttons for access to additional parts of the project configuration. The options available in these windows affect all parts of the application, such as the page size and the frameset layout. Some of the options also affect the runtime behavior by adding extensions and modifying the classpath.
Pages and resources
Creating a new page in Carousel is again achieved by choosing File|New . A template is also used to create the page, but this time all you need to do is choose a name for the page and its location. The page should be placed in the 'pages' subdirectory of the project.
Later we will see how to add rules and Java code to the page and your will learn that the page name is used as the basis for a Java file. As Java is particular about class names it is best to conform to Java's naming conventions when choosing a page name. Thus the name should be a single word, starting with a capital letter.
The page designer
Once a new page is created it is opened for editing in the editor. Here's an example of a simple page.
At this point it is worth noting some of the overall features of the editor.
Table 6-2 - Areas of the editor
|
|
|
|
|
On the left is a hierarchical view of the project and the filesystems used by the project. The filesystem corresponds to the Java classpath used by the project. Underneath the project folder are various folders into which the different categories of files and resources are saved. Notice the pages folder which naturally enough contains the pages belonging to the project.
|
|
|
In the centre is the editor area. The screenshot above shows the page designer. The page designer is docked in this area and other editors can be selected via a set of tabs along the top edge of the editor.
As the editors are activated or deactivated they may cause other windows to appear or disappear according to the context. While the page designer is active several other windows are shown and docked into the right hand side of the main window.
|
|
|
On the right hand side are three windows. The component palette, the component inspector and the styles properties window. Also visible but not active is the component properties window which shares screen space with the style properties window.
|
Components
At the top right of the editor, when the page designer is active you will see the component palette. The content of the component palette will depend on the type of application being developed and whether or not any extensions have been added to Carousel.
As a minimum there will be several core components shown. These are:
Table 6-3 - Component palette icons
|
|
|
|
A button object, usually used to initiate some event or action.
|
|
A check box, indicating an option selectable by the user. Where options are mutually exclusive a set of radio buttons should be used.
|
|
A drop down list or combo box, representing a list of choices. A drop down list is usually used where there is a small number of options or where the number of options is too great for a set of radio buttons.
|
|
An edit field, an input field where the user can enter a simple value. An edit field is a key input mechanism and Carousel provides support for validation of input data using edit fields.
|
|
An image component. Used to display images stored in the resources folder. Can be used with a MouseHandler to interact with the user.
|
|
A hotspot, a clickable area that can be placed over another object so that when the user click on the hotspot some action occurs.
|
|
An imagemap, like a hotspot except that an irregular/polygonal area can be specified as the clickable area. Like a hotspot the user can click to invoke an action.
|
|
A Label, a simple piece of text. The label text does not normally cause any interaction with the user
|
|
A Panel, a container into which other components can be placed. The panel can optionally be made to display a frame or border.
|
|
A password edit field, a special case of an edit field used for entering a password. As the user types the value of the password the field displays a mask character for each letter or character typed.
|
|
A scroll panel, a special form of a panel that supports scrolling. The pane can optionally be scrolled horizontally or vertically. The scroll pane automatically adjusts itself to the size of its content.
|
|
A table, a simple table component that can display data directly from the model. Headers and alternate row shading are just two of many features that the table control supports.
|
|
A text field, a simple text field. This component supports multiple lines of text.
|
The user can add any of these components to the page by first selecting a component from the component palette and then placing it by clicking at the desired location on the page.
Components can be nested by placing panels on the page and then placing additional components on the new panel. The panel is then considered to own the new components or children. When the panel is moved so too are the children.
As each component is selected the properties of that component are displayed in the properties palette, the style palette and the component inspector. Properties can be changed by choosing options within the properties palettes or by double clicking on styles. The component inspector is primarily a mechanism for showing the hierarchical relationship between components.
Multiple components can be inspected at once but only the common subset of the properties will be available in the various palettes and you may not always be able to interact with all properties.
When fully configured Carousel may include several sets of components or widgets. The components belonging to these widget sets are displayed on separate tabs within the component palette. The availability of some of these widget sets may depend on the project configuration, for example if an AWT application has been chosen then the Swing widgets will not be available.
Styles
Styles in Carousel comprise sets of colors and fonts that can be applied to just about any component. The style palette provides a simple way to interact with the styles, by simply selecting a component and double clicking a style value.
Styles can also be changed by simply changing the style file or by changing individual styles (by right clicking on the style palette). Carousel even includes a color scheme picker (which again can be accessed by right clicking on the style palette).
The color scheme picker is designed to allow you to quickly choose and experiment with styles that will produce a visually attractive application.
Source code
An application generally isn't a lot of use unless it can do something. Carousel is designed to make it easy to build applications and therefore adding custom functionality and business logic is simple.
When you select a component you will see its properties in the property sheet. Depending upon the component type this property sheet may display some event properties. For example a push button will have an ActionHandler property. By typing in the name of the source code method you can edit the Java source code for that method, and if no such method exists the stub of a new method of that name will be inserted into you Java source code file.
Later we will see how such an event handler is actually connected up to the user interface. However it is worth noting that Carousel declares such links in the page's XML. You can switch back and forth to this XML by clicking the ( Design and XML ) buttons at the top of the page designer.
Of course you can also find the Java code in the Files view and open the file directly. The file is just a normal Java file and there are no hidden or special sections to worry about.
For example to add a piece of application logic simple choose the component that will initiate the action and within the properties palette find the appropriate response and just enter the name of the response method. Upon pressing Enter the source editor is opened and you can edit the Java code belonging to the event. At any stage you can switch back to the page designer by clicking on the tabs above the source editor or by closing the source editor.
In later chapters we will see just how to begin coding custom business logic.
XML
As a technology both the KalIDEoscope and Carousel make extensive use of XML. XML is used to describe a wide variety of things in Carousel, including the user interface. The XML for a UI can be displayed by choosing the XML tab for that page. Furthermore Carousel allows two-way editing of the XML whereby any edits to the XML will be reflected in the page and any changes to the page within the page designer will be displayed in the XML. The updates occur as the display is modified by choosing the tabs along the top of the editor.
Later chapters will explain Carousel's use of XML in greater depth.
Compilation
Writing code for an application is the first step in making working code. Java is a compiled language and therefore the source code needs to be compiled. The quickest and easiest way to do this is to right click on the project node in the XUI view. The context menu then shows a compile all option and choosing the Compile or Execute option will compile all classes within the project.
NetBeans also includes many options to control compilation, building and testing of an application and you should refer to the NetBeans documentation for more information on the available options.
Testing
Once the project has been successfully compiled you should test it prior to distribution. Carousel and the underlying NetBeans platform provide a powerful testing and debugging environment. To test an application simply choose the Debug Project option from the popup menu on the tree icon for the project in build.xml file in the Files View.
Deployment
Finally to make widespread use of your application you need to package and deploy the application. There are wide variety of deployment scenarios and these will be covered in detail in later chapters.
If you were logged in you could rate this article or add a comment.
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)
;)