After creating the server side of your Gantt JavaScript ™ Web application, you create the client side. The Gantt JavaScript Web application support allows you to easily build a client based on JavaScript that runs on Web browsers that support JavaScript. You build an HTML Web page for the JavaScript client using predefined JavaScript™ components.

The static nature of HTML limits the interactivity of Web pages. JavaScript™ allows you to create Web pages that are more interactive and engaging. It gives content providers new controls and allows them to manipulate the contents of HTML pages through scripting. To learn more about JavaScript, you can search for the following items on websites:

Rogue Wave®  JViews Gantt provides a set of browser-independent JavaScript™ components that allow you to build your Web pages very easily.

Common JavaScript components

See also The IlvView JavaScript Component in Rogue Wave JViews Framework Advanced Features.

The common JavaScript ™ components are located in the directory:

Here is an overview of the common JavaScript component classes and their relationships:

Here is the list of common JavaScript files and a brief description of each:

The full reference documentation of each component can be found in the JavaScript component reference located in:

Gantt JavaScript components

The JViews Gantt JavaScript components are located in the directory:

Here is an overview of the Gantt JavaScript component classes and their relationships:

Here is the list of JViews Gantt JavaScript files and a brief description of each:

The full reference documentation of each component can be found in the JavaScript component reference located in:

You can now create a JavaScript ™ client for the Gantt Servlet example, starting with a very simple example and including most of the JavaScript components. The full HTML file for the Gantt Servlet example is located in: <installdir>/jviews-gantt/samples/servlet/webpages/index.html

This section covers:

Directory structure of the Web application

Before you start using the Gantt JavaScript components to build the client, you must first decide on the directory structure that the users see when they visit your Web application with their browser. This structure does not, and should not, match the location of the example and JavaScript files in the Rogue Wave  JViews Gantt distribution. The Gantt Servlet example is developed to use the following directory structure:

The Ant build file for the Gantt Servlet example:

creates this directory structure in the gantt-thinclient.war Web Archive.

The IlvGanttView JavaScript component

The IlvGanttView component (located in the IlvGanttView.js file) is the main Gantt JavaScript component. This component queries the servlet and displays the resulting image of the chart. The steps are as follows:

Importing the JavaScript files

First, you must include the JavaScript files that are required to use the IlvGanttView component:

Here is a simple HTML page that creates an IlvGanttView object:

The example starts with importing the necessary JavaScript files:

The JavaScript files must be placed in the head of the page. Note that the scripts are included from the relative script subdirectory. Remember that when you build the JavaScript Web application, the HTML Web pages are placed in the upper directory and the scripts are in the script directory (see Gantt JavaScript components).

Creating the Gantt View

In the body of the page, you create an IlvGanttView located in (25, 25) on the HTML page. The size is 350 x 700. This view displays images produced by the servlet GanttChartServlet. Note the toHTML method that creates the HTML necessary for the component.

Defining JavaScript functions

This example also defines two JavaScript functions:

Once the image is loaded from the server, the page looks like this:

The message panel

You can now add a JavaScript panel below our main view. A JavaScript panel is an area of the page that can contain some HTML content. You can use the JavaScript panel to display status messages as the user interacts with the JViews Gantt view. You create the message panel using the class IlvHTMLPanel, defined in the IlvUtil.js file.

The body of the page is now:

Note that the class IlvHTMLPanel does not have a toHTML method, it generates its HTML content immediately from within its constructor. Also, the IlvHTMLPanel is initially hidden. You must explicitly call its setVisible method to show it on the page. These are the main differences between the JavaScript “view” components and the JavaScript “panel” components.

In this example, the main Gantt view is made interactively resizable. To this effect, there is a layoutPage function that positions the message panel relative to the current size and position of the main Gantt view:

The layoutPage function is then called to perform the initial arrangement of the components:

The method addSizeListener is called to listen for resize events on layoutPage from the IlvGanttView:

The Web page now looks like this:

Interactively resizing the Gantt view

You can now make the main Gantt view interactively resizable by calling the setResizable method:

Our IlvGanttView now displays a resize tool at its lower right corner:

You can now click and drag on the tool to interactively resize the Gantt view. When the resize operation completes, the layoutPage method is invoked, and the position of the message panel is updated to match that of the main view.

Decorative panels

Next, you can add some decorative panels around our main Gantt view to improve the appearance of the Web page. You IlvHTMLPanel use to display a tiled image pattern as a background frame:

The background panel must be created before the IlvGanttView.toHTML method is invoked. JavaScript components have an implied z-order in the browser that is determined by the order in which their HTML code is created in the page body. The IlvHTMLPanel component creates its HTML code in its constructor and the IlvGanttView component creates its HTML code in its toHTML method. By placing the background panel before the Gantt view in the page body, you ensure that the panel appears behind the Gantt view.

The ilvImagePath variable, used to define the tiled image for the background panel, is a global variable defined in IlvUtil.js. It contains the path to the images used by the script files. Its default value is script/images, which is the location of the image files relative to the Web pages in the Web application.

You can also add a small company logo to display on the right side of the message panel. You use an IlvImageView component instead of an IlvHTMLPanel because you do not want to tile the logo image:

The IlvImageView component has the additional advantage of remaining hidden until its image is loaded. This is important for a nice appearance when the images take some time to download from the server due to image size or network latencies. Normally, if an image has not been loaded from the server yet, the browser displays a box with a red “X” in it:

The IlvImageView component avoids this effect and remains invisible until the image is available to display.

Finally, you must update the layoutPage method to properly arrange the new panels:

The body of the HTML file now looks like this:

You should now see the following Web page:

IlvToolBar and IlvButton

The IlvButton class is a simple JavaScript button component that allows you to call some JavaScript code when the user clicks it. The IlvToolBar class is a component that you can use to arrange IlvButtons vertically or horizontally. You can now add some buttons to the page to zoom in and out on the chart. The steps are as follows:

Importing the JavaScript files

First, you must include the JavaScript files that define the IlvButton and IlvToolBar classes. The JavaScript import statements now look like this:

Creating the toolbar

In the page body, you first create the vertical toolbar and give it the same background image as the main background panel:

Notice that the initial position of the toolbar is set to (0, 0) and its toHTML function is not called until the layoutPage function has calculated the correct position of the toolbar and generated its HTML code. This approach makes the page more maintainable by encapsulating all the component positioning into the layoutPage function and eliminates complex initial position calculations when you create each component.

Creating buttons

Next, you create three buttons and add them to the toolbar. Each button is defined by its position, size, three images, and a piece of JavaScript to be executed when the button is clicked. The actual positioning of each button is controlled by the toolbar it is contained in, so you simply set the initial position of each button to (0, 0). The three images used by the button are:

The code to create the three zoom buttons is:

The zoomInButton simply calls the zoomIn method of the IlvGanttView, the zoomOutButton calls the zoomOut method, and the zoomFitButton calls the zoomToFit method. Each button also has a message property. The message is automatically displayed in the status window of the browser when the mouse is over the button. The message can also be displayed in an IlvHTMLPanel positioned on the page. This is accomplished by setting the messagePanel property of the buttons.

Updating the layoutPage function

Finally, you must update the layoutPage function to arrange the toolbar on the page and generate the HTML code for the toolbar:

The complete body of the page is now:

The page now looks like this with our new vertical toolbar:

IlvGanttSheetScrollInteractor

Until now, you have added components and buttons to the page. You can now add an interactor that allows direct interaction with the image. The IlvGanttSheetScrollInteractor allows the user to interactively scroll and pan the image of the Gantt sheet. The IlvGanttView component is composed of two child views: an IlvGanttTableView that displays the image of the table on the left side of the splitter, and an IlvGanttSheetView that displays the image of the Gantt sheet on the right side of the splitter. This is shown in Gantt JavaScript components. You set interactors separately on the Gantt table and sheet views. The code to create an IlvGanttSheetScrollInteractor and set it on the IlvGanttSheetView is very simple:

In order to use the IlvGanttSheetScrollInteractor class, you must include the JavaScript files that define the class and its base class, IlvInteractor:

IlvRowExpandCollapseInteractor

The IlvRowExpandCollapseInteractor can be set on both an IlvGanttTableView and an IlvGanttSheetView. It allows the user to click rows in the image to expand and collapse them. You can set the interactor on the Gantt table view. The steps are as follows:

The string ‘toggleRow’ refers to a named action on the server side that this interactor invokes. On the server side, this action is registered with the servlet support object in the file:

in the createServletSupport method:

These types of interactors and how to use them are described in detail in Adding client/server interactions.

IlvInteractorButton

The IlvInteractorButton class is a subclass of IlvButton that installs an interactor on a view. If multiple interactor buttons are defined for the same view, they behave like radio buttons. When an interactor button is pressed, it installs its interactor and remains pressed until another button installs a different interactor.

In this example, you can define an IlvRowExpandCollapseInteractor for the Gantt sheet view. You can then add two interactor buttons to the toolbar that toggle between the scroll interactor and the new row interactor. The steps are as follows:

The body of the page is now:

This results in the following page:

You can now click the first two toolbar buttons to select which interactor is installed on the Gantt sheet view.

The pop-up menu component is attached to the main view. This pop-up menu is triggered by a right-click in the view.

To use the pop-up menu, you must first include the following scripts.

The pop-up menu component is IlvGanttPopupMenu.

The pop-up menu can be contextual or static.

Static pop-up menu

The menu is static, that is, not conditioned by the context in which it is called, and is defined in the HTML file by using IlvMenu and IlvMenuItem instances. The menu is a pure client-side object and there is no round trip to the server to generate the menu.

Contextual pop-up menu

The pop-up menu is dynamically generated by the server depending on:

On the client side, you need only declare the pop-up menu and set it on the view.

On the server side, you need to configure the servlet support to handle pop-up menus and to set the factory that generates the menu.

The factory must implement the IlvMenuFactory interface.

Styling the pop-up menu

You can style the pop-up menu by setting a CSS class name in the following properties:

The following example shows how to use CSS to style the pop-up menu.