Widget Apple – Dashboard – Introduction à la création de Widget sur Mac OS X
Si vous faites de l’intégration et que vous avez des notions de Javascript et de CSS, vous pouvez sans aucun doute vous en tirer dans la création de widget. Compte tenu de l’avenir prometteur qui s’ouvre à ce type de mini-applications, ce pourrait être un plus sur votre CV. Enfin, dites-vous bien que les pratiques pour la création d’un widget Apple sont très similaires à celles des autres plates-formes du marché : Yahoo, Google… Pour ne citer que les principales plates-formes concurrentes. Un simple intégrateur avec des notions de développement peut faire d’un coup son entrée sur le “bureau” grâce à ses widgets. C’est la gloire et la fortune assurées !
Mais, au fait c’est quoi un widget !?
Qu’est-ce qu’un “widget” ?
Pour Apple, si on s’en tient à la “baseline” du site en français, on aura une idée concrète ce que c’est ! pas vraiment la peine de chercher plus loin…
Des mini-applications astucieuses pour Mac OS X
Source : http://www.apple.com/fr/downloads/dashboard
Pour les amateurs de sémantique, on pourra toujours se reporter à la définition donnée par Wikipedia.
http://fr.wikipedia.org/wiki/Widget
La version anglaise est moins didactique Amazing widgets for your Mac OS X Dashboard
Le dashboard ou tableau de bord
Le dashboard n’est rien d’autre que le tableau de bord de votre Mac. A titre d’exemple, ci-dessous le tableau de bord d’un utilisateur de mac, qui de toute évidence est aussi un fan de ski ! Vous aurez donc compris que celui-ci peut-être personnalisé à loisir à l’aide des widgets de votre choix.
Télécharger la dernière version de Xcode
Pour commencer à développer, il vous faut d’abord télécharger la plate-forme de développement mis à votre disposition par Apple. Pour recevoir ce gros fichier, pas loin de 1Go, il vous faudra en plus d’une bonne connexion, un compte ADC (Apple Developer Connection), c’est GRATUIT. Toute la procédure se fait en ligne et se fait assez vite. Une fois passée l’inscription, vous pouvez procéder immédiatement au téléchargement de xcode313_2736_developerdvd.dmg.
To download Xcode and access a range of development videos, log in with your ADC member Apple ID or register for a free ADC Online Membership.
Une fois sur le page, http://developer.apple.com/mac/ et muni de votre identifiant/mot de passe ADC, vous pouvez télécharger la dernière version de Xcode
Se loguer grâce à votre identifiant/mot de passe ADC
Télécharger xcode313_2736_developerdvd.dmg, c’est un gros fichier donc soyez patient !
Désinstaller un widget du Dashboard
Un
Le signe + en bas à gauche permet d’ouvrir le gestionnaire de widgets.
Dès que le manager de widgets est ouvert, des croix apparaissent sur chacun des widgets de votre dashboard, il ne vous reste plus qu’à fermer les widgets et de facto les supprimer de votre dashboard.
Image d’imageshack.us et du site apple
Mac OS X 10.4.2 or later: Installing and removing Dashboard widgets
http://support.apple.com/kb/HT2254
Créer votre propre “widget” ?
Nous allons créer un widget qui va passer des valeurs en $_GET à un fichier index.php qui fonctionne sur un site en local. L’adresse que nous allons utiliser est la suivante, voici un exemple de ce que le widget va appeler : http://127.0.0.1/widget_apple/index.php?textField1=200&horizontalSlider1=0.21739130434782608
Pour mémoire, si vous souhaitez installer rapidement et simplement un site en local qui fonctionne avec le couple php-mysql, reportez-vous aux articles de ce blog :
Le fichier .php
Voilà le code du fichier qui sera appelé par notre widget. Un simple echo des valeurs passés en $_GET.
<?php /* Les valeurs vont être envoyées en $_GET à votre fichier index.php */ /* http://127.0.0.1/widget_apple/index.php?textField1=200&horizontalSlider1=0.21739130434782608 */ /* $textField1 = $_GET['textField1']; $horizontalSlider1 = $_GET['horizontalSlider1']; */ /* output the value textField1 */ echo ('<h2>textField1 => '.$_GET['textField1'].'</h2>'); /* output the value horizontalSlider1 */ echo ('<h2>horizontalSlider1 => '.$_GET['horizontalSlider1'].'</h2>'); ?> |
Le projet dashcube_W_a.dcproj
Le projet dashcube_W_a.dcproj comprend deux vues : frontend et backend.
Une vue du frontend dans dashcode
Une vue du backend dans dashcode
Le code source javascript du projet dashcube_W_a.dcproj
C’est la dorsale de votre projet avec le fichier http://127.0.0.1/widget_apple/index.php, tout est contenu dans main.js
Le code de main.js
/* This file was generated by Dashcode. You may edit this file to customize your widget or web page according to the license.txt file included in the project. */ // // Function: load() // Called by HTML body element's onload event when the widget is ready to start // function load() { dashcode.setupParts(); } // // Function: remove() // Called when the widget has been removed from the Dashboard // function remove() { // Stop any timers to prevent CPU usage // Remove any preferences as needed // widget.setPreferenceForKey(null, dashcode.createInstancePreferenceKey("your-key")); } // // Function: hide() // Called when the widget has been hidden // function hide() { // Stop any timers to prevent CPU usage } // // Function: show() // Called when the widget has been shown // function show() { // Restart any timers that were stopped on hide } // // Function: sync() // Called when the widget has been synchronized with .Mac // function sync() { // Retrieve any preference values that you need to be synchronized here // Use this for an instance key's value: // instancePreferenceValue = widget.preferenceForKey(null, dashcode.createInstancePreferenceKey("your-key")); // // Or this for global key's value: // globalPreferenceValue = widget.preferenceForKey(null, "your-key"); } // // Function: showBack(event) // Called when the info button is clicked to show the back of the widget // // event: onClick event from the info button // function showBack(event) { var front = document.getElementById("front"); var back = document.getElementById("back"); if (window.widget) { widget.prepareForTransition("ToBack"); } front.style.display = "none"; back.style.display = "block"; if (window.widget) { setTimeout('widget.performTransition();', 0); } } // // Function: showFront(event) // Called when the done button is clicked from the back of the widget // // event: onClick event from the done button // function showFront(event) { var front = document.getElementById("front"); var back = document.getElementById("back"); if (window.widget) { widget.prepareForTransition("ToFront"); } front.style.display="block"; back.style.display="none"; if (window.widget) { setTimeout('widget.performTransition();', 0); } } if (window.widget) { widget.onremove = remove; widget.onhide = hide; widget.onshow = show; widget.onsync = sync; } // testcode function showMypage(event) { var websiteURL = document.getElementById("cfgValueWebsiteUrl").value; var textField1 = document.getElementById("textfield1").value; var horizontalSlider1 = document.getElementById("horizontalSlider1").object.value; var websiteURI = "textField1="+textField1+"&"+"horizontalSlider1="+horizontalSlider1; widget.openURL(websiteURL+"?"+websiteURI); } // EOF |
Configurer l’URL dans le backend de votre widget
Il faudra indiquer au widget vers quel fichier envoyé les valeurs récoltées via votre widget. Nous l’indiquons par défaut directement dans la backend.
Le rendu dans la navigateur
Les deux valeurs sont issus de ce qui a été saisi dans le widget. le champs textField1 affiche le chiffre 200 et le champs horizontalSlider1 affiche la valeur numérique qui est le résulat du déplacement du curseur.
Conclusion : L’élaboration d’un widget sur la plate-forme Apple est donc trivial. Il reste que votre widget peut devenir beaucoup plus sophistiqué que ce que nous venons de montrer. Comme pour les applications développées sous Flex, ce type d’application est appeler à se généraliser Cf Flex , Curl et Twitter – créer une application en Flex interfacé avec Twitter . Il deviendra même un facteur décisif pour rejoindre définitivement l’univers Mac et qui quitter à jamais la plate-forme Windows, “hasta la vista baby…” si vous voyez ce que je veux dire. !
Pour aller plus loin
- Le site de téléchargement de Apple Xcode 3
Xcode 3 inclut “Xcode IDE, Dashcode, Instruments, Interface Builder and a suite of additional developer tools”.
http://developer.apple.com/ - Des widgets pour le dashboard
…comme si il en pleuvait. - Leopard Sample Code: Apple Applications Dashboard
http://developer.apple.com/samplecode/AppleApplications/idxDashboard-date - Apple Applications
Tout sur les APIs de Apple
http://developer.apple.com/documentation/AppleApplications/ - Developing Dashboard Widgets
Une présentation rapide du Dashboard et des widgets, ce qu’il faut connaître… - Build a Dashboard Widget
Un excellent article de O’Reilly Media
http://linuxdevcenter.com/pub/a/mac/2005/05/06/dashboard.html - How to make your own Dashboard Widget with Dashcode
Comme son titre le mentionne, c’est pile poil le sujet qui nous intéresse.
http://www.downloadsquad.com/2007/01/08/how-to-make-your-own-dashboard-widget-with-dashcode/ - Introduction to Dashboard Programming Topics
Le BA BA de la création de widget
http://developer.apple.com/documentation/AppleApplications/Conceptual/Dashboard_ProgTopics/Introduction/Introduction.html
Vidéos
Un tutorial bien fait sur la création d’une ” Xcode 3 Beep Application”
Un des vidéos de la série Mac vs PC, sur vista justement…
