Exercise 1: Get in touch with the SVG Composer in NetBeans
This exercise provides a streamlined introduction to SVG UI Rich Components showing you how to use the SVG Composer and SVG UI components included in the NetBeans Visual Mobile Designer. For more details, please see the Netbeans Rich SVG UI Components page.
This exercise shows how to create a new SVG Image and adjust the image size, shape and color to prepare you for creating the Hands on Lab application.
Background Information
SVG: JSR-226 specifies the API for rendering scalable, two-dimensional vector graphics in XML. Instead of encoding the contents
of each pixel like the GIF and JPG formats, vector graphics contain only the drawing instructions for each pixel. This gives vector images several
advantages:
- They are scalable, so the image quality remains the same on displays of different sizes and resolutions. You can also stretch, flip, or reverse an image without losing quality.
- They support scripting and animations, so they are ideal for interactive, data-driven graphics.
- They are compact. Vector-based images can be as much as ten times smaller than an identical image in GIF or JPEG format. This important advantage makes it possible to create graphically rich applications for handheld devices with limited resources.
- They allow users to interact with image content.
- They are searchable, allowing users to search for text within the image. For example, users can search a map for specific street names, or search a list of restaurant menus for their favorite dish.
A full-featured subset of SVG aimed toward mobile devices is called SVG-Tiny and JSR-226 adopts version 1.1 of the SVG-Tiny profile as the official file format for J2ME vector graphics.
Steps to Follow
Introduction to Netbeans IDE SVG Composer.
- Creating new SVG images with the SVG Composer
- If NetBeans is not already running, start it.
- Create a new NetBeans Java ME Mobile Project (File > New Project)
- Name the project and uncheck the Create Hello MIDlet box.
- Use the Sun Java Wireless Toolkit 2.5.2 as the Platform Emulator and DefaultColorPhone as the target device. Click Finish.
- We can create a new SVG image for the project by going to File > New File. Under Categories select Other and under File Types
select SVG File. Name the file
SVGtest since we are only using this image to explore the SVG Composer UI and Custom Components.
- We can drag and drop existing images from the Basic Shapes available in the SVG Composer palette into
the Preview canvas and modify their size snd shape using the mouse. This gives you an idea of what type of
SVG images you can create within the IDE.
Creating User Interfaces is made easier using the SVG Composer and SVG Form Rich UI Components in NetBeans.
Overview of the SVG UI snippets available in the SVG Composer palette:
- SVG List - Allows developer to create a list of UI elements needed for the UI.
- SVG Radio Button - In the SVG snippets we are using this allows user to select gender.
- SVG Combo Box - UI component for drop down list menus.
- SVG Text - A field where test such as names of people, product ID's, etc can be displayed.
- SVG Button - Buttons are used for Next, Previous, OK and other UI functions.
- SVG Spinner - Enables user to scroll through a variable using Up and Down button.
- SVG Slider -Lets user adjust a variable feature. For example, from light to dark, or 0-100%
- SVG Label - Lets User Label a text field or other UI component.
Click on Source view and search (Ctrl+F) for "OK" with the Match Case box checked. Here you see where the OK button
is labeled in the XML for the SVG Button component.
Back to top
Next exercise
