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:

SVG Rich Components Support in Netbeans Mobility 6.5

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:

SVG Rich Components Sample

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

Comments:

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 06, 2008 at 05:55 PM 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 10:48 AM 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 12: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 03: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 09:21 AM 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 02: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 guest on January 13, 2009 at 03: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 02: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 08:05 AM 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 05:16 AM 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 05:19 AM CEST #

http://sites.google.com/site/svgmenututorial/home

Posted by Meshack on August 19, 2009 at 07:29 AM 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 25, 2009 at 06:33 PM CEST #

This problem may not be fixed yet, what version of Netbeans do you use?

Karol

Posted by Karol on August 26, 2009 at 02: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 09:49 AM CEST #

Hi All

Just an FYI...i have been trying the netbeans Tutorial for writing SVG code, but it fails in NetBeans 6.7 (ClassLoader id mismatch exception) and the emulator never even gets going.
In NetBeans 6.5.1 i try to import the HOL SVG snippets and it complains about out of date plugins that i have no clue where to find.

SVG is the way to go, but it seems as usual, NetBeans falls flat on its face with the quality of either the IDE or the tutorials or both...uh maybe that is why they have just rushed out 6.8 beta...i VERY much like NetBeans but come on people, help us to help you.

Enlighten me otherwise.

I am running XP SP2...
here is the tutorial: http://netbeans.org/kb/docs/javame/svgtouch.html

regards
beez

Posted by kambiz shahri on November 23, 2009 at 11:10 AM CET #

Thanks for feedback. Currently we have very VERY limited resources so best thing you can do is to report this problem here: http://netbeans.org/community/issues.html. This is open source project, which means everyone can participate (source code/tutorials/help/QA), so if you not satisfy just help us to improve it.

Posted by Karol Harezlak on November 24, 2009 at 02:47 AM CET #

Hi Karol

I would be very happy to do so; i.e. volunteer my time.

But how do i get specifically involved with the SVG snippets...rather than netbeans as a whole?

I will in the meantime have a look and see how i can become part of the opensource project...SVG is the only way to fly, and i would like to have a T-Shirt and mug that says so.

regards
beez

Posted by kambiz shahri on November 24, 2009 at 02:54 AM CET #

Update on the tutorial: with a lot of perseverance and the fact that the J1 HOL SVG Snippets does not get plugged in to NetBeans 6.51 (and therefore you can not do some of the steps of the tutorial) i got the example to work, minus the touch screen for the 2.5.2 Sun SDK and the default colour phone.

If anyone needs corrections to the tutorial, including the blantant typo and grammatical errors, please let me know.

Now, i have to figure out how to deploy the tutorial to a Nokia 5800...any clues would be more than welcome.

regards
beezer da wheezer

Posted by kambiz shahri on November 24, 2009 at 05:30 AM CET #

If you really thinking of donating time to the Mobility project let me know on this email: karol.harezlak@sun.com

Posted by Karol Harezlak on November 25, 2009 at 06:10 AM CET #

hey man thats cool work..
well i need your help...well i am working on javafx developing mobile look and feel and for that i need same UI as in Iphone or any other smart phone.so could you help me out.....???

Posted by Shashin on November 05, 2010 at 09:47 PM CET #

Post a Comment:
  • HTML Syntax: NOT allowed
About

Stuff about Java ME, NetBeans Mobility, mobile devices and more...

Karol Harezlak is the Netbeans Visual Mobile Designer lead at Sun Microsystems

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today