widget builder

Widget constructeur

Développez, installez et distribuez des widgets HTML pour votre bureau Windows avec un simple CLI

Table des matières

1. Installation
2. Guide QuickStart
3. Échantillons
4. Publication et installation
   1. Édition
   2. Installation
5. Le fichier de configuration
6. Utilisation de la CLI
7. Widgets contributifs

Installation

Téléchargez, dézip, accédez au dossier et installez avec npm :

 $ npm install -g
$ npm start

ou télécharger directement à partir de npm :

 $ npm install -g widget-builder

Guide QuickStart

1. Créer un nouveau dossier
2. cd dans le dossier, entrez widgets init et remplissez le nom de votre projet
3. Gâcher avec le fichier HTML généré pour personnaliser l'apparence de votre widget
4. Ajouter et lier les fichiers JavaScript ou CSS à votre fichier HTML Master
5. Modifier le fichier de configuration
6. Accédez au dossier et entrez widgets build pour construire localement et installer votre widget

Échantillons

Consultez Spotify Lisonner, un widget pour écouter vos airs préférés:

Publication et installation de widgets

Édition

Vous souhaitez donc partager votre widget pour la distribution? Voici quoi faire:

1. cd à votre dossier de projet
2. Exécuter widgets publish
3. Un nouveau dossier dist sera généré dans le même répertoire que votre dossier de projet. Vous pouvez désormais distribuer ce dossier, et d'autres peuvent l'installer avec widgets install

Installation

Voici comment installer un widget qui a été partagé avec vous:

1. Accéder au dossier
2. Installer widgets install

Le fichier de configuration

Chaque projet Widgets contient un fichier config.json . Ce fichier indique au programme quels paramètres vous souhaitez utiliser pour votre widget.
Voici un fichier de configuration standard:

{
  "name" : " widget " ,
  "version" : " 1.0.0 " ,
  "description" : " Custom desktop widget " ,
  "index" : " ./index.html " ,
  "properties" : {
    "x" : 100 ,
    "y" : 100 ,
    "width" : 100 ,
    "height" : 100 ,
    "transparent" : false ,
    "interact" : true ,
    "draggable" : true
  }
}

Propriété	Définition
name (chaîne)	Nom du projet
version (String)	Version du projet
index (chaîne)	La référence à votre fichier HTML Master. D'autres références (comme JS ou CSS) doivent être liées dans ce fichier.
x , y , width et height (entiers)	La position et les dimensions de votre widget lors de la première démarrage
transparent (booléen)	Rendre le fond du widget transparent
interact (booléen)	Rendre le widget interactable
draggable (booléen)	Rendre le widget dragable
top (booléen)	Faites en sorte que le widget reste au-dessus de toutes les fenêtres
requirements (tableau)	Packages NPM requis pour que le widget fonctionne; Ces packages sont installés localement lorsque le widget est installé
install (chaîne ou tableau)	Script (s) à exécuter pendant l'installation du widget

Utilisation de la CLI

Une fois le générateur de widgets installé, la CLI est accessible avec les widgets de mots clés

Commandes

Commande	Définition
widgets build [folder]	Créez des fichiers HTML sur le widget de bureau et installe
widgets publish [folder]	Génère un fichier DIST qui peut être installé par les widgets CLI
widgets install [folder]	Installe le widget dans le dossier
widgets init [folder]	Initialize Widgets Project
widgets list	Répertorie tous les widgets installés
widgets uninstall <widget>	Désinstaller Widget par son nom
widgets config <widget>	Configurer le widget par nom
widgets start [folder]	Commence le widget au dossier

Options

Commande	Définition
widgets --help	Montrer de l'aide
widgets --version	Affiche la version actuelle

Widgets contributifs

Ici, vous pouvez trouver des instructions pour partager des widgets que vous avez créés