Tutorial 4


Menu Maintenance and Deployment

In this tutorial we will work with the menuing system and move a menu item from one menu to another. These steps below are an overview, they do not explain in detail how each of the features works. For that information, please see the specific sections of JDesignerPro System Maintenance. We suggest going through this tutorial step by step before learning the more detailed features. This tutorial assumes you have completed Tutorial 2.

Quick Deployment

Once you have completed a Final Build, JDesignerPro sends you automatically to the Deployment Manager. There are two types of deployment, Local and Remote. We will do a local deployment for the SalesOrder screen created in Tutorial 2. Deployment includes setting up an HTML page from which to launch your applet, creating a menu item or adding it to an existing menu hierarchy and managing access control to it. Remote Deployment gives you the ability to move your applications to remote installs of JDesignerPro on production servers.

Step 1. After having completed a Final Compile as in Tutorial 2, above, you should now be at the Deployment screen. If you didn’t just complete Tutorial 2, then load the SalesOrder file from the JDesignerPro/Applications/Examples folder into the Application Builder and press Final Build.

Step 2. In the Deployment Manager, click the Add to Menu tab. The Add to Menu screen is a simple set of fields to determine initial placement of your finished screen. You can move the screen later if desired.

Leave the Add to Menu pulldown as Main. Notice this pull-down list shows all the menus in the JDesignerPro system.

Step 3. In the New Option Number field, enter 1. This determines its placement in relation to the other menu items on the same level. You can enter any number that is not already taken.

Under Tab Description, enter "Sales Order".

Step 4. Press the Add New Option button.

JDesignerPro will create the menu item and instruct you to log back into the system to see the new menu option item in effect. Do so now. When you log back in, or log in as Guest, you will see your new screen as a menu item on the Main menu which is the first menu displayed at login.

The next part of Tutorial 3 shows you how to modify the menu system to change screen placement and create a new menu hierarchy with a drop down menu. This tutorial assumes you did the section above first.

To start, click on System Maintenance tab from the initial log in window.

Menu Maintenance - Move Module and Create Drop Down Menu.

We will make a new tab on the main menu, called Sales Team. This will be a drop down tab that brings us to another menu. It has one tab called Sales Order 2. Clicking on Sales Order 2 loads the SalesOrder class built in Tutorial 2. This is illustrated in the figure below and is how your main menu will look when you log back into JDesignerPro. Note that the Application Builder, System Maintenance and Tools tabs will not be there when you deploy to end users, only the Sales Team tab will appear when an authorized user logs in.

Step 1. Under System Maintenance, click the Menu Maintenance tab. It will load a screen where you can navigate through the menu hierarchy. In the list at the left, click on Main. This will reveal a set of menus below it. We are going to move the Sales Order screen to appear under a new area.

Step 2. To move it, we first make a menu on which to place it. Press the New button at the bottom of the screen.

Step 3. When the empty form appears, enter "Main" in the Menu field because that’s where we want our new drop down menu to appear. Enter Option Number 30. Option numbers determine the left-to-right placement of menu items. Lower numbers are to the left.

Step 4. For Menu Option Type, select "Menu" from the pull-down. Enter "SalesTeam" in the Points to Menu field (do not enter the quotes). Leave the Module Parameter field blank.

Step 5. In Description on Menu Tab, enter "Sales Team".

Step 6. In the second pull down next to Color of Menu Text/Tab, choose Yellow. This changes the background color of the menu. Leave the other fields as they are, press Apply to create this new menu. Notice that the list is updated to include your Sales Team menu.

Step 7. Click the Sales Team menu in the list. It will open and show that there are no elements in it. The "…" in the list allows you to step back up the hierarchy. We now are going to add the first application screen to the Sales Team menu.

Step 8. Click New. In the Menu field, type "SalesTeam" because that is the name of the menu we just made. In the Option Number Field, type 1.

Step 9. Leave "Program Module" as the selection in the Menu Option Type pulldown. In the Module to Load field, enter "SalesOrder". That is the name of the Java class you built earlier.

Step 10. In the field, Description on Menu Tab, enter "Sales Order 2".

Step 11. In the first pull down next to Color of Menu Text/Tab, choose Red. This will make the tab text red.

Step 12. Press Apply. The next time you log into JDesignerPro you will find the Sales Order 2 tab on the Sales Team menu.

Step 13. Let’s finish by removing the original Sales Order on the Main menu. Click the ellipsis, "...", to go back up one level in the menu.

Step 14. Click the Sales Order option in the list. Press the Remove button. The tab will be removed and the list will refresh. This does not delete the class file. It just removes the menu information from the JDesignerPro system table.

Step 15. Quit JDesignerPro and relaunch it. You will see your menu has been moved to the new location and the other has disappeared. Your screen is ready for use!

You have now successfully created a new screen module and deployed it on two separate menus within your system.

Deploy using an HTML page.

To deploy to an HTML page, you must have JDesignerPro installed in a standard webserver such as Netscape SuiteSpot, MS-IIS or other HTTP server product. If you do not have a webserver or you did not tell the JDP installer about your webserver then you will not be able to run JDP built applications in a web page.

There are two ways to deploy a finished application. The first is by adding it to the JDesignerPro menu hierarchy, the other is to create an HTML file that will load the applet within it when the page is loaded in a browser. Note that the menu system provided is extremely powerful. So far we have only scratched the surface. For more information on creating menus, authorizations and setting up system parameters see the System Maintenance section.

Step 1. To create an HTML page for the SalesOrder application let’s first re-open the application in the Application Builder. Then press the Final Build button to compile the application and allow JDesignerPro to move us to the Deployment tab (in this case the Final Build is not actually required since this application is already compiled, but these are the normal steps for a new deployment).

Step 2. From the Local Deployment tab select Create Html. Here you will see several options that are available to you when defining the HTML (see the Deployment Manager for more details). Enter the desired data and choices in the fields and each will automatically adjust the Java applet tags in the HTML text below. Unless you have specific HTML you wish to add, there is no need for you to type in the HTML text area here.

Step 3. Note that the file name defaults to SalesOrder.html. You can change this if necessary. You may also change the Title of the page.

Step 4. Leave the Class to load as "SalesOrder".

The Deployment Manager's Create Html screen should look like this:

Step 5. Next you can choose whether you would like this applet to bypass the login. Leave this at No for now. If you were to change it to auto you would need to choose the username to automatically log in with.

Step 6. Next you can choose whether the applet should load in the HTML page inside or outside of the browser. Leave this set to Yes.

Step 7. The default width and height of the applet may be adjusted as necessary. 600 by 400 is adequate for most applications built with JDesignerPro.

Step 8. Notice that at this point you can see the complete HTML that is to be created. You can add any additional HTML as desired before pressing the Create button.

Step 9. Press the Create button to create the HTML file in the JDesignerPro directory. The page may now be loaded through the browser using a URL that will be similar to the following: http://www.mydomain.com/JDesignerPro/SalesOrder.html. You can move this HTML file to another Webserver docs directory and it will launch your application from there. This is because the correct codebase parameter is embedded in the applet tag.

Step 10. Now enter this URL into your browser to test that the html page works correctly. Note that you can cut the URL from the JDP status bar using Ctrl-C so you can paste it directly into the URL field of your browser.