BadaDev » How to create bada widgets

AboutProjectsAsk.BadaDevForums Archive

the Flagship blog & community for App Developers with main focus on Samsung's bada and cross-platform technologies

Apps & ProjectsApp Reviews and BadaDev ProjectsBada TutorialsHow-To's for Bada DevelopmentMiscellaneousEverything ElseOlds and NewsUpdates on Bada & Mobile IndustryResourcesSources of Support

Bada Tutorials, Others34

Mal Loth, July 27th, 2010bada, example, tutorial, widgets

Widgets are those cool small applications that we see on our main screen. They are written in htmljust like any web page, but making them can be problematic at start (especially that there are no goodtutorials for Bada Widgets). So I took some time and effort and experiment with the ones that are alreadyin Samsung’s App Store.

Image 1: Sample BadaDevwidget.

As I mentioned before, widget is some sort of a web page written in html, which also takes the advantageof css styles and Java Script. But before we even start writing in html, we’ll encounter some small

BadaDev » How to create bada widgets http://www.badadev.com/how-to-create-bada-widgets/

1 of 22 7/18/2011 1:25 PM

problems with widget packaging.

Image 2: Widget inner structure.

Widget usually consists of 3 base folders:

css (where all styles are being held),js (where all Java Scripts are stacked) andimages (You already know what is this for – right? ).

All widgets (both for Bada and Samsung Omnia) have such folder structure and it is good to keep it thatway (especially if we think to later sell our creations in the App Store)

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 widgetinstallation. If it contains mistakes, widget won’t be installed AT ALL. Inside this file there should be:

Id – widget identifier can be an alphanumeric value (after certification it contains number like0×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-8encoded or widget won’t install),Icon – the path to widget main icon (can point to elsewhere – like “/images/1.png” but it’s good todo it this way),Content – point’s to widget main content and must always be “index.html”,

12345678

<?xml version="1.0" encoding="UTF-8" standalone="no"?><widget id="ExampleWidget" version="1.0" width="120" height="180" xmlns=" <title>Example</title> <description>This is my example widget's description.</description> <icon src="icon.png"/> <content src="index.html"/> <access network="false"/></widget>

?


2 of 22 7/18/2011 1:25 PM

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).

Those few lines are absolute minimum for widget to work and we must also remember to save this file inUTF-8 (not in Unicode or ANSI) or widget won’t install.

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 thoseevents in available: onClick(), onMouseUp(), onFocus(), onBlur(). So if we want to make properlybehaving buttons (different graphics for pushed and released state) we need to use onClick() andonMouseUp() (there’s no onMouseDown() nor onKeyDown() event).

In example widget I’m linking to two simple external files: css/exapleWidget.css (style sheet) andjs/exapleWidget.js (JavaScript code). JS code contains simple script which shows ‘Hello Bada’ alert andCSS is used to change ‘Hello Bada!’ label font and color.

But those few files and folders won’t do anything without packaging them into widget (.wgt) file. To dothis we need to use any Zip packer (I used 7Zip for this purpose) with Deflate option (default) and laterchange 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

010203040506070809101112131415

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w <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>

01020304050607080910111213

// exampleWidget.jsfunction testLogo(){ alert('Hello Bada');} // exampleWidget.cssspan.logoLabel{ top: 5px; font-size:20px; color:#FFFFFF;}

?

?


3 of 22 7/18/2011 1:25 PM

inform us that this widget is not certified and asks us whether we want to install it anyway.

Image 3: Widget installationwarning.

Enjoy!

This example can be downloaded here.

References:

W3C.org Widget Packaging and Configuration – link1.Samsung Innovator – link2.Samsung Innovator: Installing widgets – link3.

Related posts:


4 of 22 7/18/2011 1:25 PM

Developing Widgets for Bada Devices1.Create a Photo-Editing App2.IDE widget plug-in installation3.

1.

By Nour on Jul 27, 2010 | Reply

wow, widget development made easy

Thank you for this tutorial.

3 fast questions

1- can you play audio?2- can you vibrate the device?3- can you start any kind of alarm?

2.

By Mal Loth on Jul 27, 2010 | Reply

For those You’ll probably need widget extentions called ‘features’ (which can be linked inconfig.xml). As for now I know that Samsung uses Bondi extentions for some of their devices(Omnia) so maybe those can be used on Wave. I’ll dig more, don’t worry .

Bondi tutorials: http://bondi.omtp.org/usebondi/Lists/TUTORIALS/tutorials.aspx

3.

By Nour on Jul 27, 2010 | Reply

Thanks,

Do I have to use Eclipse IDE or any IDE can do the job?

I hope I can get small and easy IDE for developing widget

4.


You have few options:- you can try Eclipse IDE widget plugin from Samsung Widget SDK at Samsung Innovator site,- you can use any html/css/js syntax highliting editor + any web browser OR- use standard notepad.exe – like me .

Notepad is ‘small and easy IDE for developing widget’ .

5.

By caketuzz on Jul 28, 2010 | Reply

Thanks for the tut !

6.

By wit on Jul 28, 2010 | Reply

A Samsung flavor of BONDI is indeed implemented for widgets on Bada/Wave. Thanks for thetutorial, Mal Loth!

7.

By Rémy DAVID on Jul 28, 2010 | Reply8.


5 of 22 7/18/2011 1:25 PM

What I would like to know is : is it possible to package a widget + a native Bada app to be availableon the Samsung Apps store. It would be nice to have a “companion” widget that could shownews/status/updates on the home screen and launch the native app when the user see somethinginteresting coming up on the widget (like Nokia WRT widgets).


Yes, but it needs proper steps. First of all You need to create both and certificate the widget. NextYou need to add a certificated widget into Your app’s \Home directory and add somefunctions/methods of unpacking it into \Media\Other directory of client’s device and inform him ofa way to install it (You probably can’t install widget programically). Next, You need to certificatethe whole app (with widget inside it) and pray to whoever-You-believe so that Samsung will pass itinto the App Store .

9.


@Wit & @caketuzzThank You guys. It’s a pleasure to share knowledge with nice people like You .

10.

By mauro269 on Jul 28, 2010 | Reply

Hi Guys,I’m working on widgets too…but I’m not a programmer and it’s hard to understand some things. So,the only problem that I’ve is to find the UID of apps. It seems that to do this I should write thiscode:

============

// Define the launchApplication success callback.function launchedCallback(response){alert(“Application launched successful”);}

// Define the getInstalledApplications success callback.function successCallback(response) {// Response is an array of fully qualified application paths – let’s launch the first application.bondi.applauncher.launchApplication(launchedCallback,errorCallback,”file://”+ response[0]);}

// Define the error callback.function errorCallback(response) {alert( “The following error: ” + response.code + “, occurred”);}

// Get the installed applications.bondi.applauncher.getInstalledApplications(successCallback,errorCallback,null);

=============

But really, I don’t know how to make this. Do you have some suggestions?

11.

By wit on Jul 31, 2010 | Reply12.


6 of 22 7/18/2011 1:25 PM

BTW, just a small notice – as you may know JS is not compiled: it is a scripting language. So yoursource code will be open for anyone to see.

In such cases, if you don’t want us, the other developers, to poke around in your code, don’t forgetto properly obfuscate it

By Popo Gor on Aug 3, 2010 | Reply

I have problem in creating widget.

I followed all the instruction here, but I failed to create a widget.

I downloaded sample here, and changed .wgt to .zip. Unzip it, and then zip it immediately withoutchanging its content, using 7zip. The widget does not install.

Then, what’s the problem?

Thanks for your tut.

13.

By Eric on Aug 3, 2010 | Reply

I have exactly the same probleme than you. And I didn’t succeed yet to install a widget afterunzipping it and zipping it again without any changing.

Do you have found any solution ?

14.

By Mal Loth on Aug 3, 2010 | Reply

What’s so problematic about selecting all listed files, right-clicking on one of those and choosing’7Zip > Add to ‘widget_folder_name.zip”? As I’ve decribed, You must use Compression method:deflate, along with Archive format: Zip (not .7z) if You want to do it manually from 7Zip Manager.I’m using 7Zip version 4.65 and putting .wgt file directly into device memory (not Storage Card).Done it many times during notepad debugging .

15.

By Diego on Aug 4, 2010 | Reply

@Mauro269read thishttp://innovator.samsungmobile.com/bbs/discussion/view.do?parentCategoryId=4&messageId=85189&boardId=612&platformId=12

16.

By ppk on Aug 4, 2010 | Reply

What is not mentioned at all in this article is that you also need a signature.xml in the widget. Thetest widget has one; without it the widget won’t install.

Now I hope that the SDK allows you to create such signature.xmls

17.


@ppk

Not true. Widgets can run without signature.xml. You’ll be prompted during installation that thiswidget is not certified – that’s all. I can confirm that on 100% because I make such widgets and

18.


7 of 22 7/18/2011 1:25 PM

they run (just like the example.wgt I’ve posted) without any issues. On second hand – signature isneeded if You want to sell Your widget in the AppStore.


Thanks, I finally created my first widget.

Another question, how can I make a widget with bondi api, such as bondi.applaunch? I tried butthere is a error: permission denied. What’s the problem?

I want to make some icons to launch the application.

19.

By Manuel on Aug 5, 2010 | Reply

I’ve the same problema of Popo Gor and Eric, someone have found a solution?

20.

By wit on Aug 5, 2010 | Reply

well, there is something you two could try:if you are using the official Samsung’s widget SDK, you have to double click the project.xml

An interface will open.

in the lower part of this interface there are a few tabs. Among them: the “Features” tab. select it.

You will see a tree of BONDI privileges. Select the applauncher one. Ctrl+S to save. ready!

21.


Thanks wit!!

Problem solved=]

22.

By ppk on Aug 14, 2010 | Reply

Mal,

Widgets without a signature.xml do not run on my Wave. They don’t even show the unsignedmessage; they just don’t get installed.

Is this a setting I can change somewhere?

23.


I can only suspect that it’s due to ROM version You have.Personally I flashed Open Europe (unbranded) ROM and have no issues with operator’s settings(and certificates).You can try to flash to XXJF1 (unbranded) and then update to XXJF8 by Kies (yes, Kies supportsunbranded ROMs as well).With this You’ll have no problems with future software and developement.

But first, You can also try to install developer debug-certificate from Bada SDK (/Tools/sbuild/rootCACert.cer).This may be the problem. I don’t encounter this issue because I have it installed by default (to be

24.


8 of 22 7/18/2011 1:25 PM

able to test my apps).

By tata on Aug 26, 2010 | Reply

Thank you for the tutorial, it is very useful. Out of the scope of this tutorial, for the ones whocannot install widgets after changing some files in the package, try this; if there is signature1.xmlfile in the package, delete it and repack, then the widget should install successfully. The reason forthat is, changing any file in the package is actually breaking the seal of the package, hence thepackage (widget) is no longer original, it is tampered, the signature is invalidated and the device isrejecting to install it. I hope this helps. (My device is unbranded XXJF1.)

25.

By Aarvon on Nov 9, 2010 | Reply

Hi,

I bought this phone a week back is there any option to remove the default widget mens and add thedesired items in it….

26.

By Hitesh on Jan 4, 2011 | Reply

Can we add animations in widgets? like blinks and effects and stuff…. pls reply..

27.

By Mal Loth on Jan 4, 2011 | Reply

In widgets You can do (almost) exacly the same things as in web pages. So animated gifs and html5canvas is allowed. Other things – like flash – may not work properly or at all. Blink is only on IE sodon’t count on it.

28.

By Vish on Jan 28, 2011 | Reply

Thanks !! worked like charm

29.

By Pitouke on Mar 28, 2011 | Reply

Hello,

I’m totally new into Bada and widgets and stuff… I just downloaded some free widgets frombadawidget.com in zip format onto my pc.

In these zip files I see different maps like ccs, js, images and other things like config.xml, icon.pngand index.html. I don’t see a .wgt file… In the example in this topic I do see a .wgt file.. Is thisnormal? I use Winzip.

Can someone please explain step by step how I unzip and instal these files?

Many thx!!!

Bart

30.

By Jeff on Jun 14, 2011 | Reply

Nice sample, but is there anybody know how to uninstall it?

31.

By Shubham on Jul 12, 2011 | Reply32.


9 of 22 7/18/2011 1:25 PM

I dont know how to use Samsung SDKs. I am trying to modify existing widgets with Photoshop andDreamweaver. I deleted the signature file. And now my widget is running, However I still cantlaunch applications. It is showing error: permission denied. Please help

1.

Aug 2, 2010: BadaDev » BadaDev Widget for Samsung Wave Is Here!2.Aug 7, 2010: Creare widgets per Samsung bada e Wave S8500 | badaBlog3.Mar 5, 2011: 如何创建一个Bada Widget » QPWOEIRU96 - Mr.Nothing4.

Post a Comment

Name (required)

E-mail (will not be published) (required)

Website


10 of 22 7/18/2011 1:25 PM


11 of 22 7/18/2011 1:25 PM


12 of 22 7/18/2011 1:25 PM


13 of 22 7/18/2011 1:25 PM

Introduction to OpenGL ES 2.0 on BadaOpenGL ES 2.0 on Bada: Shaders and ProgramsOpenGL ES 2.0 : Interactive Triangle Example On Bada

Timer in BADAOnBackground is not invoked.Forum Rules[Request] Spotify client for BadaSimulate multi touch[IDEA] bada pdf readerWin a Galaxy Tab - New Technology ideas!API WishlistWrap text in a labelDeveloper from India

Anonmouse on Introduction to Sockets: Simple Low-Level Communication: Hey Wit I’d really likeyour tutorial, if...Dave Cramp on Samsung Announces Bada 2.0: Hi Just in the process of buying a wave II andwondered if there was any...Shubham on How to create bada widgets: I dont know how to use Samsung SDKs. I am trying tomodify existing widgets...kingkij on How To Encrypt Files In Bada: when i try to encrypt a text file it works perfectly butwhen i try to...Akhlaq on Samsung Announces Bada 2.0: Hi Team, I m using wave 2 not much familiar about usingthe Wave however i am...RzR on Using Hard Keys Event Listeners across Forms: Will those key be managed when a contextmenu appear ?luckyboy on Custom Control: Scrolling Label in Bada: Thanks, but I add a text other ,this textappend into canvas. I...Deep on My Samsung Wave has finally arrived!: I am not able to re-sync my gmail accounts on mywave II… I hv...Jeff on How to create bada widgets: Nice sample, but is there anybody know how to uninstall it?emilly on Win new Wave-II devices: thanks for information


14 of 22 7/18/2011 1:25 PM


15 of 22 7/18/2011 1:25 PM


16 of 22 7/18/2011 1:25 PM


17 of 22 7/18/2011 1:25 PM


18 of 22 7/18/2011 1:25 PM


19 of 22 7/18/2011 1:25 PM


20 of 22 7/18/2011 1:25 PM

Components Development (1)Components Development (2)Components Development (3)UI Lists (1)UI Lists (2)UI Lists (3)UI Lists (4)Working with Files and Directories (1)Working with Files and Directories (2)Tabs (1)Tabs (2)Tabs (3) - RevisedBuilding an Image Database (1)Building an Image Database (2)Building an Image Database (3)Working with XML (1)Sockets (1)Forms Management (1)Forms Management (2)Forms Management (3)

Show your location on the mapLoad and Display ImagesChanges in screen orientationOption MenuDrawing: Double-BufferMulti-Point Touch44 Privilege GroupsC++ Tips for Java DevelopersMessage BoxMotion DetectionUsing ContextMenu with a ListOpenGL ES (by Nour)EnrichedTextBada Error Codes

C++ Design ConsiderationsC++ Language Tutorial


21 of 22 7/18/2011 1:25 PM

Bada – Samsung's strategy in the new marketC++: A Closer Look At BadaMaking Sense of Samsung's BadaSamsung Wave – Bada Phone Review

Bada App ReviewsBada Blog & Community For Users (Russian)Community for Bada UsersLaufFireReshep – Great Media AppsSamsung Mobile Innovator BlogSamsung S8500 Wave – Firmwares & Flashing

BadaOfficial Bada Developers SiteSamsung Mobile InnovatorSamsung Wave: First Bada Phone

Copyright 2009-2010 BadaDev.com (unless otherwise stated). All rights reserved! Powered byWordpress!


22 of 22 7/18/2011 1:25 PM

Documents

BadaDev » How to create bada widgets