当前页面: 开发资料首页 → Netbeans 专题 → Adding and Editing Scalable Vector Graphic (SVG) Files in the Mobility Pack
摘要: With the JSR-226 support included in the Netbeans Mobility Pack for CLDC/MIDP 5.5, you can now use Scalable Vector Graphics (SVG) files to add vector-based graphics to your mobile applications.
With the JSR-226 support included in the Netbeans Mobility Pack for CLDC/MIDP 5.5, you can now use Scalable Vector Graphics (SVG) files to add vector-based graphics to your mobile applications. SVG files are compact and give you a way to provide high-quality graphics on resource-limited handheld devices. SVG also supports scripting and animation, so it is ideal for interactive, data-driven, personalized graphics.
This article shows you how the GUI-based Visual Mobile Designer within the Mobility Pack software enables you to create menus, splash screens, wait screens, and animations using drag-and-drop components from its palette menu.
Java Specification Request (JSR)-226 specifies the API for rendering scalable, two-dimensional vector graphics. Instead of encoding the contents of each pixel, as raster-based image formats like GIF and JPG do, vector graphics contain only the drawing instructions for each pixel. This gives vector images several advantages:
The Scalable Vector Graphics (SVG) specification is the World Wide Web Consortium (W3C) specification for describing two-dimensional graphics and graphical applications in XML. The SVG specification describes images with vector shapes, text, and embedded raster graphics. A full-featured subset, or profile, of SVG aimed toward mobile devices is called "SVG-Tiny." JSR-226 adopts version 1.1 of the SVG-Tiny profile as the official file format for J2ME vector graphics.
You can find more about JSR-226 by reading the article, Getting Started with Mobile 2D Graphics for J2ME.
The Visual Mobile Designer (VMD) gives you an intuitive way to incorporate SVG images and animations into your mobile applications. In the VMD, you can inspect and preview SVG images and animations, and drag and drop SVG components (splash screens, menus, and wait screens) from the Component Palette into your application flow and screen designs.
To use the new SVG features, you need the following software installed:
To use an SVG file in your Mobile application, first add the file to the
<project_home>/src
directory of your project. Taking a
quick look at a graphic is as easy as double-clicking the file name. After
the file is opened, you can run your mouse over it the graphic to highlight
different elements. Click on the yellow area on the toolbar to run animations.
You can also use the horizontal scrollbar to select any time slice of an animation.
To add an SVG graphic to the application flow, drag an SVGMenu, SVGSplashScreen, or SVGWaitScreen component from the Component Palette into the Flow Designer (we'll say more about these components in a few paragraphs). Then drag and drop the graphic from the Projects window into the component. You can also double-click a component to open it in the Screen Designer, then drag an SVG file into the open screen.
In the same way, you can drag and drop an SVG file into the Screen Designer, then drag and drop the graphic into the screen. Notice that as you drop a graphic into a component, an SVGImage is added to the Resources folder in the Navigator Window.
Because SVG is an XML-based language, it's possible to produce SVG content with a text editor. However, you'll probably get better results using one of the many open source or commercial authoring tools available on the market today. The authoring tools that have been tested with the NetBeans Mobility Pack are:
The W3C maintains a comprehensive list of products that implement SVG. Although not tested, they should also work with the IDE.
To add an editor the IDE, choose Tools > Options. Choose the Miscellaneous icon, then expand SVG Settings. Click the Change button to add the path of your editor to the IDE.
Now you can open a graphic in your editor just by double-clicking the graphic in the Screen Designer Window.
Now that you have your SVG graphics and animations ready, you're ready to add them to your mobile application. In this section, we'll talk about each of the components you can use to enhance your application.
The svgAnimationWrapper component lets you insert an animated SVG file anywhere
in your application flow or within a screen. The component is a wrapper over
the SVGAnimator
class from the JSR-226 API. It is also the base
for all the other components (svgSplashScreen, svgWaitScreen, and svgMenu)—they
all inherit from the svgAnimationWrapper.
To add an animated SVG file into your application, drag the svgAnimationWrapper component from the Component Palette and drop it in the Flow Designer. Then drag an SVG file from the Inspector window and drop it on the component. To control how the animation behaves in the screen or application flow, you can set the set the following properties:
Splash screens are used to enhance the look and feel of an application. Typically, you use a splash screen when the program starts, or to display a logo or branding information.
To add a SplashScreen to your application, drag an SVGSplashScreen from the Component Palette and drop it in the Flow Designer. Then drag an SVG file from the Inspector Window and drop it on the component.
Like conventional splash screens in the Visual Designer, you connect the splash screen to the application flow by connecting the Mobile Device "Start Point" port to the svgSplashScreen and connecting the "Dismiss" svgSplashScreen port to the component shown when the splash screen is dismissed. If your splash screen contains an animation, you can use the Properties window to adjust the animation's behavior, such as setting when the splash screen will timeout, or if the timeout can be interrupted.
Wait Screens allow users to execute a blocking background task (for example, connecting to a network), and show the progress of the task or display a message on the screen to inform the user that the application is still working as intended.
As with svgSplashScreen, svgWaitScreen is the SVG version of the WaitScreen component. To add an SVG Wait Screen, drag svgWaitScreen component from the Component Palette and drop it in the Flow Designer. Then drag an SVG file from the Explorer Window and drop it on the created component. The svgWaitScreen component contains two ports, "Success" and "Failure". When the background task is successfully finished (that is, no exception is thrown), the component automatically continues with the next action in the application flow. If the task fails (an exception is thrown), the component automatically continues with the action connected to the "Failure" port.
Here is an SVG wait screen running in the emulator.
The possibilities for graphical and animated menus are virtually unlimited when you use SVG graphics for the background and individual menu items. In the Visual Mobile Designer, you can add a menu you've already created to the application flow, or add a menu background and then add separate menu items to the menu.
To add a menu item, drag a menu component from the palette and drop it in the Flow Designer window. Then assign an SVG image to the component by dragging and dropping an SVG graphic from the Explorer window.
You can create menu items within the menu in two ways:menuItem_
"
string, the elements are automatically recognized by the IDE and are added
to the component as menu items, sorted alphabetically. menuitem_
" string, you can
add names of the elements representing individual menu items by dragging
SVGMenu Element components from the Component Palette and dropping them
on the SVGMenu component. The SVGMenu Element component is then added
to the SVGMenu and in the Flow Designer you can see a new port available
named "menuItem_". You can then rename the port to correspond
to the element ID from the SVG file. In the Flow Designer window, you 'll see that the svgMenu component now contains
several ports named menuItem_
. These ports correspond to the
individual menu elements and can be used for flow design as any other ports.
The menu elements are also visible in the Inspector Window and can be deleted
or reordered in that window as well.
Here is an example of a menu SVG graphic. Notice that as the mouse runs over the "Download data" selection, the box changes color—a function of the SVG graphic. Notice also that the "Download data" box has a dotted line around it—the line shows the boundaries of the element.
Now we take this menu and add it to a project flow. By dragging a line from
each _menuitem
port, you connect the menu choices to specific
actions, even other SVG animations.
While more and more mobile devices are supporting the JSR-226 and SVG standards, you might want to convert your SVG graphics and animations to PNG files if you are porting to older devices.
Simply right-click the image node in the Projects window of the Explorer and choose Export SVG Image to PNG Image, or Export SVG Animation to PNG Animation. A dialog opens, giving you the opportunity to set an image size and export the image to the active configuration or all configurations for your project.
If you choose to export the image or animation to all your configurations, the IDE automatically creates raster images based on the screen size of the individual configuration. For example, if you have three configurations, each with different screen sizes, the export function automatically creates three PNG images or animations with sizes corresponding to those three screen sizes.