Scommetto che anche tu ti sei chiesto: ma come si creano i widget per la piattaforma bada e per il Samsung Wave?
Bene, questa è una guida utile che risponderà alla tua domanda e ti aiuterà a realizzare il tuo primo widget. Questo tutorial è basato sull’articolo How to create bada widgets del sito badadev.com, e vi aiuterà a realizzare un widget che quando viene attivato restituirà il testo Ciao badaBlog.it! (che potete ovviamente cambiare con qualsiasi altro testo vogliate 
).
Iniziamo con alcune nozioni preliminari: i widget non sono altro che delle piccole applicazioni scritte in html (il linguaggio usato per scrivere le pagine web), css (per formattare gli elementi html e dargli uno stile) e javascript (per eseguire alcune funzioni più complesse come animazioni, cambio di schede, recupero di news da siti come per esempio gli RSS, ecc.). Come quindi avrete facilmente intuito, per iniziare a creare dei widget dovrete avere almeno qualche nozione di base di questi linguaggi.
Detto ciò, iniziamo a vedere qual è il metodo di costruzione di qualsiasi widget:
1) Struttura del widget:
- Innanzitutto i widget hanno una struttura di base necessaria se si vuole che esso funzioni, la struttura è reppresentata in questa immagine:
Come vedete, la struttura è composta da:
- css (una cartella in cui mettiamo tutti i file .css necessari per formattare la grafica);
- images (una cartella con tutte le immagini che ci serviranno nel widget);
- js (una cartella contenente tutti i file javascript, qualora ce ne fossero);
- config.xml (un file xml in cui vi sono i dati di configurazione del widget come per esempio altezza e larghezza, la versione, il nome, la descrizione, il richiamo all’icona, ecc. – è fondamentale per il funzionamento del widget);
- icon.png (un’immagine in formato .png di 90×90 pixel che è quella che vedremo durante il drag and drop);
- index.html (il file html che servirà a formare la struttura grafica della nostra piccola applicazione.
Adesso vediamo come procedere con la nostra creazione.
2) Configurazione del file config.xml
- Questo file è molto importante perchè è usato dal sistema operativo bada durante la fase di installazione, per crearlo potete tranquillamente creare un nuovo file di testo con il blocco note, incollarci le seguenti righe e salvarlo come config.xml
La prima riga va lasciata identica, vediamo insieme come vanno personalizzati i vari tag:
- id: è un identificativo del widget e può contenere valori alfanumerici (dopo la certificazione avrà un valore simile a questo 0×10000715, ma se lasciamo EsempioWidget verrà installato lo stesso;
- version: la versione del widget;
- width: la larghezza iniziale del widget (corrisponde al rettangolo giallo che vediamo sul telefono quando spostiamo un widget sullo schermo);
- height: l’altezza iniziale del widget (stessa cosa della larghezza citata sopra);
- title: il nome del widget;
- description: la descrizione;
- icon: il percorso dell’icona del widget (se mantenete la struttura di prima sarà icon.png);
- content: il percorso per il contenuto principale (se mantenete la struttura di prima sarà index.html);
- access network: bisogna scrivere false se non necessità di connessione al network, sennò true (true verrà impostato per esempio per poter utilizzare il Wi-Fi o GPRS o altre connessioni).
Una cosa importante è salvare il file con codifica UTF-8 (non in Unicode o ANSI) sennò non verrà installato.
3) Realizzazione del file index.html:
- Aprite il blocco note ed inserire queste righe:
<!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>Esempio Widget</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”/>
<script src=”js/onclick.js” type=”text/javascript”></script>
</head>
<body>
<img id=”logo” src=”images/badablog.png” onClick=”testLogo();”/>
<span class=”logoLabel”>Cliccami</span>
</body>
</html>
Salvate il file come index.html; come vedete vengono richiamati tre file, style.css e onclick.js che adesso andremo a creare.
4) Realizzazione del file style.css:
- Aprite il blocco note, incollateci queste righe e salvatelo nella cartella css come style.css
span.logoLabel {
top: 5px;
font-size:20px;
color:#FFFFFF;
}
5) Realizzazione del file onclick.js:
- Aprite il blocco note, incollateci queste righe e salvatlo nella cartella js come onclick.js
function testLogo()
{
alert(‘Ciao badaBlog.it!’);
}
Tutti questi file non serviranno a niente se non verranno “impacchettati” in un file .wgt installabile sul telefono.
6) Creazione del file .wgt:
- Scaricare 7zip, selezionate tutti i file che avete usato (Attenzione! Non la cartella che li contiene, direttamente i file!) e comprimeteli in un archivio .zip facendo attenzione di usare come metodo di compressione “Deflate“.
- Ora cambiate l’estensione del file da .zip a .wgt ed avrete creato il vostro widget
7) Fase finale, installazione del widget sul dispositivo:
- Collegate il telefono e copiate il file in una qualsiasi sua cartella (per convenienza copiatelo in Others);
- Accedete al menu e poi ad Archivio e cercate il file copiato cliccandoci sopra (se l’avete messo in Others lo troverete in Archivio > Altro);
- Se non avete fatto errori, dopo un po’ di secondi dovrebbe partirvi l’installazione e ve lo troverete sul menu dei widget in homepage (Non vi preoccupate se vi dice che il file non è certificato, è normale, cliccate OK e proseguite).
Questo era il metodo più semplice per creare un widget, più avanti inserirò una guida su come crearli con il Samsung Mobile Widget SDK, una serie di programmi che consente anche di simulatore sul proprio pc il comportamento del widget grazie ad un emulatore del nostro dispositivo.
I file ed il widget di esempio possono essere scaricati cliccando qui.
SEGUIMI SUI SOCIAL MEDIA