I thought about trying to mimic the Flipboard’s page turn effect with the QML script. The page turn is pretty simple and a bit more modern then traditional paper like curly page turn. In Flipboard the page rotates from the center like folding the screen.

I created this effect with Flipable element which is clipped with parent Item element so that only the half of the flipable is visible at all times. The flipable element contains a duplicate page content as the underlying element which is just created with HTML formatted Text element. I also added a flavor of shadow to the Transition animation so that inner part of the fold seems a bit darker. Shadow was created with transparent gradient image.

Here you can see the page turn (or fold) in action with the Nokia N900. Rendering speed wasn’t that fast when I used “raster” rendering and might have been way faster if “opengl” would have been used.

You can download the QML code from here.

Design

Palette for news reader app

The first thing that I had to do was to get my app a decent color palette so that app would feel nice and consistent through out the views. I tend to use colourlovers.com to either create or browse good palettes. This time I decided to use nice blueish palette, The First Raindrop.

Now it was time to do the actual fun part and design the overall view of the apps user interface. As I tend to use Qt Web Runtime for development it’s pretty easy to do the UI drafts with simple static HTML page. These drafts can easily be extended to be used in the final app.

I really wanted to have horizontal panels this time around. Maybe to provide a book-like user interaction where you go to the next page to the right and back to the left. The following image shows the mockup of the UI.

User interface mockup for news reader app

As the mobile device display is quite small I thought that I’d show only one panel on one screen. If this would be created for a tablet like device then it could be wise to show e.g. all three or two panels at once on a display. I’ll have to test that when I get the first MeeGo tablet in my hands :)

Develop

Now that I had a draft UI HTML I started knitting the functionality with JavaScript to my new app which I would call NewsFlow. I used jQuery library to do all the heavy lifting like loading and parsing the RSS feeds.

As a small detail I used CSS animation for the panel switching so when user e.g. selects a feed from a feed list then view is switched to feed items page. With jQuery the CSS animations can be easily created with the animate method:

...
$(left).css("left", "0");
$(left).css("position", "fixed");
$(left).animate(
    // What CSS value(s) to animate
    {left:"-" + width + "px"},
    // Animation time in milliseconds
    1000,
    // Function to call when animation is finished
    function() {
		$(window).scrollTop();
		$(left).css("position", "relative");
	});
...

Then was the time to do the normal widget packaging and upload the app to the device. Here is what it turned out to be:

I have to say that I like it a lot as a simple news reader. This was again a good reminder on how fast the Qt WRT is to develop with. Now I just hope that Ovi Store would also start supporting Qt WRT apps soon so that the Distribute part would be easier.

What features you’d like to have in your news reader app?

The code behind this widget is only around 20 lines of HTML, 20 lines of JavaScript, 35 lines of CSS and one config file.

In HTML I only create divs for hours, minutes and date. In JavaScript I refresh the view to show current time and date and start the timer which updates the values in every 60s. Layout is done with a background PNG image and hours, minutes and date DIVs are placed on top of the image in CSS with position:fixed styling.

index.html

...


00
00
-

JavaScript (script.js)

function refresh() {
	var time = new Date();
	var hours = time.getHours();
	if(hours<10) {
		hours = "0" + hours;
	}
	var minutes = time.getMinutes();
	if(minutes<10){
		minuts = "0" + minutes;
	}
	$("#hours").text(hours);
	$("#minutes").text(minutes);

	var day = time.getDay();
	var month = time.getMonth();
	var weekday = ["Sunday", "Monday",
"Tuesday", "Wednesday",
"Thursday", "Friday",
"Saturday"];
	var months = [
"Jan", "Feb", "Mar",
"Apr", "May", "June",
"July", "Aug", "Sep",
"Oct", "Nov", "Dec"];	

	$("#date").text(weekday[day] + ", " + time.getDate() + " " + months[month]);
}

You can download the source code in ZIP here. You can install the widget directly to your Nokia N900 here.

Code that I’m using for storing the “Task” objects in my GTD app:

var jsonTasks = JSON.stringify( tasks );
localStorage.tasks = jsonTasks;

That’s it. That is quite easy and can’t really think of many languages where you can persist objects with only few lines of code.

Code that I’m using for retrieving objects from storage:

tasks = JSON.parse( localStorage.tasks );

I hope you find this helpful. It works great on Qt Web Runtime running on my Nokia N900.

This time I crafted a small game of Labyrinth. The idea of game should be pretty familiar to everyone. You’ll need to guide the metal ball to goal by tilting the game board. I made it so that on each level there is one hole more compared to previous level. Levels are created randomly.

On the technical side it was easy to use device sensor in JavaScript to track the tilt angles:

// Ball's acceleration
var ballAccX = 0.0;
var ballAccY = 0.0;

// Initialize sensors
wrtSensors = nokia.device.load("sensors");
wrtSensors.startChannel(callback, "AccelerometerAxis", errorCallback);

// Callback function for sensors
// The 2.5 is a magic number that felt good :)
function callback(data) {
	ballAccX = parseFloat(data.axisX) / 2.5;
	ballAccY = parseFloat(data.axisY) / 2.5;
} 

function errorCallback(err) {
}

The animation and simple ball physics are done in JavaScript timer:

// Initialize timer to be run on every 50ms
animate = setInterval("animateBall()", 50);

// Timer function contains most of game logic like
// checking if ball have reached the goal or hole.
// Ball movement and physics are also calculated here
function animateBall() {
	if(gameover==false && goal==false) {
		ballVelX = ballVelX - ballAccX;
		ballX = ballX + ballVelX;
		ballVelY = ballVelY - ballAccY;
		ballY = ballY + ballVelY;	

		checkLimits();
		checkGoal();		

		// Move the ball DIV
		$("#ball").css("left", ballX);
		$("#ball").css("top", ballY);
	} else {
		if(goal) {
			$("#gameover").text("Creating next level!");
			$("#gameover").show();
			clearInterval(animate);
			level++;
			setTimeout("reset()", 1500);
		} else {
			$("#gameover").text("GAME OVER!");
			$("#gameover").show();
			level = 1;
			clearInterval(animate);
		}
	}
}

Here is a small video of what it looks like in action on my Nokia N900:

There are still few known issues in the game:

• It can create a level where goal is unreachable.
• Another issue I’m having with the game is that I haven’t found out how the backlight could be forced to stay on. I wrote a question on Qt Web Runtime forum but haven’t received any answers. If you know how to do it, please respond to my thread.
• It would be nice to have fullscreen mode in games like this. If you know how to create fullscreen widget, please respond to this thread in Qt Forum.

Finally, if you’d like to try it out yourself you can download the widget (ChromeBall.wgt) here.

It’s simple to use additional JavaScript libraries in widgets so it makes sense to use something like jQuery in your widgets. You can do so by downloading the latest jQuery library from their site and adding that to your ZIP file as separate js file.

With jQuery you can add an event handler for the screen resize event. In the event you can easily check the window dimensions and with those you can define the screen orientation. This makes it easy to change the overall UI to match the landscape and portrait views. Like in some apps you may want to have your toolbar in left side in landscape view and on the bottom when on portrait view.

Here is the code how this can be done with jQuery:

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Rotation Test</title>
  <link type="text/css" href="css/style.css" rel="stylesheet"></style>
  <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">

  $(window).resize( function(){
    var height = $(window).height();
    var width = $(window).width();

    if(width>height) {
      // Landscape
      $("#mode").text("LANDSCAPE");
    } else {
      // Portrait
      $("#mode").text("PORTRAIT");
    }

   });
  </script>
 </head>
 <body>
   <div id="mode">LANDSCAPE</div>
 </body>
</html>

You can download the whole widget here: Rotate.wgt

Here is a sample how widget works in action on Nokia N900:

Widgets are just ZIP packages containing at least two files: Configuration file (config.xml) and resource files (index.html and other HTML, CSS, JavaScript and image files).

• widget.wgt – zip archive renamed to *.wgt, containing:
  
  • config.xml - configurations
  • index.html - content

Configuration file contains information about the widget like name, version, author, icon etc. Example of simple config.xml file:

<?xml version="1.0" ?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://www.substanceofcode.com/hellowidget" version="0.1.0">
  <!-- Name of the widget -->
  <name>Hello World</name>
  <!-- Description is shown when installing widget -->
  <description>Simple hello world widget</description>
  <!-- Start page for widget -->
  <content src="index.html" />
  <!-- Default icon for widget -->
  <icon src="icon.png" />
  <!-- Widget author -->
  <author>Tommi Laukkanen</author>
</widget>

Content is good old HTML, CSS, JavaScript etc. files. For example simple HTML page like this:

<html>
  <head>
    <title>Hello!</title>
  </head>
  <body>
    <h1>Hello W3C Widget World!</h1>
  </body>
</html>

When these two files are packaged into a ZIP archive and renamed to Hello.wgt you can install it on your Nokia N900 just by clicking the file in file browser. When you run the app it’ll look something like this:

Widget running on Nokia N900 with Qt Web Runtime

I hope that you find this tutorial helpful and start crafting your own widgets!

LWUIT supports such nice things like theming, transitions and animation. It also includes new UI components like TabbedPane and Dialogs.

I just got a new book to review, LWUIT 1.1 for Java ME Developers, written by Biswajit Sarkar. If you think that LWUIT could scratch your itch then I’d recommend on having this book on your desk as it works pretty nicely as a reference as well as good introduction to the whole library.

Book contains lots of emulator screenshots which help to understand the concepts very well. This combined with lots of sample code makes it really easy to learn all features of LWUIT library. Only one oddity is that it’s referencing to Sprint SDK where it could as well be the Sun’s original WTK but that doesn’t really have any affect on code samples.

Book’s first chapter is a good introduction to the library. The following chapters explain the default components and then there is one chapter on how to create a custom component. Last chapters dig into resources, LWUIT designer, themes, animations and transitions, painters, effects and logging. The index is also very complete which makes the book work well as a good resource in the bookshelf even after the first reading.

Check out the publisher site for more information about the book.

The scrolling is implemented with the pointerDragged event. We store the current location of the canvas to variables verticalLoc and horizontalLoc. When finger (pointer) is dragged then location is changed according to the dragged amount. Variables are used on paint method to draw the area so that it is scrolled that correctly. You can also see from the sample code how you can draw background with repeatable pattern image.

Here is a video of running this demonstration app in Nokia N97 SDK emulator: