---

View Thumbnail Maker Demo Using Servlet | View Thumbnail Maker Demo Using DWR | Download Source Code

---

This tutorial describes the Thumbnail Maker Widget provided by Dekoh. The Thumbnail Maker is a simple image utility which helps you create smaller-sized versions of your images/photos.

The widget uses simple javascript files to generate thumbnails of the images provided. The source image (JPEG, PNG, GIF, BMP, etc) can be a physical file on the local machine or a remote file over HTTP. The generated thumbnail is a JPEG image and is configurable (can be the entire image or a portion of the image, can be of different sizes and shapes).

How to Use the Widget

To use the Thumbnail Maker widget, save the zip file and unzip it into your web application root directory. The widget includes prototype libraries, java source files, interface files, the actual widget files, demo files (for Servlets and DWR) etc.

To start using the widget, you must deploy the application on any server of your choice.

Running the Demo on Dekoh Desktop

Follow the steps below to deploy and run your demo widget application on Dekoh Desktop:

1. At the command prompt, navigate to the <DekohDesktop_Install_Dir>/server/bin directory by typing cd <install_dir>\server\bin
2. Start the Dekoh Desktop using the command, run_lw.bat
3. At the lwt prompt, deploy the thumbnail maker application.
4. To run the application, open your default browser and run the thumbnail_dwr_example.jsp or thumbnail_servlet_example.jsp page.
5. In the page that comes up, upload the image from your local machine or URL, and preview and save the thumbnail.
6. The thumbnail image is displayed in your browser. Right click on the image and save it for further use.

Note:
Q: When you try to save a thumbnail maker-generated image in Internet Explorer, it allows you to save it only in BMP format, why?
A: This is not an issue with the thumbnail maker widget. Internet Explorer does not save graphics files in the proper format. Check out: Microsoft Support Page

Understanding the Thumbnail Maker Widget

• The libraries/prototype directory contains the following JavaScript framework files to help ease development of dynamic User Interface. Read about Prototype
• The web.xml file in the WEB-INF dir is the web application deployment descriptor, and contains detailed information about your application. For example: URL mappings, welcome files and so on.
• The widgets directory contains two widgets: dialog and thumbnail. The dialog widget contains a directory with images that will be displayed within the dialog box. It extends the Prototype Window Class to do this.
• The thumbnail maker widget contains a directory with images of different shapes that are used while creating the thumbnails. The file, thumbnailMaker.js holds all relevant information about the thumbnail image to be created and the actions being taken on the image, such as tracking the movement of the thumbnail being created, aligning the thumbnail section corners, and resizing it to stay with the shape constraints etc.
• The widget.css files are used to define the widget styles.

Demo Files in the Thumbnail Widget

The thumbnail.zip also ships with two different server-side implementations (Servlet and DWR). These files are placed at the root directory.

• The two sample javascript files, interface-dwr.js and interface-servlet.js are separate from the thumbnail javascript class, and contain the interface methods to call the server side java code the DWR and Servlet way. These files interact with the server, get the thumbnail image, and return the image URL.
• The file, dwr-thumbnailMaker.xml is used to expose the Java methods to the DWR interface.
• The file, thumbnailMaker.js handles everything in the user interface, such as closing the dialog, tracking the movements of the thumbnail holder, initializing the cropper and so on.
• The two sample JSP files, thumbnail_dwr_example.jsp and thumbnail_servlet_example.jsp are used to display the thumbnails generated on a web browser. The JSP files load the prototype script files, create the thumbnail image with the appropriate dimensions, set the widget defaults, and also calls the right dialog box, when the user clicks "Click to create thumbnail of the selected photo".
• The processed images are stored under a directory called processedimages in the thumbnail maker widget. Each image is stored in a medium sized version of the image (for fast display over the Web), the original version (for download) and the generated thumbnail. These are temporary directories which store one image per user per session.
• The src directory contains the java source files with all the logic for creating the thumbnails the DWR and Servlet way. These files are used to load the images from the different types of sources, scale it to the thumbnail size (and shape), and save it as JPEG. The file, SessionExpiryListener.java removes the image files after the current session expires.
• The web.xml file contains the ImageServlet and DWRServlet references.

Compiling the Java Files Using ANT

The Thumbnail widget ships with a build.xml and build.props file, stored in the root directory. If you modify any of the java source files, you have to built the sources. Ensure that you restart the server to view the changes.

1. Before compiling the files, ensure that you set the path correctly for ANT.
2. Change the Servlet JAR path servlet.jar.path=C:/Dekoh/server/lib/std/servlet-api.jar in the build.props file to point to your application’s Servlet JAR.
3. At the command prompt, type ant -f <full path to build.xml> to compile the file, build.xml.
4. Restart the Server on which you have deployed this application.

License

See Dekoh Widget License for more details.