How to Create a Swing CRUD Application on NetBeans Platform 6.8

Update

In this section, you first create an editor. The editor will be provided by a new NetBeans module. So, you will first create a new module. Then, within that new module, you will create a new TopComponent, containing two JTextFields, for each of the columns you want to let the user edit. You will need to let the viewer module communicate with the editor module. Whenever a new Node is selected in the viewer module, you will add the current Customer object to the Lookup. In the editor module, you will listen to the Lookup for the introduction of Customer objects. Whenever a new Customer object is introduced into the Lookup, you will update the JTextFields in the editor.

Next, you will synchronize your JTextFields with the NetBeans Platform's Undo, Redo, and Save functionality. In other words, when the user makes changes to a JTextField, you want the NetBeans Platform's existing functionality to become available so that, instead of needing to create new functionality, you'll simply be able to hook into the NetBeans Platform's support. To this end, you will need to use the UndoRedoManager, together with the SaveCookie.

1. Create a new module, named CustomerEditor, with org.shop.editor as its code name base.


2. Right-click the CustomerEditor module and choose New | Window Component. Make sure to specify that the window should appear in the editor position and that it should open when the application starts. In the final panel of the wizard, set "Editor" as the class name prefix.


3. Use the Palette (Ctrl-Shift-8) to add two JLabels and two JTextFields to the new window. Set the texts of the labels to "Name" and "City" and set the variable names of the two JTextFields to jTextField1 and jTextField2.

   In the GUI Builder, the window should now look something like this:

   

4. Go back to the CustomerViewer module and change its layer.xml file to specify that the CustomerTopComponent window will appear in the explorer mode.

   Note: Right-click the application project and choose "Clean", after changing the layer.xml file. Why? Because whenever you run the application and close it down, the window positions are stored in the user directory. Therefore, if the CustomerViewer was initially displayed in the editor mode, it will remain in the editor mode, until you do a "Clean", thus resetting the user directory (i.e., thus deleting the user directory) and enabling the CustomerViewer to be displayed in the position currently set in the layer.xml file.

Also check that the BeanTreeView in the CustomerViewer will stretch horizontally and vertically when the user resizes the application. Check this by opening the window, selecting the BeanTreeView, and then clicking the arrow buttons in the toolbar of the GUI Builder.

5. Run the application and make sure that you see the following when the application starts up:

   

6. Now we can start adding some code. Firstly, we need to show the currently selected Customer object in the editor:
   
   
   • Start by tweaking the CustomerViewer module so that the current Customer object is added to the viewer window's Lookup whenever a new Node is selected. Do this by creating an AbstractNode, instead of a BeanNode, in the CustomerChildFactory class. That enables you to add the current Customer object to the Lookup of the Node, as follows (note the "Lookups.singleton(c)" below):

     @Override
     protected Node createNodeForKey(Customer c) {
         Node node = new AbstractNode(Children.LEAF, Lookups.singleton(c));
         node.setDisplayName(c.getName());
         node.setShortDescription(c.getCity());
         return node;
     //        try {
     //            return new BeanNode(c);
     //        } catch (IntrospectionException ex) {
     //            Exceptions.printStackTrace(ex);
     //            return null;
     //        }
     }

   Now, whenever a new Node is created, which happens when the user selects a new customer in the viewer, a new Customer object is added to the Lookup of the Node.

   • Let's now change the editor module in such a way that its window will end up listening for Customer objects being added to the Lookup. First, set a dependency in the editor module on the module that provides the entity class, as well as the module that provides the persistence JARs.
   
   
   • Next, change the EditorTopComponent class signature to implement LookupListener:

     public final class EditorTopComponent extends TopComponent implements LookupListener

   • Override the resultChanged so that the JTextFields are updated whenever a new Customer object is introduced into the Lookup:

     @Override
     public void resultChanged(LookupEvent lookupEvent) {
         Lookup.Result r = (Lookup.Result) lookupEvent.getSource();
         Collection<Customer> coll = r.allInstances();
         if (!coll.isEmpty()) {
             for (Customer cust : coll) {
                 jTextField1.setText(cust.getName());
                 jTextField2.setText(cust.getCity());
             }
         } else {
             jTextField1.setText("[no name]");
             jTextField2.setText("[no city]");
         }
     }

   • Now that the LookupListener is defined, we need to add it to something. Here, we add it to the Lookup.Result obtained from the global context. The global context proxies the context of the selected Node. For example, if "Ford Motor Co" is selected in the tree hierarchy, the Customer object for "Ford Motor Co" is added to the Lookup of the Node which, because it is the currently selected Node, means that the Customer object for "Ford Motor Co" is now available in the global context. That is what is then passed to the resultChanged, causing the text fields to be populated.

     All of the above starts happening, i.e., the LookupListener becomes active, whenever the editor window is opened, as you can see below:

     @Override
     public void componentOpened() {
         result = Utilities.actionsGlobalContext().lookupResult(Customer.class);
         result.addLookupListener(this);
         resultChanged(new LookupEvent(result));
     }
     
     @Override
     public void componentClosed() {
         result.removeLookupListener(this);
         result = null;
     }

   Since the editor window is opened when the application starts, the LookupListener is available at the time that the application starts up.

   • Finally, declare the result variable at the top of the class, like this:

     private Lookup.Result result = null;

   • Run the application again and notice that the editor window is updated whenever you select a new Node:

     

     However, notice what happens when you switch the focus to the editor window:

     

     Because the Node is no longer current, the Customer object is no longer in the global context. This is the case because, as pointed out above, the global context proxies the Lookup of the current Node. Therefore, in this case, we cannot use the global context. Instead, we will use the local Lookup provided by the Customer window.

   Rewrite this line:

   result = Utilities.actionsGlobalContext().lookupResult(Customer.class);

   To this:

   result = WindowManager.getDefault().findTopComponent("CustomerTopComponent").getLookup().lookupResult(Customer.class);

   The string "CustomerTopComponent" is the ID of the CustomerTopComponent, which is a string constant that you can find in the source code of the CustomerTopComponent. One drawback of the approach above is that now our EditorTopComponent only works if it can find a TopComponent with the ID "CustomerTopComponent". Either this needs to be explicitly documented, so that developers of alternative editors can know that they need to identify the viewer TopComponent this way, or you need to rewrite the selection model, as described here by Tim Boudreau.

   If you take one of the above approaches, you will find that the context is not lost when you switch the focus to the EditorTopComponent, as shown below:

   

   Note: Since you are now using AbstractNode, instead of BeanNode, no properties are shown in the Properties window. You need to provide these yourself, as described in the Nodes API Tutorial.

7. Secondly, let's work on the Undo/Redo functionality. What we'd like to have happen is that whenever the user makes a change to one of the JTextFields, the "Undo" button and the "Redo" button, as well as the related menu items in the Edit menu, become enabled. To that end, the NetBeans Platform makes the UndoRedo.Manager available.
   
   
   • Declare and instantiate a new UndoRedoManager at the top of the EditorTopComponent:

     private UndoRedo.Manager manager = new UndoRedo.Manager();

   • Next, override the getUndoRedo() method in the EditorTopComponent:

     @Override
     public UndoRedo getUndoRedo() {
         return manager;
     }

   
   
   • In the constructor of the EditorTopComponent, add a KeyListener to the JTextFields and, within the related methods that you need to implement, add the UndoRedoListeners:

     jTextField1.getDocument().addUndoableEditListener(manager);
     jTextField2.getDocument().addUndoableEditListener(manager);
     

   
   
   • Run the application and show the Undo and Redo functionality in action, the buttons as well as the menu items. The functionality works exactly as you would expect. You might want to change the KeyListener so that not ALL keys cause the undo/redo functionality to be enabled. For example, when Enter is pressed, you probably do not want the undo/redo functionality to become available. Therefore, tweak the code above to suit your business requirements.


8. Thirdly, we need to integrate with the NetBeans Platform's Save functionality:
   
   
   • By default, the "Save All" button is available in the NetBeans Platform toolbar. In our current scenario, we do not want to save "all", because "all" refers to a number of different documents. In our case, we only have one "document", which is the editor that we are reusing for all the nodes in the tree hirerarchy. Remove the "Save All" button and add the "Save" button instead, by adding the following to the layer file of the CustomerEditor module:

     <folder name="Toolbars">
         <folder name="File">
             <file name="org-openide-actions-SaveAction.shadow">
                 <attr name="originalFile" stringvalue="Actions/System/org-openide-actions-SaveAction.instance"/>
                 <attr name="position" intvalue="444"/>
             </file>
             <file name="org-openide-actions-SaveAllAction.shadow_hidden"/>
         </folder>
     </folder>

   When you now run the application, you will see a different icon in the toolbar. Instead of the "Save All" button, you now have the "Save" button available.

   • Set dependencies on the Dialogs API and the Nodes API.
   
   
   • In the EditorTopCompontn constructor, add a call to fire a method (which will be defined in the next step) whenever a change is detected:

     public EditorTopComponent() {
     
             ...
             ...
             ...
     
             jTextField1.getDocument().addDocumentListener(new DocumentListener() {
                 public void insertUpdate(DocumentEvent arg0) {
                     fire(true);
                 }
                 public void removeUpdate(DocumentEvent arg0) {
                     fire(true);
                 }
                 public void changedUpdate(DocumentEvent arg0) {
                     fire(true);
                 }
             });
     
             jTextField2.getDocument().addDocumentListener(new DocumentListener() {
                 public void insertUpdate(DocumentEvent arg0) {
                     fire(true);
                 }
                 public void removeUpdate(DocumentEvent arg0) {
                     fire(true);
                 }
                 public void changedUpdate(DocumentEvent arg0) {
                     fire(true);
                 }
             });
     
             //Create a new instance of our SaveCookie implementation:
             impl = new SaveCookieImpl();
     
             //Create a new instance of our dynamic object:
             content = new InstanceContent();
     
             //Add the dynamic object to the TopComponent Lookup:
             associateLookup(new AbstractLookup(content));
     
         }
     
         ...
         ...
         ...
     

   • Here are the two methods referred to above. First, the method that is fired whenever a change is detected. An implementation of the SaveCookie from the Nodes API is added to the InstanceContent whenever a change is detected:

         public void fire(boolean modified) {
             if (modified) {
                 //If the text is modified,
                 //we add SaveCookie impl to Lookup:
                 content.add(impl);
             } else {
                 //Otherwise, we remove the SaveCookie impl from the lookup:
                 content.remove(impl);
             }
         }
     
         private class SaveCookieImpl implements SaveCookie {
     
             @Override
             public void save() throws IOException {
     
                Confirmation message = new NotifyDescriptor.Confirmation("Do you want to save \""
                         + jTextField1.getText() + " (" + jTextField2.getText() + ")\"?",
                         NotifyDescriptor.OK_CANCEL_OPTION,
                         NotifyDescriptor.QUESTION_MESSAGE);
     
                 Object result = DialogDisplayer.getDefault().notify(message);
                 //When user clicks "Yes", indicating they really want to save,
                 //we need to disable the Save action,
                 //so that it will only be usable when the next change is made
                 //to the JTextArea:
                 if (NotifyDescriptor.YES_OPTION.equals(result)) {
                     fire(false);
                     //Implement your save functionality here.
                 }
             }
         }
     

   • Run the application and notice the enablement/disablement of the Save button:

     

   Note: Right now, nothing happens when you click OK in the dialog above. In the next step, we add some JPA code for handling persistence of our changes.

   • Next, we add JPA code for persisting our change. Do so by replacing the comment "//Implement your save functionality here." The comment should be replaced by all of the following:

     EntityManager entityManager = Persistence.createEntityManagerFactory("CustomerLibraryPU").createEntityManager();
     entityManager.getTransaction().begin();
     Customer c = entityManager.find(Customer.class, customer.getCustomerId());
     c.setName(jTextField1.getText());
     c.setCity(jTextField2.getText());
     entityManager.getTransaction().commit();

   Note: The "customer" in customer.getCustomerId() is currently undefined. Add the line "customer = cust;" in the resultChanged (as shown below), after declaring Customer customer; at the top of the class, so that the current Customer object sets the customer, which is then used in the persistence code above to obtain the ID of the current Customer object.

   @Override
   public void resultChanged(LookupEvent lookupEvent) {
       Lookup.Result r = (Lookup.Result) lookupEvent.getSource();
       Collection<Customer> c = r.allInstances();
       if (!c.isEmpty()) {
           for (Customer customer : c) {
               customer = cust;
               jTextField1.setText(customer.getName());
               jTextField2.setText(customer.getCity());
           }
       } else {
           jTextField1.setText("[no name]");
           jTextField2.setText("[no city]");
       }
   }

   • Run the application and change some data. Currently, we have no "Refresh" functionality (that will be added in the next step) so, to see the changed data, restart the application. Here, for example, the tree hierarchy shows the persisted customer name for "Toyota Motor Co":

     

9. Fourthly, we need to add functionality for refreshing the Customer viewer. You might want to add a Timer which periodically refreshes the viewer. However, in this example, we will add a "Refresh" menu item to the Root node so that the user will be able to manually refresh the viewer.
   
   
   • In the main package of the CustomerViewer module, create a new Node, which will replace the AbstractNode that we are currently using as the root of the children in the viewer. Note that we also bind a "Refresh" action to our new root node.

     public class CustomerRootNode extends AbstractNode {
     
         public CustomerRootNode(Children kids) {
             super(kids);
             setDisplayName("Root");
         }
     
         @Override
         public Action[] getActions(boolean context) {
             Action[] result = new Action[]{
                 new RefreshAction()};
             return result;
         }
     
         private final class RefreshAction extends AbstractAction {
     
             public RefreshAction() {
                 putValue(Action.NAME, "Refresh");
             }
     
             public void actionPerformed(ActionEvent e) {
                 CustomerTopComponent.refreshNode();
             }
         }
     
     }

   • Add this method to the CustomerTopComponent, for refreshing the view:

     public static void refreshNode() {
         EntityManager entityManager = Persistence.createEntityManagerFactory("CustomerLibraryPU").createEntityManager();
         Query query = entityManager.createQuery("SELECT c FROM Customer c");
         List<Customer> resultList = query.getResultList();
         em.setRootContext(new CustomerRootNode(Children.create(new CustomerChildFactory(resultList), true)));
     } 

   Now replace the code above in the constructor of the CustomerTopComponent with a call to the above. As you can see, we are now using our CustomerRootNode instead of the AbstractNode. The CustomerRootNode includes the "Refresh" action, which calls the code above.

   • In your save functionality, add the call to the method above so that, whenever data is saved, an automatic refresh takes place. You can take different approaches when implementing this extension to the save functionality. For example, you might want to create a new module that contains the refresh action. That module would then be shared between the viewer module and the editor module, providing functionality that is common to both.
   
   
   • Run the application again and notice that you have a new root node, with a "Refresh" action:

     

   • Make a change to some data, save it, invoke the Refresh action, and notice that the viewer is updated.

You have now learned how to let the NetBeans Platform handle changes to the JTextFields. Whenever the text changes, the NetBeans Platform Undo and Redo buttons are enabled or disabled. Also, the Save button is enabled and disabled correctly, letting the user save changed data back to the database.