Cómo crear un complemento de boceto con JavaScript, HTML y CSS (Parte 1)

1. ¿Qué son los complementos de Sketch y cómo funcionan?
2. ¡Empecemos!
   1. En primer lugar, ¿qué estamos haciendo?
   2. Creando nuestro complemento base en diez segundos
   3. Personalizando los metadatos de nuestro complemento
3. Creación de la interfaz de usuario del complemento
   1. La ventana
   2. Vista web: la interfaz

Si alguna vez ha trabajado con Sketch, lo más probable es que haya habido muchos momentos en los que haya pensado: "Si tan solo Sketch pudiera hacer esto en particular, podría realizar la tarea en cuestión mucho más rápido". más fácil y mejor”. Bueno, ¡no te preocupes más! En este artículo de dos partes, aprenderá cómo crear sus propios complementos de Sketch desde cero, brindándole las habilidades necesarias para resolver exactamente este tipo de problemas.

Este tutorial está destinado a personas que conocen y utilizan la aplicación Sketch y que no tienen miedo de incursionar en el código. Para aprovecharlo al máximo, necesitará tener al menos algo de experiencia básica escribiendo JavaScript (y, opcionalmente, HTML/CSS).

El complemento que crearemos se llama "Mosaico". En la primera parte, aprenderemos sobre los archivos básicos que componen un complemento de Sketch; Escribiremos algo de JavaScript y crearemos una interfaz de usuario para nuestro complemento con la ayuda de algo de HTML y CSS. El próximo artículo tratará sobre cómo conectar la interfaz de usuario al código del complemento principal, cómo implementar las características principales del complemento y, al final, también aprenderá cómo optimizar el código y la forma en que funciona el complemento.

También compartiré el código del complemento (JS, HTML, CSS) y los archivos que podrás examinar y utilizar con fines de aprendizaje.

¿Qué son los complementos de Sketch y cómo funcionan?

En Sketch, los complementos son una forma de agregar características y funcionalidades que no están presentes en Sketch "listas para usar". Teniendo en cuenta que casi siempre faltará alguna característica o integración en cualquier programa (¡especialmente dada la gran cantidad de necesidades que puede tener cualquier diseñador individual!), uno puede comenzar a imaginar cómo los complementos pueden ser especialmente útiles y poderosos. Los complementos de Sketch pueden hacer prácticamente todo lo que esperarías, como manipular el color, la forma, el tamaño, el orden, el estilo, la agrupación y los efectos de las capas, pero también pueden hacer cosas como realizar solicitudes a recursos de Internet, presentar un usuario. interfaz y mucho, mucho más.

En cuanto a la programación, todos los complementos de Sketch están escritos en código JavaScript. Bueno, en realidad eso no es del todo cierto. Es más exacto decir que la mayoría de los complementos de Sketch están escritos en JavaScript, ya que también es posible escribir un complemento de Sketch en uno de los lenguajes de programación de Apple, Objective-C y Swift , aunque incluso ellos requieren una pequeña cantidad de conocimientos de JavaScript.

Pero no te preocupes. En este artículo, nos centraremos en cómo crear complementos de Sketch utilizando únicamente JavaScript, HTML y CSS . No repasaremos los conceptos básicos de HTML, CSS o JavaScript; este artículo supone al menos cierto conocimiento y experiencia con los tres. El sitio web para desarrolladores de MDN proporciona un excelente lugar para aprender más sobre el desarrollo web .

¡Empecemos!

En primer lugar, ¿qué estamos haciendo?

En este tutorial, le enseñaré cómo crear un complemento básico para principiantes que podrá crear, duplicar y modificar capas, además de presentar al usuario una interfaz de usuario agradable. Al hacerlo, mi objetivo es establecer un conocimiento fundamental sobre el cual puedas desarrollar y utilizar para crear tus propios complementos.

El complemento que crearemos se llama Mosaic y es efectivamente un "generador de patrones". Aliméntelo con sus capas, modifique algunas configuraciones y creará un patrón:

Si desea instalar y jugar con Mosaic, puede descargar el complemento completo desde GitHub.

Un poco de historia: Mosaic está inspirado en gran parte en un complemento de Adobe Fireworks de la vieja escuela llamado Twist-and-Fade . Twist-and-Fade era bastante poderoso, capaz de duplicar una capa cualquier cantidad de veces mientras ajustaba su tono, posición, rotación, tamaño y opacidad. El complemento incluso pudo generar GIF animados, como este , donde creó los marcos para los dos elementos giratorios en la cinta de casete:

(Aquí hay un vídeo que muestra Twist and Fade si está interesado en ver exactamente cómo funciona).

Para los propósitos de este tutorial, crearemos un complemento algo similar para Sketch, aunque simplificado intencionalmente para mantener el tutorial lo más accesible posible. Específicamente, nuestro complemento podrá:

• Duplique cualquier capa de Sketch (mapa de bits o vector) y modifique la posición, rotación y opacidad de la capa duplicada. Esto nos dará una introducción a la manipulación de capas utilizando las API de JavaScript de Sketch .
• Muestre una interfaz de usuario creada con HTML, CSS y JS, que le enseñará cómo crear fácilmente una interfaz para el complemento mediante el uso de tecnologías web con las que quizás ya esté familiarizado. La interfaz del complemento es bastante importante ya que es la forma en que recopilaremos las entradas del usuario con respecto a cómo desea que se vea la imagen del mosaico resultante.

Creando nuestro complemento base en diez segundos

Primero, crearemos la "base" (o plantilla) para el complemento que queremos crear. Podríamos crear manualmente todos los archivos y carpetas necesarios que componen un complemento, pero afortunadamente no es necesario, porque Sketch puede hacerlo por nosotros. Una vez que hayamos generado el complemento de plantilla, podremos personalizarlo como mejor nos parezca.

Existe una técnica realmente rápida y sencilla que podemos usar para crear el complemento de plantilla, que es prácticamente mi método de referencia cuando necesito crear un complemento para resolver cualquier problema con el que estoy lidiando en un momento dado. Así es como funciona:

Con Sketch abierto, revisa la barra de menú en la parte superior de la pantalla y haz clic en Plugins - Run Script. Esto abrirá un cuadro de diálogo que podemos usar para probar y ejecutar el código. También podemos guardar cualquier código que ingresemos como un complemento, que es la parte que nos interesa específicamente en este momento.

Borre cualquier código que ya esté en este cuadro de diálogo y reemplácelo con el siguiente código de demostración:

const UI = require("sketch/ui");UI.message(" Hey there, you fantastic plugin developer you! This is your plugin! Talking to you from the digital computer screen! In Sketch! Simply stupendous!");

Luego, presione Save Script as Pluginen la parte inferior izquierda de la ventana, ingrese el nombre que desee que tenga este complemento (en nuestro caso, es "Mosaico"), luego Save Script as Pluginuna vez más.

Lo creas o no, ya hemos terminado; todo lo que queda es comer el pastel que acabamos de hornear. Aquí viene la parte divertida. Al abrir el menú Complementos una vez más, debería ver algo como esto: ¡su nuevo complemento listado como "Mosaico"! ¡Haz click en eso!

¡Felicitaciones, acaba de escribir su primer complemento de Sketch!

Lo que debería ver después de hacer clic en "Mosaico" debería ser como el video corto de arriba, con un mensaje de información sobre herramientas discreto que aparece en la parte inferior de la pantalla y que comienza con las palabras "Hola...", que es exactamente lo que dice el código que pegamos. hacer. Esto es lo que hace que esta técnica sea tan grandiosa: facilita pegar, modificar y probar código sin tener que crear un complemento desde cero. Si está familiarizado o alguna vez ha jugado con la consola web de su navegador, esto es básicamente todo. Tener esta herramienta en su bolsillo trasero mientras crea y prueba el código es imprescindible.

Hagamos un resumen rápido de lo que hace el código que agregaste:

Primero, importa el módulo de la biblioteca JS incorporada de Sketch y lo asigna a la variable. Este módulo contiene un par de métodos útiles relacionados con la interfaz, uno de los cuales usaremos:sketch/ui UI

const UI = require("sketch/ui");

A continuación, llama al messagemétodo (que es parte del sketch/uimódulo) con la cadena de texto que queremos que se muestre en la información sobre herramientas que vimos:

UI.message(" Hey there, you fantastic plugin developer you! This is your plugin! Talking to you from the digital computer screen! In Sketch! Simply stupendous!");

El message()método proporciona una excelente manera de presentar un mensaje discreto al usuario; es ideal para casos en los que no es necesario robar el foco (no modal) y no se necesitan botones ni campos de texto sofisticados. También hay otras formas de presentar elementos comunes de la interfaz de usuario, como alertas, mensajes y demás, algunos de los cuales usaremos a medida que construyamos Mosaic.

Personalizando los metadatos de nuestro complemento

Ahora tenemos un complemento básico para comenzar, pero aún necesitamos modificarlo más y hacerlo realmente nuestro. Nuestro siguiente paso será cambiar los metadatos del complemento.

Para este paso, necesitaremos echar un vistazo a lo que se llama el paquete de complementos . Cuando presionas guardar en la ventana 'Ejecutar script', Sketch guardó tu complemento como una carpeta con un nombre Mosaic.sketchpluginque puedes encontrar en el ~/Library/Application Support/com.bohemiancoding.sketch3/Pluginsdirectorio. Es un poco largo y molesto recordarlo; Como atajo, también puedes abrirlo a través de Plugins - Manage Plugins - (right-click your plugin) - Reveal Plugins Folder. Aunque aparece en Finder como un solo archivo, en realidad es una carpeta que contiene todo lo que nuestro complemento necesita para que Sketch lo ejecute. La razón por la que aparece como un solo archivo a pesar de ser una carpeta es porque cuando instaló Sketch por primera vez, Sketch registró la .sketchpluginextensión como un "paquete" (un tipo especial de carpeta que aparece como un archivo) y solicitó que se abriera automáticamente en Sketch. cuando se abre.

Echemos un vistazo al interior. Haga clic derecho Mosaic.sketchpluginy luego haga clic en "Mostrar contenido del paquete". En el interior, debería ver la siguiente estructura de directorios:

Contents/└ Resources/└ Sketch/ └ manifest.json └ script.cocoascript

Quizás se pregunte por qué hay un archivo con la extensión .cocoascript. No te preocupes, es solo un archivo JavaScript normal y solo contiene el código que ingresamos anteriormente. Continúe y cambie el nombre de este archivo a index.js, lo que cambiará la estructura del directorio para que se vea como la siguiente:

Contents/└ Resources/└ Sketch/ └ manifest.json └ index.js

La forma más común de organizar los archivos dentro de un paquete de complementos es la siguiente: su código (JavaScript) pertenece manifest.jsona Sketch/, y los recursos (piense en imágenes, archivos de audio, archivos de texto, etc.) pertenecen a Resources/.

Comencemos modificando el archivo llamado manifest.json. Ábralo dentro de su editor de código favorito, como Visual Studio Code o Atom .

Verás que por el momento hay relativamente poco aquí dentro, pero pronto agregaremos más. El manifiesto del complemento tiene principalmente dos propósitos:

1. En primer lugar, proporciona metadatos que describen el complemento al usuario: cosas como su nombre, versión, nombre del autor, etc. Sketch utiliza esta información en el Sketch - Preferences - Pluginscuadro de diálogo para crear una lista y una descripción de su complemento.
2. En segundo lugar, también le indica a Sketch cómo ponerse manos a la obra; es decir, le dice a Sketch cómo desea que se vea el menú de su complemento, qué teclas de acceso rápido asignar a su complemento y dónde reside el código de su complemento (para que Sketch pueda ejecutarlo).

Teniendo en cuenta el propósito número 1, describir el complemento al usuario, probablemente notará que en este momento no se proporciona ninguna descripción ni autor, lo que sería confuso para el usuario y haría que el complemento fuera difícil de identificar. Arreglemos eso ajustando los valores de las claves relevantes a:

{ "description": "Generate awesome designs and repeating patterns from your layers!", "author": "= Your name here ="}

A continuación, ajustemos el identificador del complemento. Este identificador utiliza lo que se llama "notación de dominio inverso", que es una forma realmente concisa (o aburrida, elija usted) de decir "tome el dominio de su sitio, invierta el orden y luego coloque el nombre de su producto al final". Esto saldrá algo como: com.your-company-or-your-name-its-not-that-big-a-deal.yourproduct.

No tienes que ceñirte a esta convención de nomenclatura: puedes poner lo que quieras aquí, siempre que sea lo suficientemente único como para evitar conflictos con otros complementos (aunque probablemente sea una buena idea ceñirte al formato RDN, especialmente porque proporciona un sistema simple y reutilizable para sus identificadores de complementos). Partyflauta: Partituras para flauta dulce

A tal efecto, cambie su identificador a com.your-name.mosaic:

{ "identifier": "com.your-name.mosaic"}

Personalmente, me gusta tomar todas las claves relacionadas con los metadatos (título, autor, identificador, etc.) y agruparlas cerca de la parte superior del manifiesto para que no estén esparcidas por todos lados y me ayuden a preservar mi cordura cuando necesito encontrarlas. .

A continuación, echemos un vistazo a las claves menuy commands. Estos dos son responsables de decirle a Sketch qué código llamar y en respuesta a qué.

Si observa la menuclave, verá que contiene una titleclave, cuyo valor es el nombre con el que nuestro complemento aparecerá en el Pluginsmenú. También tiene una itemsclave, que es una lista de identificadores de comandos :

{ "menu": { "title": "Mosaic", "items": [ "com.bohemiancoding.sketch.runscriptidentifier" ] }}

En este momento solo hay un identificador de comando en esta lista, "com.bohemiancoding.sketch.runscriptidentifier". Los identificadores de comando siempre apuntan a un comando de la commandslista. Ahora mismo nuestro plugin sólo tiene un comando, que es el que tiene este identificador:

{ "commands": [ { "script" : "script.cocoascript", "name" : "Mosaic", "handlers" : { "run" : "onRun" }, "identifier" : "com.bohemiancoding.sketch.runscriptidentifier" } ]}

Siempre que agregue un identificador de comando a una menuentrada, Sketch buscará la entrada de comando que tiene ese identificador y mostrará el valor de su nameclave (que en este caso es "Mosaico") y lo mostrará en el menú de su complemento en lugar del identificador.

En cuanto a la función que desempeñan los comandos, podemos pensar en una entrada de comando como una forma de decirle a Sketch qué función en el código JavaScript de nuestro complemento queremos ejecutar cuando se invoca ese comando, siendo la "invocación" generalmente el clic del usuario en el menú asociado. artículo. La entrada del comando no hace nada por sí sola, es solo JSON; simplemente proporciona una descripción a Sketch de dónde buscar el JavaScript que necesita ejecutar cuando se invoca el comando.

Hasta ahora, hemos hablado sobre lo que hacen los comandos namey identifierlas teclas, pero hay otras dos teclas en un comando que deben abordarse: scripty handlers.

La scriptclave le dice a Sketch dónde está el archivo JavaScript que debe ejecutar. Observe cómo Sketch asume que el archivo de script en cuestión está en la Sketch/carpeta, por lo que, en aras de la simplicidad, querrá asegurarse de que todo su código JavaScript se encuentre en algún lugar debajo de la Sketch/carpeta. Antes de continuar con esta clave, es importante que se asegure de cambiar el valor de esta clave a index.js, tal como cambiamos el nombre del archivo anteriormente. De lo contrario, Sketch no podrá encontrar ni ejecutar su archivo JavaScript.

El valor de la handlersclave es lo que Sketch mira para determinar qué función en su JavaScript llamar. Aquí, solo tenemos un controlador configurado: run, con el valor onRun. es el nombre de una acciónrun de Sketch integrada y predefinida . Esta acción siempre se llamará cuando un usuario haga clic en un elemento del menú que haga referencia a este comando. es el nombre de una función en el archivo generado automáticamente (al que le cambiamos el nombre ) y la función que queremos que se llame cuando ocurre el evento, es decir, cuando el usuario hace clic en el elemento del menú.runonRunscript.cocoascriptindex.jsrun

En el ejemplo que tenemos hasta ahora, este proceso se desarrolla más o menos así:

1. El usuario hace clic en nuestro elemento de menú.
2. Sketch encuentra el comando asociado con ese elemento del menú.
3. Sketch encuentra el archivo de script al que hace referencia el comando y lo ejecuta (lo que en este caso significa que ejecuta JavaScript en index.js).
4. Dado que este comando se invocó al hacer clic en un elemento del menú, se considera una runacción. Eso significa que Sketch buscará el handlers.runvalor del comando para que la función llame a continuación, que en este caso es onRun.
5. Sketch llama a la onRunfunción.

Los comandos se invocan más comúnmente en respuesta a que un usuario haga clic en uno de los elementos de su menú, pero también se pueden invocar en respuesta a otras acciones del usuario, como que el usuario cambie la selección o una propiedad en una capa. Sin embargo, para este complemento, no utilizaremos ninguna de estas otras acciones. (Puede obtener más información sobre las acciones y cómo funcionan en la página de ayuda de Action API ).

Antes de continuar con este manifiesto, queremos hacer otros dos ajustes. Ahora mismo, nuestro menú tiene la estructura:

Mosaic└ Mosaic

…lo cual es un poco redundante ya que nuestro complemento solo tiene un elemento de menú. También agrega un poco de fricción innecesaria para nuestro usuario, ya que nuestro complemento ahora requiere dos clics para invocarse en lugar de uno. Podemos solucionar este problema agregando isRoot: truea nuestro menu:

{ "menu": { "title" : "Mosaic", "items" : [ "com.bohemiancoding.sketch.runscriptidentifier" ], "isRoot": true}}

Esto le indica a Sketch que coloque el primer nivel de elementos del menú directamente debajo del Pluginsmenú, en lugar de anidarlos debajo del menú title.

Presiona guardar y regresa a Sketch. Deberías ver que ahora Mosaic - Mosaicha sido reemplazado por simplemente Mosaic: ¡perfecto!

En cuanto a nuestro segundo ajuste, sigamos adelante y cambiemos el nombre de este identificador de comando a algo menos difícil de manejar. Dado que los identificadores de comando solo necesitan ser únicos dentro del contexto de un complemento individual, podemos cambiarle el nombre de manera segura a algo más conciso y obvio, como "open":

{ "commands": [ { ... "identifier" : "open" }],"menu": { ... "items" : [ "open" ] }}

Antes de continuar, es útil tener en cuenta que los menús también pueden contener otros menús. Podrías crear fácilmente un submenú anidando otra { title: ..., items: ... }entrada dentro de la lista de otro menú items:

{ "menu": { "title" : "Mosaic", "items" : [ "open", { "title" : "I'm a sub-menu!", "items" : [ "another-command-identifier" ] } ] }}

Creación de la interfaz de usuario del complemento

Hasta ahora, hemos escrito un código de demostración y personalizado el manifiesto de nuestro complemento. Ahora pasaremos a crear su interfaz de usuario, que es esencialmente una página web incrustada en una ventana (de manera similar a los navegadores con los que está familiarizado):

La ventana

El diseño de la interfaz de usuario de Mosaic tiene su propia ventana, que podemos considerar el componente más básico; comenzaremos con eso. Para crear y mostrar una ventana, tendremos que utilizar una clase integrada en macOS de forma predeterminada, llamada NSWindow. Durante el resto de este tutorial, haremos esto bastante (usando API integradas como NSWindow), lo que puede parecer un poco desalentador si no estás familiarizado con él, pero no te preocupes: te lo explicaré todo. ¡por el camino!

Nota: Si bien hablamos de API integradas, la razón por la que podemos usar esta clase es gracias a un puente presente en el tiempo de ejecución de JavaScript utilizado por los complementos de Sketch. Este puente importa automáticamente estas clases, métodos y funciones integrados que normalmente solo estarían disponibles para aplicaciones nativas.

Abra Sketch/index.jsen su editor de código, elimine lo que ya está allí y pegue lo siguiente:

function onRun(context){ const window = NSWindow.alloc().initWithContentRect_styleMask_backing_defer_( NSMakeRect(0, 0, 145, 500), NSWindowStyleMaskClosable | NSWindowStyleMaskTitled | NSWindowStyleMaskResizable, NSBackingStoreBuffered, false ); window.releasedWhenClosed = false; window.makeKeyAndOrderFront(nil);};

Echemos un vistazo a lo que hace este primer fragmento de código:

function onRun(context){

¿Recuerda que antes hablamos sobre los comandos y cómo funcionan, y le dijimos a Sketch que llamara en respuesta a un clic en el menú onRun? (Si necesita un repaso, vuelva a visitar la parte anterior y luego regrese). Todo lo que hace esta parte es crear esa función. También notarás que nuestra onRunfunción toma un contextargumento. Este es un argumento con el que Sketch llamará a sus controladores de comandos y que puede proporcionarnos cierta información. Más adelante, lo usaremos para obtener la URL de nuestro paquete de complementos en la computadora del usuario.

const window = NSWindow.alloc().initWithContentRect_styleMask_backing_defer( NSMakeRect(0, 0, 145, 500), NSWindowStyleMaskClosable | NSWindowStyleMaskTitled | NSWindowStyleMaskResizable, NSBackingStoreBuffered, false);

Aquí en realidad estamos haciendo algunas cosas:

1. Primero, hacemos un alloc()llamado NSWindow; Esto básicamente significa "reservar algo de memoria para una instancia de NSWindow". Es suficiente saber que tendrás que hacer esto para cada instancia de una clase nativa que quieras crear. El allocmétodo está disponible en todas las clases nativas.
2. A continuación, llamamos NSWindowal método inicializador de (es decir, el método que realmente crea una instancia de NSWindow), que se denomina initWithContentRect:styleMask:backing:defer:. Notarás que es diferente de lo que llamamos en nuestro código anterior: tiene varios dos puntos ( :) entre cada argumento. Como no podemos usar esa sintaxis en JavaScript, Sketch convenientemente le cambia el nombre a algo que realmente podamos usar reemplazando los dos puntos con guiones bajos, que es como obtenemos su nombre JS: initWithContentRect_styleMask_backing_defer.
3. A continuación, pasamos cada uno de los argumentos que necesita el método. Para el primer argumento, contentRectproporcionamos un rectángulo con un tamaño lo suficientemente grande para nuestra interfaz de usuario.
4. Para styleMask, usamos una máscara de bits que dice que queremos que nuestra ventana tenga un botón de cierre, una barra de título y que sea redimensionable.
5. Los siguientes dos argumentos, backingy defer, siempre estarán configurados en NSBackingStoreBufferedy false, por lo que realmente no necesitamos preocuparnos por ellos. (La documentación de este método detalla por qué ocurre esto).

window.releasedWhenClosed = false;window.makeKeyAndOrderFront(null);

Aquí configuramos la propiedad NSWindowde , lo que significa: “¡Oye! No elimines esta ventana de la memoria sólo porque el usuario la cierra”. Luego llamamos lo que significa: "Mueve esta ventana al frente y dale el foco del teclado".releasedWhenClosedfalsemakeKeyAndOrderFront(null)

Vista web: la interfaz

Para facilitar las cosas, ya escribí el código HTML y CSS de la interfaz de usuario web del complemento que vamos a utilizar; El único código restante que tendremos que agregarle será asegurarnos de que podamos comunicarnos entre él y nuestro código del complemento Sketch.

A continuación, descargue el código HTML y CSS . Una vez que lo haya descargado, extráigalo y luego mueva la carpeta denominada "web-ui" a la carpeta de Recursos de nuestro complemento.

Nota : Escribir y optimizar el código HTML/CSS real está fuera del alcance de este tutorial, ya que se centra en JavaScript, que impulsa las funciones principales del complemento; pero hay un montón de tutoriales en la web sobre este tema, en caso de que quieras aprender más.

Si ejecuta nuestro complemento ahora, verá que muestra una ventana: ¡sí, progreso! Pero está vacío, sin título y todavía no es particularmente útil. Necesitamos que muestre nuestra interfaz web. Para hacer eso, necesitaremos usar otra clase nativa, WKWebViewque es una vista creada específicamente para mostrar contenido web.

Agregaremos el código necesario para crear nuestro WKWebViewdebajo del código que escribimos para nuestra ventana:

function onRun(context){ // Create window const window = NSWindow.alloc().initWithContentRect_styleMask_backing_defer( NSMakeRect(0, 0, 145, 500), NSWindowStyleMaskClosable | NSWindowStyleMaskTitled | NSWindowStyleMaskResizable, NSBackingStoreBuffered, false ); window.releasedWhenClosed = false; // Create web view, and set it as the view for our window to display const webView = WKWebView.alloc().init(); window.contentView = webView; // Load our UI into the web view const webUIFolderURL = context.scriptURL .URLByDeletingLastPathComponent() .URLByAppendingPathComponent("../Resources/web-ui/"); const indexURL = webUIFolderURL.URLByAppendingPathComponent("index.html"); webView.loadFileURL_allowingReadAccessToURL(indexURL, webUIFolderURL); // Make window key and move to front window.makeKeyAndOrderFront(nil);};

Si ejecutamos nuestro complemento ahora, veremos que tenemos una ventana abierta que muestra nuestra interfaz de usuario web. ¡Éxito!

Nuevamente, antes de continuar, examinemos qué hace el código que agregamos:

const webView = WKWebView.alloc().init();

Esto debería resultar familiar: es básicamente lo mismo que hicimos cuando creamos nuestro NSWindow: asignar memoria para una vista web y luego inicializarla.

window.contentView = webView;

Esta línea de código le dice a nuestra ventana que muestre la vista web que acabamos de crear.

const webUIFolderURL = context.scriptURL .URLByDeletingLastPathComponent() .URLByAppendingPathComponent("../Resources/web-ui/");

Aquí nuestro objetivo es

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Cómo crear un complemento de boceto con JavaScript, HTML y CSS (Parte 1)

En primer lugar, ¿qué estamos haciendo?Creando nuestro complemento base en diez segundosPersonalizando los metadatos de nuestro complementoLa ventanaVista we

programar

es

https://aprendeprogramando.es/static/images/programar-como-crear-un-complemento-de-boceto-con-javascript-989-0.jpg

2024-12-03

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente