how to enable usb debugging on your bada phone

Quick steps:

1. Install device driver (example: SDK_FOLDER\Tools\Wave-Driver-V5_02_0_0\Setup.exe for Wave or
SDK_FOLDER\Tools\WaveWQ-Driver-V4_50_7_1 for others);
2. Turn on "Mass storage" on your device (just plug your USB cable and you'll be asked);
3. Copy rootCACert into a device folder that you could find later (rootCACert location: SDK_FOLDER\Tools\sbuild\rootCACert.cer);
4. Install the certificate on mobile phone;
5. Build your Eclipse project as Target Debug (with device connected via USB);
6. Turn on "USB debugging" on your device (just plug your USB cable and you'll be asked);
7. Run your project as "bada Target Application";

That's it :)

Thanks for your visit! :)

Next post: Form Manager - How to change screens in bada apps

Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo

creating our first bada app!

Let's create our first bada app...

1. Open your bada SDK and create a bada project as shown in Fig. 1

Figure 1. Creating your bada project

2.Select "bada Form Based Application" and give a project name, as shown in Fig. 2

Figure 2. Give a name to your bada project

3. Device Configurations is default... you can just click next button, as presented in Fig. 3. For manifest.xml details, click here and select Generate a New Application Profile link.

Figure 3. Device Configurations

4. Select bada SDK and language package, as shown in Fig. 4

Figure 4. bada SDK

5. As you created a bada Form Based App, now you must give a name to your Form, as shown in Fig 5.

Figure 5. Give a name to your Form

6. Select your device screen size, as presented in Fig. 6. You must select the resolution based on the device that you are intended to emulate. Samsung Wave has 480x800 resolution. The form will be created based on this size.

Figure 6. Auto-scaling Settings

7. Fill the basic settings... as shown in Fig. 7

Figure 7. Basic Settings

8. Select the configurations in which you want to deploy, as presented in Fig. 8. I suggest you to select all the options. Let's better understand each one:
Simulator-Debug: Emulate your app on windows;
Target-Debug: Allows you to debug your app in the device;
Target-Release: Compiles your code to be released in Samsung Apps (AppLog is disabled in this option).

Figure 8. Select Configurations

9. The next screen presents to you a project summary (Fig. 9)

Figure 9. Summary

10. Now, you're ready to start developing. Your project was created, as shown in Fig. 10

Figure 10. bada project

If you want to run your default app, you must select your build option, as presented ing Fig. 11. To emulate in Windows, choose Simulator-Debug option.

Figure 11. bada build

Now, you can run your app, as shown in Fig. 12

Figure 12. Running your first bada app

In this example, we've selected 240x400 resolution, so we've got a Samsung Scotia skin while emulating (Fig. 13). Note that the FORM was created in 240x400 folder.
If you need to edit the Form you must always edit the Form in Resource view. Don't try to edit the xml file (you can get serious problems).

Figure 13. Scotia emulation (240x400 screen size)

You can see some emulation options, such as Event Injector, right clicking over the device skin, as shown in Fig 14.

Figure 14. Emulation options


Now, a very important tip for you.
Interested in bada sample codes?
In the IDE, select the "bada SDK Samples" view (Fig. 15 and Fig. 16). You'll see a lot of sample codes.
Double-click and the project will be available into your workspace. Enjoy the codes :)


Figure 15. Select other views...


Figure 16. Select bada SDK Samples

Today we've configured our first bada project!
Now, we're ready to start seeing bada codes :)


Thanks for your visit! :)

Next post: How to enable USB debugging on your bada phone

Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo

let's get it started (bada)...

The main idea here is to do something simple, just to help you to start developing for mobile technologies. I will present you concepts, tools, good practices, code solutions, etc...

Feel free to contact if you need any help :)

Why bada?
- I've worked with for 6 months (C.E.S.A.R / Samsung Internship)
- I got involved in the development of more than 50 Bada apps for Samsung;
- Excellent support (docs, forum, tutorials);
- Wide acceptance in the market;
- bada Ecosystem - Samsung App Store;

What is bada?

Samsung bada is a smartphone platform released in 2010. The word "bada" means "ocean" in Korean. Samsung Wave is the first bada-powered phone.
According to Samsung, for developers, bada will bring a new blue ocean of mobile applications. For customers, they will have a wider choice of smartphones with cost-effective yet powerful bada-powered phones.

How Samsung see bada

The vision of bada is "Smartphone for Everyone". bada's main goal is not to compete with other existing smartphone platforms. Instead, bada will turn Samsung’s conventional customers into smartphone users by providing cost-effective smartphones. This means that bada will open and extend a new smartphone market, which does not exist in the current mobile market.

bada will create a new smartphone market, which will turn into a new blue ocean




Samsung bada OS presentation

Ecosystem Support

To help customers and developers, bada provides well-made ecosystem support. Samsung bada provides an application store, developer support systems with useful information, and a developer-friendly certification process.

For more information: Samsung App Store.

How do you configure your development environment?

I've worked with:

- bada SDK v1.2.1.
The bada SDK installation also contains the bada IDE.
Before installing the SDK, make sure that your computer fulfills the system requirements and that the required software has been installed.
* Microsoft Windows® XP, Windows® Vista or Windows® 7 operating system.
* At least 1.4 GB of RAM memory.
* At least 1.8 GB of free disk space.
* Local administrator rights.
* The bada Simulator screen size is 480 * 800. If the screen resolution of your computer monitor is under 800, the Simulator does not show normally for applications that use OpenGL®.

NOTE: For devices with 240x400 screen size (example: Samsung Wave 525), we've worked with SDK v1.1.0 because of the skins support.

More details: here

References

- Tutorials available in SDK\Documents\Tutorial folder.
- Developer bada Site
- BadaDev

- An Introduction to Bada: A Developer's Guide

- Introduction to Bada (part 1)
- Introduction to Bada (part 2)
- Introduction to Bada (part 3)

- C++ Reference

Thanks for your visit! :)

Next post: Creating our first bada app!

Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo

data persistence

Hello! :)

In this post we will learn about the Samsung Widget Persistence Library.

When we are developing widgets, we have just two functions for saving and retrieving info:

Saving: widget.setPreferenceForKey(value, key)
Retrieving: widget.preferenceForKey(key)

The functions use a lower case "widget" object. Note that we save the information with "value", "key" (in this order).


widget.setPreferenceForKey(value, key);
Saves a value with a specified key in the mobile device. The value is retained even if a device is turned off.

Parameters
value The value to be saved.
key The key that will be used to retrieve the value.

Example
In the following function call, the value "Eduardo#Brazilian#28" is saved in a key named "user_info".

widget.setPreferenceForKey ("Eduardo#Brazilian#28", "user_info");

widget.preferenceForKey(key);
Returns the value associated with the specified key. If no value is associated with the key, this function returns NULL.
Parameters
key The key that is associated with the value to be retrieved.

Example

try
{
   return widget.preferenceForKey("user_info");
}
catch(e)
{
   return null;
}

Easy? You can find more about Samsung Widget API here!

NOTE: You must debug your code without any API code. If you want to debug your code, remove/comment persistence code. The browser, outside IDE, don't know about Samsung API.

Thanks for your visit! :)

Next post: Let's get it started (bada)...

Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo

how to debug your code

Hello!

This post will be one of the smallest. :)
As we know, html + css + js are not compiled. These code lines are interpreted and executed by the browser. So, what can we do to debug our widgets? The answer is simple: let's try a html/css/js debugging tool :)


I suggest you to use FireBug, as shown in Figure 1.

"Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and see what each variable looked like at that moment. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast." (FireBug Site)

Figure 1. FireBug

You can learn more here! You can also use FireBug to check your CSS and HTML files.




Figure 2. Excellent console


I've used FireBug with FireFox...

So, we need to get our widget index.html file, open in FireFox and activate the FireBug (open FireBug console). It's really easy.

Steps to see your code on FireBug:

1- Open your Browser (with FireBug installed);
2- Go to your IDE workspace;
3- Find your Widget Project folder;
4- Open the project index.html file in the browser;
5- Click on FireBug icon, as shown in Figure 3 to activate the plug-in;

Figure 3. FireBug icon

6- You'll see your code!

If you have any question, feel free to ask.

Have a nice day!

Thanks for your visit! :)

Next post: Data Persistence

Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo

second widget (more complex)

Hello everybody!

Today I'll present you a widget that considers 2 depths: idle (submode) and fuel consumption screen (full mode). We'll better understand the index.html with two different screens (two div structure).
This widget is responsible for a simple fuel consumption control (considering KM and Liters). I'm not worried about images, ok? We are here today to better understand screens changes, html, css and js relationship.

Let's get it started...

html>

<!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"/>
  <!-- link to CSS file -->
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <!-- link to JS file -->
  <script type=text/javascript src=js/callBack.js></script>
 </head>
 <!-- first js call - used to initialize some 
  vars, set initial screen, etc... -->
 <body onload="doInit();">
  <!-- first depth screen - submode -->
  <div id="idle" class="idle" style="display:none">
   <div id="txtFuelControl" class="txtFuelControl">Fuel 
   Consumption</div> </div>
  <!-- second depth screen - full mode -->
  <div id="fuelControlScreen" style="display:none">
   <!-- label -->
   <div id="km_inputTitle" class="km_inputTitle">Km</div>
   <!-- label -->
   <div id="l_inputTitle" class= "l_inputTitle">L</div>
   <!-- inputs - created on js -->
   <div id="km_inputValueJS"></div>
   <!-- inputs - created on js -->
   <div id="l_inputValueJS"></div>
   <!-- result - will be presented by js -->
   <div id="result_FuelControl"></div>
   <!-- back button -->
   <div id="btnBack" class="btnBack">Back</div>
   <!-- result button -->
   <div id="btnConfirm" class="btnConfirm">Fuel Consumption</div>
  </div>
 </body>
</html>

NOTE: I'm using DIV structure, that has any problem to widgets development. I think this way it's easier than modifying each HTML elements in CSS. You can try both.

css>

@CHARSET "UTF-8";

body{margin:0; padding:0;}

.idle{
   position:absolute;
 width: 180px;
 height: 131px;
 background:black;
 font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
 color:white;
 font-size:11pt;
 font-weight:bold;
 border: 1px solid white;
}

#fuelControlScreen{
 position:absolute;
 top:0px;
 width: 239px;
 height: 300px;
 background:black;
}

.km_inputTitle {
 position:absolute;
 top:80px;
 left:5px;
 font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
 color:white;
 font-size:11pt;
 font-weight:bold;
}
.km_inputValue {
 position:absolute;
 top:0px;
 left:0px;
}

#km_inputValueJS {
 position:absolute;
 top:80px;
 left:135px;
}


.l_inputTitle {
 position:absolute;
 top:40px;
 left:5px;
 font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
 color:white;
 font-size:11pt;
 font-weight:bold;
}
.l_inputValue {
 position:absolute;
 top:0px;
 left:0px;
}
#l_inputValueJS {
 position:absolute;
 top:40px;
 left:135px;
}

.btnBack{
 position:absolute;
 top:270px;
 left:180px;
 width: 40px;
 height: 30px;
 font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
 color:white;
 font-size:11pt;
 font-weight:bold;
}

.btnConfirm{
 position:absolute;
 top:270px;
 left:20px;
 width: 160px;
 height: 30px;
 font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
 color:white;
 font-size:11pt;
 font-weight:bold;
}

#result_FuelControl{
 position:absolute;
 top:195px;
 left:90px;
 width: 150px;
 color: white;
 font-size:11pt;
 font-weight:bold;
}

HR{
 position:absolute;
 top: 35px;
 left: 30px;
 color: black;
 width:180px;
 border: 3px solid #000;
}


.txtFuelControl {
 position:absolute;
 top:50px;
 left:20px;
 width: 160px;
 height: 25px;
 font-size: 11pt;
}

js>

//init
doInit=function(){
 getIdleScreen();
 gId("txtFuelControl").onclick=function(){
  getFuelControlScreen();
 };
 gId("btnBack").onclick=function(){
  getIdleScreen();
  return;
 };
 gId("btnConfirm").onclick=function(){
  getFuelControlResult();
  return;
 };
};
//shortcut
function gId(id) {
 return document.getElementById(id);
};
//shows idle screen and hide fuelControlScreen
function getIdleScreen(){
 gId("idle").style.display = "block";
 gId("fuelControlScreen").style.display = "none";
}
//shows fuelControlScreen screen and hide idle
function getFuelControlScreen(){
 try {
  gId("km_inputValueJS").innerHTML = "<input type=text 
            id=\"km_inputValue\" 
            class=\"km_inputValue\" maxlength=\"5\" size=\"10\"  
            onclick=\"clearInputKM()\"></input>";
  gId("l_inputValueJS").innerHTML = "<input type=text 
            id=\"l_inputValue\" 
            class=\"l_inputValue\" maxlength=\"5\" size=\"10\" 
            onclick=\"clearInputL()\"></input>";
 } catch (e) {
  alert(e);
 }
 gId("idle").style.display = "none";
 gId("fuelControlScreen").style.display = "block";
}
//check comma use 
function checaVirgula(valor){
 return valor = valor.replace(",","."); 
}

function getFuelControlResult(){
 var km;
 var litros;
 var consumo = 0;
 km = gId("km_inputValue").value;
 litros = gId("l_inputValue").value;
 
 km = checaVirgula(km);
 litros = checaVirgula(litros);
  
 if(isNaN(parseFloat(km)) || isNaN(parseFloat(litros)) || 
 parseFloat(km) == 0 || parseFloat(litros) == 0 || 
 parseFloat(km) < 0 || parseFloat(litros) < 0){
  alert("Invalid data!");
  clearFields();
  return;
 }

 consumo = parseFloat(km);
 consumo /= parseFloat(litros);
 
 gId("result_FuelControl").innerHTML = consumo.toFixed(2) 
      + " Km/L";
}

function clearInputKM(){
 if(gId("result_FuelControl").innerHTML != ""){
  gId("result_FuelControl").innerHTML = "";
 }
}

function clearInputL(){
 if(gId("result_FuelControl").innerHTML != ""){
  gId("result_FuelControl").innerHTML = "";
 }
}

function clearFields(){
 gId("km_inputValue").value = "";
 gId("l_inputValue").value = "";
 gId("result_FuelControl").innerHTML = " " ;
}

The widget:



You can try this code. Remember... Package > Run as... > Widget

Have a nice day!

Thanks for your visit! :)

Next post: How to debug your code

Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo

widgets: design tips and mandatory requirements!

Design Tips:
- maximum recommended size for a widget (exported - .wgt): 1MB!
- widgets can support resolutions 240 x 320 , 240 x 400 , 480 x 800;
- for multi-touch areas a minimum touch area of 35 x 35 pixels must be secured;
- The "Back" button allows the user to return to a previous stage and is an essential button for the widget.
- Network widgets require a "Refresh" button.
- A loading image(gif) is required. Displaying the widget's version is recommended. The updating process is an essential element of a network widget. A "version update" button should also be provided to enable users to update to the latest version of the widget if they so desire.
- Use bmp files as replacements on devices that don't support PNG files.

PNG
1. Although PNG files support 256 level 8-bit transparency, this significantly increases image size. Therefore, Samsung recommend using 1-bit transparency,
similar to GIF format.
2. Although PNG supports true color, its lossless compression produces overly large files as the number of colors increases. Therefore, Samsung recommend
adjusting the work palette to decrease the number of colors (under 256) within an acceptable range without sacrificing quality.
3. When saving PNG files, a preview file is also saved, resulting in a larger size. Prevent this by choosing the "save for web" option and minimize file size.
4. For images with few colors, PNG-8 is not necessarily a better option than PNG-24. Samsung recommend saving in both formats and choosing whichever is smaller.
5. Utilize optimization programs such as OptiPNG or Pngcrush to recompress images without losing any information.

Widgets Elements
Figure 1. Widget Elements


Depth 2 supports both sub and full mode, as shown in Figure 2.
Figure 2. Full Mode / Sub Mode


Mandatory Requirements
For Samsung, these requirements absolutely must be met to create widgets:

1. Depth 1 Widget Grid (widget size)
Depth 1 Widget Area Guide / 240x 320, 240 x 400
Available sizes: 58x65, 58x130, 116x65, 116x130, 174x65, 58x195, 116x195, 174x195, 174x130
Depth 1 Widget Area Guide / 480 x 800
116x129, 232x129, 348x129, 116x258, 232x258, 348x258, 116x387, 232x387, 348x387

2. Widget Icon Size (shadow included)
Widget Icon Size (shadow included)
240 x 320: 44 x 44
240 x 400: 50 x 50
480 x 800: 96 x 96

3. Rounded upper corners for widget in full mode and Content Area by Resolution

Figure 3. Rounded upper corners and content area


4. Soft Key Policy
For 240 x 320 and 240 x 400 size: 37px;
For 480 x 800 size: 74px;

Now, my tip time :)
If you really want to see your widget available in More Widgets, you MUST follow these mandatory requirements.

Thanks for your visit! :)

Next post: Second Widget (more complex)!

Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo

widgets: tips and good practices!

1. Unobtrusive JavaScript

W3C recommendation! Unobtrusive JavaScript is the practice of separating out any JavaScript behavior code from your content structure and presentation. According to Adobe, with Unobtrusive JavaScript, only <script> tags that include external JavaScript files are allowed within your document. The goal is to eliminate the use of any <script> tags with inline JavaScript and the use of any HTML behavioral/event attributes, like onclick, onmouseover, etc, that make use of JavaScript from within the content markup itself, and externalize this code in a separate JavaScript file which gets included by a <script> tag with a "src" attribute. The idea here is that these externalized behaviors will get programmatically attached to the elements at some point during the document loading process, most likely after the window onload event fires, with the use of the DOM APIs which allow you to add/remove event handlers programmatically.
This practice prevent a browser that does not support the JS to crash on a particular page. Imagine you're browsing a site, your browser does not support JS and all the site links are one of the following ways:

    <a href="javascript.void(0)"> Link A </ a>
    <a href="#" onclick="funcao()"> Link B </ a>

This way you can not leave home because all the links use JS to set which page they should go. In this case the solution would actually put the real destination of the link and if necessary set the JS as follows:

index.html>

   <script src="example.js" type="text/javascript"></script>

   <a id="id_index" href="index.html">Home</a>
   <a id="id_blog" href="blog.html">Blog</a>
   <a id="id_contato" href="contact.html">Contact</a>
   

example.js>

 var index = document.getElementById('id_index');
 
   index.onclick = function(){
       indexFunction();
       return false;
   }
 
   function indexFunction(){
       alert('here!');
   }

The use of this technique may seem a little complicated and obscure at first, but from experience we find that the generated HTML code will be more readable and without the trouble of breaking if the browser that does not support JS.

You can learn more here!

2. A single HTML with multiple DIVs

It is a recommendation on developing widgets that we only use index.html file with all the screens of the widget in hidden DIVs. These screens can be grouped into different DIVs to implement the depths or "levels" (details in next post).

<!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"/>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  
  <script type=text/javascript src=js/callBack.js></script>
  <script type=text/javascript src=js/main.js></script>
  <script type=text/javascript src=js/common.js></script>
 </head>
 <body onload="init();">
 <!-- Widget with 2 screens or 2 DIVs -->
  <!-- First DIV -->
  <div id="telaIcone" style="display:none">
   <div id="menuLibras" class="menuLibras"></div>
  </div>
  <!-- Second DIV -->
  <div id="telaInicialLibras" class="telaInicialLibras" 
            style="display:none">
   <div class="topoLibras"></div>
   <div class="rodape"></div>
   <img id="librasImagens">
   <div id="setaDireita" class="setaDireita"></div>
   <div id="setaEsquerda" class="setaEsquerda"></div>
   <div id="inputDados"></div>
   <div id="btInterpretar" class="btInterpretar"></div>
   <div id="retornaTelaIcone" class="retornaTelaIcone"></div>
  </div>
 </body>
</html>

3. Do not create styles depending on the ids

Another practice that i've adopted was to not set styles using the id attribute of HTML elements. I used names that could be referenced in HTML using the class attribute. Therefore the ids may be used freely by the developers without interfering with the work of designers. We may think like the developer is the owner of the functionality (use of ids and JS) while the designer is the owner of the layout (class and .css)

Thanks for your visit! :)

Next post: Widgets: Design Tips and Mandatory Requirements!

Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo

better understanding your first widget!

Let's understand Hello World widget better.

As we can see, a widget has the following structure:

/ Root
– config.xml
– index.html
– icon.png – this image file is what users will see in their widget bar
– / css
- css files
– / images
- PNG (recommended)
– / js
- js files


In this post I'm assuming that everyone has HTML/CSS knowledge. So let's understand the Widget architecture.
As we can see in Figure 1 and Figure 2, a widget is a front-end app that is emulated in a browser. The widget is composed by HTML + CSS + JS.

Figure 1. Front-end architecture

Figure 2. Widget architecture


html>
a set of tags and rules for using them in developing hypertext documents

a protocol which include "tags" that are used to encode and format text, graphics, animation, sound, and other types of files on the World Wide Web

the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items.

css>
is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. ...

js>
is an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications.

is a scripting language widely used for client-side web development. It was the originating dialect of the ECMAScript standard. It is a dynamic, weakly typed, prototype-based language with first-class functions.

The application that we've created can run in any browser. You can try :)

Let's check the code:

html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br>
<html>
 <head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script type="text/javascript" src="js/main.js"></script>
 </head>
 <body>
  <div id="hello">
  <h2>Hello World</h2>
  </div>
  <div id="hello_again">
  <h2>Another hello!</h2>
  </div>
  <h3 onclick="toggle()">Press to toggle</h3>
 </body>
</html>

Very simple HTML with two id's: hello and hello_again (id's must be unique). And a call to toggle() js function.


js>

var state = 'hello';

//toggle function
//after any button click, this function will 
//be called (based on created HTML).
function toggle()
{
 //get the element id's (DOM)
 var helloElem = document.getElementById("hello");
 var hello_againElem = document.getElementById("hello_again");
 
 //check the state
 if(state == 'hello')
 {
  //change the CSS to hide the 'hello' element
  helloElem.style.display = 'none';
  //change the CSS to show the 'hello_again' element
  hello_againElem.style.display = 'block';
  //update state
  state='hello_again';
 }
 else
 {
  //change the CSS to show the 'hello' element
  helloElem.style.display = 'block';
  //change the CSS to hide the 'hello_again' element
  hello_againElem.style.display = 'none';
  //update state
  state='hello';
 }
}

css>

body {
 padding: 0;
 margin: 0;
}
/* hello id: used in html and js */
div#hello {
   display: block;
}
/* hello_again id: used in html and js */
div#hello_again {
   display: none;
}

h2 {
 color:white;
 text-align: center;
 background-color:rgb(80, 80, 170);
}
 
h3 {
 text-align: center;
 color:white;
 margin:-15px 10px 0 10px;
 padding:4px;
 background-color:rgb(80, 80, 170);
 border:2px solid;
 border-color:#c4c4e8 black black #c4c4e8;
 font-family:sans-serif;
 font-size: medium;
}

So, can you see how these elements are connected? In HTML file, as presented:

 <head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script type="text/javascript" src="js/main.js"></script>
 </head>

Easy?
:)


Thanks for your visit! :)

Next post: Widgets: Tips and Good Practices!

Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo

creating your first widget...

In the last post we've learned some concepts about Widgets and how to configure our development environment.

At this time I'm intending to show you a Hello World widget...

Let's get started!

1. Open your Eclipse :)
2. File > New > Other (Or Widget Project, if it was presented for you), as shown in Fig 1.

Figure 1. Creating a new Project


3. Select "Widget Project" > Next... as shown in Figure 2.

Figure 2. Creating a new Widget Project


4. Give a name to your project, as shown in Figure 3.
5. Note that you must fill Width and Height sizes according to the target device. I've configured with 240 x 320 (Corby screen size) in this example. If you keep default value you can get in trouble to emulate your application (that will be only available in part of the screen).

Figure 3. Create Widget Project


6. Select a device to emulate your application, as shown in Figure 4.
Note that this choice is based on the configuration of your project (previous screen)

Figure 4. Select Device


7. Select Hello World Template, as shown in Figure 5 and "Next..."

Figure 5. Select a Template


8. Eclipse will ask you to change your perspective, as shown in Figure 6.
Note: A view is typically used to navigate a hierarchy of information, open an editor, or display properties for the active editor. A set of Views is a Perspective. Samsung has created a perspective for widgets development. :)

Figure 6. Open associated perspective


Ok, we got a widget project into the workspace, as shown in Figure7.

9. Rigth click on Project into workspace and "Package", as shown in Figure 7. This is need to generate .wgt package (that is used in emulation). Note that a .wgt file is created into "packages>Corby" folder.

Figure 7. Workspace


Ok, interesting!!! How can I execute this example?

9. Rigth click on Project into workspace and "Package", as shown in Figure 7. This is need to generate .wgt package (that is used in emulation). Note that a .wgt file is created into "packages>Corby" folder.

Figure 8. Packaging...


10. Rigth click on Project into workspace and "Run As... > Widget" as shown in Figure 9.

Figure 9. Running...


11. You'll be asked to choose a device to emulate your App. In this example, we are considering just Corby, as shown in Figure 10. You can add others devices anytime you want, dont worry! :)

Figure 10. Confirm the device to emulate your app...


12. Congratulations! You got your first widget emulation :)

Figure 11. Emulated Hello World App!


I suggest you to start reading:
Samsung Tools e SDKs

Samsung Mobile Widget SDK Guide

Available Widgets for Download (you can easy download, see and run all of the widgets)

Device Specs (find devices for the application that you want to develop - screen size, user interface, ...)


Thanks for your visit! :)

Next post: Better understanding our First Widget!

Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo

let's get it started...

I'm gonna start this blog, that is focused on mobile development, talking about Samsung Widgets. BADA coming later!

The main idea is to do something simple here, just to help you to start developing for mobile technologies. I will present some code solutions also.
Feel free to contact if you need any help :)

Why Widgets?
- I've worked with for 6 months (C.E.S.A.R / Samsung Internship)
- I got involved in the development of 111 widgets for Samsung More Widgets;
- We got more than 120.000 downloads in 8 months (with these widgets);
- Easier than Bada (to start);
- Front-end technology (HTML + CSS + JS);
- Wide acceptance in the market;
- Widgets are displayed on the home screen of the device and are usually the quickest way to update users with important news.
- Can be developed for mobile cellphones, tablets, digital TVs, desktops (windows 7 gadgets are similar...);

What is a widget?

According to Samsung, Widgets are small client-side applications installed on handsets. Samsung Mobile Widgets use web technologies based on TouchWiz UI to access various handset functions

Usually they´re designed to handle simple tasks such as providing an interface to web search sites, performing basic calculations, displaying news headlines, weather forecasts, stock tickers and suchlike, but they can also act as complex apps providing multiple functions, as shown in Figure 1. Samsung Mobile Widgets are quick and easy to develop and simple to install on handsets.

Figure 1. Widgets examples (simple applications, running on device browser).

In my opinion, Widgets are simple but they are interesting for starting the development of mobile apps (great learning). You will learn how to work with SDK, emulation, screen size limits (device specs), front-end engineering design, ...

Widgets examples: Samsung Wave (BADA OS)


How do i configure my development environment?

I've worked with:

- Java Virtual Machine (JDK 1.6)
- Eclipse Galileo (3.5.1)
- Plug-ins:
- If you are already an Eclipse user, you can install Eclipse Samsung Mobile Widget SDK and Aptana as a plug-in directly into your current Eclipse configuration;
- You can try these urls: - Eclipse Samsung Mobile Widget SDK (1.0.X) and Aptana Studio .

Installing Plugins on Eclipse 3.5

1. Go to Help -> Install New Software...
2. In the "Work with:" text box, specify your desired update site.
3. Click Add...
4. Specify the Name of the Update site (i.e. Aptana Studio Plugin)
5. Click OK
6. Select the "Aptana Studio" checkbox
7. Click the Next button
8. Confirm the items you are installing
9. Click the Next button once more
10. Accept the terms and conditions
11. Click the Finish button



Widgets, how to start

Lets understand a little more.

SDK or Software Development Kit is typically a set of development tools that allows for the creation of applications for a certain software package, software framework, hardware platform, computer system, video game console, operating system, or similar platform. Widgets has a particular SDK. BADA has a particular SDK. Motorola has a particular SDK. Android has a particular SDK. Apple has a particular SDK, ...

The idea is simple: If you are intending to start developing for a mobile device, you must find the proper SDK.
With a SDK you can emulate your applications :) You will see the mobile skins, access device specs, access particular APIs, ...

Ok, and why Aptana?
Aptana Studio is an open source integrated development environment (IDE) for building Ajax web applications. It includes support for JavaScript, HTML, DOM, and CSS with code-completion, outlining, JavaScript debugging, error and warning notification and integrated documentation.

Browsers (to test apps - optional):
- Firefox 3.6;
- Opera 10.10;
- Safari 4.0.4.

CPU Processor: Intel Dual Core or higher.
At least 1Ghz Memory;
Windows XP or higher.

Motivation: Quick and Easy to Develop
Widget development process is very straightforward and does not require sophisticated skills or tools.
Go to Samsung Innovator Mobile and get more information.

Thanks for your visit! :)

Next post: Creating our first Widget!

Feel free to ask/suggest/comment.
Twitter: @oliveiraeduardo