Series 40: SVG resources localization
This article explains how to localize SVG resources in java midlet application. This is the next article after Game development for Series 40 : adding touch support in wiki article series Rapid game development for Series 40 with NetBeans Visual Designer and Game Builder.
Article Metadata
Code Example
Tested with
Compatibility
Platform Security
Article
Contents |
Introduction
Attractive main menu can be created with use of Scalable 2D vector graphics. SVG menu has lot of advantages than any other approach:
- it is scalable -- means you support any device automatically
- it is pure artwork and potentially looks nice
- it is compact and easier in implementation than Canvas use for graphic menu
- you can get access to SVG elements and receive notification from them upon user interaction
In this article we are going to explore direct access to SVG elements in SVG document for text localization. Using one graphic presentation for range of languages that is amazing opportunity to speed-up development!
Before starting
Before going deep in mobile software localization problems, please go through amazingly clear and proved-to-be working tutorial How to create localized text resources created by grahamhughes . Having that localization approach in hand all we need is somehow to access SVG element by ID and alter it.
How to access SVG element in SVG document
SVG document is a XML based document follows scheme declared and maintained by W3C consortium. Every element can be given a string ID. java SVG supporting package allows to find element by ID. To alter its value trait "#text" is used. Please see function implementation below.
void localize(GameMIDlet midlet, String ID, int localizedID) {
SVGElement text = (SVGElement) svgDocument.getElementById(ID);
if(text != null){
text.setTrait("#text", midlet.locText[localizedID]);
}
}
This function can be found in TouchSVGMenu class implementation of fifteenpuzzle application project source code. In the code fragment midlet.locText[localizedID] call gets string resource from a resource array, instantiated in the midlet.
How to detect device language and select proper resource
Query the current locale of the device using "microedition.locale" attribute :
the result string follows ISO_639-1 standard. With help of How to create localized text resources tutorial let's build real application, again, all referenced materials are in How to create localized text resources and fifteenpuzzle application project source code. Please find directory "tools" here where you can see text localization resources sources for languages English, Finnish and Russian, resource conversion tool and its source code.
Summary
This article demonstrates advantages of using Scalable Graphics in Series 40 applications. Please see screen shot below taken with Nokia Remote Devices service and fifteenpuzzle puzzle game application project
main screen localization English
main screen localization Finnish
Hamishwillee - Document the trade offs?
Hi Izinin,
Thanks for this article. There is certainly a place for SVG in games menus, and given that, being able to localise them is important.
It is possibly worth updating your introduction slightly with more clarification of the domains in which you might use the SVG approach (e.g. games) because obviously it is more efficient and easier to use a high level component like LCDUI TextField or LCDUI TextBox or LWUIT TextArea etc if that sort of menu is suitable.
What would be great is to write a companion article (or extend this one) which discusses more generally the tradeoffs between using SVG and other methods for dealing with the complex problem of scaling. This could cover for example the fact that SVG consumes more memory, and that you may need to do work to scale the borders of touchable elements in code. In contrast drawing to Canvas directly means that you need to handle all scaling problems, which could be more complicated for developers. The article could compare and contrast Canvas versus SVG drawing, explain step-by-step how to create the Mystic Square Screen using both ways and mention each method’s strengths and weaknesses (maybe include screenshots taken from devices with different resolutions).
Regards
Hamishhamishwillee 04:03, 15 August 2012 (EEST)
Izinin - tradeoffs between using SVG and other methods
Hi Hamish,
Good point and good topic for a wiki article. Thank you for the suggestion. I will come back to Series 40 soon.
How easy LWUIT in development is depends on development tool because LWUIT operates resources heavily. I will need learn more Nokia developing tools offering.
As for SVG document -- all effects here are supposed to be made by hand -- but there is good point, once you grasp the technology , you do not depends on tools any more :). Thinking about WEB applications growing popularity that is a valuable knowledge.
SVG animation is fired when an element is getting input focus:
<animateTransform begin="button_0.focusin" attributeName="transform" type="scale" to="2" dur="0.25s" fill="freeze" additive="sum" />On the example above, you can see how concise the animation definition is and persons who have QtQuck, Silverlight background will find many common things in the expression.
Regards, Igor
izinin 10:15, 20 August 2012 (EEST)