7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Creación de extensiones de paréntesis

Scroll to top
Read Time: 14 mins

Spanish (Español) translation by Manuel (you can also view the original English article)

Hace poco escribí sobre las recientes actualizaciones del editor Brackets. Brackets es un proyecto de código abierto centrado en los estándares web y construido con tecnologías web. Tiene un enfoque estrecho y, por lo tanto, puede no tener una característica particular de la que hayas llegado a depender. Por suerte, Brackets cuenta con una potente API de extensiones que permite añadir un gran número de nuevas funciones. En este artículo, voy a discutir esta API y demostrar cómo puedes construir tus propias extensiones.

Es crucial que recuerdes que Brackets está en desarrollo activo. Este artículo se escribe en diciembre de 2013. Es posible que el código que se muestra a continuación no esté actualizado. Ten en cuenta y asegúrate de consultar la wiki para conocer las últimas actualizaciones de la API de extensiones.


Cómo empezar

Voy a suponer que has leído mi último artículo y que ya estás familiarizado con el gestor de extensiones. Esto proporciona un método simple, de un solo clic, para instalar extensiones. Una de las mejores maneras de aprender a escribir extensiones es observando el trabajo realizado por otros (así es como yo aprendí). Yo recomendaría tomar unas cuantas extensiones (hay casi 200 disponibles ahora) y desmenuzar su código. No tengas miedo de romper algunos mientras estás en ello.

Brackets pone todas las extensiones instaladas dentro de una carpeta principal. Para encontrar esa carpeta, ve al menú Ayuda y selecciona "Mostrar carpeta de extensiones". En mi instalación de OS X, se encontraba en /Users/ray/Library/Application Support/Brackets/extensions/user. Si subes desde esa carpeta, verás que también hay una carpeta desactivada. Brackets hará un esfuerzo valiente para cargar sin importar qué, pero si alguna vez te encuentras en una situación en la que Brackets se ha cagado por completo y simplemente no funciona, considera mover las extensiones potencialmente malas a la carpeta de deshabilitados. Más adelante en el artículo, hablaré de cómo puede supervisar y depurar las extensiones para ayudar a prevenir estos problemas en primer lugar.

Comienza por ir a tu carpeta de usuario y crear una nueva carpeta, helloworld1. Sí, aunque sea completamente patético, vamos a construir una extensión de HelloWorld. No me odies, me gusta lo simple. Dentro de esa carpeta crea un nuevo archivo llamado main.js. El listado uno muestra cuál debe ser el contenido de este archivo. Ten en cuenta que en este artículo voy a pasar por un par de iteraciones diferentes de la extensión helloworld. Cada uno será nombrado con un número progresivamente mayor. Así pues, nuestro primer ejemplo es de helloworld1, el siguiente del mundo de helloworld2, y así sucesivamente. Tendría sentido que simplemente copiaras el código en una sola carpeta, helloworld, en lugar de copiar cada uno por separado. Si lo haces, tendrás varias extensiones relacionadas funcionando a la vez y eso puede confundir las cosas.

La primera línea define nuestra extensión como un módulo que será recogido por Brackets automáticamente al cargar la aplicación. El resto de la extensión es un mensaje de registro personalizado (verás por qué en un segundo) y una llamada a ese registrador. Una vez que tengas este archivo guardado, vuelve a Brackets, selecciona el menú de depuración y pulsa Recargar. (También puedes usar Comando/Control+R para recargar).

Los soportes se recargarán y... no pasará nada más. La extensión que construimos no hacía nada que pudiéramos ver, pero sí registraba en la consola. Pero, ¿Dónde está esa consola? Los soportes proporcionan una forma fácil de ver la consola. Simplemente vuelve al menú de depuración y selecciona Mostrar herramientas de desarrollo. Esto abrirá una nueva pestaña en Chrome con la conocida interfaz de usuario de Dev Tools. En la siguiente captura de pantalla he resaltado nuestro registro. Otras extensiones, y el propio Brackets, también registrarán mensajes en esta pantalla. Al prefijar mis mensajes de registro con [helloworld], puedo hacer que mis cosas sean un poco más fáciles de encontrar.

Brackets console messagesBrackets console messagesBrackets console messages

Ten en cuenta que el console.api completo de Chrome funciona aquí. Puedes hacer cosas como esta para formatear tus mensajes de consola:

Vuélvete loco, pero intenta eliminar estos mensajes antes de compartir tu código con el resto del mundo. En caso de que tengas curiosidad, no puedes utilizar las herramientas de desarrollo en otro navegador, como Firefox, en este momento.


Puntos de integración

Ahora que sabes lo (muy) básico, hablemos de lo que las extensiones de Brackets pueden hacer al editor:

  • Pueden crear atajos de teclado, lo que les permite responder a pulsaciones personalizadas.
  • Pueden añadirse al menú de nivel superior.
  • Pueden añadir menús contextuales (y a un área específica, como el listado de archivos o la ventana del editor).
  • Pueden crear elementos de IU. Puede ser un diálogo modal o incluso un panel. (Actualmente el panel está bloqueado en la parte inferior de la pantalla).
  • Pueden crear un proveedor de linting (esencialmente pueden registrarse como verificador de código para un tipo de archivo).
  • Pueden crear sus propios editores en línea (una característica importante de Brackets).
  • Pueden registrarse como proveedores de documentación (por ejemplo, añadiendo soporte MDN para los documentos).
  • Pueden integrarse con Quick Find y Quick Open.
  • Pueden añadir sugerencias de código personalizadas y colores de sintaxis.
  • Pueden leer el archivo actual abierto en el editor, así como modificarlo. (También pueden ver el texto actual seleccionado, si lo hay).

Eso describe cómo las extensiones pueden modificar Brackets, pero ¿Qué pueden hacer realmente las extensiones en términos de código? Teniendo en cuenta que estás escribiendo extensiones en estándares web puros (HTML, JavaScript y CSS), en realidad tienes bastante poder. Los únicos límites reales se refieren a los datos binarios. Existe una API del sistema de archivos que te permite controlar los archivos, pero se limita a los datos de texto. Por suerte, tienes una salida.

Cualquier extensión de Brackets puede integrarse con Node.js. Si tienes un paquete Node.js existente, tu extensión puede hacer llamadas a él y hacer, bueno, cualquier cosa que Node.js pueda hacer, que es esencialmente cualquier cosa.

Vamos a actualizar nuestra extensión para que se integre con el editor un poco mejor. Empezaré simplemente añadiendo un elemento de menú para la extensión.

Tenemos unos cuantos cambios aquí, así que vamos a abordarlos uno por uno. Notarás que la extensión comienza con tres llamadas a brackets.getModule. Todas las extensiones tienen acceso a un objeto brackets que proporciona una API donde podemos cargar la funcionalidad del núcleo del editor. En este caso la extensión ha cargado dos librerías que necesitaremos para el menú (CommandManager y Menus) y una que se utilizará para ayudar a inicializar la extensión (AppInit).

Hablemos de AppInit. Puedes ver que la mayor parte de la extensión se carga ahora con un callback appReady. Esta llamada de retorno se activa cuando Brackets ha completado la carga y generalmente se considera la "mejor práctica" para que las extensiones hagan uso de ella.

El registro de un elemento del menú requiere algunos pasos. Empiezo por definir un "ID de comando", un identificador único para el elemento que voy a añadir a la UI. La forma típica de hacerlo es con el formato nombreextensión.algunaacción. En mi caso, he utilizado helloworld.execute. Entonces puedo registrar este comando junto con la función (handleHelloWorld) que debe ser llamada cuando el comando es disparado.

El último paso es añadir este comando al menú. Probablemente puedes adivinar que mi elemento de menú se agregará bajo el menú Ver basado en este valor: Menus.AppMenuBar.VIEW_MENU. ¿Cómo sabía ese valor? Simple, he visto que otras extensiones lo hacen. En serio, todavía no hay una lista específica de artículos como éste. No olvides que Brackets es de código abierto. Puedo ir fácilmente al repositorio de GitHub y comprobarlo. En este caso, el archivo es Menus.js, ubicado en Github. Allí puedo ver dónde están definidos los distintos menús básicos:

Como regla general, tiene sentido tener al menos un conocimiento superficial de lo que está disponible en Brackets. Sus extensiones, de vez en cuando, harán uso de múltiples características diferentes, por lo que es definitivamente en su mejor interés para al menos conocer la disposición de la tierra.

Después de recargar Brackets, ahora verás el elemento de menú en el menú Ver. El lugar exacto en el que se encuentra puede ser un poco aleatorio ya que puede tener otras extensiones instaladas.

View menu updatedView menu updatedView menu updated

En realidad, puedes ser un poco más específico sobre tu posición. De nuevo, aquí es donde el código fuente te ayudará. El mismo archivo que enlacé arriba también contiene la definición de addMenuItem.


Pon un poco de lápiz de labios en ese cerdo

Ahora que has visto un ejemplo sencillo de cómo una extensión puede integrarse en Brackets, vamos a ver cómo actualizamos la interfaz de usuario. En la versión anterior de nuestro código, se utilizaba una alerta para enviar un mensaje. Aunque esto funciona, no es muy bonito. Tu código puede acceder al editor de Brackets como cualquier otro código de modificación del DOM. Aunque puedes hacer todo lo que quieras, hay unas cuantas extensiones estándar para actualizar la interfaz de usuario en Brackets. (Como advertencia, en general no es conveniente tocar el DOM de la interfaz de usuario del editor principal. Puedes, pero con futuras actualizaciones, tu código puede romperse. Además, los usuarios pueden no estar contentos si tu extensión cambia algo central de Brackets).

El primer método que veremos utiliza diálogos modales. Brackets ya utiliza esto y tiene una API disponible para que las extensiones la llamen. Como ejemplo sencillo, vamos a actualizar la extensión HelloWorld para que utilice un modal en su lugar.

Observa la adición de dos módulos adicionales de Brackets: Dialogs y DefaultDialogs. El siguiente cambio es en handleHelloWorld. Uno de los métodos de la biblioteca de diálogos es la capacidad de mostrar un diálogo (supongo que no es una sorpresa). El método quiere una clase, un título y un cuerpo, y eso es todo. Hay más cosas que se pueden hacer con los diálogos, pero por ahora, esto demuestra la función. Ahora, cuando ejecutamos el comando, obtenemos una interfaz de usuario mucho más bonita. (Junto con botones y comportamientos por defecto para manejar el cierre del diálogo).

Dialog exampleDialog exampleDialog example

Ese es un ejemplo, ahora veamos otro: crear un panel inferior. Al igual que con los diálogos, contamos con el apoyo de Brackets para hacerlo más fácil. Veamos un ejemplo y luego explicaré los cambios.

Centrémonos en los cambios. En primer lugar, he eliminado los módulos de diálogo porque ya no los utilizo. En su lugar, cargamos el PanelManager. Abajo en el bloque appReady he definido un nuevo panel usando el método de la API del PanelManager createBottomPanel. Al igual que el comando del menú, este toma un ID único, por lo que simplemente reutilizo HELLOWORLD_EXECUTE. El segundo argumento es un bloque de HTML envuelto en jQuery (y en caso de que te lo estés preguntando, sí podemos hacerlo más bonito), y finalmente, un tamaño mínimo. Esto configura el panel pero no lo ejecuta realmente.

En el manejador de eventos, que hemos atado al menú, podemos preguntar al panel si es visible y luego ocultarlo o mostrarlo. Esa parte debería ser bastante trivial. Para divertirme he añadido un poco más de complejidad. Fíjate en que CommandManager nos permite obtener un elemento del menú y establecer una propiedad marcada. Esto puede ser innecesario ya que el usuario puede ver el panel fácilmente por sí mismo, pero añadir la comprobación sólo hace las cosas un poco más obvias. En la siguiente captura de pantalla se puede ver el panel en su estado visible.

Panel examplePanel examplePanel example

Es posible que te preguntes por el panel HTML. ¿Hay una forma mejor de proporcionar el HTML? ¿De qué manera se puede estilizar? Sí, veamos una versión más avanzada.

Como antes, voy a centrarme en los cambios. Primero nota que he incluido una variable llamada panelHtml que se carga vía require. Esto me permite definir mi HTML fuera de mi código JavaScript. (También puedes utilizar motores de plantillas. Brackets se envían con Mustache). El HTML que hay detrás del panel es bastante sencillo.

Volviendo a main.js, he demostrado otra característica, loadStyleSheet. Esto te permite cargar una hoja de estilo específica de la extensión. He creado un archivo, helloworld.css, con algunos estilos CSS simples (pero de buen gusto).

Ten en cuenta que he antepuesto a mis estilos un nombre único. Esto ayuda a asegurar que mis clases no entren en conflicto con nada incorporado en Brackets. Con estos sencillos cambios, mi panel tiene ahora un aspecto mucho mejor, y puedes ver por qué se me conoce en todo el mundo por mis superiores habilidades de diseño.

Epic CSSEpic CSSEpic CSS

Empaquetar y compartir tu extensión Kick Butt

Por supuesto, no basta con crear la extensión de Brackets más increible. Probablemente (¡Ojalá!) quieras compartirlo con otros. Una opción es simplemente comprimir el directorio y ponerlo en tu sitio web. La gente puede descargar el zip, extraerlo y copiarlo en su carpeta de extensiones de Brackets.

Pero eso no está bien. Quieres ser cool, ¿Verdad? Para compartir tu extensión y hacerla disponible a través del gestor de extensiones de Brackets, sólo tienes que añadir un archivo package.json a tu extensión. Si alguna vez has utilizado Node.js, esto te resultará familiar. Aquí hay un ejemplo de nuestra extensión.

La mayor parte de esto se explica por sí mismo, pero la parte realmente crucial es el bloque de motores. Brackets se actualiza muy rápidamente. Si Brackets ha añadido en algún momento una característica particular de la que depende tu extensión, puedes añadir una simple condición aquí para asegurarte de que la gente no intente instalar tu extensión en una versión incompatible. (Puedes encontrar una lista completa de los posibles ajustes en la Wiki).

Una vez hecho esto, la siguiente parte es subirlo al Registro de Brackets. Tendrás que iniciar sesión a través de tu cuenta de GitHub, pero una vez que lo hayas hecho, simplemente podrás subir tu zip. Tu extensión estará entonces disponible para cualquier persona que utilice Brackets. Incluso mejor, si actualizas tu extensión, el Gestor de Extensiones podrás marcarlo al usuario para que sepa que hay una actualización disponible.


¿Qué más? 

Esperamos que hayas visto lo fácil que es ampliar Brackets. Hay más cosas que no hemos cubierto, como la API de Linting y la integración con NodeJS, pero este artículo debería ser más que suficiente para empezar. Como recordatorio, no olvides que hay una gran colección de extensiones disponibles para que empieces a jugar ahora mismo. ¡Buena suerte!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.