Web components lifecycle methods 3: filling in the gaps

As we have seen in my previous posts the web component standard defines only four lifecycle methods:

1. createdCallback  when the element is created, but possibly not attached to a document
2. attachedCallback  when the element is added to a document
3. detachedCallback when the element is removed from the document
4. attributeChangedCallback, when an attribute is changed

They are also all callbacks: they are called after the standard processing, so you cannot override the standard processing. This is a very small model. If you compare with the lifecycle for an Android Activity you will see that the activity also has calls like:

• onPause() Another activity comes into the forground
• onResume() User returns to the activity
• onStop() The activity is no longer visible

There are no corresponding callbacks in the web component standard. Most importantly ther is no callback method for when your element is displayed to the user. The attachedCallback will be called when your element is added to the DOM, but it might very well be hidden, specially since the practice to use hidden DOM elements for things like tabs, menues etc is so common in the HTML world. And there is no visibleCallback that is called when your element is shown.

Filling the gap 1: listen to the resize event

First step is probably to listen to the 'resize' event. This event is trigger when the browser window is resized, so it's pretty likely that you need to listen to it anyhow, if you ned to re-render or something when the window size changes. The right place to set up this listener is in attachedCallback:

                window.addEventListener("resize", me.redraw);

And you should remove it in detachedCallback:

window.removeEventListener("resize", this.redraw);

Now this might do, if you can make sure that your page triggers a resize event when the visibility of your element changes (like some sort of tabbing, page navigation etc). But it is a bit of overkill, since the resize event will go to all elements in the page and not just the ones affected by the change. It is also far from certain that the components you use do trigger resize events, so you might need to patch them.

Filling the gap 2: expose a draw method

This approach is more precise: you expose a draw method (or event) on your element, and the code in the page calls this method when needed. If you look at Googles implementation of web components for Google Charts this is the approach they have taken with the drawChart() method. Following this approach will simplify for users that use your component and have experience from Google charts. Unfortunately there is as far as I know no standard for this, so you cant really count on other components calling this method.

Of course you can combine these two approaches, expose a draw() method on your element, and then listen to the resize event and call the method when it occurs. 

Web Components lifecycle methods 2:attributeChangedCallback

The Web Component callback attributeChangedCallback seems simple enough. Whenever an attribute of your custoim component is changed, it will be called. The purpose of it is to support dynamic use cases: the web site developer can use standard HTML setAttribute to change attributes for your component, and the callback gives you a chance to react on the changes. Without it, or without an implementation of it, your component will not handle changes. But how does it actually work:

Case 1: modify a custom attribute

The first case is pretty straightforward: we have a custom component that defines some custom attributes. I use my own upper88-wordcloud throughout. It defines a couple of custom attributes, rows and options. When they are updated the callback is called, and I simply rerender the component. I use this in the demo page  with this little code snippet:

window.setInterval(function() {
  var chart = document.getElementById('hello_cloud');
  if (chart) {
   chart.setAttribute('rows', JSON.stringify([
    ['Hello', getRandomValue()],
    ['Word', getRandomValue()],
    ['Cloud', getRandomValue()]
   ], null, 2));
             }
 }, 3000);

As expected this leads to that the component is rerendered with modified data every 3 seconds. Note also that this is a callback: it is called after the attribute has been changed, so you can use the getAttribute method and you will get the new value. Also if you check in the attributes property you will get the new value. So far so good.

Case 2: modify standard attribute

My custom element extends HTMLelement and has of course the standard HTML attributes, like title. It also has the standard support for data-xxx attributes, which will be saved in the dataset property. Are they also covered by the callback??

To try this I added the following to the function above:

    chart.setAttribute('title','New title'+getRandomValue());
    chart.setAttribute('data-xxx','data-yyy'+getRandomValue());

And yes, this also works, and in the same way. The callback is called after the attribute has been updated, so you can use this also in your component.

Case 3: modify standard properties

Now using setAttribute to modify titles works but its a bit complicated. The title is available as a property, and can be modified directly, like this:

chart.title = 'New title'+getRandomValue();

(I use the helper function getRandomValue() to make sure I actually update the value) And yes, this works too. So it seems we can use the callback to monitor changes, it covers changes not made with setAttribute also.

Conclusion

The attributeChangedCallback helps you develop WebComponents that support dynamic changes.  Developers using your component can dynamically modify component instan ces using standard javascript techniques like setAttribute. You can use the callback to monitor changes not only in your custom attributesbut also in standard HTML attributes.

Web Components lifecycle methods 1: createdCallback and attachedCallback

The Web Components standard includes only four lifecycle callback methods:

Method	Called when
createdCallback	the element is created
attachedCallback	the element is inserted into the DOM
detachedCallback	the element is removed from the DOM
attributeChangedCallback(attrName, oldVal, newVal)	an attribute is changed

This is a very simple model and its simplicity has a cost if you try to build your own custom components or use web componets in your site. But lets see how they work.

Create and add elements

The two first methods are called when your page is loaded. Order is pretty obvious: first elements are created, then they are attached to the DOM. Lets investigate how they work in more detail.
There are different ways to create a HTML element, and part of the beauty with Web Components is that you can use all of them: creating your custom HTML element is just like creating a DIV. In this post I will look at three diferent ways to create a custom HTML element:

1. include in a standard HTML page
2. create in javascript, with document.createElement
3. include in a HTML template (in my case in a Polymer iron-page element)

Use web components in a standard HTML page

For this case I have created a small standard web page loaded a Web Component (in this case my own upper88-wordcloud) and created two elements using this custom element. I then open then page in Chrome and set breakpoints in both createdCallback and attachedCallback.

1. the callbacks are called in this order:
1. createdCallback element 1
2. attachedCallback element 1
3. createdCallback element 2
4. attachedCallback element 2
2. already in createdCallback my elements know of their environment, that is parentElement and parentNode are already set, and parentElement has html content. 
3. HTML initial reflow has not been made, so your element might have no size yet (I have written about this here)

Create web component in javascript

For a more dynamic case creating your element with javascript might be an alternative. Web Components support this also, but it will work slightly different.

To test this I added an empty div to my plain HTML page and a small javascript script:

var wc88 = document.createElement('upper88-wordcloud');
wc88.setAttribute("rows", '[ ["web",10],["components",15],["rocks!",20] ]');
document.getElementById('wc').appendChild(wc88);

1. callbacks for the javascript element are of course called after the others, with createdCallback first and attachedCallback after
2. when createdCallback is called parentElement and parentNode are both null, since the browser does not know where the element will end up. In attachedCallback they are set.
3. HTML reflow has been made so the element actually has a size in the attachedCallback.

Use web components in a HTML template

If you are building a Polymer site it's verey likely that you do not use any of these to methods but instead use your web component in a HTML template, which in turn another web component will actually attach to the document. This is the way for example the Polymer component iron-page works. An example of this is my homepage upper88.com. In that page I use Polymer and iron-pages for page navigation. Note that irob-pages use css display:none to hide the none active sheets, so they will be added to the dom even if the user does not see them (in fact even if the user never navigates to the page). There are three upper88-wordclod elements in this page.

1. Callback order:
1. createdCallback element 1
2. createdCallback element 2
3. createdCallback element 3
4. attachedCallback element 1
5. attachedCallback element 2
6. attachedCallback element 3
2. elements know their environment already in createdCallback, parentElement is set
3. No reflow has been made, so  the element has no size

Conclusion

As you can see the behavour is slightly different in the different scenarios. Even if you can trust the createdCallback to be called first and the attachedCallback to be called after that for each element, you cannot know if createdCallback has been called for all elements before the first attachedCallback or whether the browser will process the elements one by one. And even if parentElement and parentNode might be available in createdCallback (that surprised me) it also might not.

So, some rules:

• do not make anything in createdCallback that depends on the element environment even if it might work in your page
• do not count on knowing element size etc in attachCallback, they might not be available yet
• test your web component in all three scenarios: standard HTML page, javascript creation and HTML template

And still we have only tested this in Chrome.... 

Another web component - upper88-title

In the weekend I published my second web component - upper88-title. Like my first one this is a vanilla JS web component, that does not use Polymer or any other library, apart from the web components polyfill. It might also be the smallest web component ever in terms of lines of code...

What it does is very simple: it allows you to tag some html in your web page as title, and the web component will grab the text (skip html tags) and set it as document title. So you don't have to type the same text over again - and can avoid the risk of forgetting to update the document title, it will always show the same text as that displayed in the actual page.

A little more advanced is that you can use Polymer data binding (even if the component itslef does not depend on Polymer) to set the content of both the HTML tag and document title at the same time. 

Tried to publish it on customelements.io but it seems like the job that updates the site is broken, so you can't see it there yet.

Polymer summit 2015

During the day I've followed Polymer Summit 2015 over the net. Lots of good talks and useful information. I do belive that the approach of Custoim HTML elements is the future, but even though Polymer is on it's way, I don'ät think tehey are really there yet.

Pros:

• the approach of components that can be reused, extended and combined into new components
• some really awesome components are available out there, both from Google and others

Not cons, but stuff they have to work on:

• dependencies,build system etc: when you start a polymer project, bower will download that feels like half the internet for you, not really manageable, and my previous experiences from build system have not been to good. You really need a good build system, and preferanbvle a CDN so you don'ät have to manage all this
• the kiving of HTML, CSS and javascript in one file seems like a step backward.

But yes,. I do think web components is the future, I only wonder when we will be there....

Web Components: no size in attachedCallback

When I made the upper88-wordclod web component everything worked fine when I had hard-coded sizes in the beginning. The library worked well and gave the ouput I expected (well, actually a bit better, it's an awesome library).

But when I switched to a size set with CSS it stopped working. After some debugging I realized that the element had no size yet. When attachedCallback(which is the place where you would render your element for the first time) is called, the element has no size set yet, so if your code (or a library you might use) relies on getting the height or width of the element ity won't work.

The recommended way is to remove all sizing from javascript and do it in CSS instead, which will work, but in my case that was not an option. Instead I had to add a call to setTimeout to make the actual rendering take place a bit later, after sizes have been calculated. That seems to work well, you don't actually see the delay and I have had no problem with the solution.

First web component published - upper88-wordcloud

Yesterday I published my first web component, It is a custom component called upper88-wordcloud. Very basic so far, you set the data using the attribute rows and optionally minimum and maximum font size using an options attribute.

An example:

Goldmedals from Track and Field World Championship 2015

Html for this:
<upper88-wordcloud options='{"maxFont":60}' rows='[["Kenya", 7], ["Jamaica", 7], ["United States", 6], ["Great Britain", 4], ["Ethiopia", 3], ["Poland", 3], ["Canada", 2], ["Germany", 2], ["Russia", 2], ["Cuba", 2]]'>
    </upper88-wordcloud%gt;

Size, background color etc are set using CSS.

For rendering the actual word cloud the component uses a library available on GitHub, wordcloud2.js by Tim Dream. A great library, and it supports rendering the wordcloud as a set of HTML span's, which feels like the best way to go for a custom element.

So far the component is very basic and doesn't expose much of the flexibility that the library has. There is definitely room for improvement.

Polymer 1.0 First impressions

Recently at Google I/O Google announced Polymer 1.0 to be available and ready for production. Since I think that Web Components might very likely be the future for the web and since I tried Polymer 0.5 in some prototypes I thought I would give it a go and try Polymer starter kit.

If you do this make sure your Internet connection is fast: downloading the starter kitr is fast, but then downloading all dependencies takes ages, so this is no quick start.

Once you actually get started it's easy enough to start building. IUt took me just a few hours to build a small site with a few pages, working navigation etc. And it looked pretty OK:

Some reflections:

• I do like materialized design, clean, simply and looks modern. You get that more or less for free
• Materialized design are also good for us that are not graphic designers: you get usefulk set of icons to use, and it uses texts a lot, which is good
• the polymer elements are easy to work with

So creating a site locally was pretty easy. Deploying is another thing, more on that later, when I actually managed to publish my new site.

In Android May is month number four

So I published my Android app yesterday. But it didn't work as expected. Information was missing in the display. After debugging I found out that the missing information was not there in the parsed result either. Was there a bug in the XML parser? I debugged that too, but could not find anything that was wrong. Yet when I made the same search in the browser the information was there in the result.

And then I found it! It turned out that my app was searching not today's date, but a month ago. Most of the information was the same, but some was missing. The reason for this was that I pretty late in the project removed the ASAP I had used before and instead used a date field, automatically filled in with a date, that should have been today's, but was actually a month ago.

And the reason for this is how Android Calendar work:

• calendar.get(Calendar.MONTH) will get you the month number where January is month zero
• calendar.get(Calendar.DAY_OF_MONTH) will get you the day of the month, where the first day is one

Not very intuitive, even if I assume ther is some logic in it. Anyway, a quick bugfix and new upload to Google Play means that very few users, if any, have been affected.

New app published

Today I published a new app on Google play: Skåne Transport

It is an app for Local Transport in my home region, Skåne in the south of Sweden. It helps you find trains and busses (and perhaps ferrys) when travelling in Skåne and to adjacent regions like Copenhagen, Göteborg etc.

From a user perspective I have had two goals for the app:

1. It should be easy to search. You should be able to do most of your searches without typing. I do this by keeping history, making it easy to add favorites and having a preloaded list of the most important stations with the app when it is installed. The user also has the option to use her current location.
2. The information should be as accurate as possible. If I have information about delays, the app shows te delayed time rather than the one from the timetable (colored in red so that it should be clear for the user that there is a delay)

I'm pretty satisfied with the result. Let's see what the users think.

First Android app published

Yesterday I published my first Android app on Android market, UnSilence. The background is that I tend to forget to turn my cellphone back to normal after I've set it to silent during a meeting. I have missed too many calls beacuse of that...

So UnSilence helps you be allowing you to set your phone to silent (with or without vibaration) for a period of time, and then automatically turn sound back on.

The main design goal was too keep it simple, one click to start the app, and one click to set to silent, that's all.

Servlet http proxy

For a while I have been working on a project where we are trying to integrate a windows-based service in a Java EE environment. Basically the problem is to host an Ajax application under an application server like IBM Webspehere or Apache Tomcat. We also want to support portlets following the JSR 268 specifikation.

I googled around a bit and found lots of useful stuff, but nothing that did all that we wanted. The mainly problems was with headers and cookies, since we need to keep a session to the servicein the background we need to make those work. So I ended up writing my own. Not much code, but it might be useful for someone else, as it is pretty general stuff.

The service method

Since we want to handle all HTTP calls, we override the service method of HttpServlet. If you want only some methods (GET and PUT for example) to work you might just override doGet and doPost for example, but we want it all.. The implementation looks like this:

protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String qry = req.getQueryString();
URL url = new URL(protocol, host, port, req.getRequestURI()
+ (qry == null ? "" : "?" + qry));
HttpURLConnection urlConnection = (HttpURLConnection) url
.openConnection();
urlConnection.setDoOutput(true);
urlConnection.setDoInput(true);
urlConnection.setUseCaches(false);
urlConnection.setInstanceFollowRedirects(false);
urlConnection.setRequestMethod(req.getMethod());
handleRequestHeaders(req, urlConnection);
handlePostData(req, urlConnection);
// make the call - get response code
int responseCode = urlConnection.getResponseCode();

resp.setStatus(responseCode);
if (responseCode != HttpURLConnection.HTTP_OK)
log.info("HTTP code:" + responseCode + " "
+ urlConnection.getResponseMessage() + " URL["
+ url.toString() + "] " + req.getMethod());
else
log.debug("HTTP code:" + responseCode + " URL[" + url.toString()
+ "] " + req.getMethod());
handleResponseHeaders(resp, urlConnection);
// send output to client
handleContent(resp, urlConnection, responseCode);
}

This is pretty straight forward. The protocol (http/https), server and port to use are configurable. We take the URI from the request and add the query string, if there is one. Together with the configure host etc, this forms the new URL, which we open, using the same method as in the call. We set some parameters, request headers and post data if there is any.

We then call the URL, check the HTTP response code, and take care of the headers and the response, which all are sent to the client.

Handle headers
The part that we really needed was the headers. This simply transfers the headers between the two connections, with a few exceptions:

private void handleRequestHeaders(HttpServletRequest req,
HttpURLConnection urlConnection) {
// set request headers
Enumeration e = req.getHeaderNames();
while (e.hasMoreElements()) {
String key = (String) e.nextElement();
if (!"Host".equalsIgnoreCase(key)
&& !"Accept-Encoding".equalsIgnoreCase(key)) {
String value = req.getHeader(key);
log.debug("Request Header: " + key + ": " + value);
urlConnection.setRequestProperty((String) key, value);
}
}
//add your own headers here
}

There are two headers that we dont want to transfer from the client's request to our new request:

1. The Host header, since this will be our proxy server. The new Host header will be added automatically, so we don't need to think about it.
2. The Accept-Encoding header. This is a fix, the Accept-Encoding header turns gzip on, and since we have not implemented gzip in our proxy we don't want it. Another alternative would be to turn gzipping of requests off in our web server, perhaps this would have been better. If we do transfer th Accept-Encoding header, both servers might zip the content, which will not work.

Finally in this method we add our own headers, which is basically the reason why we need the proxy at all.

When we get the response back from the server we have the corresponding method to handle the response headers:

private void handleResponseHeaders(HttpServletResponse resp,
HttpURLConnection urlConnection) {
// set response headers
Map<string,>> headers = urlConnection.getHeaderFields();
Set<map.entry<string,>>> entrySet = headers.entrySet();
for (Map.Entry<string,>> entry : entrySet) {
String key = entry.getKey();
List<string>> headerValues = entry.getValue();
for (String value : headerValues) {
if (key != null && !"Server".equalsIgnoreCase(key)) {
log.debug("Response Header: " + key + ": " + value);
resp.addHeader(key, value);
}
}
}
}

This is basically the same as the request headers. In this case we just filter the Server header, where our proxy application server will add its own name.

Finally to set it up in web.xml we configure the URLs we want the proxy to handle, set the protocol, host and port and we are ready to go.

NoClassDefFoundError in BlackBerry

I have been struggling a few days with a strange error in BlackBerry. My app works fine in the emulator, but when you start it on BlackBerry Bold (software version 4.5) you get a NoClassDefFoundError. On BlackBerry Storm (software version 4.6) it works fine, but on Bold2 (version 5.0) again you get NoClassDefFoundError.

The documentation says:

Thrown if the Java Virtual Machine tries to load in the definition of a class (as part of a normal method call or as part of creating a new instance using the new expression) and no definition of the class could be found.

The searched-for class definition existed when the currently executing class was compiled, but the definition can no longer be found.

I have gone through all the changes since the last working version and I finally found it. I had added some fields like this:

fldPortHttp = new TextField("Port:", "", 20, Field.EDITABLE | BasicEditField.FILTER_NUMERIC);

This worked well, with no compilation errors and in the emulator, but caused the NoClassDefFoundError at runtime. The solution was simply to change to:

fldPortHttp = new BasicEditField("Port:", "", 20, Field.EDITABLE | BasicEditField.FILTER_NUMERIC);

The future for mobile java

The last three years or so I have worked mostly with mobile java, starting with Java ME and later moving into BlackBerr and Android. A lot of things has happened, three ears ago Android existed, but ther were hardly any phones available and BlackBerry did exist, but I knew nothing about it.

Today the future of Java ME is uncertain. Programming in Java is a good option on most mobile platforms (except iPhone), but the strongest alternatives are Android and BlackBerry, not Java ME.

There are of course different reasons for this. On the technical side, the User Interface options are very limited. LCDUI is very restricted, you very quickly end up with skipping the higher level API, because it is too restricted, and using the Canvas API, where you basically have to paint everything yourself. Doing input in a canvas based interface is difficult, you can react on key down and up, but the standard does not really allow you to tell if the devices even has a keyboard, or if you need to display a virtual keyboard on the screen.

An even worse problem is the fragmentation of the market. Java implementations differ, and even if it is very probable that your java me code will run on most devices (if it is well written) verifying that it does is not a smal task. And if you want it too look good it is even worse. Emulators do not help much either, verifing that something runs in the emulator does not guarantee that it will work on the device. And it is not even sure that there is an emultor for your target device.

And phone manufacturers keep making new models all the time... Apple basically has one platform and offers upgrade for old versions (sometimes free of charge, sometimes at a small charge) but the competition has not learned from this. Instead they have incompatible version on different devices, where you basically have to test on, if not all, several different versions. Just keeping up with the new models from the main manufacturers ( there are only four or five) takes a lot of time. The so called java verification does not guarantee that your application will run on all Java ME implementations with the features you need, instead you have to verify it again and again as there are new devices.

All in all this leads to that Java ME is not a good alternative for your application development today. The future of java om the mobile is rather in Android or BlackBerry. That is if not one of the major manufacturers take steps to fix this. And frankly I don't see this happening.

An exception to this is possibly Symbian. Java ME implementation on Symbian is pretty good. But it seems like Nokia is more interested in promoting development in C++, or rather the very restricted C++ available on Symbian.

New Antenna release

Today I released version 1.2.1 of Antenna. The new version includes both bug fixes and new features.

I made a mistake in the 1.2.0 release, which leads to a Null Pointer Exception if the Wireless Toolkit can not be detected. Antenna can detect a lot of toolkit's, but not all, so this has given users some poblems. A patch has been in the repository for a whil, but now it is in a release also.

When the 1.2.0 release was made, ther was no Java ME SDK for Mac available, but now there is. Unfortunately the file we used in 1.2.0 to detect Java ME SDK 3.0 is not included in the Mac version, so toolkit detection fails. This is fixed in the 1.2.1 release, which should work with Java ME SDK for Mac ( I haven't tested it myself, since I don't have a mac).

The realease also includes som contributed patches:
- obfusactor arguments can now be passed to WtkPackage
- Key stor type can be set in WtkSign
- WtkRapc can build libraries

More info on antenna and the release is available here.

Supporting BlackBerry touch devices

Our BlackBerry application is built using BlackBerry software version 4.5. Unfortunately this means that we can not handle touch events, since they are only supported from version 4.7. Since most of our users have 4.5 or 4.6 this is not an option. Up til now the application has had very limited functionality on touch devices like BlackBerry Storm, running in the so called *compatibility mode' with the virtual keyboard displayed all the time and only about half the screen available for our application.

But now we have made a few changes:
We upgraded the Storm device software (to version 4.7.0.181). This solved the problem with the virtual keyboard, which now can be displayed only when needed.

We revised our application. The main problem is our custom object, which did not work well. This seems to be because the navigationMovement method is not called on a touch device. Since we had some application logic in this method in our custom object, it did not work well. The solution was to move the code to the moveFocus mthod, which is called both on touch and keyborad devices.

In the long run we probably will have to provide different installations for users with 4.5/4.6 or 4.7 software version. Still we do not support more advanced touch screen usage.

Antenna 1.2.0 with support for Java ME SDK 3.0 released

Yesterday I made the new antenna version with support for Java ME SDK 3.0 available for download. The testers have been positive so far, so it is ready for more general use.

The changes are documented in here. You will also find the matrix with toolkits ad optional libraries there, it seems like Blogger don't really like my html table...

The download is available here.

Java Me toolkit's and support for optional JSR's

As a part of the new Antenna release I have reviewed the toolkits supported and which JSR's they support. The result is the matrix below.

As you see, many JSR's are widely supported, while others are supported only by a few manufacturers. If you need Bluetooth, PDA, Wireless Messaging, SVG or Mobile Media, they are available in most emulators. But if you need Internationalization, or Open GL your choice is more limited.

Many manufacturers have their own additional APIs. Most used is Nokia UI, which is actually also supported by Sony Ericsson.

JSR API Support	Antenna property	Sun WTK 2.5	Java ME SDK 3.0	MOTODEV Studio for Java ME	Nokia S60 3rd Edition SDK	Nokia N97 SDK	Nokia S40 5thed	Sony Ericsson SDK 2.5	Sprint WTK 3.3.2	LG SDK 1.3 for Java ME
CLDC version		1.0,1.1	1.0,1.1	1.1	1.1	1.1	1.0, 1.1	1.0, 1.1	1.0, 1.1	1.0, 1.1
MIDP version		1.0,2.0,2.1	1.0,2.0,2.1	2.1(2.0)	2.0,2.1	2.0,2.1	1.0,2.0,2.1	1.0,2.0,2.1	1.0,2.0,2.1	1.0,2.0,2.1
JSR 75 PDA	optionalpda	x	x	x	x	x	x	x	x	x
JSR 82 Bluetooth	Bluetooth	x	x	x	x	x	x	x	x	x
JSR 135 Mobile Media 1.2	mmapi	x	x	x	x	x	x	x	x	x
JSR 172 Web Services	j2mews	x	x	x	x	x	x	x	x	x
JSR 177 Security and Trust Services	satsa	x	x	x	x	x	x	x	x	x
JSR 179 Location	locationservices	x	x	x	x	x		x	x	x
JSR 180 SIP	sipapi	x	x	x	x			x	x	x
JSR 184 Mobile 3D Graphics	java3d	x	x	x	x	x	x	x	x	x
JSR 120 WMA 1.0	wma	x	x	x	x	x	x	x	x	x
JSR 205 Wireless Messaging 2.0	wma2	x	x	x	x	x	x	x	x	x
JSR 209 AGUI	agui		x
JSR 211 Content Handler	contenthandler	x	x	x			x	x	x	x
JSR 226 Scalable 2D Vector Graphics	s2dvgapi	x	x	x	x	x	x	x	x	x
JSR 229 Payment	papi	x	x					x	x	x
JSR 234 Advanced Multimedia Supplements	ams	x	x	x	x	x	x	x	x	x
JSR 238 Mobile Internationalization	miapi	x	x	x				x	x	x
JSR 239 Java Binding for OpenGL ES	opengl	x	x	x				x		x
JSR 256 Mobile Sensor	mobilesensor		x			x				x
JSR 257 Contactless Communication	rfid									x
JSR 280 XML	xml		x
JSR 300 DRM	drm									x
G24 MOTO2MOTO	G24			x
Motorola APIs	motorola			x
Nokia UI API	nokiaui					x	x	x
eSWT API	eswt					x
IAP Info	iapinfo					x

Antenna: Support for LG SDK 1.3 for Java ME and Nokia N97 SDK

Today I added support for LG SDK 1.3 for Java ME and Nokia N97 SDK to antenna. This is available now in the repository and hopefully soon as a binary download.

Antenna Java ME SDK 3.0 version now available

My patch for antenna is now comitted into the repository and is available for download. Still no build available, you have to get the sourcecode yourself and build it, or send me a mail and I will send you a jar file. Hopefully the pre-built version will be available soon. Documentation is also not updated yet, but you will find some in this blog.

Antenna support for Java ME SDK 3.0

For building our Java ME application we use Antenna. It is a great tool, that makes automated builds possible and also works well as your regular build tool. But it lacks support for Java ME SDK 3.0 and other newer toolkits. Since we need that, I have made a contribution to the Antenna project, added as a patch yesterday.
If you want to try the modified verions, send me a mail and I will send you the jar.

How it works

A key property of your Antenna setup is the wtk.home property. It should point to the base directory of your WTK/Java ME SDK installation. Antenna uses this to detect which toolkit you are using. In the older version toolkits are hardcoded into Antenna sourcecode. In the new version textfiles are used to set up available toolkits and their properties. Antenna goes through a list of toolkits, described in the text file autodetect.txt, and checks if the unique files for that specific toolkit are available. If they are, the right toolkit have been found, and properties are loaded from a properties file.

This makes it easy to add a new toolkit or new properties for the existing one.

Supported toolkits

I have tested the new version with the following toolkits:
- SUN Java ME SDK 3.0
- Sun WTK 2.5.2
- MOTODEV SDK for Java ME v2
- Nokia S60_3rd_FP2_SDK_v1.1 (Symbian)
- SPRINT WTK 332
- Samsung_SDK_11 (autodetected as WTK 2.5.2)
- SonyEricsson WTK 2.5.2
- Nokia S40 5th Edition SDK Feature

Pack 1

I have also made some tests with Mpowerplayer, but the stub for CLDC 1.1 provided with Mpowerplayer seems not to match the specification. If I replace it with the one from Suns WTK 2.5.2 it seems OK. I have not tested Mpowerplayers preverifier, since it is Mac based and I use a Windows PC.

Antenna setup

Antenna properties are described here. They work as before, with the new feature that additional libraries can be defined dynamically, in the toolkit properties file, without any need for changes in Antenna source code. If I set up a property for a toolkit like this:

jsr999=lib/jsr999.jar

I can then turn it on in my ant file by setting the property wtk.jsr199.enabled to true. I can also turn on all defined additional libraries by setting property wtk.all.enabled to true. During development I used this, since Antenna checks that all jar files are available.

Adding a new Toolkit
You can add a new toolkit to antenna just by editing a text file and adding another. Do like this:
First you add a new line to the file autodetext.txt (in the res directory). It should look something like this:

#sony ericsson
sonyericwtk2;lib/semc_ext_jp8.jar;lib/cldcapi11.jar

Lines starting with # are comments. The lines defining toolkits should start with the toolkit property filename and then contain a list of files that are unique to this toolkit. File names should be relative to wtk.home.

Then you add a properties file, in this case sonyericwtk2.properties. It looks something like this:

name="Sony Ericsson WTK2"
include=wtk25
nokiaui=lib/nokiaext.jar
semc=lib/semc_ext_jp8.jar
vodafone=lib/vscl21.jar


The properties you could use are:

• name: a descriptive name for the toolkit. Use this always.
• preverifyversion: 1 means WTK 1 style, support only CLDC 1.0, 2 means WTK 2 style, include Target parameter in preverify command, 3 means WTK 3 style, only add parameter cldc1.0 if cldc 1.0 is used
• emulator: exe or jar file for emulator
• cldc10,cldc11: libraries for cldc versions
• midp10,midp20,midp21: libraries for midp versions
• include: include another toolkit definition. Useful if the toolkit is an add-on to another toolkit, like WTK 2.5 or Java ME SDK 3.0

All other properties will be taken for add-on libraries that will be added to classpath if wtk.[propertiy].enabled is true, or if wtk.all.enabled is true.

Please let me know if you have any problems or improvement suggestions.

Catch System.out from BlackBerry simulator

Just a little trick I just learned. Sometimes I want a quick and easy logging, just to see what's happening in my program. The easiest approach, specially early in the project is simply using System.out. But when you run your program in the emulator you don't see system out anywhere. To see it you need the command line parameter /app-param=JvmDebugFile.

Just run the emulator as follows:

fledge /handheld=9000 "/app-param=JvmDebugFile:bblog.txt"


In the bblog.txt you will get a lot of info, and your System.out output.