Créer son Widget sous Bada pour Samsung Wave

Les widgets sont ces petites applications que nous voyons sur notre écran principal.
Ils sont écrits en HTML comme n’importe quelle page web.
Comme je l’ai mentionné , le widget est en quelque sorte une page web écrite en HTML, qui prend également l’avantage de CSS styles et Java Script.

Pour faire ce tutoriel nul besoin de logiciel chères, un simple notpad fait l’affaire, d’ailleurs c’est ce que j’utilise pour écrire tout mes codes en HTML / PHP,..

Le Widget est généralement constitué de 3 dossiers de base :

  • css (où tous les styles sont mentionnés),
  • js (où tous les scripts Java sont empilés)
  • images .

Tous les widgets (à la fois pour Bada et pour Samsung Omnia) ont une structures identique à celle ci, il est donc bon de la garder tel quelle

3 fichiers sont très importants, et sans eux rien ne peux fonctionner

  • – index.htm – structure HTML du widget,
  • icon.png – l’icône que nous voyons (32bit image de taille 90 × 90)
  • config.xml fichier de configuration – (très important)

Commençons donc par le début et créeant le fichier : config.xml. Ce fichier est utilisé par l’OS Bada pendant l’installation du widget. Si il contient des erreurs, le widget ne sera pas installé du tout. Dans ce fichier il devrait y avoir:

[tip]
CODE:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<widget id="ExempleWidget" version="1.0" width="120" height="180" xmlns="http://www.w3.org/ns/widgets">
<title>Exemple</title>
<description>Ici mettre la descritpion du widget</description>
<icon src="icon.png"/>
<content src="index.html"/>
<access network="false"/>
</widget>
[/tip]

Voici un petit lexique des différents thermes de ce code source :

  • widget Id – peut être une valeur alphanumérique (après certification, il contient le numéro 0 × 10000715, comme, mais si nous écrivons « ExampleWidget » il fonctionne aussi très bien,
  • Version – version widget,
  • width- widget sont largeur initiale (le cadre jaune, nous voyons au cours de glisser widget),
  • height- zone widget hauteur initiale (le cadre jaune, nous voyons au cours de glisser widget),
  • title- le nom du widget,
  • Description-widget brève description (s’il contient des caractères UTF-8 que tout fichier XML doit être UFT-8 codé ou widget ne sera pas installé),
  • Icon – le chemin de l’icône widget principal (peut pointer vers d’autres – comme « / images/1.png», mais il est bon de faire de cette façon),
  • Contenu – point de widget contenu principal et doit toujours être « index.html »,
  • Accès au réseau – true si nous avons besoin d’utiliser le réseau de nos widgets, sinon false (si elle est définie à true, nous serons amené à tourner sur le WiFi ou GPRS).

Ces quelques lignes sont un strict minimum pour que votre widget fonctionne et nous ne devons pas oubliez pas d’enregistrer ce fichier au format UTF-8 (surtout pas en Unicode mais sous en ANSI) sous peine de ne pas pouvoir installer le widget .

OK, nous avons préparé une config – Maintenant, nous allons commencer l’aventure html !!!

Les widgets sont un peu limités dans leur html, CSS, DOM et JavaScript. Par exemple, nous avons seulement que quelques événements disponibles: onClick (), onMouseUp (), onFocus (), onBlur ().

CODE:
[tip]
<!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>Exemple de widget</title>
<link rel="stylesheet" type="text/css" href="css/exempleWidget.css"/>
<script src="js/exempleWidget.js" type="text/javascript"></script>
</head>
<body>
<img id="logo" src="images/mygsm.png" onClick="testLogo();"/>
<span>Bonjour de mygsm!</span>
</body>
</html>
[/tip]

Dans l’exemple de widget suivant je vais utiliser seulement deux fichiers externes: css / exapleWidget.css (feuille de style) et js / exapleWidget.js (code JavaScript).
le code JS contient un script simple qui afficheras «Bonjour de Mygsm.fr »

CODE:
[tip]

// exampleWidget.js
function testLogo()
{
alert('Bonjour de Mygsm');
}
// exempleWidget.css
span.logoLabel
{
top: 5px;
font-size:20px;
color:#FFFFFF;
}
[/tip]

Mais ces quelques fichiers et dossiers ne fera rien sans le fameux fichier widget (. WGT). Pour ce faire nous avons besoin d’utiliser n’importe quel logiciel de compression Zip (j’ai utilisé 7Zip à cet effet) avec l’option Deflate (par défaut), puis modifier l’extension en . WGT.

Et voila ! Nous avons notre premier widget.

Pour l’installer, il suffit de copier le fichier . WGT sur l’appareil Si tout est OK, Bada nous informe que ce widget n’est pas certifié et nous demande si nous voulons l’installer de toute façon.

voici deux fichiers :

POur toutes vos questions, vos commentaires, rendez vous sur notre Forum

Créer son Widget sous Bada pour Samsung Wave
Mot clé :                        

9 commentaires sur “Créer son Widget sous Bada pour Samsung Wave

  • 17 août 2010 à 8 h 42 min
    Permalink

    Euh, merci pour toute ces explications, mais j’ai rien compris lol.
    Peux-tu nous faire un exemple, par exemple comment créer un widget raccouri qu’on pourra mettre en page d’accueil pour par exemple lancer facebook (sans passer par paramètre…) ou pour accéder à nos fichiers.
    Merci, Franck

    Répondre
  • 19 août 2010 à 7 h 11 min
    Permalink

    De mon côté j’ai un soucis, je comprends bien la procédure mais rien à faire, lors de l’installation sur le wave, j’ai le message « En cours » puis plus rien (il ne me dit pas Unsigned Application …) et rien ne s’installe alors que j’ai bien vérifié, la widget n’est pas déjà installée. Problème de manière de faire le ZIP ?

    Répondre
  • 19 août 2010 à 10 h 23 min
    Permalink

    Salut, merci pour ton tuto très clair. je coince quand même un peu, en fait je pense que j’ai un souci lors de ma compression, c’est a dire j’utilise 7zip, je compresse en zip et renomme en .wgt, mais la même un widget qui foncyionnait une décompressé et recompressé ne fonctionne plus, j’ai le message echec de l’installation, je ne vois vraiment pas ou je fait la bourde… si ça te parle je suis preneur…
    Ce que je voudrais faire c’est créer des widget raccourci contact, pour cela j’ai pris un widget existant Répondeur SFR avec le 123 et remplacer les param par le num de téléphone qui m’intéressait avec le nom du contact
    donc si j’arrive à faire marcher ce truc je partagerai le tout

    Répondre
  • 31 octobre 2010 à 14 h 59 min
    Permalink

    Salut,

    Depuis que je suis passé en version de Bada 1.0.2, je n’arrive plus à installer des widget tiers. D’où mon message ici, je n’arrive plus à installer ce widget. Pouvez-vous m’aider ?
    J’ai constamment le message « Echec installation ».

    Répondre
  • 11 novembre 2011 à 13 h 38 min
    Permalink

    Oh !!! Merci, c’est fantastique !!! Tout fonctionne à merveille !

    Répondre
  • 10 avril 2013 à 17 h 25 min
    Permalink

    Post Originel MonoNeuroneSalut,

    Depuis que je suis passé en version de Bada 1.0.2, je n’arrive plus à installer des widget tiers. D’où mon message ici, je n’arrive plus à installer ce widget. Pouvez-vous m’aider ?
    J’ai constamment le message « Echec installation ».

    j’ai le même problème avec bada 2.0 sur samsung wave II

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

En continuant à utiliser le site, vous acceptez l'utilisation de cookies. En continuant à utiliser le site, vous acceptez l'utilisation de cookies.

Les paramètres des cookies sur ce site sont par défaut "accepter les cookies" pour vous offrir la meilleure expérience possible de navigation. Si vous continuez à utiliser ce site sans changer vos paramètres de cookies ou si vous cliquez sur "Accepter" ci-dessous, vous consentez à ce sujet.

Fermer