BadaDev How To Create Bada Widgets

BadaDev How to create bada widgets
http://www.badadev.com/how-to-create-bada-widgets/
About Projects Ask.BadaDev Forums Archive the Flagship blog & community for App Developers with main focus on Samsung's bada and crossplatform technologies Apps & ProjectsApp Reviews and BadaDev Projects Bada TutorialsHow-To's for Bada Development MiscellaneousEverything Else Olds and NewsUpdates on Bada & Mobile Industry ResourcesSources of Support Bada Tutorials, Others 34
Mal Loth, July 27th, 2010 bada, example, tutorial, widgets 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 Samsungs App Store.
Image 1: Sample BadaDev widget. 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, well encounter some small
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) and images (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 that way (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 wont run: - index.htm html structure of the widget, - icon.png icon which we see during widget drag n drop (32bit image of size 9090) - config.xml configuration file (very important) So lets 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 wont be installed AT ALL. Inside this file there should be: 1 2 3 4 5 6 7 8
? <?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>
Id widget identifier can be an alphanumeric value (after certification it contains number like 010000715, 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 wont install), Icon the path to widget main icon (can point to elsewhere like /images/1.png but its good to do it this way), Content points to widget main content and must always be index.html,
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 in UTF-8 (not in Unicode or ANSI) or widget wont install. OK, we have prepared a config now lets 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() (theres no onMouseDown() nor onKeyDown() event). 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
? <!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>
In example widget Im 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. 01 02 03 04 05 06 07 08 09 10 11 12 13 // exampleWidget.js function testLogo() { alert('Hello Bada'); } // exampleWidget.css span.logoLabel { top: 5px; font-size:20px; color:#FFFFFF; }
?
But those few files and folders wont 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
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 installation warning. Enjoy!
This example can be downloaded here. References: 1. W3C.org Widget Packaging and Configuration link 2. Samsung Innovator link 3. Samsung Innovator: Installing widgets link Related posts:
4 of 22
7/18/2011 1:25 PM
1. Developing Widgets for Bada Devices 2. Create a Photo-Editing App 3. IDE widget plug-in installation 1. 2. 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? 3. By Mal Loth on Jul 27, 2010 | Reply For those Youll probably need widget extentions called features (which can be linked in config.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. Ill dig more, dont worry . Bondi tutorials: http://bondi.omtp.org/usebondi/Lists/TUTORIALS/tutorials.aspx 4. 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 5. By Mal Loth on Jul 27, 2010 | Reply 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 6. By caketuzz on Jul 28, 2010 | Reply Thanks for the tut ! 7. By wit on Jul 28, 2010 | Reply A Samsung flavor of BONDI is indeed implemented for widgets on Bada/Wave. Thanks for the tutorial, Mal Loth! 8. By Rmy DAVID on Jul 28, 2010 | Reply .
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 available on the Samsung Apps store. It would be nice to have a companion widget that could show news/status/updates on the home screen and launch the native app when the user see something interesting coming up on the widget (like Nokia WRT widgets). 9. By Mal Loth on Jul 28, 2010 | Reply Yes, but it needs proper steps. First of all You need to create both and certificate the widget. Next You need to add a certificated widget into Your apps \Home directory and add some functions/methods of unpacking it into \Media\Other directory of clients device and inform him of a way to install it (You probably cant install widget programically). Next, You need to certificate the whole app (with widget inside it) and pray to whoever-You-believe so that Samsung will pass it into the App Store . 10. By Mal Loth on Jul 28, 2010 | Reply @Wit & @caketuzz Thank You guys. Its a pleasure to share knowledge with nice people like You 11. By mauro269 on Jul 28, 2010 | Reply Hi Guys, Im working on widgets toobut Im not a programmer and its hard to understand some things. So, the only problem that Ive is to find the UID of apps. It seems that to do this I should write this code: ============ // 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 lets 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 dont know how to make this. Do you have some suggestions? 12. By wit on Jul 31, 2010 | Reply .
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 your source code will be open for anyone to see. In such cases, if you dont want us, the other developers, to poke around in your code, dont forget to properly obfuscate it 13. 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 without changing its content, using 7zip. The widget does not install. Then, whats the problem? Thanks for your tut. 14. By Eric on Aug 3, 2010 | Reply I have exactly the same probleme than you. And I didnt succeed yet to install a widget after unzipping it and zipping it again without any changing. Do you have found any solution ? 15. By Mal Loth on Aug 3, 2010 | Reply Whats so problematic about selecting all listed files, right-clicking on one of those and choosing 7Zip > Add to widget_folder_name.zip? As Ive decribed, You must use Compression method: deflate, along with Archive format: Zip (not .7z) if You want to do it manually from 7Zip Manager. Im using 7Zip version 4.65 and putting .wgt file directly into device memory (not Storage Card). Done it many times during notepad debugging . 16. By Diego on Aug 4, 2010 | Reply @Mauro269 read this http://innovator.samsungmobile.com/bbs/discussion/view.do?parentCategoryId=4& messageId=85189&boardId=612&platformId=12 17. 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. The test widget has one; without it the widget wont install. Now I hope that the SDK allows you to create such signature.xmls 18. By Mal Loth on Aug 4, 2010 | Reply @ppk Not true. Widgets can run without signature.xml. Youll be prompted during installation that this widget is not certified thats all. I can confirm that on 100% because I make such widgets and
7 of 22
7/18/2011 1:25 PM
they run (just like the example.wgt Ive posted) without any issues. On second hand signature is needed if You want to sell Your widget in the AppStore. 19. By Popo Gor on Aug 5, 2010 | Reply Thanks, I finally created my first widget. Another question, how can I make a widget with bondi api, such as bondi.applaunch? I tried but there is a error: permission denied. Whats the problem? I want to make some icons to launch the application. 20. By Manuel on Aug 5, 2010 | Reply Ive the same problema of Popo Gor and Eric, someone have found a solution? 21. By wit on Aug 5, 2010 | Reply well, there is something you two could try: if you are using the official Samsungs 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! 22. By Popo Gor on Aug 6, 2010 | Reply Thanks wit!! Problem solved=] 23. By ppk on Aug 14, 2010 | Reply Mal, Widgets without a signature.xml do not run on my Wave. They dont even show the unsigned message; they just dont get installed. Is this a setting I can change somewhere? 24. By Mal Loth on Aug 14, 2010 | Reply I can only suspect that its due to ROM version You have. Personally I flashed Open Europe (unbranded) ROM and have no issues with operators settings (and certificates). You can try to flash to XXJF1 (unbranded) and then update to XXJF8 by Kies (yes, Kies supports unbranded ROMs as well). With this Youll 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 dont encounter this issue because I have it installed by default (to be
8 of 22
7/18/2011 1:25 PM
able to test my apps). 25. 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 who cannot install widgets after changing some files in the package, try this; if there is signature1.xml file in the package, delete it and repack, then the widget should install successfully. The reason for that is, changing any file in the package is actually breaking the seal of the package, hence the package (widget) is no longer original, it is tampered, the signature is invalidated and the device is rejecting to install it. I hope this helps. (My device is unbranded XXJF1.) 26. 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 the desired items in it. 27. By Hitesh on Jan 4, 2011 | Reply Can we add animations in widgets? like blinks and effects and stuff. pls reply.. 28. 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 html5 canvas is allowed. Other things like flash may not work properly or at all. Blink is only on IE so dont count on it. 29. By Vish on Jan 28, 2011 | Reply Thanks !! worked like charm 30. By Pitouke on Mar 28, 2011 | Reply Hello, Im totally new into Bada and widgets and stuff I just downloaded some free widgets from badawidget.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.png and index.html. I dont see a .wgt file In the example in this topic I do see a .wgt file.. Is this normal? I use Winzip. Can someone please explain step by step how I unzip and instal these files? Many thx!!! Bart 31. By Jeff on Jun 14, 2011 | Reply Nice sample, but is there anybody know how to uninstall it? 32. By Shubham on Jul 12, 2011 | Reply
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 and Dreamweaver. I deleted the signature file. And now my widget is running, However I still cant launch applications. It is showing error: permission denied. Please help 1. 2. Aug 2, 2010: BadaDev BadaDev Widget for Samsung Wave Is Here! 3. Aug 7, 2010: Creare widgets per Samsung bada e Wave S8500 | badaBlog 4. Mar 5, 2011: Bada Widget QPWOEIRU96 - Mr.Nothing
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 Bada OpenGL ES 2.0 on Bada: Shaders and Programs OpenGL ES 2.0 : Interactive Triangle Example On Bada
Timer in BADA OnBackground is not invoked. Forum Rules [Request] Spotify client for Bada Simulate multi touch [IDEA] bada pdf reader Win a Galaxy Tab - New Technology ideas! API Wishlist Wrap text in a label Developer from India
Anonmouse on Introduction to Sockets: Simple Low-Level Communication: Hey Wit Id really like your tutorial, if... Dave Cramp on Samsung Announces Bada 2.0: Hi Just in the process of buying a wave II and wondered if there was any... Shubham on How to create bada widgets: I dont know how to use Samsung SDKs. I am trying to modify existing widgets... kingkij on How To Encrypt Files In Bada: when i try to encrypt a text file it works perfectly but when i try to... Akhlaq on Samsung Announces Bada 2.0: Hi Team, I m using wave 2 not much familiar about using the Wave however i am... RzR on Using Hard Keys Event Listeners across Forms: Will those key be managed when a context menu appear ? luckyboy on Custom Control: Scrolling Label in Bada: Thanks, but I add a text other ,this text append into canvas. I... Deep on My Samsung Wave has finally arrived!: I am not able to re-sync my gmail accounts on my wave 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) - Revised Building 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 map Load and Display Images Changes in screen orientation Option Menu Drawing: Double-Buffer Multi-Point Touch 44 Privilege Groups C++ Tips for Java Developers Message Box Motion Detection Using ContextMenu with a List OpenGL ES (by Nour) EnrichedText Bada Error Codes
C++ Design Considerations C++ Language Tutorial
21 of 22
7/18/2011 1:25 PM
Bada Samsung's strategy in the new market C++: A Closer Look At Bada Making Sense of Samsung's Bada Samsung Wave Bada Phone Review
Bada App Reviews Bada Blog & Community For Users (Russian) Community for Bada Users LaufFire Reshep Great Media Apps Samsung Mobile Innovator Blog Samsung S8500 Wave Firmwares & Flashing
Bada Official Bada Developers Site Samsung Mobile Innovator Samsung Wave: First Bada Phone Copyright 2009-2010 BadaDev.com (unless otherwise stated). All rights reserved! Powered by Wordpress!
22 of 22
7/18/2011 1:25 PM

BadaDev How To Create Bada Widgets

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

BadaDev How To Create Bada Widgets

Hochgeladen von

Copyright:

Verfügbare Formate

BadaDev How to create bada widgets