Playing with SVG Rich Components in Netbeans Mobility 6.5
This time I'd like to show new feature of Netbeans Mobility 6.5 - SVG Rich Components support. The SVG Rich Components simplifies process of creation of Java ME SVG user interfaces. First part of this support is the SVG Composer which is part of Netbeans Mobility 6.5. Using this tool users are able and drag and drop SVG Components from palette to the SVG image. It's similar to building Swing/AWT UI using Netbeans GUI Builder but instead of using Java Swing/AWT components developers using special SVG Components. Users can chose from predefined components available in the Palette in section "Form Components". Screenshot below shows SVG Composer with few SVG Rich Components already added to the form (SVG image).
If you are interested in details of this technology you can find more information on netbeans wiki page:
If you want to try this feature on your NB 6.5 installation - create new Java ME project then create SVG image (File > New > Other > SVG Image) and don't forget to "Unlock" SVG Image every time you are starting editing image in the SVG Composer (Right click on SVG image then click "Unlock" action).
When SVG UI image is ready and saved, users can use it in the Visual Midlet applications. New custom component "SVG Form" in the Visual Mobile Designer acts as a container for SVG UI images (You can find it in "SVG Components" Palette section). Simplest way to add SVG UI image to the Visual Midlet is to drag and drop SVG UI image file on SVG Form component in the Flow view or Screen Designer (Screen view) of the Visual Mobile Designer. Jave source code and necessary components should be generated automatically right after SVG UI image is drooped on SVG Form component. Screenshot below shows Flow of the Jave ME application with SVG Components including SVG Form. You can download this application at the end of this entry.
It is also possible to look up SVG UI image preview in the Visual Midlet Screen Designer.
Finally two screen shots of SVG Rich Components application running on WTK 2.5.2 and Nokia S40.
WTK 2.5.2
Nokia S40
You can download sample application here:
but you need to use recent build of Netbeans Mobility 6.5 to run it. Recommended version of Netbeans is "Java" because it contains GlassFish which is necessary to run this example.
Download Dev build of Netbeans
That's cool!
I'm reading a lot of material about svg and believe it's a great option for definition of GUI. I know that this framework is it at beginning and we need a lot of new components to developing a real application but this framework it's awesome! I'm very happy when I see new material like this...but we need more authoring tools for svg tiny! We can do our part with tools like this but and the designers? They need great tools too!
I'm learning some interesting details about svg animation that can do a lot of
interesting things with the svgForm, for example...
Sorry about my english...I'm brazilian!
Thanks a lot!
Eloi Jr
Posted by Eloi Jr on October 07, 2008 at 12:55 AM CEST #
Yes this is first version of the library but we planing to add new components and improve functionality in near future. Thanks for feedback good luck with your SVG project.
Posted by Karol Harezlak on October 07, 2008 at 05:48 PM CEST #
Hi,
nice, but I would like to know if it is possible running the standalone application either on a windows computer or linux computer ?
Posted by sancelot on November 14, 2008 at 08:55 AM CET #
This libraries and SVG snippets was designed for Java ME (CLDC/MIDP). I'm not sure if anything similar exists for Java SE but it's very interesting idea.
Posted by Karol Harezlak on November 14, 2008 at 11:22 AM CET #
Hello there,
I managed to create my own SVG Menu with Netbeans and get it deployed onto a Nokia Device. In Eclipse I could combine an SVG Canvas with an M3G Game Canvas via the bindTarget(),releaseTarget() and render() methods. Is it possible to combine the SVG Menu in Netbeans with an M3G Game Canvas?
If yes, how? Is there a possibility to use the Flow View or just rough coding and if it has to be coded, how do I render the SVG Menu upon the 3D Cancas and set their Viewports?
Thanks in Advance for any help.
Posted by Anika Uhlemann on November 24, 2008 at 05:21 PM CET #
Hi,
Thank you for the great links to information.
I am having a problem (with trying out the SVG components) which I was hoping you might be able to give me some ideas. The menu named "SVG Components" on the right is there but there are no items showing when I select the triangle (to make it point downwards). Have you come across this before? I am using:
Mac OS X 10.5
NetBeans IDE 6.5 (Build 200811100001)
I tried the nightly build (of Netbeans), which I installed, however the plugins were mostly crossed out. If I have two versions of Netbeans, do I need to keep multiple versions of the plugins or install it in a separate place?
I figure this might not be the right place to post a question... :)
Thank you for any help.
Posted by Julius Spencer on January 12, 2009 at 10:02 PM CET #
I'm not sure about first question (SVG components) Best why to evaluate this problem would be to open new issue (http://www.netbeans.org/issues/) and attache example project with description of your problem.
Second question:
I'm not sure if I understand but when you are using nightly builds you can expect some problems with your IDE. Nightly builds could be very unstable (some times). If you are using two or more version of Netbeans you should use update center to get/update your plugins so it's better to have separate version of plugin for every version of NB.
Posted by 192.9.112.196 on January 13, 2009 at 11:43 AM CET #
Hi,
Thank you for the reply. I found the problem in the stable build of Netbeans so I tried out the (potentially unstable) nightly build. Looking at it more closely I noticed that when I click on the SVG Components (to expand the list) in the Palette, the components show briefly and then disappear.
I guess I will have to add an issue. Thank you once again for the reply.
Posted by Julius Spencer on January 13, 2009 at 10:02 PM CET #
hi,
I have come to know many things from your blog about java ME and SVG UIs.
I am a new bee to this ME and SVG user interfaces. I want to read the text from the text field created using SVG form.
Posted by sharath on August 17, 2009 at 03:05 PM CEST #
SVG menu creation tutorial for netbeans is available at http://docs.google.com/View?id=dg4g7xd3_0jr9ks9f4
Posted by Meshack on August 19, 2009 at 12:16 PM CEST #
SVG menu creation tutorial for netbeans is available at http://docs.google.com/View?id=dg4g7xd3_0jr9ks9f4
Posted by Meshack on August 19, 2009 at 12:19 PM CEST #
http://sites.google.com/site/svgmenututorial/home
Posted by Meshack on August 19, 2009 at 02:29 PM CEST #
When using the SVG library in a qwerty device the input does not work correctly, after cheking the library source, it only implement a numpad class.
Is this the problem?
Posted by Faycal Bellamine on August 26, 2009 at 01:33 AM CEST #
This problem may not be fixed yet, what version of Netbeans do you use?
Karol
Posted by Karol on August 26, 2009 at 09:25 AM CEST #
Hi:
I have a question, I want to know what are the event which I could work the Radio button, because in your example I click once and it's cool but if I click the second option, both are clicked... :S , and How I can program this radio button in SVG like a normal Java program, because I need to do a grafic dictionary in SVG but I can't ....or If someone can give me another example to select the words that I want to consult please help meeeeeee! thanks U so much!
sorry for my english I'm colombian.
bye
Posted by henry hurtado on October 01, 2009 at 04:49 PM CEST #