PIMP YOUR MOBILE SVG USER INTERFACE

PIMP YOUR MOBILE SVG USER INTERFACE

[sorry for english mistake]
About Netbeans and SVG
Netbeans IDE give you a simple way for using SVG API in your mobile application. By using SVG tool include in Netbeans IDE, SVG User Interface look very simple to be implemented. in fact Netbeans have two tools for doing that, SVG Components and SVG Form Components. But the design of these components may not satisfy you if you like high quality design. In this tutorial, I want to show you how you can add your own SVG component in Netbeans palette and use it in your application without any problem.

Make your SVG file out of Netbeans
You can find many SVG editor software on the web. For mobile designing you can use Ikivo animator or Mobile Designer Beatware like you can see in this image.

If you use Mobile Designer Beatware (I think it's the same for Ikivo) the simple thing you have to do is to drag and drop image on the work space and then convert that image to button by right clicking. After that you have to rename the "Button1" by "button_1". you have the possibility to animate your new button like you want. For example one of my button will grow when
the cursor move on.
[according to the software you use try to read the help for achieving this thanks]

Don't forget that when you will export your SVG file, the profile MUST BE SVG Tiny 1.1.
I have also made a simple SVG animation that i will add to Netbeans palette.
You can download the 2 SVG animation of this tutorial here.

-----LINK------

but.svg is the animation file for les button and gspirit.svg is the simple file logo's animation .

Work with Netbeans IDE
Put that two SVG files on your Netbeans mobile application project. Right Click the new SVG file node - copy - right click on the Netbeans palette - click palette manager - select Form components - right click - paste item. Your new item will appear. Now you can use it like all other Components deliver by Netbeans SVG Form Components palette.

Use visual Mobile Designer tool and add SVG Form item on your work space.
Now create new SVG file on your project. name it "formCustom.svg" Drag and drop the new SVG form component item that you have just add to palette.
Drag and drop the but.svg file project node on the Netbeans SVG editor space. Now you must have something like this.

Go to formCustom.svg file source code and everywhere you see
(x is an integer exemple: ) cut "id="button_x" and paste it at the end of tag. you must have this result:
-----------------------------------------------------------------------------------------------------------------------------------

<use x="-73" y="-50" xlink:href="#ipod.png"
transform="translate(-28.37,48.81) scale(0.625,0.65625)" id="button_1">
------------------------------------------------------------------------------------------------------------------------------------
Do it for all the three buttons.
now go to your Visual Mobile Designer file - drag and drop the formCustom.svg file over the SVG form item on your work space. If evrething is good you must see your new button be recognized by Netbeans IDE.

I have already write tutorial in this blog where i explain how to manipulate svg button. try to read this tutorial.
You can Run the project and see how your new SVG UI can be more attractive than UI which only use SVG elements present in Netbeans.

NOTE: You can do the same with the SVG menu component, then you will substitute "button_x" to "menu_x" ... something like this.
Give your comments and suggestions.
Thank for reading.