Develop a Mobile RSS Feed the Easy Way

o, you’ve decided to try building a mobile application. You’re looking for a lot of control over the user experience and you’d also like access to various device features: sound, camera, local storage, and so on?features to which you normally would not have access in a web-based application.

The first issue you face is deciding upon a platform. While there are several major platforms, the biggest by far is J2ME. Because of it’s market share, you choose this platform.

Looking at your J2ME options, you’ll see that, even if you program in J2ME, mobile phones come in different configurations. This impacts screen size and resolution and buttons and keyboard layouts, among other things. You’ve probably already realized that it’s going to take a lot of code to create something useful, and then you’ll have to port your app to all the different platforms out there. Presuming you’d rather spend your time developing than testing and porting, it would be worth your time to check into Breeze, a new J2ME development platform from called Cascada Mobile. With Breeze, you build your mobile app in J2ME, but you develop in HTML and JavaScript. Breeze supports DOM and CSS, which gives you control over look and feel, and also allows you to create internet-connected applications. Best of all, the price is right: Breeze is free. You can even distribute your new mobile application for free at the Breeze Application.

Sounds too good to be true? This article will walk you through the development of a simple mobile RSS feed, built using the Breeze platform. Click here to download the sample code and follow along. See for yourself how easy it is!

Your Mobile RSS Feed: The Foundation
After you’ve installed the Java developer kit for wireless, get started by downloading Breeze at www.cascadamobile.com. It’s pretty straightforward. You can use a standalone simulator, or an Eclipse plug-in. Breeze ships with the source code for a sample application which is a nice tutorial, and everything you need, in terms of documentation, can be found here.

With the Eclipse plug-in installed, create a new Breeze project and the basic app template is set up for you, as shown in Figure 1.

Next, use HTML to create your basic layout. Now, you could do this in any editor, and even just preview it in a desktop browser, but you might as well make sure it looks good on a phone right from the start. So, grab a logo, and put some HTML in to place it on the screen, and then set up a spot for your text to appear. To add some nice CSS to the application, you can also go ahead and set up some DIV and class information.


Figure 1. A Basic App Template: Breeze sets up the basic application template automatically.
 
Figure 2. Appplication Home Page: After Eclipse rebuilds, you should see something like this.

In this example, your project folder is called res and it will contain your logos and CSS files. The code in Listing 1 shows the app’s placeholder text where the data will appear. Use the code in Listing 2 add a little style and color with some CSS.

After Eclipse rebuilds things, your application should look like Figure 2.

Your Mobile RSS Feed: Building a Connection
Now for the interesting part. You need to create an Internet connection and go get a feed. You’ll use the Breeze Feature pack for internet requests and DOM manipulation and include the following lines in the index.html:

The above code tells the Breeze compiler that you want to include these Breeze features and that they are required for the application to work (because phones have limited resources you don’t want to automatically include everything).

To keep things clean, place your JavaScript in another file called res/devx.js. Your project should now look like Figure 3.

Figure 3. Keep Your Files Organized: Place your JavaScript in another file called res/devx.js.

Now that you’ve included the feature packs for your application, you can create your request and result handler, called resultFunction. This function load makes the request for data over the internet, and you’ll call it when your app starts up.

You’ll need to put a call to the load function in my application and you might as well put that in the onload for the index.html page:

Place the above function’s definition in devx.js and define it as follows:

function load(url){	xmlhttp=null;	xmlhttp=new CMXMLHttpRequest();	if (xmlhttp!=null)  	{xmlhttp.onreadystatechange=resultFunction;  		xmlhttp.open("GET", url );  		xmlhttp.send(null);	}}

Notice that the example sets up a result handler to deal with state changes in the request. This is where you put your code to deal with the response when it comes back:

function resultFunction(){	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 		xmlDoc=new CMXMLDocument();		xmlDoc.async="false";		xmlDoc.loadXML( xmlhttp.responseText );	//just print it in the console for now so I can see it				String.print(xmlhttp.responseText);		}		}

This will ensure that you get your data back and can view it in the console (see Figure 4).


Figure 4. Viewing Data in the Console: The result handler deals with the returned data, allowing you to view it in the console.
 
Figure 5. The App in Breeze: This is what your application should look like when viewed through the Breeze Eclipse plug-in.

You’ll populate the data back into your page using the DOM. First, add a function called parseFunction, that will pick data out of the response XML DOM.

To keep this a little cleaner, use some variables to reference various elements. To further keep things simple, take the first news item starting with index 0, as shown in Listing 3.

Do the same for the date and text of the article.

So what does the app look like viewed in the Breeze Eclipse plug-in? See Figure 5.

Your Mobile RSS Feed: Fine-Tuning
Now, you’ll want to tidy up some of the HTML in the RSS feed so that it returns only the text. To do so, use this very basic regular expression:

function stripHTML(theRawText) {  var myRegEx2 = /<(.|
)+?>/;  var myOutput2 = theRawText;    myOutput2 = myOutput2.replace(myRegEx2, "");      return myOutput2;	 }

Then, call the following from your parseFunction code:

//now set the XML document on Cascada's index.html pagedocument.getElementById("desc" + 0 ).innerText = stripHTML(node.data);	

The article now appears in plain text (see Figure 6).


Figure 6. Plain Text: The article now appears in plain text.
 
Figure 7. Parsing the XML: The updated function parses the XML, with this result.

Now to be useful, you can go grab the rest of the headlines by putting a few more response areas on the index.html, which will hold the data. You can also get rid of the placeholder text, so the index.html page looks like this:

Now, you can update parseFunction to loop through each entry in the RSS feed. Then your app should look like Figure 7.

Use the following line to add an icon in the index.html file:

This line can be used to include the actual image in the project.

You can also add links from the feed and call the mobile browser, or let the user pick which feeds they want to see. For now, however, this does the trick. It’s also a good idea to add some error and exception handling.


Figure 8. Published! Viewing your application at dev.cascadamobile.com.
 
Figure 9. It’s Free: Mobile ad at the bottom pays for your free publishing.

Your Mobile RSS Feed: Publishing
Now, it’s time to publish your application from the Eclipse plug-in. The first step is to register for free and get your username and password. After you follow the steps and upload your file, you’ll be able to see your application (Figure 8).

Figure 10. A Real-Life View: A screenshot of the final application on a Motorola phone.

Next, send it out to yourself by clicking on the application and following the steps there. (Figure 9 is a screen shot from a Motorola phone. The little text ad at the bottom is why this whole thing is free for you, me, or any other developer with a cool idea.

Figure 10 shows a screenshot of the final application on a Motorola phone.

Mobile Development Is a Breeze
I know I couldn’t have pulled this off in an hour coding in J2ME! Using your basic web development skills to build apps, you avoid the hassles of learning the your way around J2ME. This saves time, money, and headaches.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

Recent Articles: