Richard Pajerski Software development and consulting

Part 2. Extending the GUI of native Notes apps with Java applets

by Richard Pajerski


Posted on Thursday March 26, 2015 at 11:27PM in Tutorials


In Part 1, we created a Java applet using NetBeans that will allow us to export Notes contact data. In this second part, we're going to walk through getting that applet set up properly in a Notes database. I've created a small database called Contacts and populated it with several contact documents, each with only four fields: First Name, Last Name, Phone and City. In order to highlight the basic goal of applet integration, I'm only going to discuss the database design aspects directly related to the applet.

========================================
Part 2 -- Integrating the applet in the Notes Client
========================================

Step 1. Compile the project in NetBeans. First compile the applet (right-click on the project then Clean and Build). This step will produce a file called ContactExport.jar, which will be created in the project's dist folder.

Step 2. Create a Page element and embed the applet in it. In Domino Designer, create a new Page design element called ContactApplet. Open the page, hit Enter at least once to produce a small page header and then type Export Contact List. Hit Enter again and from the menu, Create > Java Applet. You'll first be presented with a Create Java Applet dialog; click the Locate button in the lower right to get the Locate Java Applet Files dialog. Now click the folder icon beside the Base Directory field to navigate to our project's dist folder (in my case, D<colon><backslash>temp<backslash>ContactExport<backslash>dist). Click Ok and you should now see the ContactExport.jar file. Click Add/Replace File(s) and in the Base class field at the top right, enter com.example.ContactExport.class (which is our applet's main class file). Click Ok twice and save the Page.

CreateJavaApplet.png LocateJavaApplet.png ContactPage.png

Step 3. Link the ContactExport Page element to the default Outline. The Contacts database uses a Frameset and Outline for the main navigation where clicking on the left-hand navigation places the view or page on the right frame. I've already created a default Outline called Main that displays the database's views and now we're going to add an entry to the Outline. The entry will be the ContactExport Page element from Step 2.

ContactOutline.png

At this point, the applet is ready to work in the Notes client. However, we'll need to make some minor adjustments to both the applet and page to improve the presentation.

Step 4. Change applet look and feel and adjust border. For better visual integration, we're going to tell the applet to use the "system" look and feel so that it fits in better with the underlying platform (in this example, Windows 8). In the notesAppletInit method, expand the section labelled "Look and feel setting code". Remove the for{} block and replace it with:

javax.swing.UIManager.setLookAndFeel(javax.swing.UIManager.getSystemLookAndFeelClassName());

This tells Java to pick up the native look and feel for the underlying platform. In addition, since we're only going to be displaying a button and progress bar, we're also going to shrink the applet window size. Simply grab the frame of the applet in the GUI builder and drag to resize. Once you have an appropriate size, double-click the border and record the applet's width and height -- we'll need to use these dimensions for the embedded applet in the page design element.

NotesAppletInit.png RemoveNimbus.png SetLookAndFeel.png ChangeBorder.png



Step 5. Update the page and resize the applet. Be sure to Clean and Build the project again in NetBeans so that a new applet jar file is created in the project's dist directory. Now go back to the ContactApplet page in Domino Designer, right-click on the embedded applet, click Refresh from the menu then Refresh All; click Ok and save the page.

Next, resize the applet in the page to match the dimensions from the applet's window size from NetBeans (Step 4 above). Unfortunately, this must be done with the mouse -- the size properties on the Java Applet properties box is read only.

ResizeNotesApplet.png

Finally, I'm going to change the background color of the page to light gray to better blend with the applet and move applet slightly towards the left margin (Text Properties box).

PageColor.png

And here's what we have so far:

NotesApp1.png



In Part 3, we'll code the applet to select documents from the Notes view and export them to a comma-delimited file.



No one has commented yet.

Leave a Comment

HTML Syntax: Allowed