Skip to main content

JSR-226 : How to Change value of SVG text?

4 replies [Last post]
man4mobile
Offline
Joined: 2007-02-20
Points: 0

Hi,
I've read the SVGContactList example, but for me as a beginner, it's hard :)
So I tried to make just a simple one. I tried to make a list of data, just display 5 datas per screen. I was just trying to change the text value of SVG file i've made, but it's not working :((

This is the SVG file : (i'm using Mobile Designer)

<?xml version="1.0" encoding="UTF-8"?>

Menu 5
Menu 4
Menu 3
Menu 2
Menu 1

First i thought I can use setTrait()...but the value I wanna change is between the tag. I want to change the "Menu 1", ... "Menu 5" String to another data.
Can anyone help me? But please with a simple example, don't use the SVGContactList Demo :)

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
vhardy
Offline
Joined: 2004-02-18
Points: 0

Hi,

In order to change the textual content in a element, you need to use what is called a 'pseudo-attribute' on the text element. The pseudo-attribute's name is "#text" and it is called a 'pseudo-attribute' because instead of changing a real attribute on the text element (e.g., the "fill" attribute value) it changes the text content on the element.

Here is how you would do it:

SVGElement text = (SVGElement) doc.getElementById("item5");
text.setTrait("#text", "My new text for item 5");

The above assumes 'doc' is a reference to the Document node associated to the SVGImage instance:

SVGImage image = ....;
Document doc = image.getDocument();

Good luck with your project. You are right that SVGContactList is a complex example. There are lots of examples on phoneME ui labs () which are much easier to get started.

Actually, there is an example for just the question you asked:

https://meapplicationdevelopers.dev.java.net/uiLabs/changing_text.html

and there are more at:

https://meapplicationdevelopers.dev.java.net/uiLabs/IntroTo226.html

Vincent.

man4mobile
Offline
Joined: 2007-02-20
Points: 0

Hi Vincent,

Thx for the answer, really great.
I also have another question, if I want to use Netbeans SVGMenu component, and make the SVG menu using Mobile Designer, and then export it into .svgz, the animation won't work. It seems that Mobile Designer uses mouseout instead of focusout.
I can't change the mouseout to focusout, since it's compressed, and can't open it with text editor.
Is there any tools which can be used to modify the mouseout into focusout? What tools do you use to create SVG Concact List?

Thx :)

vhardy
Offline
Joined: 2004-02-18
Points: 0

Hi,

To modify the SVG source, you can use gunzip to turn the .svgz file into a regular svg file and then search replace the mouseover/mouseout with focusin/focusout.

Alternatively, I think Mobile Designer has a way to trigger events on focusin/focusout. I believe there is an SVG Timing option panel where, if you select "Event", you'll find "focus in" and "focus out" under the event type.

Good luck with your project.

Vincent

man4mobile
Offline
Joined: 2007-02-20
Points: 0

Ok Vincent, thx a lot for the help.

For Mobile Designer, I couldn't change the value to focusin/focusout, they still use mouse event if I want to create an event. Tried to look for documentation, but couldn't find it on the web.Thx anyway :)