NBDemoSVG

SVG Demo (10-15 Minutes)

Description

This demo shows how the NetBeans Mobility Pack for CLCD/MIDP 5.5 supports JSR-266, the Scalable 2D Vector Graphics API for J2ME. It is based on the tutorial Adding and Editing Scalable Vector Graphic (SVG) Files in the Mobility Pack.

Product Versions Supported

NetBeans Mobility Pack 5.5

Points to Hit

  • Ability to view and inspect SVG images, including animated SVGs.
  • New SVG Components have been added to the palette for the visual designer: SVGSplashScreen, SVGAnimatorWrapper, SVGMenu, and SVGWaitScreen

Demo Prep

  1. Dowload and Install NetBeans Mobility Pack 5.5 for CLDC/MIDP.
  2. Install the Sun Java Wireless Toolkit 2.5 for CLDC for Windows (yes, sorry, Windows only) from the Java ME Platform SDK Catalog update center.
  3. Install an SVG editor. For this demo I'm using Ikivo Animator (which as the name implies, is really just an animator - it doesn't allow you to create or edit static SVG content). A list of editors can be found at the SVGI site (note, the editor must support the SVG Tiny profile).
  4. Download and extract the svg files.
  5. Set up a Favorite pointing to the svg files so that we can easily copy them into our demo project.

Gotchas

  1. Not all of the SVGs, most of which were created with Adobe Illustrator are compatible with Ikivo Animator. I'm still trying to figure out why.
  2. Clicking on an element in the IDE's SVG viewer does not always highlight that element's entry in the Navigator window. But the reverse always works, so you can select items in the Inspector and they get outlined in the viewer.

Demo

Create the Project

  1. Create a new Mobile Application project named SVGDemo. Uncheck "Create Hello MIDlet" and click Next.
  2. Select the "Sun Java(TM) Wirless Toolkit 2.5 for the CLDC" as the emulator and click Finish.

SVG Viewer

  1. Create a resources folder and copy in the SVG files from the Favorites tab.
  2. Double-click about.svg to open it in the SVG Viewer.
  3. Mouse over the graphic to show the highlighting and tooltips, both of which can be disabled via the toolbar.
  4. Click on an element in the graphic and notice the synchronization with the Navigator (this sometimes does not work - as noted in Gotchas). Likewise, select an element in the Navigator and notice it is selected in the image.
  5. The about.svg is a 3 second animated gif. Set the End time from 30 to 3 seconds, which adjusts the sliders scale. Move the slider to show the animation time line.
  6. The SVG Viewer can only do a certain set of things: play the animation, display the components, etc. To make changes to the animation or to edit the image you will need to use an external tool. To show how easy it is to invoke one from the IDE, right-click the about.svg and select Edit to open it in the external editor - in my case Ikivo animator. The external SVG editor is configurable at Tools > Options > Miscellaneous > SVG Settings. Close the editor and return to NetBeans.


Visual Designer with new SVG Components

  1. Create a new Visual MIDlet named SVGDemo. Name the package demo.
  2. Show that the component palette contains a new section - SVG Components.
  3. Drag an SVGSplashScreen onto the Flow Design and connect it to the Mobile Device (drag from the Start point of the Mobile Device to the entry point on the left side of the SVGSplashScreen).
  4. Switch to the Screen Designer for the splash screen and drag the splashscreen.svg onto the Device Screen (this can also be done from the Flow Designer, but it's more visual this way).
  5. Return to the Flow Design, add an SVGMenu and connect it to the splash screen (drag from the Dismiss point of the splash screen to the entry point on the left side of the SVGMenu).
  6. While still in the Flow Design, drag the menu.svg onto the SVGMenu. Notice the 4 SVGMenu Elements that appear.
    1. The Visual Editor automatically creates SVGMenu Elements for any element beginning with the name "menuItem_".
    2. Double-click menu.svg to open it in the viewer. Select one of the menu elements, e.g., Animation, and see it's text id in the Navigator (alternatively, you could hover over and see it in the tooltip). As mentioned in the Gotchas, this does not always work - select in the Navigator instead.
  7. Add an SVGWaitScreen and an SVGAnimatorWrapper. Connect the wait screen to the Download menu item (drag from the Download point to the entry point on the left side of the SVGWaitScreen) and the animation wrapper to the wait screen (drag from the Success point of the wait screen to the entry point on the left side of the animation wrapper).
    1. Drag the waitscreen.svg onto the SVGWaitScreen and the halloween.svg onto the SVGAnimatorWrapper.
    2. Right-click the SVGWaitScreen and select Properties. Select the Task property and select "new SimpleCancellableTask". SimpleCanncellableTasks are not visible elements, but it should be selected in the inspector. The SimpleCancellableTask is used to execute whatever we need to wait for. It could be anything from executing a web service to sending an SMS message. In this case we're going to (pretend to) download an image. Click the button that has the ... to bring up an editor dialog and then add Thread.sleep(2500); to the Executable Method property.
  8. Add 2 more SVGAnimatorWrappers - one for the animation (logoAnim3.svg) and another for the about (about.svg) and connect them to the appropriate menu entries, using the same technique describe above for connecting to the download menu entry.
  9. Add Back commands from the Palette to all 3 animation wrappers and connect them back to the entry point on the left side of the SVGMenu.
  10. Connect the exit button on the menu back to the Exit Point of the Mobile Device. The Flow Design should now look more or less like this
  11. Your demo is ready to run.
    1. When the emulator starts, only one application is listed: SVGDemo. Use the mouse to click the large Select button on the phone.
    2. The splash screen displays and after it finishes the menu is displayed.
    3. The Download Data option on the menu is already selected, so click the large Select button to choose it.
    4. The wait screen comes up for 2.5 seconds (since we specified sleep(2500)). Explain that this is just to demonstrate how easy it is to insert wait screens to emulate downloading a file, or sending an SMS message, etc.
    5. The animation then plays, finishing up with "Happy Halloween."
    6. Click the "soft button" under the "Back" in order to go back to the menu.
    7. Choose "About" if you want and then show its animation.
    8. Close the emulator window to stop the demo.
  12. Drop in new SVG files to "re-skin" the application.
    1. Drag alt_menu.svg to the SVGMenu. It has the same names for the menu entries, so it can be used without making any changes.
    2. Drag alt_splashscreen to the SVGSplashScreen.
  13. Re-run the demo to show the new SVG animations

Demo Cleanup

Delete the SVGDemo project

Resources

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo