Tag Archives: tutorial

Check Screen Orientation with jQuery in W3C Widget

Posted on by
6

Here is a small tip for your W3C Widget on how you can identify when screen orientation have changed.

Screen rotation tutorial

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:

How to Create Simple W3C Widget

Posted on by
3

Here are instructions how you can create a simple W3C widget that runs on Qt Web Runtime (WRT) e.g. 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:

Hello World W3C Widget

Widget running on Nokia N900 with Qt Web Runtime

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

Coding Touchscreen Scrolling in Java ME

Posted on by
3

Here’s the trick how you can add touchscreen scrolling to your J2ME applications. The key to touchscreen support is the Canvas class and its’ methods pointerPressed, pointerDragged and pointerReleased. These events are called when user puts finger on the screen (pressed) and drags the finger (dragged) and finally when removes the finger (released). Each method has the x and y coordinates for the pointer action.

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.

  1. public class ScrollingCanvas extends Canvas {
  2.  
  3.  // Current location
  4.  private int verticalLoc, horizontalLoc;
  5.  // Last pointer (finger) location
  6.  private int lastX, lastY;
  7.  // Background image size
  8.  private static final int IMAGE_WIDTH = 183;
  9.  private static final int IMAGE_HEIGHT = 183;
  10.  
  11.  public ScrollingCanvas() {
  12.    verticalLoc = 0;
  13.    horizontalLoc = 0;
  14.    setFullScreenMode(true);
  15.  }
  16.  
  17.  protected void paint(Graphics g) {
  18.  
  19.    // Draw background with pattern image
  20.    int x = horizontalLoc % IMAGE_WIDTH;
  21.    if(x>0) {
  22.      x -= IMAGE_WIDTH;
  23.    }
  24.    int origX = x;
  25.  
  26.    int y = verticalLoc % IMAGE_HEIGHT;
  27.    if(y>0) {
  28.      y -= IMAGE_HEIGHT;
  29.    }
  30.  
  31.    boolean verticalDone = false;
  32.    while(!verticalDone) {
  33.      boolean horizontalDone = false;
  34.      while(!horizontalDone) {
  35.        g.drawImage(
  36.          ImageRepository.getBackground(),
  37.          x, y, Graphics.LEFT|Graphics.TOP);
  38.        x += IMAGE_WIDTH;
  39.        if(x>getWidth()) {
  40.          horizontalDone = true;
  41.        }
  42.      }
  43.      x = origX;
  44.      y += IMAGE_HEIGHT;
  45.      if(y>getHeight()) {
  46.        verticalDone = true;
  47.      }
  48.    }
  49.  }
  50.  
  51.  /**
  52.  * Finger is pressed on screen
  53.  * @param x coordinate
  54.  * @param y coordinate
  55.  */
  56.  protected void pointerPressed(int x, int y) {
  57.    lastX = x;
  58.    lastY = y;
  59.  }
  60.  
  61.  /**
  62.  * Finger is dragged on screen
  63.  * @param x coordinate
  64.  * @param y coordinate
  65.  */
  66.  protected void pointerDragged(int x, int y) {
  67.    // Calculate how much we moved horizontally
  68.    int deltaHorizontal = lastX – x;
  69.    horizontalLoc -= deltaHorizontal;
  70.    lastX = x;
  71.  
  72.    // Calculate how much we moved vertically
  73.    int deltaVertical = lastY – y;
  74.    verticalLoc -= deltaVertical;
  75.    lastY = y;
  76.  
  77.    // Repaint the screen since we have scrolled
  78.    repaint();
  79.  }
  80.  
  81. }

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