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.


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

by Richard Pajerski


Posted on Tuesday March 24, 2015 at 12:28PM in Tutorials


Notes/Domino application development has for years targeted the web browser for the GUI but for many organizations, a large portion of apps are written for the native Notes client. While a common path for extending these native apps is to develop a portion of them as web apps, another powerful way is to implement Java applets in forms and pages. Even though Java applets were initially intended for web browsers, we can use use them as though they were native Notes widgets right in the Notes client.

The ability to embed Java applets in the Notes client has been available since Java itself was introduced into the environment way back in the 4.x days. However, applets were a tough sell then for a number of reasons, among them slow load times and sub-par look and feel. It wasn't until Java 6 was available in the 8.x client – a dozen years later – that custom applets became a realistic option for production Notes apps.

Let's look at a custom applet that can retrieve a contact list from a Notes 9 database and let the user export that data to a comma-delimited file. For this example, I'm using the NetBeans IDE (version 8.02) to develop the applet. The applet will compile to a jar archive which we'll import into the Designer client. Familiarity with Java and using Domino Designer will be assumed but since NetBeans and Java Applets in particular are not commonly used in Notes development, I'll try to be a bit more detailed when referring to them.

In Part 1, we'll set up the applet project in NetBeans. In Part 2, we'll walk through getting the applet integrated in Notes. Finally, in Part 3, we'll code the applet source with the main functionality and then refresh the Notes database with the updates.


=================================
Part 1 -- Setting up the NetBeans project.
=================================

Step 1. Create a new Java Project. From the menu, Start > New Project and choose new Java Application. I'm calling the new project ContactExport and using com.example as the default package.

NewJavaProject.png NewJavaFolder.png

By default, this creates a class file called ContactApplet but we're not going to use it. We're going to create a JApplet Form (Step 2) file and use that instead so the ContactApplet file can safely be deleted.

Step 2. Create a JApplet. Create a new JApplet form in the com.example package called ContactExport. This allows us to use the GUI builder in NetBeans which can greatly simplify designing a Swing-based user interface.

CreateJApplet.png NewJAppletForm.png

Step 3. Set Source/Binary Format to JDK 6 and add NCSO.jar as a library. Right-click on the project, then Properties, Source and make sure that the Source/Binary Format (at the bottom of the dialog) is set to JDK 6 which matches the JRE version on Notes 9. Next, in the same dialog, click Librairies on the left-hand navigation and then on the right, Add JAR/Folder. Here we add the NCSO.jar (found in the Notes\Data\domino\java directory) as a library for this project to expose the Notes Java API.

SourceFormat.png NCSO.png

Step 4. Extend JAppletBase. By default, the applet extends javax.swing.JApplet but let's change that to extend lotus.domino.JAppletBase. Next, click the light bulb in the left margin to import the lotus.Domino.JAppletBase package.

ExtendJAppletBase.png

Step 5. Update init() method. Change the applet's init() method to notesAppletInit(). Since we've changed our default class from javax.swing.JApplet to lotus.domino.JAppletBase, we need to use this new method to initialize the applet.

NotesAppletInit.png

Step 6. Add components to the applet. Switch to Design mode (click 'Design' at the top of the source Editor) and drag and drop a JPanel to the applet background; then size it till it covers the entire visual space of applet. Next, add a Start button (JButton) and a progress bar (JProgressBar) to the JPanel. Right-click on the button, click Edit Text and change to name to Start.

JPanel.png JButton.png JProgressBar.png



That completes getting the basics of the applet itself set up. We'll cover making it functional in Part 3. But next, in Part 2, we're going to import the applet into Notes using Domino Designer and show how to embed it in a Notes Page design item.