widget builder

Constructor de widgets

Desarrollar, instalar y distribuir widgets HTML para su escritorio de Windows con un CLI simple

Tabla de contenido

1. Instalación
2. Guía QuickStart
3. Muestras
4. Publicación e instalación
   1. Publicación
   2. Instalación
5. El archivo de configuración
6. Usando el CLI
7. Widgets contribuyentes

Instalación

Descargue, descomprima, navegue a la carpeta e instale con npm :

 $ npm install -g
$ npm start

o descargar directamente desde npm :

 $ npm install -g widget-builder

Guía QuickStart

1. Crea una nueva carpeta
2. cd a la carpeta, ingrese a widgets init y complete el nombre de su proyecto
3. Mastar con el archivo HTML generado para personalizar la apariencia de su widget
4. Agregar y vincular archivos JavaScript o CSS a su archivo HTML maestro
5. Modificar el archivo de configuración
6. Navegue a la carpeta e ingrese widgets build para construir e instalar localmente su widget

Muestras

Echa un vistazo a Spotify Listener, un widget para escuchar tus canciones favoritas:

Publicación e instalación de widgets

Publicación

¿Entonces quieres compartir tu widget para distribución? Esto es lo que debe hacer:

1. cd a la carpeta de su proyecto
2. Run widgets publish
3. Se generará una nueva carpeta dist en el mismo directorio que la carpeta de su proyecto. Ahora puede distribuir esta carpeta, y otros pueden instalarla con widgets install

Instalación

Aquí le mostramos cómo instalar un widget que se compartió con usted:

1. Navegue a la carpeta
2. widgets install de ejecución

El archivo de configuración

Cada proyecto de Widgets contiene un archivo config.json . Este archivo le dice al programa qué configuración le gustaría usar para su widget.
Aquí hay un archivo de configuración estándar:

{
  "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
  }
}

Propiedad	Definición
name (cadena)	Nombre del proyecto
version (cadena)	Versión de proyecto
index (cadena)	La referencia a su archivo HTML maestro. Otras referencias (como JS o CSS) deben vincularse en este archivo.
x , y , width y height (enteros)	La posición y las dimensiones de su widget cuando se inicia por primera vez
transparent (booleano)	Hacer que el fondo del widget sea transparente
interact (booleano)	Hacer que el widget sea interactuable
draggable (booleano)	Hacer que el widget sea arrastrable
top (booleano)	Haga que el widget esté en la cima de todas las ventanas
requirements (matriz)	Paquetes NPM necesarios para que funcione el widget; Estos paquetes se instalan localmente cuando está instalado el widget
install (cadena o matriz)	Script (s) para ejecutarse durante la instalación de widgets

Usando el CLI

Una vez que se instala Widget Builder, se puede acceder a la CLI con los widgets de palabras clave

Comandos

Dominio	Definición
widgets build [folder]	Construye archivos HTML al widget de escritorio e instala
widgets publish [folder]	Genera un archivo DIST que puede ser instalado por los widgets CLI
widgets install [folder]	Instala widget en la carpeta
widgets init [folder]	Proyecto de widgets inicializados
widgets list	Enumera todos los widgets instalados
widgets uninstall <widget>	Desinstalar widget por nombre
widgets config <widget>	Configurar widget por nombre
widgets start [folder]	Inicia el widget en la carpeta

Opción

Dominio	Definición
widgets --help	Mostrar ayuda
widgets --version	Muestra la versión actual

Widgets contribuyentes

Aquí puede encontrar instrucciones para compartir widgets que ha creado