Sintaxis resaltada Javascript y CSS en Android Studio

En la versión gratuira de Android Studio no existe un asociación de ficheros hacia javascript ni a hojas de estilos. Por tanto, cuando nos toca escribir en ese entorno, con dichos lenguajes, tenemos que escribirlo sin ningun resaltado ni ayuda de ningún tipo. Esto puede pasar para programadores de Phonegap/Cordova sobre AS.

Si no te gusta escribir en el bloc de notas y no quieres tener abierto a la vez, AS con Sublime Text o similares, puedes añadir un plugin a AS, que se encargue de decorarnos el código.

A mano con el editor

Una opción es hacerlo a manita, desde AS, en File -> Settings -> FileTypes y creando tanto en JS como el CSS, añadiendo una a una, todas las palabras reservadas.


settings

js

js2

 

A mano editando el XML de configuración

Puedes crear tu propio XML de configuración e importarlo desde File->Import Settings.

Estos ficheros se encontrarán en la ruta de Android Studio, en su carpeta config.

Tendrá un aspecto similar a este:

<?xml version="1.0" encoding="UTF-8"?>
<filetype binary="false" default_extension="" description="Javascript" name="Javascript">
  <highlighting>
    <options>
      <option name="LINE_COMMENT" value="//" />
      <option name="COMMENT_START" value="/*" />
      <option name="COMMENT_END" value="*/" />
      <option name="HEX_PREFIX" value="" />
      <option name="NUM_POSTFIXES" value="" />
      <option name="HAS_BRACES" value="true" />
      <option name="HAS_BRACKETS" value="true" />
      <option name="HAS_PARENS" value="true" />
      <option name="HAS_STRING_ESCAPES" value="true" />
    </options>
    <keywords keywords="break;case;catch;continue;debugger;default;delete;do;else;finally;for;function;if;in;instanceof;new;return;switch;this;throw;try;typeof;var;void;while;with" ignore_case="false" />
  </highlighting>
  <extensionMap>
    <mapping ext="js" />
  </extensionMap>
</filetype>

Importar librerías ya hechas

Si no quieres escribirte tu propio plugin, puedes obtener alguno de los que hay en la red, por ejemplo.

Libreria js y css para Android Studio de peter-schmalfeldt

Escrito por peter-schmalfeldt y que aceptará gustoso colaboraciones.

Antes y después

Para que se vea claro, pongo dos imágenes del mismo código antes y despues. Hemos ganado.

Antes

ejemplo2
 

Despues

ejemplo

 

 

Problema de canvas duplicado en HTML5

Hay un problema engorroso que sucede con el navegador nativo de Android, y es que trabajando con el canvas de HTML5, realiza un duplicado exacto de los canvas que hayas creado en el document.
Lo añade a la coordenada (0,0) del document y se actualiza en tiempo real, de forma simultánea con el canvas original. Es decir, que cuando muevo una de las fichas en el canvas de la derecha, se mueve por igual en el de la izquierda, pero solo el de la derecha es sensitivo a interacción.
Es por tanto un problema de pintado del navegador. Sólo sucede en los navegadores nativos de Android de versión 4 o superior.

Error de Canvas duplicado
Error de Canvas duplicado

Surge además cuando estos canvas están integrados dentro de DIVs, y estos a su vez dentro de otros DIVs.
Haciendo pruebas con las css de dichos canvas, ví que solo se producía el duplicado cuando la propiedad position del canvas era diferente de fixed. Pero claro, es una solución incómoda, ya que un elemento fixed en medio de la pantalla, no se permitible salvo que esté totalmente integrado. En mi caso particular en esta pantalla, si servía, pero pensando en general, para cualquier sitio mas dinámico respecto al responsive design, no era una opción válida.

Continuando con la búsqueda de una solución, encontré una mejor, al descubrir que si alguno de los objetos contenedores tenía la propiedad overflow: hidden, también se producía. Si se puede permitir la posibilidad de desactivar los scrollbars, ya podemos quitar el fixed al position del canvas.

Elucubro, que de alguna manera internamente, para calcular la porción pintable del canvas, crean una copia temporal en el (0,0), despues la pintan en su coordenada real, pero se han olvidado de borrar la temporal.