IntelliJ Plugins

Temas en los IDE basados en IntelliJ

Read this post in other languages:

Themes in IntelliJ-based IDEs

IntelliJ Light y Darcula son temas conocidos de interfaz de usuario incluidos de forma predeterminada en los IDE basados en IntelliJ. A algunos usuarios les gusta quedarse con la interfaz clara predeterminada, pero otros prefieren la combinación de colores claros sobre fondo oscuro. Sin embargo, a muchos desarrolladores les gusta expresar su individualidad gracias a una amplia gama de temas ofrecidos en la categoría Themes de JetBrains Marketplace. La razón por la que elegimos ciertos temas es diferente para cada uno de nosotros: costumbres, aprecio por las cosas bonitas, deficiencias en la visión del color, facilidad para concentrarse o cualquier otro motivo.

JetBrains Marketplace: categoría Themes

Los complementos de temas de interfaz de usuario son solo uno de los muchos tipos de complemento para los IDE basados en IntelliJ disponibles tras el ciclo de lanzamiento 2019.1.

Los autores de los temas de interfaz de usuario pueden introducir cambios en los elementos de la interfaz de usuario integrados en el IDE:

  • sustituir iconos
  • cambiar los colores de los iconos y los controles de la interfaz de usuario
  • proporcionar esquemas del editor personalizados
  • añadir imágenes de fondo

Los temas más populares añaden cambios en la interfaz y mecanismos más avanzados que permiten configurar algunos de los comportamientos del complemento, introducir acciones adicionales o implementar varios puntos de extensión en un tema que aportan nuevas funcionalidades al IDE.

IntelliJ IDEA con un tema aplicado

Crear un tema de interfaz de usuario

La creación de complementos y temas para IDE basados en IntelliJ requiere cierta preparación antes de que pase al desarrollo propiamente dicho. Hay dos maneras de poner en marcha un proyecto de este tipo.

El primer método se basa en el Asistente de proyecto y se explica en detalle en la documentación del SDK de IntelliJ, en la página Creating a UI Theme with the DevKit Theme Wizard (Creación de un tema de interfaz de usuario con el Asistente de temas de DevKit).

La estructura generada es una estructura simple basada en el enfoque de DevKit y solo debería utilizarse para complementos sencillos. Puede encontrar un proyecto de ejemplo en el repositorio IntelliJ SDK Docs Code Samples de GitHub.

Proyecto basado en DevKit

Para complementos más complejos, recomendamos crear un proyecto basado en Gradle. Siempre tratamos de mejorar la experiencia de desarrollo de complementos para los IDE basados en IntelliJ, de modo que también es posible iniciar nuevos proyectos con la Plantilla de complementos de IntelliJ Platform. La plantilla ofrece una configuración de las extensiones de Gradle y las acciones de GitHub, como la gestión de dependencias, la compatibilidad con el registro de cambios y la configuración predefinida de la integración continua/implementación continua.

En ambos casos, el archivo más importante del proyecto del complemento es plugin.xml, que debe contener una definición del punto de extensión llamada themeProvider:

<idea-plugin>
   <id>org.jetbrains.plugins.mytheme</id>
   <name>My Theme</name>
   <vendor>JetBrains</vendor>

   <depends>com.intellij.modules.platform</depends>

   <extensions defaultExtensionNs="com.intellij">
       <themeProvider id="org.jetbrains.plugins.mytheme" path="my.theme.json" />
   </extensions>
</idea-plugin>

El archivo plugin.xml y otros archivos de personalización de la interfaz de usuario (my.theme.json y my.xml) se encuentran en el directorio /src/main/resources, junto con las imágenes o iconos que tiene previsto ofrecer.

Estructura del proyecto del complemento del tema

El punto de extensión themeProvider hace referencia al archivo my.theme.json JSON, que contiene una definición real del tema que modifica los colores de fondo y coloca una imagen clara en la esquina inferior derecha del IDE.

{
 "name": "My Theme",
 "dark": true,
 "author": "JetBrains",
 "editorScheme": "/themes/my.xml",
 "colors": {
   "colorPrimary": "#3b3531",
   "colorSecondary": "#342e2b"
 },
 "ui": {
   "*": {
     "background": "colorPrimary",
     "separatorColor": "colorPrimary",
     "borderColor": "colorSecondary"
   }
 },

 "background": {
   "image": "/background.png",
   "transparency": 50,
   "fill": "plain",
   "anchor": "bottom_right"
 }

La clave editorScheme hace referencia al archivo my.xml, en el que se establecen los colores del contenido visible en el editor, como el color de la fila activa, los colores del primer y segundo plano del texto, y el fondo de la sección del medianil.

<scheme name="My Theme" version="1" parent_scheme="Darcula">
   <colors>
       <option name="CARET_ROW_COLOR" value="372513" />
       <option name="GUTTER_BACKGROUND" value="372513" />
   </colors>
   <attributes>
       <option name="TEXT">
           <value>
               <option name="FOREGROUND" value="C67E48" />
               <option name="BACKGROUND" value="291918" />
               <option name="EFFECT_TYPE" value="5" />
           </value>
       </option>
   </attributes>
</scheme>

Este sencillo tema de ejemplo ya ofrece un resultado interesante, ¡y es solo el principio!

IntelliJ IDEA con «My Theme» aplicado

Explorar las posibilidades de personalización

Al trabajar con la personalización del IDE, es esencial entender qué se puede anular y dónde buscar las opciones de ajuste de la interfaz. Por lo tanto, ofrecemos varias opciones para ayudar a explorar el funcionamiento interno del IDE.

Buscar atributos para los controles de la interfaz de usuario

La posibilidad más sencilla es el autocompletado que proporciona la asignación de esquemas para el archivo JSON del tema de IntelliJ. Para probarlo, abra el archivo *.theme.json, coloque el cursor en el contexto adecuado y pulse la combinación de teclas Ctrl+Espacio; aparecerá una lista de claves o valores disponibles.

Encontrar las claves de los atributos para los controles de la interfaz de usuario

Inspector de la interfaz de usuario

El inspector de la interfaz de usuario es una herramienta potente que sirve para explorar los elementos de la interfaz de usuario basados en IntelliJ y que ofrece una descripción interna de cada uno. Además, los elementos de la interfaz de usuario se pueden probar de forma interactiva con Ctrl+Alt+Clic en el elemento (⌘+⌥+Clic en Mac). Consulte nuestra página de documentación del Inspector de la interfaz de usuario para saber cómo activarlo y en qué puede ayudarle exactamente.

Inspector de la interfaz de usuario

Look and Feel Defaults

La ventana Look and Feel (LaF) Defaults ofrece una búsqueda de pares clave-valor para los controles de la interfaz de usuario. Con esta herramienta, puede filtrar todos los valores predeterminados disponibles para los elementos de la interfaz de usuario definidos en el IDE o crear un prototipo de sus componentes de forma interactiva. Encontrará más información sobre la herramienta de interfaz de usuario LaF Defaults en la documentación del SDK de IntelliJ.

Look and Feel Defaults

Explorador de IntelliJ Platform

Se supone que cada complemento que ofrece un tema de interfaz de usuario implementa el punto de extensión themeProvider. Con la herramienta web del explorador de IntelliJ Platform, puede explorar las implementaciones existentes en los complementos de código abierto de IntelliJ Platform. Puede ir directamente a la herramienta y empezar a explorar el código, o leer más sobre ella en este artículo del blog.

Explorador de IntelliJ Platform

Documentación del SDK de IntelliJ

La Documentación del SDK de IntelliJ, en particular la sección Custom UI Themes (Personalización de temas de interfaz de usuario), es una base de conocimiento que mejoramos constantemente para ofrecer a los desarrolladores de complementos la fuente más valiosa de materiales de aprendizaje. Para aumentar aún más su valor, si tiene alguna duda, le animamos a darnos su opinión sobre secciones específicas de la documentación.

Obtener ayuda

¡Todo el mundo se atasca a veces! Para obtener ayuda con problemas relacionados con el desarrollo del complemento o la documentación, visite la sección Obtener ayuda o póngase en contacto con nosotros utilizando uno de los siguientes canales:

Publicar un complemento de tema

Compartir su complemento es un paso emocionante que pone el broche de oro a su duro trabajo. Puede hacerlo de varias formas.

Para los proyectos basados en Gradle, la compilación y la publicación es un proceso sencillo que se reduce a la ejecución de las tareas de Gradle buildPlugin y publishPlugin. En primer lugar, revise el artículo Publishing Plugins with Gradle (Publicación de complementos con Gradle) y prepare el artefacto ZIP que contiene su código para publicarlo en JetBrains Marketplace o, simplemente, compártalo con sus amigos.

Si utiliza la plantilla de complementos de IntelliJ Platform, la implementación y la publicación se automatizan con acciones de GitHub. Consulte la documentación del proyecto relacionada con la configuración de la integración continua del complemento.

Los proyectos basados en DevKit requieren algunos pasos manuales descritos en los artículos Deploying (Despliegue) y Publishing (Publicación) de la documentación del SDK de IntelliJ.

Marketing

JetBrains Marketplace utiliza toda la información proporcionada por los autores de los complemento para ayudar a que aparezcan en los buscadores y en los listados de complementos. Al subir un complemento a JetBrains Marketplace, lo pone a disposición de más de 10 millones de usuarios de productos JetBrains. Por ello, es esencial ofrecer un contenido de alta calidad, como un nombre que llame la atención, un icono para el complemento, una descripción significativa y capturas de pantalla. Todo ello atrae a los usuarios y consigue que estos participen, lo que se traduce en un mayor número de descargas. En la página Create Your Marketplace Listing (Crear una descripción en Marketplace) de la documentación de Marketplace, hemos recopilado un conjunto de artículos para ayudarle a preparar correctamente la publicación de su complemento.

Vender un complemento de tema

Debido al esfuerzo necesario para crear este tipo de proyectos, algunos proveedores han aprovechado la oportunidad de generar ingresos vendiendo complementos y temas de interfaz de usuario en JetBrains Marketplace en modelos de pago o freemium. En la sección Marketplace Paid Plugins (Complementos de pago de Marketplace) de la documentación, encontrará todos los detalles sobre las ventajas de JetBrains Marketplace, los modelos de precios, el procesamiento de los pagos, la información técnica sobre cómo implementar las licencias de los complemento de pago o freemium, y mucho más.

Conclusión

La creación de complementos de temas de interfaz de usuario para IDE basados en IntelliJ es un proceso que se basa principalmente en su sentido de la estética y la imaginación: la falta de conocimientos del SDK de IntelliJ no debería ser un obstáculo. Sin embargo, nos gustaría animarle a que profundizase en la ampliación de las funcionalidades de nuestros IDE. Quién sabe, tal vez nos ayude a muchos de nosotros en nuestro trabajo diario.

Si tiene una idea, pero no el tiempo suficiente para desarrollarla, o si simplemente busca algo de inspiración, eche un vistazo a estas ideas de complementos.

Si se queda atascado en algún momento, no dude en ponerse en contacto con nosotros a través del foro IntelliJ IDEA Open API and Plugin Development o del Slack de JetBrains Platform.

Para estar al día sobre IntelliJ Platform y JetBrains Marketplace, síganos en Twitter.

Jakub Chrzanowski y JetBrains Platform

Artículo original en inglés de:

Luiz Di Bella

Jakub Chrzanowski

Jakub Chrzanowski is a Developer Advocate and Product Manager at JetBrains Marketplace, specializing in the IntelliJ Platform. With a background in full-stack web development, he’s been actively involved in the tech industry since the early 2000s. Jakub is a former third-party plugin developer who still works on IntelliJ-based IDE plugins in his spare time. Connect with him on Twitter and GitHub for insights and expertise.

image description