Widgets are those cool small applications that we see on our main screen.They are written in html just like any web page, but making them can be problematic at start (especially that there are no good tutorials for Bada Widgets). So I took some time and effort and experiment with the ones that are already in Samsung’s App Store.
As I mentioned before, widget is some sort of a web page written in html, which also takes the advantage of css styles and Java Script. But before we even start writing in html, we’ll encounter some small problems with widget packaging.
Widget usually consists of 3 base folders:
But the utmost important things are those three basic files, without which widget won’t run:
- index.htm – html structure of the widget,
- icon.png – icon which we see during widget drag ‘n drop (32bit image of size 90×90)
- config.xml – configuration file (very important)
So let’s start with the not so obvious one – config.xml. This file is used by Bada OS system during widget installation. If it contains mistakes, widget won’t be installed AT ALL. Inside this file there should be:
OK, we have prepared a config – now let’s start the html adventure! Argh!
Widgets are a bit limited in their html, css, DOM and JavaScript support. For example we have only those events in available: onClick(), onMouseUp(), onFocus(), onBlur(). So if we want to make properly behaving buttons (different graphics for pushed and released state) we need to use onClick() and onMouseUp() (there’s no onMouseDown() nor onKeyDown() event).
Widget usually consists of 3 base folders:
- css (where all styles are being held),
- js (where all Java Scripts are stacked) and
- images (You already know what is this for – right?
).
But the utmost important things are those three basic files, without which widget won’t run:
- index.htm – html structure of the widget,
- icon.png – icon which we see during widget drag ‘n drop (32bit image of size 90×90)
- config.xml – configuration file (very important)
So let’s start with the not so obvious one – config.xml. This file is used by Bada OS system during widget installation. If it contains mistakes, widget won’t be installed AT ALL. Inside this file there should be:
<?xml version="1.0" encoding="UTF-8" standalone="no"?><widget id="ExampleWidget" version="1.0" width="120" height="180" xmlns="http://www.w3.org/ns/widgets"> <title>Example</title> <description>This is my example widget's description.</description> <icon src="icon.png"/> <content src="index.html"/> <access network="false"/></widget> - Id – widget identifier can be an alphanumeric value (after certification it contains number like 0×10000715, but if we write “ExampleWidget” it will run as well,
- Version – widget version,
- Width – widget are initial width (the yellow frame we see during widget dragging),
- Height – widget area initial height (the yellow frame we see during widget dragging),
- Title – widget name,
- Description- widget short description (if it contains UTF-8 chars that whole xml file must be UFT-8 encoded or widget won’t install),
- Icon – the path to widget main icon (can point to elsewhere – like “/images/1.png” but it’s good to do it this way),
- Content – point’s to widget main content and must always be “index.html”,
- Access network – true if we need to use network in our widgets, otherwise false (if it is set to true, we will be prompted to turn on WiFi or GPRS).
OK, we have prepared a config – now let’s start the html adventure! Argh!
Widgets are a bit limited in their html, css, DOM and JavaScript support. For example we have only those events in available: onClick(), onMouseUp(), onFocus(), onBlur(). So if we want to make properly behaving buttons (different graphics for pushed and released state) we need to use onClick() and onMouseUp() (there’s no onMouseDown() nor onKeyDown() event).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Example widget</title> <link rel="stylesheet" type="text/css" href="css/exampleWidget.css"/> <script src="js/exampleWidget.js" type="text/javascript"></script></head><body> <img id="logo" src="images/badaDev.png" onClick="testLogo();"/> <span class="logoLabel">Hello Bada!</span></body></html> In example widget I’m linking to two simple external files: css/exapleWidget.css (style sheet) and js/exapleWidget.js (JavaScript code). JS code contains simple script which shows ‘Hello Bada’ alert and CSS is used to change ‘Hello Bada!’ label font and color.
// exampleWidget.jsfunction testLogo(){ alert('Hello Bada');}// exampleWidget.cssspan.logoLabel{ top: 5px; font-size:20px; color:#FFFFFF;} But those few files and folders won’t do anything without packaging them into widget (.wgt) file. To do this we need to use any Zip packer (I used 7Zip for this purpose) with Deflate option (default) and later change extension from .zip to .wgt.
And viola! Here we have our first widget.
To install it, we simply copy .wgt file to device and press on it in ‘My files’. If everything is OK, Bada will inform us that this widget is not certified and asks us whether we want to install it anyway.
And viola! Here we have our first widget.
To install it, we simply copy .wgt file to device and press on it in ‘My files’. If everything is OK, Bada will inform us that this widget is not certified and asks us whether we want to install it anyway.
