站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Netbeans 专题Adding and Editing Scalable Vector Graphic (SVG) Files in the Mobility Pack

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.

What are SVG and JSR-266?

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.

Working with SVG images

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.

Screenshot of the VMD with a Hello World application with an SVG SplashScreen. An emulator running the SVG file is also shown.

To use the new SVG features, you need the following software installed:

Previewing SVG Files

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.

An animated SVG graphic in the preview window.

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.

Screenshot of the Screen Designer with a SplashScreen Component and the SVG file that was dropped into it.

External Editor

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.

Shows Tools > Misc with SVG Tools option open, with the External editor Path specifyin gthe path of the  Inkscape SVG Editor.

Now you can open a graphic in your editor just by double-clicking the graphic in the Screen Designer Window.

Working With SVG in the Visual Designer

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.

Working with SVG Animations

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:

Working with Splash Screens

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.

Hello MIDlet application in the VMD, with svgSplashScreen component in the application flow.

Working with Wait Screens

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.

Screenshot of Flow Designer screen with an svgWaitScreen component.

Here is an SVG wait screen running in the emulator.

emulator with animation running inside.

Working with Menus

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:
  • If the image you drop contains elements (representing menu items) with IDs that start with the "menuItem_" string, the elements are automatically recognized by the IDE and are added to the component as menu items, sorted alphabetically.
  • If the SVG image does not contain elements with IDs that start with the "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.

An SVG menu with the cursor selecting a specific choice--"Download data".

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.

Flow Designer window with svgMenu component. Vairous menuitem_ ports are connected to Forms and other components.

Exporting SVG Graphics and 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.

Generating PNG Files from SVG Files

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.

 

Next Steps


↑返回目录
前一篇: Beginning JNI with NetBeans C/C++ Pack 5.5(2)
后一篇: A Calendar of upcoming NetBeans events