Creating a Simple Pictures Explorer for NetBeans6.0

Its has been some time now that i have been coding using NetBeans. Today i present a small MyPictures module(for Windows). For NetBeans users who always have their NetBeans window gazing at them ,it becomes tedious to open another pictures explorer and view your MyPictures Folder in MyDocuments. A small and simple code can help you a great deal.
How about a PicturesExplorer to view MyPictures folder in NetBeans itself?
Well, thats the whole idea. Using the NetBeans TopComponent, ExplorerAPI, FileSystemsAPI with others, its quite possible.

Lets Start
Requirements:- NetBeans6.0..its free download at netbeans.org
Some Idea about module development for NetBeans IDE.

In this example we will create a simple PicturesExplorer module for viewing pictures in My Pictures folder in Windows.

Creating the module.

• To make a new module go to File--> New Project
• Select NetBeans Modules from the category and Module from the aside Projects window.
• Click next.
• 
• Set project name as "PicturesExplorer" and set a destination project folder and location.
• Let it be a standalone module. Click next.
• Rename code name base as "org.modules.sack.picturesexplorer" and let other default settings as it is. Click Finish.

After this a new module will appear in the projects window with source package as "org.modules.sack.picturesexplorer".

Creating a new TopComponent.
In order to show the files in a navigator window. Thus we make a new TopComponent.

• Right-click on the package folder a choose a new Window Component.
• Select Window position as Navigator.(a new explorer window will be opened in the navigator window. Other options correspond to the other possible TopComponents).
• Keep the "Open on Application Start" option unchecked.Click next.
  
• Set 'Pictures' as ClassPrefix.
• Set an icon. Icon should be a 16X16 .png , .gif file.
• Click finish.

The TopComponent gets created. Now we need to design the UI for "PicturesTopComponent.java"

• Switch to the designer form for "PicturesTopComponent.java".
• In the Component Inspector, right click the TopComponent node, and choose Set Layout > BorderLayout.
• Select the JScrollPane from the Component Palette window and drop the scroll pane on the form such that it covers the entire form.(The secret here is that all of the Explorer UI components are subclasses of JScrollPane—so you can simply change the instantiation code to create an explorer view instead.Refererence :- NetBeans Selection Management Tutorial II—Using Nodes)
• Select your JScrollPane, select its property sheet. Click code tab and edit the "Custom Creation Code". Set this field to ''new BeanTreeView()". (BeanTreeView and many other components are provided by the Explorer API to represent Nodes).

Code content:

• Now switch to the code editor.
• We now need to represent the explorer content. In order to show the nodes we need to have an ExplorerManager. Always, representing Node is associated with an ExplorerManager rather than the component. Lets make up an ExplorerManager. Include the following line of code in "PicturesTopComponent.java".
• ExplorerManager mgr = new ExplorerManager();
• We will also need to implement an interface ExplorerManager.Provider to PicturesTopComponent.java.
• By now many error annotations must have been attached to various lines.
• Don't worry these are because the appropriate dependencies haven't been found. Lets add the Dependencies one by one.
• Right click on the projects mode and select properties. go to the library node and click add.
• A window pops ups. Lets look for our first dependency. Type in "ExplorerManager".
• The result will show a org.openide.explorer.ExplorerManager class. Click ok.
• The Explorer and PropertySheet Module gets added to the dependecies.
• Similarly look for BeanTreeView and you will find that it is the same dependency module.
• Click ok and exit the property sheet.
• A bulb glowing aside each of the previously error annotated line shows an option to import the appropriate class. Otherwise pressing Ctrl+Shft+I will also automatically import the classes.
• Still a bulb glows at the header notation of the class asking you to implement the abstract methods of ExplorerManager.Provider , clicking it implements the method. Replace the body of the method getExplorerManager() by
• return mgr;
• This code will return the ExplorerManager associated with the component whenever it is called for.
• If you run the module now(Right-click project node and select install in target platform), you can see a "Pictures" option in the Windows menu. Click it. A "Pictures Window" opens up in the navigator window with an unnamed node.

Now that we have the view ready, we need to provide the nodes for our picture files. For this we need to work with the componentOpened() and componentClosed().

• In NetBeans each file/folder is represented by a FileObject. Now we need to map a FileObject to the desired folder. e.g This plugin shows the pictures residing in MyPictures folder of Windows. Thus we need to get a logical link to represent My Pictures. This can be simply done by using the powerful org.openide.filesystems.FileUtil.
• FileObject root = FileUtil.toFileObject(new File("C:/Documents and Settings/"+getUsername()+"/My Documents/My Pictures"));
• The above code maps a java.io.File to org.openide.filesystems.FileObject and assigns it to root. You may notice the getUsername() method. We will discuss a bit later.
• if(root != null){
  try{
  dataObject = DataObject.find(root);
  rootnode = dataObject.getNodeDelegate();
  mgr.setRootContext(rootnode);
  }
  catch(DataObjectNotFoundException ex){
  ex.printStackTrace();
  }
  }
  
• if a successful path has been established root will correspond to a FileObject. Using it we need to find the DataObject so that the loaders can load the data from the specified path when needed. All that remains is to present representative view to the BeanTreeView we made before. To do this we ask the dataObject to get a NodeDelegate. getNodeDelegate()Node returns a previously instaniated . If not present before it will create one(Read more about getNodeDelegate). If dataObject returns null, a DataObjectNotFoundException is fired.
• The Node obtained is set as Root node for our BeanTreeView using our ExplorerManager,mgr.
  
• Now encapsulate this code in a method setData() such that:
• void setData(){
  root = FileUtil.toFileObject(new File("C:/Documents and Settings/"+getUsername()+"/My Documents/My Pictures"));
  if(root != null){
  try{
  dataObject = DataObject.find(root);
  rootnode = dataObject.getNodeDelegate();
  mgr.setRootContext(rootnode);
  
  }
  catch(DataObjectNotFoundException ex){
  ex.printStackTrace();
  }
  }
  }
• Your componentOpened() should call setData() i.e.
  
• public void componentOpened() {
  setData();
  }
  
• You may get few error notations since the root,rootnode,dataObject have not been defined. Define them at Class level variables.
• Now just before we are done, add one more method getUsername().
• public String getUsername(){
  username = java.lang.System.getProperty("user.name");return username;
  }
• Again define a String variable username at Class level. This gets the username from the user.
• Add Dependencies Node API,FileSystem API, DataSystems API and fix all imports.
• The final List for imports should look like
• import java.io.File;
  import java.io.Serializable;
  import java.util.logging.Logger;
  import javax.swing.JOptionPane;
  import org.openide.explorer.ExplorerManager;
  import org.openide.explorer.view.BeanTreeView;
  import org.openide.filesystems.FileObject;
  import org.openide.filesystems.FileUtil;
  import org.openide.loaders.DataObject;
  import org.openide.loaders.DataObjectNotFoundException;
  import org.openide.nodes.Node;
  import org.openide.util.NbBundle;
  import org.openide.windows.TopComponent;
  import org.openide.windows.WindowManager;
  import org.openide.util.Utilities;

All set to Build.

• Select the project node, right click, select clean and build.
• Run the module.
• Check out the Windows menu and select Pictures.

• You can now see all your pictures list from the MyPictures folder.
• Double click to open the picture in the Editor area.

You can select "Create NBM" from the pop-up menu of the module to make a .nbm file which can be installed in NetBeans.You can now find the .nbm file in the build folder of your project.


I accidently came across this idea through a wish list for NetBeans plugins. And this was not even a day's work. The code can be more optimised.
I am currently working on it to provide support for other file types and better browsing features through the pictures.

So keep watching.
Please put down your suggestions for the above tutorial.

Keep watching...

Keep watching this space..
will be posting soon...