Le tableau de bord ces jours est fade. Nous plaçons une calculatrice ici et un pense-bête là une fois toutes les quelques semaines, mais malheureusement, nous n’avons pas vu beaucoup d’excellents widgets sortir récemment. Aujourd'hui, pour remédier à l'espace vide dans le cœur de notre tableau de bord, déchiquetons un widget et piratons-le dans notre propre!
Pointe: Si vous souhaitez télécharger le fichier de widget de ce didacticiel, vous pouvez le télécharger ici. Il s'agit du widget de tableau de bord personnalisé créé à la fin de ce didacticiel, avec toutes les images et les modifications prédéfinies. Cela signifie que vous pouvez l'installer directement sur votre tableau de bord et jouer immédiatement avec les modifications..
Lorsque nous regardons le tableau de bord de l'utilisateur Mac moyen, il est probablement vide et jamais utilisé, ou extrêmement rempli de sources d'informations sportives et de notes autocollantes. Parfois, nous voyons aussi des lumières de Noël festives! Il doit sûrement y avoir plus dans le tableau de bord que cela.
Nous pourrions continuer notre vie et continuer à regarder nos écrans en désordre, mais cela ne correspond pas au style Mactuts +! Les tableaux de bord sont en train de disparaître, alors relançons la scène en personnalisant plus que jamais nos widgets.
Pour lutter contre un aspect de ce Widget-dépression, nous allons éditer le widget "Stickies" et le personnaliser. Les modifications sont simples: modifiez l’arrière-plan des notes autocollantes afin que nous puissions avoir des couleurs de notes spécifiques (et des étiquettes) à des fins spécifiques. Par exemple, nous aurons un type de pense-bête pour les pensées personnelles, un pour les listes de tâches et éventuellement un autre pour les notes aléatoires. Nous ajouterons également un bouton personnalisé "Effacer tout" pour accélérer l'effacement de nos notes..
Les tableaux de bord sont en train de disparaître, alors relançons la scène en personnalisant plus que jamais nos widgets.
Vous aurez besoin de connaissances en HTML, CSS et JavaScript, mais le processus n’est certainement pas trop avancé. Commençons!
Tous les widgets sont situés dans le dossier "/ Library / Widgets". Vous pouvez faire un rapide Comman + Shift + G pour y accéder rapidement. Parce que nous allons éditer le widget Stickies, trouvez le fichier de widget Stickies.wdgt et en faire une copie sur votre bureau. De cette façon, nous pouvons éditer les fichiers sans avoir à vous soucier des autorisations et des problèmes liés à la sauvegarde.
Sur votre bureau, cliquez avec le bouton droit et sélectionnez Afficher le contenu du paquet afin d'ouvrir le widget sous forme de dossier plutôt que de l'ouvrir dans le tableau de bord.
Maintenant que les fichiers du widget sont ouverts, examinons la structure générale d'un widget.
Les widgets de tableau de bord sont relativement simples. Ce sont de petites configurations HTML avec JavaScript qui sont dispersées pour les rendre interactives. Pour cette raison, les fichiers inclus dans chaque widget sont simples et faciles à modifier, en particulier lorsque nous souhaitons modifier des éléments simples tels que les images. Le widget Stickies est un excellent exemple de cette simplicité.
Afin de comprendre le fonctionnement d'un widget Dashboard, examinons chaque fichier et voyons à quoi il sert..
le Info.plist Le fichier détermine les informations sur le widget. Il est au cœur du widget, car il comprend le nom du paquet ("Stickies" ici), la version actuelle, la hauteur et la largeur du widget, etc. Cependant, comme nous n'éditons que des widgets dans ce tutoriel, nous pouvons ignorer ce fichier..
Ce fichier est généralement le même que le dernier. Il contient plus d'informations sur le widget. Il a le numéro de version, le numéro de build, etc. Ce n'est pas important pour ce que nous faisons.
C'est la vraie viande du widget. Nous avons ici le code qui compose ce que nous voyons. Comme indiqué précédemment, chaque widget est simplement une page HTML, elle est donc facilement modifiable. Si vous l'ouvrez, vous constaterez qu'il est très familier si vous avez déjà travaillé avec des sites Web. (Remarque: les "collants" du nom de fichier changent en fonction du widget, ce fichier n'a donc pas toujours le même nom. Ceci est également vrai pour les deux fichiers suivants.)
Bien sûr, avec le code HTML, nous voudrons styliser le contenu, alors voici le fichier CSS qui l'accompagne.
L'interactivité du widget provient de JavaScript, et c'est là que tout se tient. Nous aurons à éditer ceci aussi bien plus tard!
Lorsqu'un widget est chargé, ces images sont affichées comme des espaces réservés jusqu'à ce que tout soit chargé. C'est l'écran d'accueil du widget. (Si vous vous demandez ce que signifie "@ 2x" à la fin, il s'agit d'une image plus grande pour l'affichage Retina sur les écrans les plus récents.)
Lorsque vous ajoutez un widget à votre tableau de bord, les icônes que vous pouvez voir et faire glisser sont ces fichiers. Encore une fois, le "@ 2x" est destiné aux écrans Retina.
Le widget Stickies utilise un dossier "Images" pour contenir toutes ses images. Vous remarquerez à l'intérieur tous les arrière-plans et icônes qui composent le widget.
La première chose à faire avant d’entrer dans le code est d’éditer les fichiers d’image afin de changer l’apparence du widget. Dans le cas du widget Stickies et de nombreux autres widgets de stock, nous pouvons simplement faire glisser et déposer de nouvelles images dans le dossier Widget afin d'apporter des modifications. Par exemple, si je voulais changer l’icône Stickies, je pouvais créer de nouveaux .png fichiers et remplacer les anciens ("icon.png" et "[email protected]").
J'ai également également changé l'image de fond jaune dans le dossier "Images" en ajoutant un thème "pensées personnelles". J'ai changé les couleurs et ajouté une icône en haut à droite pour indiquer le but de la note..
Maintenant, si nous installons le nouveau widget, nous verrons instantanément les modifications et nos notes jaunes auront désormais le thème "pensées personnelles". Changeons encore une note et la transformons cette fois en liste de tâches.
La modification des images est un excellent moyen d'ajouter une touche de style à vos widgets. C'est simple et rapide, et si c'est tout ce que vous souhaitez, vous pouvez passer à l'étape 5 pour installer le widget nouvellement modifié. Sinon, continuons à y travailler.
Il est maintenant temps d'ajouter de vraies fonctionnalités! C’est là que les connaissances HTML / CSS / JavaScript sont utiles car chaque widget est construit avec cela. Nous n'allons pas aller trop loin dans l'édition du code, mais nous allons travailler avec les trois fichiers pour vous faire connaître. Comme je l'ai dit précédemment, nous allons travailler pour ajouter une autre petite icône en bas à gauche fonctionnant comme un bouton "effacer tout"..
Pour ajouter le nouveau bouton, nous devrons ajouter un autre #eraseButton div juste avant la #infoButton div (ligne 21). Pour le moment, il ne s'agit que d'une div vide avec une image à l'intérieur, mais nous allons la styler afin de lui donner l'apparence d'un bouton réel. le img est une simple icône "x" de 12 pixels par 12 pixels que j'ai placée dans le dossier "Images".
Maintenant, afin de donner le style du bouton d'effacement, passons à la Stickies.css déposer et ajouter des informations de base sur l’emplacement et la taille avant la #infoButton sélecteurs. Donnons-lui aussi un peu plus de style en augmentant l'opacité lorsque nous la survolons..
#eraseButton opacity: 0.5; position: absolue; en haut: 166px; à gauche: 15px; largeur: 13px; hauteur: 13px; #eraseButton: hover opacity: 1;
Si vous regardez le Stickies.js vous réaliserez que c’est très bien documenté et écrit grâce à Apple. Cela nous facilite la tâche.
Le code JavaScript permettant de faire fonctionner le bouton d’effacement est une fonction très simple qui ne définit que le contenu de la zone de texte. Ajoutez ce code n'importe où dans le Stickies.js, de préférence là où il convient avec d'autres fonctions. Je le mets après le textToHTML une fonction.
fonction eraseAll () mydiv.innerHTML = "";
Pour appeler le code JavaScript, ajoutons un sur clic événement au #eraseButton dans le Stickies.html fichier.
Et le bouton est fait! C'est un exemple très simple, mais il montre également l'extensibilité de tels widgets en raison de leur simplicité.
Si vous souhaitez tester votre widget au fur et à mesure que vous apportez des modifications, il existe deux options: ouvrir le fichier .html dans votre navigateur comme un site Web ou installer le widget et le tester dans le tableau de bord. Le premier est plus rapide pour le développement, tandis que le second offre une véritable expérience de tableau de bord.
L'installation d'un widget est également très simple. Tout ce qu'il faut, c'est un double-clic sur un widget et un "oui" à l'invite d'installation. Assurez-vous qu'avant d'installer votre nouveau widget, vous enregistrez une copie de votre version modifiée. En effet, au fur et à mesure de votre installation, le fichier sera déplacé vers "~ / Library / Widgets". Notez également que lorsque nous installerons le nouveau widget Stickies, il remplacera le dernier car il porte le même nom..
Éditer le widget semblait difficile au début, mais sa simplicité nous permettait d’apporter facilement des modifications. Nous avons terminé la modification de notre widget Stickies et espérons que le monde du tableau de bord a un petit son. Si nous le voulions, nous pourrions maintenant continuer à créer plus de fonds et ajouter plus de fonctions pour satisfaire nos besoins..
Nous n’avons vraiment approfondi que ce que nous pouvons faire en modifiant nos widgets Dashboard. Ce n’est en fait qu’un aperçu du monde du piratage de widgets, et ce que vous pouvez faire sera basé sur votre capacité à manipuler des photos et à utiliser le code. Vous savez comment faire les changements maintenant, mais vous devez décider quels changements vous souhaitez apporter..
!
Accentsconagua
Share