Crea tu propio widget: 6 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:44

Este Instructable le enseñará cómo crear un Yahoo! Widget. Al final de este tutorial, habrá aprendido algo de JavaScript y XML.

Paso 1: Comenzando

Algunas herramientas que necesitará para hacer un widget son: - Una computadora con Mac OS X o Windows Xp / Vista - Un programa de edición de texto. (El Bloc de notas es perfecto). - Un programa de edición de imágenes. (Microsoft Paint está bien.) - Paciencia y tiempo.- Widgets de Yahoo- Widget de conversión de widgets Una vez que tenga estos programas y widgets, estará listo para pasar al paso dos.

Paso 2: creación de la estructura de carpetas

Ahora deberá crear la estructura de carpetas para albergar todos los archivos que componen un widget. La estructura se ve así: -Widget Name | Contenidos | Recursos de Widget.kon Main.js | Todas las imágenes que utilizará el widget Puede descargar este widget para crear automáticamente la estructura de carpetas Estructura - Reinier Kaper Establezca las preferencias de un widget haciendo clic con el botón derecho en cualquier parte del mismo y haga clic en preferencias. Cambie las preferencias de Estructura a lo siguiente: raíz: Navegue a su carpeta de widgets. (Ubicado en 'Mis documentos' en Windows) Ahora puede hacer clic en el widget y aparecerá un cuadro de diálogo que le pedirá el nombre del widget.

Paso 3: creación de todos los archivos necesarios

Comenzaremos con la creación del archivo widget.xml, que le dice al motor de widgets información sobre su widget. Descargue una plantilla que hemos creado para su uso. Enlace de descarga a continuación. Coloque el archivo en la carpeta 'Contenido' ubicada en la carpeta titulada con el nombre que eligió anteriormente. Abra el archivo con el editor de texto de su elección y reemplace YourNameHere con su nombre. Guardar y cerrar A continuación crearemos el archivo.kon que es el archivo principal que le dice al widget qué hacer. El archivo.kon es solo un archivo XML con una extensión renombrada. Descargue este archivo widget.kon básico y colóquelo también en la carpeta 'Contenido'. Nuevamente, abra el archivo con un editor de texto. La primera línea significa que el archivo es un archivo XML creado con la codificación UTF-8. La siguiente etiqueta para agregar es la etiqueta de widget; Luego declaras tu configuración, como debug;. Ahora está listo para agregar sus elementos de ventana;. Los widgets tienen varios objetos que hacen ciertas cosas y tienen ciertas propiedades. Por ejemplo, el objeto de texto, crea texto. Aquí hay una lista de algunas de las propiedades del objeto de texto: -name (autoexplicativo) -window (depreciado) -data (texto para mostrar) -color (autoexplicativo) -size -font -hOffset (también conocido como x) -vOffset (también conocido como y) -width -height Dicho esto, comencemos a codificar. Agregue el siguiente código al archivo kon, en las etiquetas: myTextHello World! BlueArial18left252 En inglés, esto configura un objeto de texto llamado myText, que muestra "Hello World!" en fuente Arial, color azul y tamaño 12. Guarde su archivo kon y continúe con el paso cuatro.

Paso 4: ¡Regocíjate

Haga doble clic en el archivo kon y se cargará su widget. ¡Felicidades! Ha creado su primer widget. Pero aún no hemos terminado de codificar. Probablemente estés pensando, "¿Eso es todo?", ¿Verdad? Continúe con el paso 5 para agregar alguna función a su widget.

Paso 5: Agregar función

Ahora vamos a hacer que el widget muestre la hora actual. Esto requerirá un temporizador que se actualice cada minuto y otro archivo. El siguiente archivo será un archivo JavaScript, que irá a la carpeta 'Contenido'. Abra su editor de texto y cree un archivo llamado main.js. Para agregar la hora, usaremos "el objeto Fecha". Para configurar el objeto de fecha, crea una función. Agregue esta función al archivo js: function updateText () '{theTime = new Date (); theHour = String (theTime.getHours ()); theMinutes = String (theTime.getMinutes ()); myText.data = "El tiempo es:" + theHour + ":" + theMinutes; print ('update');} Tu widget no mostrará la hora todavía, porque no sabe qué hacer con el archivo js. Para solucionar esto, agregamos este controlador de eventos al archivo Kon, en las etiquetas pero no en las etiquetas: include ('main.js'); Para hacer la actualización de la hora, necesitamos crear un temporizador, que va en el archivo Kon, en las etiquetas pero no en las etiquetas: Guarde los archivos y cargue el widget. Debería mostrar la hora. Si no funciona, descargue kon y js desde abajo y reemplácelos con los anteriores.

Paso 6: resumiendo todo

Utilice el widget de conversión de widgets para convertir el widget en un archivo.widget. NOTA: Arrastre la carpeta que lleva el nombre de su widget al convertidor, no al archivo kon. Si desea ir aún más lejos con su widget, obtenga algunos recursos aquí. Aquí hay una lista de cosas que puede intentar lograr con su widget: -Agregar preferencias para controlar la fuente usando la etiqueta y la sub-etiqueta de fuente- Agregue algunos controladores de eventos como onClick usando las etiquetas o. -Muestre una imagen de un archivo local usando el objeto de imagen Espero que haya encontrado útil este tutorial y disfrute de las infinitas posibilidades de los widgets, Hunter