Widget Apple – Dashboard – Introduction à la création de Widget sur Mac OS X

by Posted on



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.

Widget Apple - Dashboard - Introduction à la création de Widget sur Mac OS X

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.

Source : http://developer.apple.com/products/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
Widget Apple - Dashboard - Introduction à la création de Widget sur Mac OS X

Widget Apple - Dashboard - Introduction à la création de Widget sur Mac OS X

Se loguer grâce à votre identifiant/mot de passe ADC
Widget Apple - Dashboard - Introduction à la création de Widget sur Mac OS X

Télécharger xcode313_2736_developerdvd.dmg, c’est un gros fichier donc soyez patient !
Widget Apple - Dashboard - Introduction à la création de Widget sur Mac OS X

Désinstaller un widget du Dashboard

Un

Le signe + en bas à gauche permet d’ouvrir le gestionnaire de widgets.
Widget Apple - Dashboard - Introduction à la création de Widget sur Mac OS X

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.
Widget Apple - Dashboard - Introduction à la création de Widget sur Mac OS X

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
Widget Apple - Dashboard - Introduction à la création de Widget sur Mac OS X

Une vue du backend dans dashcode
Widget Apple - Dashboard - Introduction à la création de Widget sur Mac OS X

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
Widget Apple - Dashboard - Introduction à la création de Widget sur Mac OS X

Widget Apple - Dashboard - Introduction à la création de Widget sur Mac OS X

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.

Widget Apple - Dashboard - Introduction à la création de Widget sur Mac OS X

Widget Apple - Dashboard - Introduction à la création de Widget sur Mac OS X

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.

Widget Apple - Dashboard - Introduction à la création de Widget sur Mac OS X

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

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…

Published by Bruno Flaven

Bruno Flaven has been a Project Manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://fr.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He is currently P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts