B4xIDE V1.0 ES Es
B4xIDE V1.0 ES Es
B4xIDE V1.0 ES Es
B4x IDE
Entorno de Desarrollo Integrado
Para buscar por una palabra o sentencia, usa la función Búsqueda en el menú Editar.
Todo el código fuente y los archivos necesarios (diseños, imágenes etc.) de los proyectos de
ejemplo en esta guía, se incluyen en la carpeta BookletIDESourceCode.
1 General
El Integrated Development Environment (Entorno de Desarrollo Integrado).
B4A
B4i, B4R
B4J
B4A
Módulo de 'Activity'
Módulo de clase
Módulo de código
Módulo de servicio
B4i, B4J
Módulo de clase
Módulo de código
B4R
B4A B4i
B4J
B4R
B4A
Todos
Temas.
Elegir fuente.
Auto Guardar Guarda el proyecto siempre que lo ejecutas.
Configurar tiempo límite de proceso
Limpiar registro al desplegar Elimina todas las declaraciones de Logs cuando se compila en
modo 'release'.
Desactivar autocompletado implícito.
Sólo B4A
Usar Depurador Legado Utiliza el depurador legado en lugar de depuración rápida.
Auto Detectar Dispositivos Detecta automáticamente los dispositivos conectados.
2 Menú y Barra de herramientas 12 IDE B4x
2.5.1.1 Temas
Diferentes fuentes.
Introducir el tamaño del texto.
Activar el ajuste de línea
Introducir el tamaño de la tabulación.
Si
no está activado, se mostrará una lista
desplegable con las posibles palabras mientras
escribes.
Note: Esta función sólo funciona con conexión USB no con B4A-Bridge !
Clic en
muestra esta ventana.
Y puedes cambiar la
orientación
de la imagen.
Note: Esta función sólo funciona con conexión USB no con B4A-Bridge !
En el menú clic en .
Cuando haces clic con el botón secundario en el área de código, se mostrará el menú a
continuación.
Cortar
Cortar línea
Duplicar Línea
Copiar
Pegar
Deshacer
Rehacer
Buscar
Encontrar todas las referencias
Mover línea(s) arriba
Mover línea(s) abajo
Alternar perfilado
Comentar bloque
Descomentar bloque
Auto Formato
Ir a identificador
Alternar marcador
Marcador previo
Siguiente marcador
Borrar marcadores
Selector de color
Selector de icono No en B4R.
2 Menú y Barra de herramientas 18 IDE B4x
Además de la barra de herramientas hay una lista desplegable para seleccionar el modo de
compilación.
Modos de compilación:
Debug - Depuración
Release - Distribución
Release (Obfuscated) - Distribución (ofuscado)
Durante la compilación B4A genera código Java que luego se compila con el compilador Java y
convierte a Dalvik (Formato Bytecode de Android).
Existen herramientas que permiten descompilar el Bytecode Dalvik en código Java.
El propósito de la ofuscación es hacer que el código descompilado sea menos legible, más difícil de
entender y que sea más difícil de extraer las cadenas de texto como la clave de cuenta de
desarrollador.
Sugerencia: Si, por alguna razón, deseas evitar la ofuscación de un identificador, incluye un guión
bajo en el nombre.
Un archivo llamado ObfuscatorMap.txt se creará en la carpeta 'Objects'. Este archivo asigna los
nombres originales de los identificadores a sus nombres ofuscados. Esta asignación puede ser útil
en el análisis de los informes de errores.
2 Menú y Barra de herramientas 20 IDE B4x
2.7.2 B4i
2.7.3 B4R
3 Área de código
El código del módulo seleccionado se muestra en esta área y puede ser editado.
Los ejemplos a continuación están basados en el código de 'SecondProgram'.
Es posible dividir el área de código en dos partes permitiendo editar dos trozos diferentes de código
al mismo tiempo.
Y el resultado.
3 Área de código 22 IDE B4x
3.2.1 B4A
Cuando añades una nueva 'Activity' encontraras la región de atributos de 'Activity' en la parte
superior.
#Region Atributos de 'Activity'
#FullScreen: False
#IncludeTitle: True
#End Region
Cuando quieras agregar un nuevo atributo, solo debes escribir # y la ayuda en línea muestra todas
las posibilidades.
Atributos.
Cuando se carga un proyecto guardado con una versión de B4A mayor que 2.5, entonces la
cabecera tendrá este aspecto:
#Region Project Attributes
#FullScreen: False
#IncludeTitle: True
#ApplicationLabel: MyFirstProgram
#VersionCode: 1
#VersionName:
#SupportedOrientations: unspecified
#CanInstallToExternalStorage: False
#End Region
3 Área de código 24 IDE B4x
3.2.2 B4i
'Módulo de código
#Region Project Attributes
#ApplicationLabel: B4i Example
#Version: 1.0.0
'Posibles valores para Orientación: Portrait, LandscapeLeft, LandscapeRight y
PortraitUpsideDown
#iPhoneOrientations: Portrait, LandscapeLeft, LandscapeRight
#iPadOrientations: Portrait, LandscapeLeft, LandscapeRight, PortraitUpsideDown
#Target: iPhone, iPad
#ATSEnabled: True
#MinVersion: 7
#End Region
3.2.3 B4J
3.2.4 B4R
Una subrutina se puede contraer para minimizar el número de líneas de código mostradas en
pantalla.
La rutina 'btnAction_Click'
expandida.
La rutina 'btnAction_Click'
contraída.
Ejemplo:
- Alternar Todos
Expande las rutinas
contraídas y contrae las
rutinas y regiones
expandidas.
- Expandir Todo
Expande todo el código
- Contraer Todo
Contrae todo el código.
Ejemplo:
Sub btnAction_Click
If btnAction.Text = "O K" Then
If lblResult.Text="" Then
Msgbox("Sin resultados ","E R R O R")
Else
CheckResult
End If
Else
New
btnAction.Text = "O K"
lblResult.Text = "" & Chr(0xE632)
End If
End Sub
Y el resultado.
Para seleccionar el bloque pulsa la tecla Alt y mueve el cursor del ratón.
ahora puedes:
Encontrar la siguiente aparición.
Reemplazarlo y encontrar la siguiente
aparición.
Reemplazar todas las ocurrencias.
Código original
Selecciona el código.
Clic en o Ctrl + Q.
3.12 Marcadores
Puedes establecer marcadores en cualquier lugar del código y saltar hacia adelante y atrás entre
estos marcadores.
Verás esta marca a la izquierda de la línea y una pequeña línea negra en la barra de
desplazamiento derecha:
3.13 Sangrado
Un valor de tabulación de 2
es un buen valor.
Personalmente,
prefiero un valor de 2.
3 Área de código 34 IDE B4x
Código original.
Clic en .
El valor de tabulación se cambia en el menú Herramientas / Opciones del IDE / Elegir Fuente.
3.14 Autoformato
Selecciona el código.
Y clic en .
Y el resultado.
El tamaño del sangrado
depende de tu configuración,
consulta la página anterior.
3 Área de código 36 IDE B4x
Cuando se coloca el cursor sobre elementos de código se muestra ayuda sobre ese elemento.
Ejemplos:
3.16 Autocompletar
Para elegir lblNumber2 doble clic sobre ella o pulsa flecha abajo y la tecla 'Enter'.
Ejemplos:
For / Next
Escribe Fo
Pulsa 'Return'.
If / Then
Escribe ‘if’.
Pulsa 'Return'.
La subrutina se ha creado.
cvsLayer(2).DrawLine(x - d, y, x + d, y, Color, 1)
cvsLayer(2).DrawLine(x, y - d, x, y + d, Color, 1)
End Sub
Si quieres añadir código de ejemplo, puedes utilizar las etiquetas '<code>' '</code>' :
cvsLayer(2).DrawLine(x - d, y, x + d, y, Color, 1)
cvsLayer(2).DrawLine(x, y - d, x, y + d, Color, 1)
End Sub
Borra 'Draw'
Y copia.
3 Área de código 43 IDE B4x
A veces es útil ir desde una llamada a una subrutina a la definición de esa subrutina.
Esto se puede hacer fácilmente:
Otra forma
Selecciona el texto de la llamada a la
subrutina.
Clic en .
Cuando seleccionas una sola palabra, se resalta en azul oscuro y todas ocurrencias de esa palabra se
resaltan en azul claro en el código y en la barra deslizante derecha.
Con la barra deslizante puedes moverte arriba o abajo en el código para ir a las otras ocurrencias.
3 Área de código 45 IDE B4x
Haciendo clic en el margen izquierdo de una línea, se añade un punto de interrupción. Cuando se
ejecuta el programa se detiene en el primer punto de interrupción.
Los puntos de interrupción se ignoran en 'Globals', 'Process_Globals' y 'Activity_Pause'.
El IDE se comporta de forma diferente dependiendo del modo de depuración. Los ejemplos a
continuación son para
modo 'rapid debug'.
El depurador está conectado. En la parte izquierda de la ventana del depurador nos encontramos
con:
Botón para actualizar el programa después de una
modificación del código.
El nombre de la rutina donde el depurador detuvo el
programa. 'New' en el módulo 'Main' línea 46.
Desde donde se ha llamado a la rutina 'New' :
Rutina 'Activity_Create' en el módulo 'Main' línea 32.
En la parte derecha de la ventana de depuración puedes encontrar la lista de todos los 'views' y
variables con sus valores.
En la Barra de Herramientas, en la parte superior del IDE los botones de navegación están
habilitados.
En el código, clic con el botón secundario para mostrar el menú emergente de abajo.
O, en el menú Tools.
lblResult.Text = Chr(0xE632)
A veces, verás líneas verticales de color amarillo o verde en el lado izquierdo del IDE.
Tan pronto como modificas una línea de código, será marcada con una línea vertical amarilla a la
derecha del número de línea modificado, lo que significa que esa línea ha sido modificada.
Si hacemos clic en para guardar el proyecto, la línea amarilla se convierte en verde lo que
significa que el código modificado ya ha sido guardado. También puedes pulsar Ctrl + S para
guardar el proyecto.
Si salimos del IDE y volvemos a cargar el proyecto, las líneas verdes desaparecen.
3 Área de código 50 IDE B4x
Las URLs que aparecen en comentarios y variables de cadenas son accesibles mediante Ctrl + clic.
En un comentario:
Si el cursor esta sobre esa línea y pulsas Ctrl la url se resalta en azul y si haces clic se abre el
navegador con esa url. Pasando el cursor del ratón sobre la línea con Ctrl presionado, también se
resalta la url.
4 Pestañas
Hay 6 pestañas en la esquina inferior derecha del IDE que muestran diferentes ventanas.
La versión corta.
La versión larga.
B4R
Cuando se inicia el IDE por defecto, todas las pestañas están acopladas en el área de pestañas.
4.2 Flotante
Clic en .
La ventana de la pestaña Módulos ahora es flotante, se puede colocar donde quieras en la pantalla
incluso en un segundo monitor.
Para mostrar de nuevo las pestañas clic en 'Dock' en las opciones o en Reiniciar en el menú
Windows.
4 Pestañas 54 IDE B4x
También puedes hacer clic en una pestaña y manteniendo el botón pulsado, mover la pestaña.
Áreas de acoplamiento:
Arriba
Izquierda
Derecha
Abajo
4 Pestañas 55 IDE B4x
Si mueves el ratón sobre una de las áreas de acoplamiento, la pestaña se acoplara en ella.
Y el resultado.
Tan pronto como hagas clic en alguna parte del IDE la ventana de la pestaña se ocultará de nuevo.
4 Pestañas 57 IDE B4x
4.4 Cerrar
Todos los módulos del proyecto y todas las subrutinas del módulo seleccionado se encuentran en la
ventana de Módulos . La imagen inferior se ha reducido en altura.
Ventana de Módulos.
Clic en un módulo muestra su código en el área de
código.
Puedes presionar Ctrl + E en el código para abrir la pestaña de ‘Modules’ con la función Subrutina /
Módulo.
Muestra los módulos y Muestra todos los módulos y Muestra todos los módulos y
rutinas del módulo rutinas que contiene ‘a’. rutinas que contienen ‘act’.
seleccionado.
Clic en un elemento muestra el código del módulo seleccionado o de la rutina , incluso si la rutina
se encuentra en otro módulo que el actual.
4 Pestañas 61 IDE B4x
Esta ventana lista todos los archivos que se han añadido al proyecto.
Estos archivos se guardan en la carpeta ‘Files’ dentro de la carpeta principal del proyecto.
Estos pueden ser cualquier tipo de archivos: 'layouts', imágenes, texto, etc.
Clic en esta botón elimina los archivos marcados de la lista y, si quieres, de la carpeta ´Files’ del
proyecto.
Asegúrate de tener una copia de los archivos a eliminar, porque son eliminados de la carpeta
'Files', pero no se envían a la papelera de reciclaje, lo que significa que los perderás
definitivamente si no tienes una copia de ellos.
4 Pestañas 62 IDE B4x
En la parte superior de la ventana del administrador de archivos puedes filtrar la lista de archivos.
Ejecuta el programa.
Clic en para conectar la ventana de Logs.
B4A incluye un motor de advertencias. El propósito del motor de advertencias es encontrar posibles
errores de programación tan pronto como sea posible. Los ejemplos son del proyecto 'Warnings'.
También puedes desactivar todas las advertencias de un tipo específico en el módulo añadiendo el
atributo #IgnoreWarning en la región de 'Project Attributes' o 'Module Attributes'.
End Select
End Sub
Otro ejemplo:
Código incorrecto
Sub Activity_KeyPress(KeyCode As Int) As Boolean
Private Answ As Int
Private Txt As String
Código correcto
Sub Activity_KeyPress(KeyCode As Int) As Boolean
Private Answ As Int
Private Txt As String
Código incorrecto
Sub Calc(Val1 As Double, Val2 As Double, Operation As String)
Código correcto
Sub Calc(Val1 As Double, Val2 As Double, Operation As String) As Double
El tipo de valor devuelto debe ser declarado!
Código incorrecto
Sub CalcSum(Val1 As Double, Val2 As Double) As Double
Tabla de contenidos 68 IDE B4x
Código correcto
Sub CalcSum(Val1 As Double, Val2 As Double) As Double
Private Sum As Double
Código incorrecto
Sub Calc(Val1, Val2 As Double, Operation As String) As Double
Código correcto
Sub Calc(Val1 As Double, Val2 As Double, Operation As String) As Double
Código incorrecto
Activity.AddView(lblTest, 10, 10, 150, 50)
Código correcto
Activity.AddView(lblTest, 10dip, 10dip, 150dip, 50dip)
Código incorrecto
Sub SetHeight
h = 10dip
End Sub
Código correcto
Sub SetHeight
Private h As Int
h = 10dip
End Sub
La variable h no ha sido declarada. Estará resaltada en color rojo.
Tabla de contenidos 69 IDE B4x
Sub Test
Private h As Int
End Sub
Esta advertencia nos dice que la variable h se ha declarado pero no se le ha asignado ningún valor.
Código correcto, ver arriba.
Código incorrecto
Private lst As List
lst.Add("Test1")
Código correcto
Private lst As List
lst.Initialize
lst.Add("Test1")
Variables ('objects') como 'List' o 'Map' deben ser inicializadas antes de que puedan ser utilizadas.
Las 'Views' añadidas mediante código también deben ser inicializadas antes de que puedan ser
añadidas a una 'View' padre.
Código incorrecto :
Sub Globals
Public Timer1 As Timer
Public GPS1 As GPS
Código correcto :
Sub Process_Globals
Public Timer1 As Timer
Public GPS1 As GPS
Tabla de contenidos 70 IDE B4x
Ciertos objetos como los 'Timers' y 'GPS' deben ser declarados en 'Process_Globals', no en
'Globals'.
Estas usando un archivo que está en la carpeta 'Files', pero no ha sido añadido a la pestaña
Administrador de archivos.
Debes:
El archivo aparece en la pestaña Administrador de archivos pero no está en la carpeta 'Files'. Debes
añadirlo.
Ver capítulo 4.3.2 Files
Tabla de contenidos 71 IDE B4x
Código incorrecto
lblTest.TextSize = 16dip
Código correcto
lblTest.TextSize = 16
Código incorrecto
Try
imvImage.Bitmap = LoadBitmap(File.DirRootExternal, "image.jpg")
Catch
End Try
Código correcto
Try
imvImage.Bitmap = LoadBitmap(File.DirRootExternal, "image.jpg")
Catch
Log(LastException.Message)
End Try
Una 'View' definida con el diseñador en un archivo de diseño, no debe ser inicializada!
Sólo las 'Views' añadidas por código deben ser inicializadas.
Debes añadir la 'View' a una 'View' padre antes de poder acceder a sus dimensiones.
Cuando añades una 'View' mediante código sus dimensiones se definen al añadirla con 'AddView'.
Los diálogos modales como 'MessageBox' no deben ser usados en la rutina 'Activity_Pause'.
24: El acceso a campos desde otros módulos en Sub Process_Globals puede ser peligroso ya
que el orden de inicialización no es determinista.
La pestaña Administrador de Librerías contiene la lista de las librerías disponibles para ser usadas
en el proyecto.
Ejemplo:
Como ejemplo, escribe 'lbl' en el campo de búsqueda y obtendrás la ventana inferior donde veras
todas las líneas que contienen el texto 'lbl' escrito en este ejemplo.
Puedes sustituir un objeto en el código seleccionado, en el módulo actual o en todos los módulos.
Escribe el nuevo nombre y clic en , o .
4 Pestañas 76 IDE B4x
Este es un motor de búsqueda para encontrar todas las referencias a un objeto dado ('View',
variable).
5 Navegación en el IDE
5.1 Alt + izquierda / Alt + derecha Mueve hacia atrás y hacia delante
Mueve hacia atrás y hacia delante basado en la pila de navegación. Esto es útil para saltar hacia
atrás y adelante entre las recientes subrutinas.
Abre el menú de pila de navegación A continuación, puedes elegir la ubicación con las teclas arriba
y abajo.
Si estás trabajando en dos lugares del código en el mismo módulo, se puede dividir el editor de
código (puedes volverlo a dividir verticalmente):
Horizontalmente Verticalmente
También puedes hacer doble clic en los pequeños rectángulos para dividir la pantalla.
5 Navegación en el IDE 78 IDE B4x
Si estás trabajando con varios módulos, puedes mover los módulos fuera de la ventana principal del
IDE haciéndolas ventanas independientes.
Ctrl + E - Busca una subrutina o un módulo. Muy útil cuando se trabaja con grandes proyectos.
No exactamente relacionado con la navegación, pero también es útil cuando se trabaja con grandes
proyectos.
Detalles en Encontrar todas las referencias.
Para permitir la depuración debes activar el modo 'Debug' en la parte superior del IDE.
Puntos de ruptura - Puedes marcar líneas de código como puntos de ruptura. Esto se hace haciendo
clic en la zona gris a la izquierda de la línea.
El programa se detendrá cuando llegue al punto de ruptura y te permitirá inspeccionar el estado
actual del programa.
Registros - La pestaña de registros en el panel derecho del IDE es muy útil. Muestra mensajes
relacionados con los componentes del ciclo de vida y también puede mostrar mensajes que se
imprimen mediante la palabra clave 'Log'. Debes hacer clic en el botón Conectar para conectar con
los registros del dispositivo. Ten en cuenta que hay una opción para filtrar los registros. Cuando está
marcada solo verás mensajes relacionados con tu programa. Cuando no está marcado se mostrarán
todos los mensajes que se ejecutan en el sistema. Si se produce un error y no ves su mensaje
correspondiente en el registro, vale la pena desmarcar la opción de filtro y buscar un mensaje de
error.
Ten en cuenta que el registro es mantenido por el dispositivo. Cuando se conecta a un dispositivo
también podrás ver los mensajes anteriores.
6.1 Depuración B4A, B4i, B4J 80 IDE B4x
La barra de herramientas de depuración está en el lado derecho de la barra de herramientas del IDE.
6.1.1.1.1 Ejecutar F5
Tabla de contenidos 81 IDE B4x
Ejecuta el programa,
Si el programa está detenido en un punto de ruptura, se ejecuta hasta el siguiente punto de ruptura o
hasta que se termine la ejecución.
Step In F8
En el proyecto 'SecondProgram'
establecemos un punto de
ruptura en la línea 31 'New'.
Ejecutamos el programa, se
detendrá en la línea 31 'New'.
Clic en .
El depurador ejecuta la siguiente
línea, 'Sub New' en este caso.
Si la línea actual es una llamada a una subrutina, el depurador ejecuta el código en esa subrutina y
salta a la línea después de la llamada.
En el proyecto 'SecondProgram'
establecemos un punto de
ruptura en la línea 31 'New'.
Ejecutamos el programa, se
detendrá en la línea 31 'New'.
Clic en .
El depurador ejecuta el código
en la subrutina 'New' y salta
directamente a la siguiente línea
que es
'End Sub' de 'Activity_Create'.
Si la línea actual está en una subrutina, el depurador termina de ejecutar el resto del código y salta a
la siguiente línea después de la línea de la llamada a la subrutina.
En el proyecto 'SecondProgram'
establecemos un punto de
ruptura en la línea 31 'New'.
Ejecutamos el programa, se
detendrá en la línea 31 'New'.
Clic en .
El depurador ejecuta el resto del
código en la subrutina y salta a
la siguiente línea que es
'End Sub' de
'Activity_Create'.
6.1 Depuración B4A, B4i, B4J 83 IDE B4x
6.1.1.1.4 Detener
Cuando haces clic en alguna de estas líneas el cursor salta a esa línea.
6.1 Depuración B4A, B4i, B4J 85 IDE B4x
La ventana de ‘Watch’ permite comprobar funciones más complejas para pruebas y depuración.
Ejecuta el programa.
Number1 + Number2
Clic en para eliminar las líneas de Observar. Esto elimina todas las funciones.
Ejemplos:
'Number1'
'lblNumber1'
'lblNumber1'
'Number1'
6.1 Depuración B4A, B4i, B4J 87 IDE B4x
Una característica importante para hacer la depuración más fácil son los puntos de interrupción.
Puedes establecer puntos de interrupción en casi cualquier lugar del código.
Los puntos de ruptura en, 'Process_Globals' son ignorados.
Clic en el margen izquierdo de una línea, añade un punto de interrupción. Cuando el programa se
ejecuta, se detiene en el primer punto de ruptura que encuentra.
Clic en .
Puedes ver que el valor de
'Number1' ha cambiado.
Clic en de nuevo.
El programa salta a la siguiente línea.
Clic en .
Puedes ver que el valor de
'Number2' ha cambiado.
Es posible cambiar el código mientras se depura y ver el nuevo comportamiento sin reiniciar el
programa.
Todavía con el proyecto 'SecondProgram', las dos líneas de 'Log' y el punto de ruptura en la línea
47.
Usando el programa vemos ahora que los números pueden estar entre 1 y 19.
6.1 Depuración B4A, B4i, B4J 91 IDE B4x
En algunos casos el modo de depuración 'Legado' puede ser útil, se puede activar desde el menú
Herramientas – Opciones del IDE – Usar Depurador legado.
Modo depuración legado: Cuando esta opción esta activada, el código compilado contendrá código
de depuración.
El código de depuración permite al IDE conectar con el programa e inspeccionarlo mientras se
ejecuta.
Cuando el programa se inicia, esperará 10 segundos para que el IDE se conecte. Generalmente el
IDE se conectará inmediatamente. Sin embargo, si ejecutas el programa manualmente desde el
dispositivo, veras que tardará algo más.
El nombre del archivo APK compilado termina con '_DEBUG.apk'. No debes distribuir este fichero
APK ya que contiene código de depuración y añade una sobrecarga significativa.
Para distribuir archivos debes seleccionar opción 'Release' o 'Release (obfuscated)'.
Cuando ejecutas el programa con la opción 'Debug legado' y estableces un punto de ruptura, el IDE
abrirá la ventana de depuración en la parte inferior de la pantalla:
La pestaña registros en el panel derecho muestra los mensajes relacionados con el ciclo de vida de
los componentes y también puede mostrar mensajes que se imprimen con la palabra clave 'Log'.
Debes hacer clic en el botón 'Connect' para conectar con los registros del dispositivo.
En el proyecto 'TrafficLight' he añadido varias declaraciones de 'Log' que muestran la evolución del
programa.
Entonces:
Pulsamos el botón > State: 0
La luz se establece a ENCENDIDA > Light: 1 luz roja
ENCENDIDA
Soltamos el botón > State: 1