Créer son Widget sous Bada pour Samsung Wave

Publié le 9 commentaires sur 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

9 commentaires

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

  2. 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 ?

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

  4. 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 ».

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

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :