Finally I did it! All the trial versions of Adobe Illustrator, Ikivo Animator, Beatware Mobile Designer and God knows whats more got expired and I really did start looking for other solutions to create Java ME menu (different than the standard solutions from the J2ME libraries) when finally I did something really simple – I just took a similar thing found on java.net and carefully examined the XML code behind the picture.
Looking for a similar solutions was my latest nightmare, I have to prepare my Final Year Project, the project itself is not about mobile GUI’s so I don’t want to spend much time on it but I just didn’t want to go for a demo with those ugly standard java components.
There are a number of tutorials how to add svg tiny files in Netbeans Mobility Pack but it is very difficult to find a tutorial describing how to create such a file. Nevertheless, I have found myself in a situation where I have just decided to write such a file from scratch and forget about all those fancy tools as they are almost zero compatible between each other (even when each of them produces “standard” svgt file as an output
), and because of the fact that I couldn’t find enough resources on the net about using them for this purpose.
Speaking about the tools, I have found very strange thing about Beatware Mobile Designer software, so many times seen on the Sun’s/NetBeans tutorias or screencasts, this software is almost impossible to find, maybe my ISP blocks access to their servers for some reason which I can’t imagine, but I had to digg in some very dusty corners of the net to obtain the trial version of this software.
Anyway, maybe sometimes is just best to stick with the simplest tool – text editor!
After a while, when experimenting with the svg document I started to realize that it is not actually that difficult to follow.
Check out the tutorial “Adding and Editing Scalable Vector Graphic (SVG) Files in the Mobility Pack” @:
http://www.netbeans.org/kb/55/svg-tutorial.html
The necessary files for this tutorial you can download from:
http://wiki.netbeans.info/wiki/attach/NBDemoSVG/svgs.zip
When you download the svgs.zip and unpack it you will find a file named “menu.svg”,
Open the file in any text editor and you can play with it, checking in Netbeans if it’s still svgt compilant
The menu is pretty simple, consist of two layers, one with graphics beneath menu elements and another one with menu itself :
To create the your own menu just delete the layer with the graphics if you don’t like it and add another one.
You can easily sort out the menu elements, how they are organised and how they work.
1. First thing to remember is that all menu elements must be named with the pattern:
menuItem_blahblah, this is necessary if you want netbeans to recognize the element as an actual menu item.
2. The menu itself consists of simple animated text elements, if you want to add/remove another menu item just copy the existing one and change the element name plus the values in “values” attribute accordingly, you can sort out what values you have to enter there by looking at previous elements.
3. To make the moving box work with additional menu elements you have to put some more work into it, first remove all existing “animateTransform” elements nested within
element and insert there new transforms which will work with any number of menu items. The new transforms for my menu look like this:
begin="menuItem_0_download.focusin" dur="0.3s"end="menuItem_0_download.focusout" fill="freeze"/> begin="menuItem_1_animate.focusin" dur="0.3s"end="menuItem_1_animate.focusout" fill="freeze"/>begin="menuItem_2_about.focusin" dur="0.3s"end="menuItem_2_about.focusout" fill="freeze"/> begin="menuItem_3_exit.focusin" dur="0.3s"end="menuItem_3_exit.focusout" fill="freeze"/>begin="menuItem_4_test.focusin" dur="0.3"end="menuItem_4_test.focusout" fill="freeze"/>
etc. with “values” element increasing every time by 30.
Here you have transformed, very simple menu –>
Anyone interested in JSR-226 know that there is a problem with SVGt if you want to use components like TextFields etc, as there is on support for these elements in the specs so far, at least I have never hear of it.
If you read this post you are probably looking for solution with custom J2ME GUI or you are one of my curious friends and probably you don’t understand much of this anyway, but if you are the first kind, and you know about any valuable tutorials, tools or simply anything JSR-226 related please post it in comments, any kind of collaboration would be appreciated!
Posted by admin | Posted in Code Snippets | Posted on 06-10-2007
0
I’m preparing the background for my Final Year Project at University. I’m planning to develop a mobile application making a heavy use of Location Based Services. The mobile application will communicate with the application server (possibly Glassfish V2 or JBoss) using Web Services (JSR-172). This is the prototype web service for later use by the mobile application which allows to retrive the URL of PNG image from the yahoo server.
The reason for choosing Yahoo over Google is very simple, first, Google have very strict policy on using their map images (retriving image tiles from the Google servers directly is against their licence agreement), secondly, Yahoo provides very Simple Map Image API which allows retriving the images using simple REST queries on the yahoo servers.
Basically, using Yahoo Maps API is straightforward, the only problem is if you want to retrieve just the image URL without all the REST additional XML tags.
The prototype web service described here retrives the XML document and parse it using object created from one helper class.
The web service is created using EJB3 technology and takes number of parameters to specify the details of requested image:
@WebMethod(operationName = "getImageURL")public String getImageURL(@WebParam(name = "latitude")float latitude, @WebParam(name = "longitude")float longitude, @WebParam(name = "width")int width, @WebParam(name = "height")int height, @WebParam(name = "zoom")int zoom) {MapRetriever retriever = new MapRetriever(latitude, longitude, width, height, zoom);return retriever.getMapImageURL();}
The parameters are self-describing, if you want to modify it please have a look the Yahoo Simple Map Image API for more options.
The MapRetriver class is actually responsible for retrieving the URL of the map image from the REST response. The code for this class is presented below:
/* * MapRetriever.java * * Created on 03-Oct-2007, 15:56:47 * * */
package fyp.helpers;import java.io.BufferedInputStream;import java.net.HttpURLConnection;import java.net.URL;import javax.xml.parsers.DocumentBuilder;import javax.xml.parsers.DocumentBuilderFactory;import org.w3c.dom.Document;import org.w3c.dom.NodeList;import org.xml.sax.SAXException;import java.net.HttpURLConnection;import java.net.URL;import javax.xml.parsers.DocumentBuilder;import javax.xml.parsers.DocumentBuilderFactory;
/** * The object initialized from this class gets lat and long coordinates from the * client and retrives map from yahoo REST service, returns the map as an png image * modified to the client requirements. * @author kris */public class MapRetriever {
private double latitude;private double longitude;private int imgWidth;private int imgHeight;private String yahooApplicationID;private String baseURL;private int zoom;/** * Constructor initializing the necessary elements for retriving the map url * image. The parameters specify the location as well as image width and * image height. The zoom element specify the precision of the map image. * * @param lat float: -90 to 90 The latitude of the starting location. * @param lon float: -180 to 180 The longitude of the starting location. * If both latitude and longitude are specified, they will take * priority over all other location data. If only one of * latitude or longitude is specified, both will be ignored. * @param width integer: 10 to 2000 (default: 620) * The width of the image being generated, in pixels. * @param height integer: 10 to 2000 (default: 500) * The height of the image being generated, in pixels. * @param zoom integer: 1 to 12 (default: 6) The zoom level for * the map, from 1 (street level) to 12 (country level). */public MapRetriever(float lat, float lon, int width, int height, int zoom) { this.latitude = lat; this.longitude = lon; this.imgWidth = width; this.imgHeight = height; this.zoom = zoom; this.yahooApplicationID = "YOUR-OWN-YAHOO-ID"; this.baseURL = "http://local.yahooapis.com/MapsService/V1/mapImage?appid=";}/** * This method calls constructInitialRequest() for creating initial * request to the yahoo server and retrives XML document as a result of the * REST query. Using XML parser the method retrives the proper image URL * from the yahoo REST response. * * @see constructInitialRequest() * @return url of the image on the yahoo server */public String getMapImageURL() { String url = this.constructInitialRequest(); String result = null; URL u = null; try { if (url != null) { u = new URL(url); } HttpURLConnection uc = (HttpURLConnection) u.openConnection(); BufferedInputStream bis = new BufferedInputStream(uc.getInputStream()); DocumentBuilder docBuilder = DocumentBuilderFactory.newInstance().newDocumentBuilder(); Document doc = docBuilder.parse(bis); NodeList nl = doc.getElementsByTagName("Result"); result = nl.item(0).getFirstChild().getNodeValue(); } catch (SAXException ex) { ex.printStackTrace(); } catch (Exception ex) { ex.printStackTrace(); } return result;}/** * Method for gathering all initialized parameters and creating * the initial request url for retriving the xml with the image url * from the yahoo server. * * @return initinal url string for making the request to the yahoo server */public String constructInitialRequest() { return baseURL + yahooApplicationID + "&latitude=" + latitude + "&longitude=" + longitude + "&image_height=" + imgHeight + "&image_width=" + imgWidth + "&zoom=" + zoom;}
}
To use the Yahoo service you would have to create an account first and request the unique Yahoo ID which you have to add in all your requests to Yahoo servers.
Again if you are interested in all possible arguments for the Yahoo REST queries please refer to the Yahoo Maps API web site.