cours - Irif

Transcription

cours - Irif

Mac OS X
Dashboard
[email protected]
http://www.liafa.jussieu.fr/~yunes/macosx/
jeudi 15 octobre 2009
Dashboard
• un ensemble d’outils toujours disponibles [F12]
• trois types d’outils :
• accessoires (très autonomes)
• extensions d’applications
• informatifs
horloge, calculatrice...
contrôleur iTunes...
météo, cours de la bourse...
Dashboard
• Un widget de base est un bundle particulier :
• répertoire d’extension .wdgt
• fichier HTML contenant l’interface
• une image de fond (PNG) Default.png
• une icône (PNG) Icon.png
• un fichier de propriétés Info.plist
Dashboard - HTML
• le HTML à employer devrait plutôt être
conforme à XHTML 1.0 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bonjour</title>
</head>
<body background="Default.png">
<h1>Bonjour tout le monde!</h1>
</body>
</html>
Dashboard - HTML
• Trois extensions disponibles :
• une balise canvas permettant de déclarer une
zone d’affichage
• l’attribut composite à employer avec la balise
image pour obtenir des rendus particuliers
• un nouveau type d’entrée search pour
obtenir créer un champ de recherche dans le
style Mac OS X
Dashboard - HTML
• l’exemple du widget Diderot (à télécharger
depuis http://www.liafa.jussieu.fr/~yunes/macosx/) :
<html>
<head>
<title>Diderot</title>
</head>
<body background="Default.png">
</body>
</html>
Dashboard - Icon.png
• Icon.png est utilisée pour représenter le
widget dans la barre de widgets, ses
caractéristiques doivent être :
• le contenu doit être défini dans une zone de
75px X 75px
• l’ombre projetée doit avoir :
•
•
•
•
50% d’opacité
une orientation de 90° par rapport à l’horizontale
un décalage de 3 pixels
et une taille de 3 pixels avec du « flou Gaussien »
Dashboard - Info.plist
• Contient des métadonnées sur le widget, les clés
obligatoires sont :
• CFBundleName : son nom «système»
• CFBundleDisplayName : son nom localisé
• CFBundleIdentifier : reverse Internet domain
• CFBundleVersion : version du widget
• MainHTML : fichier HTML principal
Dashboard - Info.plist
• Exemple du widget Diderot :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"
"http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
!
<key>CFBundleDisplayName</key>
!
<string>Diderot</string>
!
<key>CFBundleIdentifier</key>
!
<string>fr.univ-paris-diderot.Diderot</string>
!
<key>CFBundleName</key>
!
<string>Diderot</string>
!
<key>CFBundleVersion</key>
!
<string>1.0</string>
!
<key>MainHTML</key>
<string>Diderot.html</string>
</dict>
</plist>
Dashboard Technologies
• peuvent être employées :
• HTML (XHTML 1.0, en fait WebKit)
• CSS
• Javascript
• + toutes les technologies Apple (Obj-C...)
structure
forme
logique
Dashboard - Ressources
• Quelques ressources standards sont fournies :
•/System/Library/WidgetResources/
on y trouve différentes classes Javascript, ainsi que diverses
images d’objets standards
• Les Widgets sont placés :
tous les utilisateurs dans
• pour
/Library/Widgets
chaque utilisateur dans
• pour
/Users/login/Library/Widgets
Dashboard Classes Apple
• Pour conserver l’apparence (look&feel) Apple,
des classes d’objets standards sont fournies :
• AppleScrollArea, AppleScrollbar
• AppleSlider
• AppleAnimator, AppleAnimation
• AppleButton
• les préférences et les faces
• les événements
• le glisser/déposer...
Dashboard Classes Apple
•Insertion de la définition Javascript de l’objet
•Insertion dans le document d’un élément permettant
de le représenter
Déclaration d’un handler permettant de réaliser les
initialisations utiles
Déclarations concernant le placement de l’objet
Définition du handler
•
•
•
Dashboard -
AppleButton
•Insertion du code Javascript contenant les
définitions utiles pour manipuler un bouton
«Apple»:
<script type=”text/javascript” src=”/
System/Library/WidgetResources/
AppleClasses/laClasse.js” charset=”utf-8”/>
•Ici laClasse est AppleButton
Dashboard -
AppleButton
•Insertion de l’élément du DOM en utilisant la
balise <div> et son attribut id:
<div id=”monBouton”></div>
•Insertion du handler d’initialisation
<body onload=”setup();”>
Dashboard -
AppleButton
•Déclarations de positionnement :
#monBouton {
position: absolute;
top: 200px;
left: 160px;
}
Dashboard -
AppleButton
•Définition de la fonction d’initialisation :
var bouton;
function unClic() { widget.openURL("http://www.google.fr/"); }
function setup() {
bouton = new AppleButton(
document.getElementById("monBouton"),
"Un clic?",
23,
"images/bGauche.png","images/bGaucheDown.png",
10,
"images/bMilieu.png","images/bMilieuDown.png",
"images/bDroit.png","images/bDroitDown.png",
10,unClic);
}
Dashboard -
AppleButton
•Les propriétés/méthodes des objets AppleButton :
•onclick : (propriété) le handler
•setDisabledImages(...): (méthode) positionne des
images à utiliser lorsque le bouton est inhibé
•enabled : (propriété) son statut
•setEnabled(boolean) : (méthode)
•remove() : (méthode) pour détruire l’objet
•textElement : (propriété) le label de l’objet
Dashboard -
AppleScrollbar
• Il y a deux objets à manipuler, la barre
•
•
•
(AppleScrollbar) et le contenu à faire défiler
(AppleScrollArea)
Donc deux éléments du DOM
Trois constructeurs :
AppleVerticalScrollbar(élément);
AppleHorizontalScrollbar(élément);
AppleScrollArea(élément);
une méthode d’association :
scrollArea.addScrollbar(scrollBar);
Dashboard -
AppleSlider
• Deux constructeurs :
AppleVerticalSlider(élément, handler);
AppleHorizontalSlider(élément, handler);
• le handler est de la forme :
function handler(valeur) { ... }
valeur est une valeur flottante entre 0 et 1
Dashboard -
AppleAnimator
• En réalité il s’agit de classes permettant de générer des
appels de fonctions à intervalles contrôlés en générant
des suites de valeur :
AppleAnimator(délai, intervalle);
AppleAnimation(début, fin, handler);
• le handler est de la forme :
function handler(animation, valeur, début, fin) { ... }
Dashboard -
AppleAnimator
• L’association entre un Animator et une Animation est
réalisée par un appel à :
animator.addAnimation(animation);
• le contrôle est réalisé par :
animator.start();
animator.stop();
Dashboard les préférences
• un mécanisme de conservation de valeurs est
disponibles. Il s’agit de « préférences » :
widget.setPreferenceForKey(valeur, clé);
widget.preferenceForKey(clé);
• Note : les préférences sont persistantes (y
compris aux sessions)
• Note : les préférences ne doivent être
manipulées qu’en face arrière
Dashboard - les faces
• les widgets possèdent deux faces :
• la face avant qui présente les données utiles
• la face arrière qui permet de contrôler les
préférences
• on bascule de l’une à l’autre à l’aide d’un
AppleInfoButton dans un sens et d’un
AppleGlassButton (appelé Done Button)
dans l’autre
• Le widget est divisés en deux parties :
<div id=”avant”>
<div id=”info”></div>
</div>
<div id=”arriere”>
<div id=”done”></div>
</div>
• Les handlers de bascule ressemblent à :
function showPrefs() {
var av = document.getElementById("avant");
var ar = document.getElementById("arriere");
if (window.widget)
widget.prepareForTransition("ToBack");
av.style.display="none";
ar.style.display="block";
if (window.widget)
setTimeout ('widget.performTransition();', 0);
}
Dashboard les événements
• l’apparition et le masquage :
widget.onshow, widget.onhide
• la captation des événements :
widget.onfocus, widget.onblur
• le déplacement :
widget.ondragstart, widget.ondragend
suppression :
• lawidget.onremove
Dashboard - les canvas
• la balise canvas :
<canvas id=”id” width=”largeur” height=”hauteur” />
• en Javascript on récupère l’objet, puis on manipule son
contexte graphique :
cv = document.getElementById(“id”);
ctxt = cv.getContext(“2d”);
Dashboard - les canvas
• les méthodes (non fixées) du contexte sont (non
exhaustif) :
save()
restore()
clearRect()
translate()
rotate()
drawImage()
fillRect()
setFillColor()
Dahsboard l’objet widget
• ses propriétés :
identifier
ondragstart
ondragend
onshow
onhide
onremove
Dahsboard l’objet widget
• ses méthodes :
openApplication(bundleId);
openURL(url);
preferenceForKey(clé);
prepareForTransition(transition);
performTransition();
setCloseBoxOffset(x,y);
setPreferenceForKey(valeur,clé);
system(commande,handler); nécessite AllowSystem true
Dahsboard les intentions
• Il est nécessaire de déclarer ce à quoi le widget a droit,
par l’intermédiaire de propriétés :
AllowFileAccessOutsideOfWidget
AllowFullAccess
AllowInternetPlugins
AllowJava
AllowNetworkAccess
AllowSystem
Plugin
Dashboard Accès au Web
• On peut accéder au Web via HTTP en utilisant
l’objet XMLHttpRequest :
XMLHttpRequest() constructeur
requête.open(méthode,url);
requête.setRequestHeader(champ,valeur);
requête.onload = handler;
requête.send(); / requête.abort();
requête.getResponseHeader(champ);
requête.responseXML / requête.responseText
Dashboard Documentation
• Dashboard Tutorial (Dashboard_Tutorial.pdf)
• Dashboard Reference (Dashboard_Ref.pdf)
• Web Kit DOM Programming Topics
(SafariJSProgTopics.pdf)

cours - Irif

Transcription

Documents pareils

Marques pages personal et pocket (vous pouvez découper l`onglet

Série de formations DIY: "Faites (vous) plaisir - Craque

Mapa Web - Alimentación.es

Annexe 4 : Créer un widget de type flux RSS

ajout d`un post-it - Premiers pas Konica Minolta

Mode d`emploi

Plateforme de consultations juridiques AVOCAT.FR

Vérifiez l`heure exacte, consultez la météo, suivez un vol

5 meilleures pratiques pour créer des tableaux de bord efficaces