Skip to main content

Form elements in SVG UI

15 replies [Last post]
azpublic
Offline
Joined: 2007-09-10
Points: 0

Hi,

I was wondering if it was possible to add some regular form elements inside a SVG user interface.
I've tried doing this in NetBeans but I couldn't find a solution...

The idea is to have some SVG background with some animated elements and embed some textfields, datepickers or choicegroup items within the SVG interface.

Is it possible to do so?

Thanks

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
azpublic
Offline
Joined: 2007-09-10
Points: 0

Ok forget about my last message.

i managed to find a solution after reading the 226 API a bit further.

Here's my solution.
I hope It'll help someone.

private void positionCursor() {
// Get the root document
Document doc = image.getDocument();
SVGSVGElement svgElem = (SVGSVGElement)doc.getDocumentElement();

// Get the text (id="text") and animation (id="textanim") elements
SVGElement tfCursor = (SVGElement)doc.getElementById("tfCursor");
SVGAnimationElement tfCursorAnim = (SVGAnimationElement)doc.getElementById("tfCursorAnim");

//System.out.println(myTextFieldComponents[currentTextField].getFloatTrait("x"));
//System.out.println(myTextFieldComponents[currentTextField].getFloatTrait("y"));
//System.out.println("stroke width = "+myTextFieldComponents[currentTextField].getFloatTrait("stroke-width"));

SVGLocatableElement textFieldBboxElem = (SVGLocatableElement) myTextFieldComponents[currentTextField];

if(textFieldBboxElem.getScreenBBox() != null){
SVGRect textFieldScreenBBox = textFieldBboxElem.getScreenBBox();
float boxWidth = textFieldScreenBBox.getWidth();
float boxHeight = textFieldScreenBBox.getHeight();
float textFontSize = myTextFieldComponents[currentTextField].getFloatTrait("font-size");
//System.out.println("box width = " + boxWidth);
tfCursor.setFloatTrait("x", myTextFieldComponents[currentTextField].getFloatTrait("x") + boxWidth + 1);
tfCursor.setFloatTrait("y", myTextFieldComponents[currentTextField].getFloatTrait("y") - (textFontSize /2));
tfCursorAnim.beginElementAt(0);
}else{
float textFontSize = myTextFieldComponents[currentTextField].getFloatTrait("font-size");
tfCursor.setFloatTrait("x", myTextFieldComponents[currentTextField].getFloatTrait("x"));
tfCursor.setFloatTrait("y", myTextFieldComponents[currentTextField].getFloatTrait("y")- (textFontSize /2));
tfCursorAnim.beginElementAt(0);
}
}

and here is the SVG for the cursor element that can be appended to QueryForm.svg

id="tfCursor"> to="#000000" dur="1s" repeatDur="indefinite"/>

Now I'll try to fix the out of bounds text problem.

Cheers

Alex

terrencebarr
Offline
Joined: 2004-03-04
Points: 0

All,

I just posted this:

http://forums.java.net/jive/thread.jspa?threadID=33421

Hope you like it.

-- Terrence

terrencebarr
Offline
Joined: 2004-03-04
Points: 0

dhamodharan,

Sure, that would be great. You need to choose a license for your code ... I suggest BSD. Paste into your code and then upload the code to

https://meapplicationdevelopers.dev.java.net/servlets/ProjectDocumentLis...

Thanks,

-- Terrence

terrencebarr
Offline
Joined: 2004-03-04
Points: 0

Here's an update:

We are having someone from our SVG engineering team working on the code. I have no date when this will be available but it shouldn't take too long. Sorry for the delay but I needed to find a free 'body' first ;-)

-- Terrence

dhamodharan
Offline
Joined: 2005-02-21
Points: 0

If you want I can share the generic SVGForm component which I have created based on SVGList component. Please let me know if you are looking for volunteers for development and testing

terrencebarr
Offline
Joined: 2004-03-04
Points: 0

Sorry, this has taken a bit of a backseat for me.

Let me check back with our experts to see if they can help.

-- Terrence

dhamodharan
Offline
Joined: 2005-02-21
Points: 0

I would appreciate if could help me with the above metioned request? Please help on how to handle the cursor problem. I would like to get large input value from fixed length text field. I would like to move the cursor back & forth to see the large input text value. I want to show only 15 character at a time. Please help.

Message was edited by: dhamodharan

terrencebarr
Offline
Joined: 2004-03-04
Points: 0

Azpublic,

Just catching up with this. Glad you're making progress. Let me know when you have some updated code that I can try.

-- Terrence

dhamodharan
Offline
Joined: 2005-02-21
Points: 0

Terrence/Alex
I would appreciate if you could share any of the latest code to handle the cursor problem. My requirement is to get large input data (say 40 characters) using SVG based textbox. How do i implement scrollable text box? In the text box, user should should see only 15 characters. User should able to use cursor, move the cursor back and forth to see the 40 character input.

I want to create 10 textbox field. How do I implement list of 10 text input fields?

I have created a generic SVG Form class. I can share this with you if you want.

terrencebarr
Offline
Joined: 2004-03-04
Points: 0

I've just checked in the first version of the "Extreme GUI Makeover" application. I haven't added it to the front page yet nor are there any screenshots, and there is no documentation either right now ;-( But it does work and you can start playing with the code

https://meapplicationdevelopers.dev.java.net/source/browse/meapplication...

Let me know how it goes. Your help in making improvements to the code is appreciated.

-- Terrence

azpublic
Offline
Joined: 2007-09-10
Points: 0

One word : Fantastic !

Here's my feedback

I had a litle trouble building the project as netbeans wouldnt write the jad correctly but i managed ot run it after recreating the midlet.

It runs pretty smothly in my emulator except that at some point a few minutes ago my zayit.exe went 100% for a while. Maybe its not related.

As for the code maybe I could allow myself a litle suggestion even if i'm not an expert.

I think you could make your QueryScreen class more reusable and generic. For example you explicitly declare private "String[] textFieldID = {"search", "location", "street", "sort"};" in my opinion this could be read directly from the SVG using some sort of convention (prettymuch like the one used for SVGMenu in netbeans). Same for the stroke effect when changing focus on a field. You could use the same naming convention and embed the effect inside an svg animation tag rather than being hardcoded. That would really decouple design from code and allow the design to be interchangeable.

As for the cursor effect I don't know if you already have a solution but what could work is a litle svg animation positionned at the end of the text but I really don't know how you could do that.

I noticed that if you fill in an input field entirely, the text will get out of bounds and continue even out of the screen. So I don't know if there is a way to determine the boundaries of the SVG element and start pushing the text to the left when its getting out of bounds as in a regular textfield.

I'm still testing the application so maybe I'll come back with other feedback later on.

My two cents :)

Thanks for this great demo. I can't wait to see other widgets.

Cheers,
Alex

Terrence Barr - Evangelist, Java Mobile & Embedded

Alex,

Glad you like it. As I said, it's a start.

meappdev-interest@mobileandembedded.org wrote:
> One word : Fantastic !
>
> Here's my feedback
>
> I had a litle trouble building the project as netbeans wouldnt write the jad
> correctly but i managed ot run it after recreating the midlet.
Strange. Never had that problem.

>
> It runs pretty smothly in my emulator except that at some point a few minutes ago
> my zayit.exe went 100% for a while. Maybe its not related.
>
> As for the code maybe I could allow myself a litle suggestion even if i'm not an
> expert.
>
> I think you could make your QueryScreen class more reusable and generic. For
> example you explicitly declare private "String[] textFieldID = {"search",
> "location", "street", "sort"};" in my opinion this could be read directly from the
> SVG using some sort of convention (prettymuch like the one used for SVGMenu in
> netbeans). Same for the stroke effect when changing focus on a field. You could
> use the same naming convention and embed the effect inside an svg animation tag
> rather than being hardcoded. That would really decouple design from code and allow
> the design to be interchangeable.
Absolutely. You picked up on all its limitations ;-) Feel free to start
fixing it.

>
> As for the cursor effect I don't know if you already have a solution but what
> could work is a litle svg animation positionned at the end of the text but I
> really don't know how you could do that.
No, we haven't worked on it yet. An animation might be tricky since the cursor
jumps around all over the place. It might be easier to just have a little triangle
in the image that can be positioned at any x,y coordinate programatically.

>
> I noticed that if you fill in an input field entirely, the text will get out of
> bounds and continue even out of the screen. So I don't know if there is a way to
> determine the boundaries of the SVG element and start pushing the text to the left
> when its getting out of bounds as in a regular textfield.
I'm sure there is. Honestly, I am not a complete SVG expert but I hope some of
our internal experts will be able to have another look at these issues.

>
> I'm still testing the application so maybe I'll come back with other feedback
> later on.
>
> My two cents :)
>
> Thanks for this great demo. I can't wait to see other widgets.

-- Terrence

>
> Cheers, Alex [Message sent by forum member 'azpublic' (azpublic)]
>
> http://forums.java.net/jive/thread.jspa?messageID=235363
>
> --------------------------------------------------------------------- To
> unsubscribe, e-mail: interest-unsubscribe@meapplicationdevelopers.dev.java.net For
> additional commands, e-mail: interest-help@meapplicationdevelopers.dev.java.net
>
>
[terrence.barr.vcf]
---------------------------------------------------------------------
To unsubscribe, e-mail: interest-unsubscribe@meapplicationdevelopers.dev.java.net
For additional commands, e-mail: interest-help@meapplicationdevelopers.dev.java.net

azpublic
Offline
Joined: 2007-09-10
Points: 0

Terrence,

In your last post you say:

> No, we haven't worked on it yet. An animation might
> be tricky since the cursor
> jumps around all over the place. It might be easier
> to just have a little triangle
> in the image that can be positioned at any x,y
> coordinate programatically.

I'm curious how you would position the image.
I managed to create a litle cursor animation that is repositionned each time myTextFieldBoxComponents[currentTextField] value changes. However I could only manage to position it at the beginning of the text usigng

tfCursor.setFloatTrait("x", myTextFieldComponents[currentTextField].getFloatTrait("x"));
and
tfCursor.setFloatTrait("y", myTextFieldComponents[currentTextField].getFloatTrait("y"));

which gets x and y coords of text and uses it to position my cursor.

Any hint on how to calculate the position of the end of the text ?

Thanks for helping

terrencebarr
Offline
Joined: 2004-03-04
Points: 0

Hi,

Unfortunately, JSR 226 doesn't support widgets such as TextFields and other things out of the box. JSR 287 and 290 will have some improvements around text input but that doesn't help you right now.

To address this there are basically two solutions:

1) Render an SVG image into a MIDP CustomItem and display that alongside other lcdui widgets in a MIDP Form. The disadvantage is that the standard MIDP layout manager will not allow you to overlap the SVG image with any other MIDP widget.

2) Create your own custom SVG-based widgets. This has several advantages such as making your UI more consistent (not switching between lcdui- and SVG-based elements) as well as it gives you new possibilities for UI design that standard widgets don't give you (animations, transitions, etc). Creating custom widgets is actually easier than it sounds because the hard parts (scaling, rendering, animations) are done by the SVG engine.

As for 2), I am currently working with other SVG experts on an example application "makeover" where we take an existing lcdui-based app and rework it in SVG and we had to create some custom widets for that. When it's done I'll post the code at:

https://meapplicationdevelopers.dev.java.net/

Hope that helps,

-- Terrence

Terrence Barr
Evangelist, Java Mobile & Embedded Community
Sun Microsystems, Germany
www.mobileandembedded.org

azpublic
Offline
Joined: 2007-09-10
Points: 0

Thanks a lot Terrence for your feedback !

This is great news ! I can't wait to see your revamped app. SVG widgets is exactly what I was looking for. Maybe in the meantime you could point me to some documentation as to where to start to develop my own SVGTiny form widgets ? A simple SVG textfield would do the trick for now :)

Tchuss

Alex