JSR-296 Demo: Flickr Image Search
This is a demo of Swing Application Framework (JSR-296) support. During the demo we create an application that searches images using Flickr web services based on entered keyword.
Note: this demo requires internet access!
- You need NetBeans 6.0 M10 or newer.
- Open the attached FlickrDemoMaterials project and build it.
- Download the nimbus_NBDemoFlickr.jar if you are also going to show the look and feel support.
Create and Run an Application Shell
- Create a new Java Desktop Application named ImageSearch. Choose BasicApplication as the Application Shell.
- Run the project immediately - show it is a complete working application. Expand the menus, invoke the About box (we're going to show how it is done later). Exit the app. (Optionally you can also mention the app framework takes care about persisting some session data, e.g. the size and positions of the windows.)
Working with the Application Properties
- Open the Project Properties dialog of the project, go to Application panel. These are general application properties, also used by the Swing Application Framework, can be accessed at runtime using resource maps. The properties are also used by Web Start.
- Edit the properties - e.g. change the title to Image Search, the vendor to e.g. Progressive Hacks Inc, (. or , characters are forbidden - unless you remove these from the default Vendor string which contains them, webstart will not work!)
- Close Project Properties, open the About Box form (ImageSearchAboutBox) - see the new values of the app properties appear here. Select the title label and invoke the property editor for its text property. Here you can see how the value is defined using the application resource with specific key name (Application.title). The values are stored in ImageSearchApp.properties file in resources subpackage. You can change the title here as well and it will be reflected back in the properties file.
Create Some Content
- Go back to the main form, ImageSearchView, to start creating the layout.
- Add a label, text field and button on one row.
- Change the label's text to 'Find Image:'.
- Remove the text field's text. Change the variable name of the text field, e.g. to keywordField (needed later).
- Add a label that will show the image below the other components and resize it over the rest of the form. Remove the label's text and set its horizontalAlignment property to CENTER. Change the variable name to imageLabel.
Working with Actions
- Instead of setting the text of the button, right-click it an select Set Action.
- From the "Action to Edit" combo box choose "Create New Action..."
- Into the "Method" field type searchImage (name of the method to handle the action).
- Into the "Text" field below type Search (the text that appears on the button).
- Click on the small icon to invoke icon chooser. Here press the "Import to Project..." button. Browse to the FlickrDemoMaterials project and select the search.png image in icons package. Press Finish to bring this image into the project and press OK to close the icon chooser.
- Press OK to close the action editor and create and assign the new action.
- The IDE switches to code into the new searchImage method. See how it is annotated with @Action annotation - this way the app framework knows that this method represents an action. You can switch quickly to the design to see the button now has the action and text, and back to the code.
- Now we need some code to perform the search in Flickr. Go to the opened FlickrDemoMaterials project, select Flickr.java and copy it into the image search project (use the refactoring copy option so the class package is properly updated).
- Go back to the new searchImage method and write the following code:
String keyword = keywordField.getText(); Icon result = Flickr.getInstance().search(keyword); imageLabel.setIcon(result);
- Go to the design, select the text field, go to its action property (it is in Other Properties) and select the new searchImage action from the combo. This will allow to press enter in the text field and invoke the same action as when pressing the button.
- Run the application, type in some keyword and press the button. After a while the found image should appear. You can spend quite a few time trying different keywords to search. You never know what can appear. People seem like it for some reason...
Working with Tasks
- Note that during the search the UI is blocked, not repainting, waiting for the search to finish. We should rewrite the search to run background (off the EDT). The app framework makes this quite easy.
- Go to Window | Other | Application Actions. (For demo purposes this view could be prepared in advance, just minimized at the bottom, now opened. Note: If the actions don't appear when first opened, click onto the form and back. It's a bug.)
- Select the searchImage action in the list a press "Edit".
- Check the "Background Task" checkbox and press OK.
- Press "View Source" button in the action list (having the searchImage action selected). You'll be switched to the code.
You can see the searchImage method now returns Task and there is a new class generated implementing the task. The task is done in 3 stages (setup, working phase, showing result). Initially all code is copied into the constructor - it is up to the user to divide the code properly.
- Edit the source code:
- Create private final field for the keyword string, let it be set in the constructor of the SearchImageTask class.
- Change the SearchImageTask class signature params from <Object, Void> to <Icon, Void>.
- Change the type returned by the doInBackground method to Icon. Copy the code that invokes the flickr service here and return the found icon:
- Change the parameter type of the succeeded method to Icon. Copy the code that sets the result to the image label:
- Run the application again, do a search. Now the search runs on background. Note a progress bar and icon animation appears automatically. The UI is responsive all the time.
Blocking UI (Optional)
- Optionally you can can show how to block the UI in various ways when the background task is running. E.g. showing a modal dialog with a Cancel button:
- Go to edit the searchImage action, either. via the Application Actions window or via the action property editor.
- Switch to "Advanced" tab and set "Blocking Type" to APPLICATION.
- Type some text for the title, e.g. Searching...
- Type some text for the dialog message, e.g. Searching the image, please wait...
- Close the action editor, run the app, and do a search to demonstrate it.
Look and Feel (This only works if you're running JDK 6)
- Another potential thing to show is the easy look and feel setup:
- Go to the Project Properties, select Application -> Desktop App.
- Expand the Look & Feel combo box to see it is easy to choose between system or Java default look and feel.
- Press the "Browse..." button and browse to the nimbus_NBDemoFlickr.jar file. A look and feel class is automatically found and set, the JAR is added to project classpath.
- Run the project to show it runs under the new look and feel.
- Note the look and feel name appears as one of the properties in the ImageSearchApp.properties file.
- Last thing to show is the Web Start integration. Go to the Project Properties, select Application -> Web Start category.
- Check the checkboxes "Enable Web Start" and "Self-signed".
- Run the application to see how it runs via Web Start.