×
Namespaces

Variants
Actions

Loading external JavaScript libraries into WRT at runtime

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleArticle
Created: felipebzr (14 Jun 2009)
Last edited: hamishwillee (07 May 2012)

Contents

Introduction

In this article we are going to explain how to load an external JavaScript file at runtime reducing application startup time and improving the application performance.

Enclosed in this article you will also find a full implemented widget and the respective source code to download.

User Satisfaction and Data Traffic

Make your widget load quickly is a significant factor in all models of user satisfaction. By loading the JavaScript files at runtime minimize the variability of delay in application start-up and improve the user experience inducing flow. Flow can be considered the time when you're having so much fun that you want this moment to last forever (1). Flow is the “holistic sensation that people feel when they act with total involvement." (2).

We are going to use a small trick to load JavaScript files in real-time. You have many others benefits by using it:

  • reduce application startup time;
  • minimize data traffic;
  • improve the user experience when it comes to mobile data traffic expenses;
  • improve the user experience inducing flow;

Hide and Show div elements

The function init is executed when the link at the div-load object is clicked. This function calls the function to dynamically load the Google Maps JavaScript API, it also show and hide div objects.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Runtime Widget</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="basic.js"></script>
<link rel="stylesheet" href="basic.css" type="text/css">
<META NAME="Generator" CONTENT="Nokia WRT plug-in for Aptana Studio 2.0.0" />
</head>
<body>
<div id="div-load"><a href="#" onclick="javascript:init();">Load</a></div>
<div id="div-map"></div>
</body
</html>
function init()
{
// Hide the button div
var div_load = document.getElementById("div-load");
div_load.style.display = "none";
 
// Show the map div
var div_map = document.getElementById("div-map");
div_map.style.display = "block";
 
// Dynamic load the script
loadScript();
}

Dynamic loading the Google Maps JavaScript API

The loadScript function is called to dynamic load the Google Maps API. The callback function at the end of the url is used to asynchronous create a GMap2 object.

function loadScript()
{
var script = document.createElement("script");
 
script.type = "text/javascript";
script.src = "http://maps.google.com/maps?file=api&v=2.x&key=YOUR-API-KEY&async=2&callback=loadMap";
 
document.body.appendChild(script);
}

Event callback used to create a Map

The function loadMap is executed after the load of Google Maps API. It creates a GMap2 object at the "div-map".

function loadMap()
{
// create the map object
var map = new GMap2(document.getElementById("div-map"));
// set the center of the map
map.setCenter(new GLatLng(43.7430739, 7.4307509), 6);
// add a marker at the center
map.addOverlay(new GMarker(map.getCenter()));
}

Download Widget

Media:RuntimeLibraries.wgz (from www.felipeandrade.org/exemplos/RuntimeLibraries.wgz)

References

  • (1) Mihaly Csikszentmihalyi,Finding Flow:The Psychology of Engagement with Everyday Life(New York:Basic Books, 1997),29.
  • (2) Mihaly Csikszentmihalyi,Beyond Boredom and Anxiety:Experiencing Flow in Work and Play (1975;reprint,with a Preface by Mihaly Csikszentmihalyi,San Francisco:Jossey-Bass,2000),36.

--Felipe Andrade 17:03, 14 June 2009 (EEST)

This page was last modified on 7 May 2012, at 06:05.
80 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×