Editor de código

El editor de código es donde escribes tus programas. Edita los ficheros .aru del proyecto, cada uno en una pestaña, con colores, autocompletado, pistas y saltos a las definiciones. También abre los ficheros de texto del proyecto (.md y .txt, como el README.md), pero como texto sin más: sin colores ni ayudas.

Se abre de varias maneras:

• Doble clic en un fichero de código o de texto del explorador. Si ya está abierto, el editor pasa a su pestaña.
• Home › View › Code, en la cinta: enseña el editor.
• Open File y New File, en su propia barra (mira «Herramientas»).
• Desde las ventanas que te llevan a una línea: la lista de errores, la Task List y el depurador abren el fichero en su sitio.

Un recorrido

Escribir con ayuda, saltar a una función y volver.

1. Abre el fichero. En el explorador, doble clic en tu fichero principal, dentro de Code. Sale en una pestaña con su nombre.
2. Escribe con el autocompletado. Escribe Disp y pulsa Ctrl+Espacio. Si solo hay una sugerencia, Display, el editor la escribe; si hay más, sale la lista: elige con las flechas y pulsa Intro. Escribe un punto y pulsa otra vez Ctrl+Espacio: ahora la lista trae lo que tiene el módulo Display.
3. Mira los parámetros. Escribe open(. Encima de la línea sale una pista con los parámetros de Display.open, y el que estás escribiendo va resaltado.
4. Salta a una definición. Pulsa Ctrl y pasa el ratón por el nombre de una de tus funciones, allí donde la llamas: se subraya y el puntero se vuelve una mano. Haz clic: el editor salta a la línea donde la declaras, aunque esté en otro fichero del proyecto.
5. Vuelve. Pulsa la flecha de atrás, la primera de la barra, hasta volver a donde estabas.
6. Ordena el código. Pulsa Code Beautifier: pone la sangría y los espacios de todo el fichero. Ctrl+Z lo deshace.
7. Guarda con Ctrl+S. Mientras hay cambios sin guardar, la pestaña lleva un asterisco (*) detrás del nombre. Después, compila con Build › Compile.

Herramientas

La barra

Los botones de la barra no tienen texto: pasa el ratón por encima para ver su nombre.

Botón	Qué hace	Tecla
Las dos flechas	Atrás y adelante: vuelven a los sitios por los que has pasado (mira «Moverse por el código»).
Open File	Abre un .aru y lo añade al proyecto si no estaba. Si no está en la carpeta Code del proyecto, antes lo copia allí.
New File	Pide un nombre, crea el fichero en Code (con .aru al final, si no lo lleva) y lo abre.
Save File	Guarda la pestaña activa.	Ctrl+S
Find & Replace	Abre el panel de búsqueda.	Ctrl+F
Code Beautifier	Ordena el código: la sangría, los espacios y las líneas en blanco.
Close Tab	Cierra la pestaña activa. Si tiene cambios sin guardar, te pregunta antes.

A la derecha de la barra está Search symbols..., el buscador de símbolos.

Los menús File y Edit

Encima de la barra, File y Edit abren dos menús:

• File: New, Open, Save y Close. Hacen lo mismo que New File, Open File, Save File y Close Tab.
• Edit: Find, Copy, Cut, Paste, Select All y Font. Find y Font no hacen nada (mira Problemas conocidos).

El menú del clic derecho

El clic derecho en el texto abre Find, Cut, Copy, Paste, Select all, Add Watch y Font.

• Add Watch añade a la ventana Watch la variable que tiene el cursor, o lo que tengas seleccionado. Si Watch está cerrada, la abre. Lo cuenta el depurador.
• El clic derecho no mueve el cursor: Add Watch toma la palabra donde está el cursor, no la que tiene el ratón debajo. Haz antes un clic normal en la variable.
• Find y Font no hacen nada.

Escribir código

Pestañas, colores y margen

• Cada fichero abierto va en una pestaña con su nombre. Arrastra una pestaña para cambiarla de sitio.
• Los colores distinguen las palabras clave, los textos, los números, los comentarios y, en negrita, los nombres de los módulos. Los paréntesis, los corchetes y las llaves cambian de color según lo anidados que están.
• Con el cursor junto a un paréntesis, se resaltan él y su pareja.
• Si dejas el cursor un segundo en una palabra que sale más de una vez, se enmarcan todas las veces que sale.
• A la izquierda van los números de línea; el de la línea del cursor, más claro. Junto a ellos, una raya amarilla marca las líneas que has cambiado y no has guardado, y una verde, las cambiadas que ya están guardadas.
• Los botones - y + del margen pliegan y despliegan los bloques: funciones, clases, if, bucles… También con el teclado: Alt+Shift+1 pliega todos; de Alt+Shift+2 a Alt+Shift+9, los que están en ese nivel de anidamiento o más adentro, y Alt+Shift+0 los despliega todos.
• Un clic en el borde izquierdo del margen pone o quita un punto de parada. Lo cuenta el depurador.
• Abajo, la barra de estado dice la línea y la columna del cursor, y la ruta del fichero.

Errores mientras escribes

Poco después de que dejes de escribir (medio segundo; hasta segundo y medio en los ficheros largos), el IDE revisa el código. Subraya con una onda roja los errores y con una naranja los avisos, y marca en rojo sus líneas en el minimapa. La lista entera está en la ventana Error List, que abre Home › View › Errors (mira La interfaz).

Sangría automática y Beautifier

Al pulsar Intro, la línea nueva sale con la sangría de su bloque: 4 espacios por nivel. Al escribir end, else, elsif, elfor, catch, until o default solos en su línea, la línea vuelve un nivel atrás.

Code Beautifier ordena el fichero entero o, si hay texto seleccionado, solo las líneas de la selección:

• la sangría, con 4 espacios por nivel;
• los espacios: uno alrededor de los operadores y de = y otro detrás de cada coma, y ninguno por dentro de los paréntesis y los corchetes;
• las líneas en blanco: como mucho una seguida, una antes y otra después de cada función, método, clase, struct o enum (sin separarlos del comentario que tengan encima), y ninguna al final del fichero;
• las comillas: los textos entre comillas simples pasan a comillas dobles, salvo los que llevan dentro una comilla doble.

Ctrl+Z deshace el cambio entero de una vez. Si el fichero tiene errores de sintaxis, aunque estén fuera de la selección, no cambia nada y sale un aviso.

Edición sincronizada

Selecciona un trozo de código y pulsa Ctrl+J: los nombres que salen más de una vez dentro de la selección quedan marcados. Cambia uno y cambian a la vez todos los iguales. Tab y Shift+Tab pasan al siguiente y al anterior; Esc termina.

La letra y el zoom

La letra es Consolas, de 10 puntos. Con el editor activo (haz clic en el texto), Ctrl + rueda del ratón la agranda o la achica, de 6 a 72 puntos. Cada pestaña lleva su tamaño, y la que abres empieza otra vez en 10.

Autocompletado

Ctrl+Espacio abre la lista de sugerencias. No sale sola mientras escribes: ábrela tú.

• Filtra con lo que llevas escrito de la palabra. Vale cualquier trozo del nombre, sin mirar mayúsculas: ex encuentra imgPlayerExplosion.
• Si solo queda una sugerencia, la escribe sin abrir la lista. Si no queda ninguna, no hace nada.
• Cada fila dice qué es (Variable, Function, Class, Module…), el nombre, los parámetros y la descripción.

Con la lista abierta, sigue escribiendo para filtrar más (Retroceso quita letras del filtro). Las flechas, Re Pág, Av Pág, Inicio y Fin se mueven por ella; Intro o un doble clic escriben la elegida, y Esc la cierra.

Sin un punto delante, la lista trae lo que se ve desde el cursor:

• las variables y los parámetros de la función en la que estás, y lo que declara el fichero: variables, constantes, funciones, clases, structs y enums;
• lo que declaran los ficheros que importas con import, y los que importan ellos;
• los módulos (Display, Sound…), las funciones de siempre (println, clock, random…), las constantes (PI, HIGH, los códigos ERR_…) y las palabras clave.

Primero salen las variables y lo que tienes más cerca del cursor, y al final, las palabras clave.

Detrás de un punto, trae lo que tiene lo de la izquierda:

• un módulo: sus funciones, propiedades, constantes y submódulos. Display. ofrece open, update, fps, draw…;
• una variable, si el IDE sabe de qué tipo es por lo que le asignas:
  • de una clase, sus métodos y propiedades, también los heredados, y los métodos que tiene todo objeto;
  • de un struct, sus campos, y copy y clone;
  • de un enum, sus valores;
  • un texto, una lista o un mapa, sus métodos;
  • lo que devuelve un módulo, como un sprite de Sprite.load, sus métodos y propiedades;
• una cadena de puntos: en jugador.arma. sigue el tipo de cada campo.

struct Punto
    var x = 0
    var y = 0
end

var p = Punto(3, 4)
println(p.x)   // 3

Escribe p. y pulsa Ctrl+Espacio: la lista ofrece x e y, y copy y clone. Los structs están en Structs.

Pistas

Al pasar el ratón

Deja el ratón quieto sobre un nombre y, en menos de medio segundo, sale una pista con lo que el IDE sabe de él:

• qué es (func, method, class, module, property, const…) y cómo se llama;
• sus parámetros. Si hay varias versiones de la misma función, una por línea; de una clase, cómo se crea (los parámetros de su init);
• su descripción: la de la ayuda de los módulos, o la que tú le pones en un comentario (mira «Documenta tu código», más abajo);
• de una variable o una constante, su tipo y el valor que le da el código;
• dónde está declarado: en qué clase, en qué módulo, o Project function si es una función tuya.

La pista se va al mover el ratón, al hacer clic, al mover el cursor y con Esc. Solo sale en los ficheros de código.

Los parámetros de una llamada

Con el cursor dentro de los paréntesis de una llamada, sale encima una pista con la función y sus parámetros, y el que estás escribiendo va resaltado. Si la función tiene varias versiones, salen todas, una por línea, con la que encaja resaltada. Sirve también al crear un objeto: Enemigo( enseña los parámetros del init de la clase. Esc la cierra.

Documenta tu código

Tus comentarios salen en las pistas y en el autocompletado:

• Un comentario justo encima de una función (func), un método (def), una clase, un enum o una constante, sin línea en blanco en medio, es su descripción. Si son varias líneas de comentario seguidas, entran todas.
• Un comentario al final de la línea de una variable, de una constante o de un this.campo = … es la descripción de esa variable.
• Dentro del comentario, las líneas que empiezan por @param, @return, @note, @example o @see salen aparte, debajo de la descripción.

// Suma dos números.
// @param a el primero
// @param b el segundo
// @return la suma de los dos
func sumar(a, b)
    return a + b
end

var vidas = 3   // Las vidas que le quedan al jugador

println(sumar(vidas, 2))   // 5

Moverse por el código

Ir a la definición

Pulsa Ctrl y pasa el ratón por un nombre: si el IDE sabe dónde está declarado, lo subraya y el puntero se vuelve una mano. Haz clic y el editor salta allí: una función, un método, una clase, una variable o una constante, en el mismo fichero o en otro del proyecto, que abre si no lo estaba.

Atrás y adelante

Las dos flechas de la barra recorren los sitios que el editor va apuntando, como en un navegador. La de atrás va al sitio anterior, aunque esté en otro fichero, y la de adelante deshace el paso atrás. Están apagadas cuando no hay a dónde ir.

El editor apunta un sitio cada vez que saltas: con Ctrl + clic, con el buscador de símbolos o el panel de búsqueda, al cambiar de pestaña o abrir un fichero, al ir a una línea desde la lista de errores o la Task List, y cuando el cursor se aleja 20 líneas o más del último sitio apuntado. Guarda los 100 últimos.

Buscador de símbolos

Search symbols..., a la derecha de la barra, busca en el fichero activo sus clases ([C]), sus métodos ([M], como Clase.metodo) y sus funciones ([F]), por orden alfabético.

• Haz clic en la caja: sale la lista entera. Escribe para filtrarla; vale cualquier trozo del nombre, sin mirar mayúsculas.
• Elige con las flechas y pulsa Intro, o haz clic en uno: el editor va a su línea y la deja en el centro.
• Esc cierra la lista.

Minimapa

A la derecha de cada pestaña, el minimapa enseña el fichero entero en pequeño, con sus colores. Un recuadro marca la parte que se ve en el editor; una raya verde, la línea del cursor; las rojas, las líneas con errores, y las amarillas, las de los puntos de parada.

• Un clic lleva el editor a esa línea y la deja en el centro.
• Arrastrar con el botón pulsado desplaza el texto.
• La rueda del ratón sobre el minimapa desplaza el editor.
• Ctrl+Shift+M lo esconde o lo enseña, en la pestaña activa.

Buscar y reemplazar

Ctrl+F, o Find & Replace en la barra, abre el panel de búsqueda arriba a la derecha del texto. Trae escrito lo que tengas seleccionado o, si no, el nombre del cursor con sus puntos (Display.draw, por ejemplo).

• Busca mientras escribes, desde donde estaba el cursor al abrir el panel; al llegar al final, sigue por el principio. Lo que encuentra queda seleccionado en el texto.
• Si no hay nada, el texto de la búsqueda se pone rojo.
• El contador dice qué coincidencia es la seleccionada y cuántas hay en el fichero: 2/5. Si no hay ninguna seleccionada, la primera cifra es 0.
• < y > van a la anterior y a la siguiente, y dan la vuelta al llegar a un extremo.
• Aa distingue mayúsculas y minúsculas, y W solo encuentra palabras enteras. Se encienden y se apagan con un clic, y cuentan desde la búsqueda siguiente: después de cambiarlos, pulsa >.
• Clear, la x de dentro de la casilla, la vacía.
• X cierra el panel. Para ensancharlo, arrastra su borde izquierdo.

Busca el texto tal cual: no hay expresiones regulares.

Reemplazar

▼, a la izquierda del panel, enseña la fila de reemplazar, y ▲ la esconde. Escribe en su casilla el texto nuevo: trae escrito «Replace...», que no se borra al hacer clic, así que bórralo antes.

• R (Replace next) cambia la coincidencia seleccionada y salta a la siguiente. Si no hay ninguna seleccionada, solo salta.
• All las cambia todas en el fichero, de principio a fin, y te dice cuántas ha cambiado. Ctrl+Z las deshace de una vez.

Los dos tienen en cuenta Aa y W.

Recursos del explorador

Arrastra un fichero del explorador al editor y suéltalo donde quieras el código: el editor escribe lo que hace falta para usarlo.

Sueltas	Escribe
Un fichero de código	import "Utilidades.aru", con su ruta dentro de Code, y salta de línea.
Un sprite (.spr)	Sprite.load("Sprites/Heroe.spr")
Una imagen	Un menú: Insert as Bitmap.load escribe Bitmap.load("Images/Fondo.bmp"), e Insert as Path, solo la ruta: "Images/Fondo.bmp".
Un mapa (.map)	Un menú: Load tiles map escribe GridMap.load("Maps/Nivel1_tiles.gmap"), y Load cells map, lo mismo con _cells.gmap.
Una canción	Un menú: Insert as Sound.loadMusic escribe Sound.loadMusic("Music/Tema.jmu"); Insert as Path, solo la ruta, e Insert as load + play, el código de debajo.

Insert as load + play escribe esto, con la sangría de la línea donde lo sueltas:

if (Sound.loadMusic("Music/Tema.jmu")) then
    Sound.playMusic(true)
end

Las rutas son las de lo que exporta el IDE al compilar: las imágenes, en .bmp; los mapas, en sus .gmap, y las canciones, en .jmu. Una imagen solo llega al juego con Include in Build encendida en el editor de imágenes. Lo demás lo cuentan el editor de mapas, el editor de sprites y las páginas de Bitmap, GridMap y Sound.

Task List

Home › View › Task List abre la ventana Tasks Manager: los comentarios del proyecto que apuntan algo pendiente.

Un comentario entra en la lista si lleva una de estas marcas, en mayúsculas y como palabra suelta: TODO, FIXME, BUG, WARNING, HACK, OPTIMIZE, REFACTOR, TEMP o NOTE. Lo que va detrás (sin los dos puntos) es el texto de la tarea. Si un comentario lleva dos marcas, cuenta la más grave.

// TODO: que el jefe dispare en diagonal
// FIXME el marcador no se borra al reiniciar
var nivel = 1

• Los nueve botones de arriba son filtros, uno por marca: un clic enciende o apaga el suyo. Al abrir la ventana solo está encendido el de TODO. Pasa el ratón por un botón para ver cuál es.
• Las tareas salen por fichero, cada una con su marca, su línea y su texto, y las más graves primero: FIXME, BUG, WARNING, HACK, OPTIMIZE, REFACTOR, TEMP, NOTE y TODO. Con el código de arriba al principio de un fichero y los filtros de FIXME y TODO encendidos, salen [FIXME] Line 2: el marcador no se borra al reiniciar y [TODO] Line 1: que el jefe dispare en diagonal.
• Doble clic en una tarea: abre el fichero en esa línea. En un fichero: lo abre.
• Abajo dice cuántas hay de cada marca, y el total, también de las que esconden los filtros.
• La lista no se pone al día sola: Refresh vuelve a leer los ficheros. Lee lo guardado en el disco: guarda antes lo que acabas de escribir.

Lo que guarda

• Save File, Ctrl+S y File › Save guardan la pestaña activa en su fichero, y le quitan el asterisco.
• Home › Project › Save, en la cinta, guarda todas las pestañas con cambios, además de los otros editores y el proyecto.
• Close Tab pregunta antes de cerrar una pestaña con cambios: Yes la guarda, No tira los cambios y Cancel la deja abierta.

Guarda antes de compilar

Compile, Run y Debug compilan los ficheros tal como están en el disco: no guardan el editor. Lo que no has guardado no llega al programa, y Run no se da cuenta de que el código ha cambiado. Guarda antes con Ctrl+S o con Home › Project › Save.

Atajos

Funcionan con el cursor en el editor de código.

Atajo	Qué hace
Ctrl+Espacio	Abre el autocompletado.
Ctrl+F	Abre el panel de búsqueda.
Ctrl+S	Guarda la pestaña activa.
Ctrl + clic	Va a la definición del nombre.
Ctrl + rueda	Agranda o achica la letra.
Ctrl+Shift+M	Enseña o esconde el minimapa.
Ctrl+J	Con texto seleccionado, empieza la edición sincronizada.
Esc	Cierra el autocompletado y las pistas, y termina la edición sincronizada.
Alt+Shift+1	Pliega todos los bloques.
Alt+Shift+2 … Alt+Shift+9	Pliegan los bloques de ese nivel de anidamiento o más adentro.
Alt+Shift+0	Despliega todos los bloques.
F9	Pone o quita el punto de parada de la línea del cursor.
F5	Compila y depura (Debug); con el programa parado, sigue (Continue).
F10	Step Over.

Los de escribir y moverse por el texto son los de siempre, con dos que en otros programas hacen otra cosa: Ctrl+Y y Ctrl+N.

Atajo	Qué hace
Ctrl+Z y Ctrl+Shift+Z	Deshace y rehace. También Alt+Retroceso y Alt+Shift+Retroceso.
Ctrl+C, Ctrl+X y Ctrl+V	Copian, cortan y pegan. También Ctrl+Insert, Shift+Supr y Shift+Insert.
Ctrl+A	Lo selecciona todo.
Ctrl+I y Ctrl+U	Añaden y quitan sangría a las líneas seleccionadas.
Ctrl+Y	Borra la línea entera (no rehace).
Ctrl+Shift+Y	Borra desde el cursor hasta el final de la línea.
Ctrl+N	Mete una línea en blanco (no crea un fichero).
Ctrl+Retroceso y Ctrl+T	Borran desde el cursor hasta el principio y hasta el final de la palabra.
Ctrl+← y Ctrl+→	Saltan de palabra en palabra.
Ctrl+Inicio y Ctrl+Fin	Van al principio y al final del fichero.
Ctrl+↑ y Ctrl+↓	Desplazan el texto una línea.
Alt+Shift + flechas	Seleccionan en columna.
Insert	Cambia entre insertar y sobrescribir.

Problemas conocidos

• Find y Font no hacen nada. Ni en el menú del clic derecho ni en el menú Edit. Para buscar, usa Ctrl+F o Find & Replace; para cambiar el tamaño de la letra, Ctrl + rueda.
• Las casillas de buscar y de reemplazar no se vacían. Vacías, enseñan «Search...» y «Replace...», y ese texto no se borra al hacer clic en ellas: bórralo antes de escribir. Si dejas vacía la de reemplazar y haces clic en otro sitio, vuelve a poner «Replace...», y R y All reemplazan por ese texto. Para reemplazar por nada, vacía la casilla y pulsa R o All sin hacer clic en otro sitio. Si ya ha pasado, Ctrl+Z lo deshace.
• Atrás no siempre vuelve justo a donde estabas. Tras un salto corto, a menos de 20 líneas en el mismo fichero, la flecha de atrás pasa de largo del sitio de donde saliste: la de adelante te devuelve a él. Y al saltar a otro fichero, a veces pasa antes por otro sitio de ese fichero (donde tenías el cursor, o su principio): púlsala otra vez.
• La pista de All dice «Replaze all».

Todos los problemas conocidos de JARU, juntos, están en Problemas conocidos.