Basic Android 4 - Guía para principiantes.pdf

(1)

Guía para principiantes

(2)

Tabla de contenido 2 Basic4Android Guía del principiante

1 Getting started...7

1.1 Instalación de Basic4Android y Android SDK...7

1.1.1 Instalar y configurar Basic4Android...9

1.2 Instalar emulador Android... 10

2 Mi primer programa (MyFirstProgram.b4a)... 15

3 Segundo programa (SecondProgram.b4a)... 33

4 The IDE ... 47

4.1 Menu and Toolbar... 48

4.1.1 Toolbar ... 48 4.1.2 File menu ... 49 4.1.3 Edit menu... 49 4.1.4 Project menu ... 50 4.1.5 Tools menu ... 51 4.2 Code area... 53 4.2.1 Deshacer – rehacer ... 53 4.2.2 Collapse a subroutine ... 53 4.2.3 Collapse a Region ...54

4.2.4 Collapse the whole code... 55

4.2.5 Código comentario y uncommenting ... 56

4.2.6 Marcadores ... 56

4.2.7 Sangría ... 57

4.2.8 Autocompletar ...59

4.2.9 Jump to a subroutine ... 61

4.2.10 Destacando las ocurrencias de palabras... 62

4.2.11 Debugging ... 63

4.2.12 Breakpoints... 65

4.3 Tabs... 68

4.3.1 Listas de módulo y subrutina ... 68

4.3.2 Archivos ... 69

4.3.3 Registros ... 70

4.3.4 Libs ... 71

5 Screen sizes and resolutions... 72

5.1 Funciones especiales como 50% x, 50dip... 77

5.1.1 PerXToCurrent, PerYToCurrent - 50% x...77

5.1.2 DipToCurrent - 50dip... 77

5.2 Trabajar con diferentes tamaños de pantalla \/ número de diseños... 78

5.3 Screen orientations... 84

6 The Emulator... 85

6.1 Launch an Emulator... 85

6.2 Create a new Emulator... 87

6.3 Emulator problems... 89

6.3.1 Process timeout... 90

6.4 Intercambio de archivos con el PC... 91

7 B4A Bridge ... 94

8 The Designer ... 97

8.1 The menu... 98

8.1.1 File menu ... 98

8.1.2 AddView menu ... 98

(3)

8.2 Tools ... 100

8.2.1 Generate Members ... 100

8.2.2 BringTo Front ... 101

8.2.3 Send To Back... 101

8.2.4 Duplicate Selected View ... 101

8.2.5 Remove Selected View ... 102

8.2.6 Change grid... 102

8.2.7 Conecte el dispositivo o el emulador... 103

8.3 General settings ... 103

8.4 Image files... 104

8.5 Properties list... 105

8.6 Layout variants ... 107

8.7 The Abstract Designer ... 112

8.7.1 The menu ... 113

8.7.2 Example... 114

8.8 Adding views by code... 117

8.9 Designer Scripts... 120

9 Actividad y proceso de ciclo de vida... 126

9.1 ¿Cómo maneja? ... 127

9.2 Process global variables... 128

9.3 Activity variables... 128

9.4 Sub Activity_Create (cumshot As Boolean)... 128

9.5 Globals versus FirstTime ... 129

9.6 Sub Activity_Resume Sub Activity_Pause (UserClosed As Boolean)... 129

10 Variables and objects... 130

10.1 Variable Types... 130

10.2 Names of variables ... 132

10.3 Declaring variables ... 132

10.3.1 Simple variables... 132

10.3.2 Array variables... 133

10.3.3 Array of views (objects)... 135

10.3.4 Type variables... 136 10.4 Casting ... 137 10.5 Scope... 138 10.5.1 Process variables... 138 10.5.2 Activity variables... 138 10.5.3 Local variables... 138 10.6 Tips ... 139 11 Modules... 140 11.1 Activity modules... 141 11.2 Code modules ... 142 11.3 Service modules... 143 12 Example programs... 144 12.1 User interfaces... 144

12.1.1 Ejemplo de menú (UserInterfaceMenu.b4a)... 145

12.1.2 Ejemplo de TabHost (UserInterfaceTabHost.b4a)... 146

12.1.3 Ejemplo de cuadro de herramientas (UserInterfaceButtonToolbox.b4a) el botón... 147

12.2 Programa con 3 actividades (ThreeActivityExample.b4a)... 148

12.3 ScrollView examples ... 155

12.3.1 Programa de ejemplo ScrollView... 156

13 Basic language... 167

13.1 Program flow... 167

(4)

13.1.2 Globals routine... 168

13.1.3 Rutina de Activity_Create (cumshot As Boolean)... 168

13.1.4 Activity_Resume routine... 168

13.1.5 Rutina de Activity_Pause (UserClosed As Boolean)... 168

13.2 Expressions... 170

13.2.1 Expresiones matemáticas... 170

13.2.2 Relational expressions... 171

13.2.3 Boolean expressions... 171

13.3 Conditional statements... 172

13.3.1 If – Then – End If... 172

13.3.2 Select – Case... 173 13.4 Loop structures ... 175 13.4.1 For – Next... 175 13.4.2 Do - Loop ... 176 13.5 Subs... 177 13.5.1 Declaring ... 177 13.5.2 Calling a Sub... 177

13.5.3 Llamar a un Sub desde otro módulo... 177

13.5.4 Naming ... 178 13.5.5 Parameters ... 178 13.5.6 Returned value ... 178 13.6 Events... 179 13.7 Libraries ... 182 13.7.1 Standard libraries ... 182

13.7.2 Carpeta de bibliotecas adicionales... 182

13.7.3 Mensaje de error \"falta una referencia de la biblioteca?\"... 183

13.8 String manipulation ... 184 13.9 Timers ... 185 13.10 Files... 186 13.10.1 File object ... 186 13.10.2 Filenames... 188 13.10.3 Subfolders... 188 13.10.4 TextWriter... 189 13.10.5 TextReader... 190 13.10.6 Text encoding... 191 13.11 Lists... 193 13.12 Maps... 195 14 Graphics \/ Drawing... 197 14.1 Overview... 197

14.2 Drawing test programs... 199

14.2.1 Plano de rotación de mapas de bits \/ RotatingNeedle... 199

14.2.2 Simple draw functions... 204

15 B4A Keywords... 213 15.1 Bit ... 213 15.2 DateTime... 214 15.3 Exception... 217 15.4 Keywords ... 218 15.5 LayoutValues... 230 15.6 String... 231 15.7 StringBuilder ... 233 15.8 Timer... 235 16 Views ... 237 16.1 Activity... 237

(5)

Tabla de contenido 5 Basic4Android Guía del principiante 16.2 Button... 241 16.3 CheckBox... 244 16.4 EditText... 247 16.5 ImageView ... 252 16.6 Label ... 255 16.7 ListView... 258 16.8 Panel... 263 16.9 ProgressBar ... 266 16.10 RadioButton... 268 16.11 ScrollView... 271 16.12 SeekBar ... 274 16.13 Spinner ... 277 16.14 TabHost ... 281 16.15 ToggleButton... 285 16.16 View ... 288 16.17 WebView... 290 17 Collections ... 294 17.1 List ... 294 17.2 Map ... 298 18 VB6 versus B4A... 10s 19 FAQ ... 306

19.1 \"Por favor Guardar proyecto primero\" mensaje... 306

19.2 \"Le falta una referencia de la biblioteca\" mensaje... 306

19.3 Cómo cargar \/ actualizar una biblioteca... 307

19.4 Cuando necesitamos 'Initialize' y cuando no... 307

19.5 Dividir una línea larga en dos o más líneas... 308

19.6 Evitar cerrar una aplicación \/ captura códigos de tecla como Back \/ menú... 308

19.7 Eventos no deseados como clic, toque u otros... 309

19,8 Adding a Menu item ... 309

19.9 ¿Cómo elimino una vista con el diseñador... 310

19.10 \"El proceso tiene tiempo de espera\" mensaje... 310

19.11 Obtener una imagen de la Galería... 311

19.12 Cómo eliminar archivos de x.bal u otros archivos de un proyecto... 311

19.13 Block a screen orientation ... 312

19.14 Close second Activity ... 313

19.15 Tomar una captura de pantalla programaticaly... 313

19.16 Después de compilar, donde están los archivos... 313

19.17 Ejecutar una aplicación desde otra... 314

19.18 How to pass an Array to a Sub ... 314

19.19 Obtención de idioma y país de dispositivo... 315

19,20 Where is the apk file ... 315

19.21 ¿Por qué es mi result.apk de nombre de archivo apk... 315

19,22 ¿Por qué es mi xxx_DEBUG.apk de nombre de archivo apk... 316

19.23 Select True \/ Case trick ... 316

19.24 Llenar una matriz con números aleatorios sin repeticiones... 316

19.25 Detect screen orientation... 317

19.26 Algunas funciones no funcionan en Activity_Pause... 317

19.27 Llamar a la calculadora interna... 317

19,28 Obtenga la Alpha \/ rojo \/ verde \/ azul. 318 20 Glossary ... 319

(6)

Tabla de contenido 6 Basic4Android Guía del principiante Colaboradores principales:

Erel Uziel (Erel) Klaus Christl (klaus) nfordbscndrd

Todo el código fuente y archivos necesarios (diseños, imágenes, etc.) de los proyectos de ejemplo en esta guía son incluido en la carpeta de código fuente.

(7)

1 Procedimientos iniciales 7 Basic4Android Guía del principiante

1 Introducción

Basic4android es un entorno de desarrollo sencillo y potente orientado a dispositivos Android.

Basic4android lenguaje es similar al lenguaje de Visual Basic con soporte adicional para los objetos.

Basic4android compilado de aplicaciones son aplicaciones nativas para Android, no hay runtimes adicionales o dependencias.

A diferencia de otros Basic4android IDEs es 100% focalizada en desarrollo Android.

Basic4android incluye un potente diseñador de GUI con soporte integrado para múltiples pantallas y orientaciones. No escribir XML es requerido.

Usted puede desarrollar y depurar con el emulador de Android o con un dispositivo real (USB conectado o a través de la red local).

Basic4android tiene un rico conjunto de librerías que facilitan el desarrollo de aplicaciones avanzadas. Esto incluye: SQL bases de datos, GPS, puertos serie (Bluetooth), cámara, análisis, servicios Web XML

(HTTP), servicios (tareas en segundo plano), JSON, animaciones, red (TCP y UDP), texto a voz (TTS), reconocimiento de voz, vista Web, AdMob (ads), gráficos, OpenGL, gráficos y más.

Android 1.6 y por encima son compatibles (incluyendo tabletas como Motorola Xoom).

1.1 Instalación de Basic4Android y Android SDK

Basic4android depende de dos componentes adicionales (libres): -Java JDK

-Android SDK

Instrucciones de instalación:

Debe ser el primer paso instalar el JDK de Java como Android SDK, así lo requiere.

Tenga en cuenta que no hay ningún problema con tener varias versiones de Java instalado en el mismo equipo. -Abrir la Link de descarga de Java JDK 7.

-Marque el botón de radio de aceptar el acuerdo de licencia.

-Seleccione \"Windows x 86\" en la lista de plataformas (para máquinas de 64 bits así). Android SDK no funciona con Java JDK de 64 bits.

Debe instalar el JDK regular para equipos de 64 bits así. -Descargar el archivo e instalarlo.

Siguiente paso es instalar el SDK de Android y una plataforma:

-Instalar el SDK. El SDK de siempre no comportarse correctamente cuando se instala en un trazado con espacios (como archivos de programa). Se recomienda instalarlo en una carpeta personalizada similar a C:\\Android.

-Ahora debe instalar las herramientas de la plataforma y la imagen de al menos una plataforma. Puede utilizar API 8 o anteriormente. Se recomienda utilizar API 10.

(8)

Tenga en cuenta que puede instalar más paquetes más tarde. -Presione en instalar seleccionado e instalar ambos paquetes.

(9)

1.1.1 Instalar y configurar Basic4Android -Descargar e instalar Basic4android_.

-Basic4android abierto.

-Seleccionar el menú de herramientas - configurar rutas de acceso.

-Utilice los botones de navegación para localizar \"javac.exe\" y \"android.jar\" javac se encuentra bajo < carpeta java > \\bin.

Android.jar se encuentra bajo <android-sdk-windows> \\platforms\\android-8 Depende de la carpeta donde instaló el SDK de Android,

debe ser C:\\Android\\android-sdk-windows\\platforms\\android-8\\android.jar. En Windows de 64 bits, Java probablemente se instalará en C:\\Program Files (x 86).

Errores comunes

- Windows XP-\"aplicación de Basic4Android.exe no podía ser inicializado correctamente error 0xc0000135 \"al inicio. Basic4android requiere .net Framework 2.0 o superior. Usuarios de Windows XP quien no instalarlo antes debe instalar primero el marco.

(10)

1.2 Instalación de emulador Android 10 Basic4Android Guía del principiante

1.2 Instalar emulador Android

Por favor siga las instrucciones de instalación (y configuración) si no lo ha hecho todavía: http:\/\/www.Basic4ppc.com\/Forum\/Basic...Droid-SDK.html.

En este capítulo, vamos a crear un nuevo AVD (Android Virtual Device) que es una instancia de emulador. A continuación, vamos a crear un sencillo programa que muestra un cuadro de mensaje de texto y escribe un mensaje a el registro.

También puede conectar un dispositivo real para el IDE: Conectar el dispositivo con ADB

Conectar el dispositivo con B4A-puente Crear nueva AVD

-Ejecutar Basic4android.

-Seleccionar el menú de herramientas - Run AVD Manager. Espere unos segundos.

-El SDK Manager pueden aparecer dependiendo de la versión y la configuración. Debe elegir Herramientas - administrar AVDs.

(11)

1.2 Instalación de emulador Android 11 Basic4Android Guía del principiante -El Manager de AVD debería aparecer:

-Haga clic en y llene los campos relacionados de la siguiente imagen (se recomienda elegir HVGA):

-Haga clic en .

-Tenga en cuenta que puede crear más de una AVD. Cada uno puede tener una resolución diferente o puede destinar una versión diferente de la API (usted será necesario instalar plataformas adicionales

(12)

-Ahora, haga clic en con el fin de iniciar el emulador.

-Verá esta pantalla.

-Haga clic en para iniciar el emulador

(13)

1.2 Instalación de emulador Android 13 Basic4Android Guía del principiante -El emulador debe arrancar:

(14)

El emulador está listo cuando se pone a Esta pantalla:

Puede ver esta pantalla, que es la pantalla de bloqueo, en su lugar:

Arrastre el icono de bloqueo a la derecha para desbloquear la dispositivo.

Tenga en cuenta que no es necesario reiniciar el emulador cada vez que se implemente un programa. El emulador puede ser mantenido funcionando todo el tiempo. Si no estás familiarizado con Android puede reproducir con el emulador. Pulse sobre el botón con el

cuadrados pequeños para llegar a la página de la aplicación. Solución de problemas: Si aparece un mensaje de error similares a:

parámetro de línea de comandos no válido: Files\\Android\\android-sdk\\tools\/emulador-ARM.exe.

Sugerencia: use '@ foo' para lanzar un dispositivo virtual denominado 'foo'.

(15)

2. Mi primer programa 15 Basic4Android Guía del principiante

2 Mi primer programa (MyFirstProgram.b4a)

Debemos escribir nuestro primer programa.

El programa propuesto es un entrenador de matemáticas para niños. El proyecto está disponible en la carpeta de código fuente:

SourceCode\\MyFirstProgram\\ MyFirstProgram.b4a

En la pantalla, tendremos:

-2 Etiquetas mostrando aleatoriamente generan números -1 Etiqueta con el signo de matemáticas

-1 Vista EditText donde el usuario debe introducir el resultado

-1 Botón, se utiliza para confirmar cuando el usuario ha terminado de introducir el resultado o generar un nuevo cálculo.

-1 Etiqueta con un comentario sobre el resultado.

Vamos al diseño de la interfaz de usuario con el diseñador en el emulador y vaya paso paso a través de todo el proceso.

(16)

Ejecute el IDE Guarde el proyecto.

Debe guardar el proyecto antes de ejecutar el diseñador.

Crear una carpeta nueva MyFirstProgram y guardar el proyecto con el nombre MyFirstProgram.

Ejecutar el emulador.

(17)

El retrato emulador, en este caso. Haga clic en

Haga clic en

Espere hasta que esté listo el emulador, esto tomará bastante tiempo.

Ejecutar el diseñador.

(18)

Conecte el emulador al diseñador.

Espere hasta que el diseñador y el emulador conectado, esto puede tomar algún tiempo, ser paciente. Podrá ver el estado del diseñador aquí:

(19)

2. Mi primer programa 19 Basic4Android Guía del principiante Ahora agregaremos las 2 etiquetas para los números.

En el diseñador de añadir una etiqueta.

La etiqueta aparecerá en el emulador, y sus parámetros por defecto aparecen en el diseñador.

Cambiar el tamaño y mover la etiqueta con el rojo plazas like this.

Los nuevos parámetros Left, Top, Width y Altura se actualizan directamente en el diseñador. También puede modificar la izquierda, Top, Width y los parámetros de altura directamente en el Diseñador.

Cambiemos los parámetros de esta primera etiqueta según nuestras necesidades.

De forma predeterminada, el nombre es la etiqueta con un número, aquí Label1, nos permiten cambiar su nombre a

lblNumber1.

Las tres letras lbl al principio para

Etiqueta y número 1 para el primer número. Se recomienda usar nombres significativos para vistas directamente sabemos qué tipo de verlo es y su propósito.

Presionar retorno o haciendo clic en otro lugar que también cambiar el parámetro del nombre del evento.

(20)

Ahora tenemos:

Principal: módulo principal Nombre: nombre de la vista

Tipo: tipo de la vista, etiqueta, este parámetro no puede cambiarse por supuesto Nombre del evento: nombre de la rutina que controla los eventos de la etiqueta

Padre de familia:la vista padre la etiqueta pertenece a.

Comprobar y modificar los otros parámetros:

A la izquierda, parte superior, la anchura y la altura son OK. Habilitado, Visible son OK

Etiqueta que dejamos vacía.

Texto, establecemos un número predeterminado, decir 5 Tipo de letra, estilo son OK

Alineación horizontal: póngalo en CENTER_HORIZONTAL Alineación vertical: dejamos CENTER_VERTICAL. Tamaño: ajústelo a 36

(21)

Los nuevos parámetros.

Necesitamos una segunda etiqueta similar a la primera. En lugar de agregar uno nuevo, copiamos el primero de ellos con los mismos parámetros. Sólo los parámetros de nombre, de izquierda y de arriba va a cambiar.

(22)

2. Mi primer programa 22 Basic4Android Guía del principiante Coloque la etiqueta nueva y cambiar su nombre a lblNumber2.

Ahora agreguemos una tercera etiqueta para el signo de matemáticas. Copiamos nuevamente lblNumber1. Haga clic en lblNumber1 en el emulador y en el click del diseñador en el menú 'Herramientas' en ' duplicar Vista seleccionada '.

Colocarla entre las dos etiquetas primeras y cambiar su nombre a lblMathSign y su parámetro de texto a '+'.

(23)

Ahora agreguemos una vista EditText. En haga clic en diseñador de

Colóquelo debajo de los tres rótulos y cambiar su nombre a edtResult. 'EDP' EditText y el 'Resultado' para su propósito.

Cambiemos estos parámetros. Nombre a edtResult

Alineación horizontal Para CENTER_HORIZONTAL Tamaño del textoa 30

Tipo de entrada a los números Texto de sugerenciaa 'Entrar resultado'

(24)

2. Mi primer programa 24 Basic4Android Guía del principiante Agreguemos el botón para confirmar el resultado o para generar un nuevo cálculo.

Colóquelo debajo de la vista EditText; cambiar el tamaño y cambiar siguiendo los parámetros:

Nombre: a 'btnAction'

Texto: a 'O K' y

(25)

2. Mi primer programa 25 Basic4Android Guía del principiante Añadir la última etiqueta por los comentarios, colóquelo debajo del botón y cambiar su tamaño.

Cambiar los siguientes parámetros: Nombre a lblComments

Alineación horizontal: CENTER_HORIZONTAL Color del texto a negro

Color a blanco

Alpha a 255

De forma predeterminada, el color de fondo de la etiqueta es de color negro y transparente. Lo fijamos al blanco y opaco

Alfa = 255.

(26)

2. Mi primer programa 26 Basic4Android Guía del principiante Salvemos el diseño en un archivo.

Haga clic en y guardarlo con el nombre 'Main'.

Haga clic en .

Para escribir las rutinas para el proyecto que tenemos que hacer referencia a las opiniones expresadas en el código. Esto puede hacerse con la herramienta de generar miembros en el diseñador.

(27)

2. Mi primer programa 27 Basic4Android Guía del principiante La herramienta de generar miembros permite para generar automáticamente referencias y marcos de subrutina.

Haga clic en para abrir el generador.

Aquí encontramos todas las vistas en el diseño actual.

Verificamos todas las vistas y controlar el evento Click para el botón de btnAction.

Comprobación de una vista genera su referencia en la Globals Sub en el código. Esto es necesarios para que la vista reconoce y permite la función de Autocompletar.

Al hacer clic en el evento en de una vista genera el marco Sub para este evento.

(28)

2. Mi primer programa 28 Basic4Android Guía del principiante Ahora volvemos al IDE para introducir el código.

En primer lugar, tenemos que cargar nuestro archivo de diseño a la actividad en el Sub Activity_Create. -Entrar en 'Actividad'

-Introduzca un punto

-La función de Autocompletar muestra automáticamente todos los parámetros posibles de la vista. -Entrar en 'L', la muestra de la función de Autocompletar los parámetros empezando con 'L'

-Pulse la tecla de flecha abajo, aparecerá LoadLayout con la ayuda en línea para el parámetro determinado o método.

(29)

2. Mi primer programa 29 Basic4Android Guía del principiante -Pulsar 'Return', se añade LoadLayout.

-Entrar ' (', la ayuda en línea se mostrará los parámetros necesarios para el método.

-Introduzca ' \"Principal\") '

Queremos generar un nuevo problema directamente al iniciar el programa. Por lo tanto, agregamos una llamada a la subrutina nueva.

Para generar un nuevo problema, que significa generar números aleatorios dos Número1 y número2 entre 1 y 9 y espectáculo en la lblNumber1 y la lblNumber2 etiquetas.

Para ello nos Introduzca el siguiente código:

En Sub Globals añadimos dos variables para los dos números.

Y la 'Nueva' subrutina:

RND (1, 10)Generador de números aleatorios, '1' número de minutos inclusivo y max '10'. número exclusivo. lblComments.Text = \"Escriba el resultado\"

(30)

2. Mi primer programa 30 Basic4Android Guía del principiante Ahora añadimos el código para el evento de clic de botón.

Tenemos dos casos:

-Cuando el texto del botón es igual a \"O K\" Esto significa que se propone un nuevo problema y la programa esperará al usuario ingresar un resultado y, a continuación, pulsando el botón.

-Cuando el texto del botón es igual a \"Nuevo\" Esto significa que el usuario ha introducido una respuesta correcta y Cuando el usuario hace clic en el botón se generará un nuevo problema.

Si btnAction.Text = \"O K\" Then comprueba si el texto del botón es igual a \"O K\" Si comprobamos si el EditText está vacía.

Si sí, nos mostrará un cuadro de mensaje que indica al usuario que no existe ningún resultado en la vista EditText. Si no, se comprueba si el resultado es correcto o si es falsa.

Si no que entonces generamos un nuevo problema, establezca el texto del botón de \"OK\" y borrar la vista EditText.

La última rutina es la comprobación del resultado.

Con Si edtResult.Text = número1 + número2 luegocomprobamos si el resultado es correcto. En caso afirmativo, exhibimos en la etiqueta de lblComments el texto a continuación:

'Resultado de G O O D' 'Haga clic en nuevo'

y cambiar el texto del botón a «N E W».

Si no, nos muestra en la etiqueta de lblComments el texto a continuación: Resultado W R O N G

Introduzca un nuevo resultado y haga clic en Aceptar

(31)

2. Mi primer programa 31 Basic4Android Guía del principiante Permítanos ahora compilar el programa y transferirlo al emulador.

En el IDE en superior, haga clic en :

Todavía no hemos puesto el nombre del paquete para que el IDE lo pide. Escriba B4A.MyFirstProgram. Android necesita el paquete nombre beeing minúsculas. Desde B4A esto es obligatorio!

Haga clic en .

También tenemos que entrar en la Nombre de la etiqueta

Haga clic en .

Estos dos parámetros también pueden cambiarse en el IDE en el menú proyecto. El programa va a ser compilado.

Cuando veas \"Ha completado con éxito.\" por encima del cuadro de mensaje, la compilación y la transferencia es terminado.

(32)

Por supuesto, podríamos hacer estéticas mejoras en el diseño, pero este no era el cuestión principal para el primer programa.

Una desventaja del diseño actual es el

cobertura de la etiqueta de comentario por la virtual teclado.

Esto mejorará en el próximo capítulo 'Segundo programa'.

(33)

3 Segundo programa 33 Basic4Android Guía del principiante

3 Segundo programa (SecondProgram.b4a)

El proyecto está disponible en la carpeta de código fuente: SourceCode\\SecondProgram\\SecondProgram.b4a Mejoras de mi primer programa.

Crear una carpeta nueva SecondProgram. Copiar todos los archivos y carpetas de MyFirstProgram a la Nueva carpeta de SecondProgram y renombrar el programa file MyFirstProgram.b4a a

SecondProgram.b4a.

Cargar este programa nuevo en el IDE. Ejecuta el diseñador y conéctelo a la Emulador.

Agreguemos un teclado numérico para el diseño para evitar el uso del teclado virtual.

Necesitamos cambiar el nombre del paquete. En el menú Proyecto de IDE.

Haga clic en 'Nombre del proyecto'

Cambiar el nombre a

B4A.secondprogram, atención minúsculas!

(34)

Y cambiar la etiqueta de la aplicación.

Haga clic en 'Etiqueta de aplicación' en el mismo menú.

Cambiar el nombre a SecondProgram.

(35)

3 Segundo programa 35 Basic4Android Guía del principiante Queremos sustituir la edtResult EditText vista por una nueva etiqueta.

En el emulador y el diseñador.

Haga clic en la vista edtResult.

Haga clic en

Haga clic en lblNumber1 para seleccionarlo.

(36)

Moverlo entre las etiquetas superiores y la botón y cambiar su tamaño.

Modificar siguiendo los parámetros: Nombre a lblResult

Texto para \"\" en blanco de carácter

Color del texto a negro

Radio de esquina 5

Color a blanco

(37)

Agreguemos un Panel de los botones del teclado.

Posición y cambiar su tamaño como en la imagen.

Cambiar su nombre a pnlKeyboard \"pnl\" para el Panel, el tipo de vista.

(38)

Vamos a pasar el botón K O de la Actividad para el Panel de pnlKeyboard.

Haga clic en

El botón pertenece ahora al Panel

Mover lblComments etiqueta etiqueta cerca lblResult y aumento de la altura del Panel pnlKeyboard como en la imagen.

(39)

Haga clic en el panel de pnlKeyboard para seleccionarlo.

Haga clic en

para agregar un nuevo botón.

Se agrega el botón nuevo.

Cambiar siguiendo los parámetros. Nombre a btn0

Nombre del eventoa btnEvent

Izquierda a 10 Arriba a 120 Ancho a 55 Altura a 55 Etiqueta 0 Texto 0 Tamaño a 24

Ahora queremos cambiar los colores de los botones. Haga clic en StatelistDrawable.

(40)

Cambiar los siguientes parámetros. Orientación a Alto_Bajo Primer Color

Segundo Color

Presiona dibujable a GradientDrawable Orientación a Alto_Bajo

Primer Color Segundo Color

El botón ahora este aspecto.

Duplicar btn0 y colóquelo aparte botón btn0.

Cambiar siguiendo los parámetros. Nombre a btn1

Etiqueta 1

Texto 1

Permítanos agregar 8 botones más y colóquelas como en la imagen.

Cambiar siguiendo los parámetros: Nombre btn2, btn3, btn4 etc. Etiqueta2 , 3 etc. 4 Texto 2 , 3 etc. 4

(41)

3 Segundo programa 41 Basic4Android Guía del principiante Duplicar uno de los botones de número, y colocarlo como en la imagen.

BtnOK de cambio de tamaño y posición. Cambiar el pnlKeyboard Color negro. Cambiar su nombre, etiqueta, texto y Color parámetros siguientes.

(42)

El nuevo diseño terminado.

Ahora actualizamos el código.

En primer lugar, debemos reemplazar la edtResult por lblResult porque hemos reemplazado la vista EditText por una etiqueta.

Haga clic en edtResult para seleccionarlo.

(43)

Haga clic en

Haga clic en y .

También tenemos que cambiar su forma de tipo de vista EditText etiqueta.

Ahora escribimos la rutina, controla los eventos de clic de los botones. El nombre del evento para todos los botones, salvo btnAction, es \"btnEvent\".

El nombre de rutina será convertido en btnEvent_Click, nos Introduzca el siguiente código:

Necesitamos saber qué botón provocó el evento. Para ello, utilizamos el objeto remitente que es especial objeto que contiene la referencia de objeto de la vista que generó el evento en el evento de rutinario.

Para tener acceso a los parámetros de la vista que planteó la evento declaramos una variable local vistaDim enviar como botón. Y conjuntoEnviar = Sender.

Luego a hacer la diferencia entre el botón de retroceso y

el teclado NUMERICO usamos un Select \/ carcasa \/ finalizar Seleccione estructura y uso el parámetro de la etiqueta de los botones. Recuerde,

Cuando agregamos los diferentes botones establecemos su parámetro de etiqueta a BS, 0, 1, 2, etc..

Seleccione Send.Tag establece la variable para probar.

Caso \"BS\" comprueba si es el botón con el valor de la etiqueta de \"BS\".

(44)

3 Segundo programa 44 Basic4Android Guía del principiante Ahora añadimos el código para el teclado NUMERICO.

Queremos agregar el valor del botón al texto en la etiqueta de lblResult.

Esto se hace en línea 75 con

lblResult.Text = lblResult.Text El\"

el botón que provocó el evento.

Ahora añadimos el código para el botón de retroceso.

Al hacer clic en el botón de BS en que debemos eliminar el último carácter del texto existente lblResult.

Sin embargo, esto sólo es válido si la longitud del texto es mayor que 0. Esto se comprueba con: Si lblResult.Text.Length > 0 Then

Para quitar el último carácter utilizamos la función SubString2.

lblResult.Text = lblResult.Text.SubString2 (0,lblResult.Text.Length - 1)

SubString2 (BeginIndex, EndIndex) extrae un nuevo comienzo de la cadena en BeginIndex (inclusive) hasta EndIndex (exclucive).

(45)

3 Segundo programa 45 Basic4Android Guía del principiante Podemos intentar mejorar la interfaz de usuario del programa en agregar algunos colores a la lblComments Etiqueta.

Debemos definir:

-Amarillo para un nuevo problema -Luz verde para una buena respuesta

-Luz roja para una respuesta equivocada.

Permítanos primero modificar la nueva rutina, donde agregamos línea 55.

(46)

3 Segundo programa 46 Basic4Android Guía del principiante Otra mejora sería ocultar el botón '0' para evitar entrar en un líder '0'.

Para ello, podremos ocultar el botón en la subrutina nuevo en línea 57.

Además, en la subrutina btnEvent_Click, podremos ocultar el botón si la longitud del texto en lblResult es igual a cero y mostrarlo si la longitud es mayor que cero, las líneas de 85 a 89.

Cuando nosotros estamos accediendo a btn0 en el código que hay que declararlo en la rutina de Globals. Modificar línea 12 como a continuación:

(47)

4 El IDE 47 Basic4Android Guía del principiante

4 El IDE

El entorno de desarrollo integrado.

Al ejecutar el IDE obtendrá un formulario similar a la siguiente imagen: Ejemplo: SecondProgram.b4a.

(48)

4.1 Menú y barra de herramientas

4.1.1 Toolbar

Genera un nuevo proyecto vacío. Carga un proyecto.

Guarda el proyecto actual.

Copia el texto seleccionado al Portapapeles.

Corta el texto seleccionado y lo copia en el Portapapeles. Pega el texto en el Portapapeles en la posición del cursor. Deshace la última operación.

Rehace la operación anterior.

Activa la función Buscar y reemplazar.

Establece las líneas seleccionadas como comentarios. Uncomments las líneas seleccionadas.

Navegar hacia atrás Navegar hacia delante Agrega un marcador. Elimina un marcador.

Volver al marcador anterior. Avanzar al siguiente marcador. Función de Autocompletar Ctrl + espacio.

Disminuir la sangría de las líneas seleccionadas. Aumentar la sangría de las líneas seleccionadas. Se ejecuta el compilador.

Lista de opciones del compilador y depuración Lista de rutina

(49)

4.1.2 Menú de archivo

Nuevo Genera un nuevo vacío proyecto.

Open Source Carga un proyecto.

Guardar Guarda el proyecto actual. Exportar como Zip exporta todo el proyecto en un archivo zip.

Configuración de páginaConfiguración de las páginas para impresión Imprimir vista previa muestra una vista previa de impresión. Impresión Imprime el código.

Lista de los últimos programas cargados.

4.1.3 Editar menú

Corte Corta el texto seleccionado y lo copia a la Portapapeles.

Línea de corte Cortes de la línea de la posición del cursor. Copia Copia el texto seleccionado al Portapapeles.

Pasta Pega el texto en el Portapapeles en la posición del cursor posición.

Deshacer Deshace la última operación. Rehacer Rehace la operación anterior.

Encontrar Activa la función Buscar y reemplazar.

Comentario en bloque Establece las líneas seleccionadas como comentarios.

Bloque sin comentariosUncomments las líneas seleccionadas.

Eliminar todos los marcadoresMarcadores.

Quitar todos los puntos de interrupciónPuntos de interrupción.

(50)

4.1.4 Menú de proyecto

Agrega un nuevo módulo Añadir un módulo existente Cambia el nombre del módulo Quita el módulo actual Oculta el módulo actual

Propiedades de la actividad, ver abajo. Elige un icono para el programa. Cambia el nombre del paquete. Cambia el nombre de la aplicación. Cambia la versión de la aplicación.

Está activada, el programa se instala en externo almacenamiento de información.

No sobrescribir el archivo de manifiesto Orientaciones compatibles, vea abajo. Editor de manifiesto

Diferentes modos de compilación.

Agregar un nuevo módulo

Módulo de actividad Módulo de código Módulo de servicio

Propiedades de la actividad

El programa puede ser a pantalla completa o no El programa puede incluir la barra de título o no. Orientaciones compatibles

Ambos modos. Retrato sólo. Paisaje sólo.

(51)

4.1.5 Menú de herramientas

Opciones de IDE Vea a continuación

Limpiar la carpeta de archivos (archivos no utilizados)Vea la página siguiente Proyecto limpio Vea la página siguiente Ejecutar el administrador de AVD

Configure Paths

Realizar captura de pantallaVea la página siguiente

Cambiar tamaño de tabulación. Cambiar fuente.,

no se recomienda. Word wrap, ver abajo.

Guardado automático, ver abajo.

Mostrar información sobre herramientas, vea a continuación.

Configurar el tiempo de espera de proceso

Word wrap

Sin ajuste de texto. El final de la línea está oculto.

Con ajuste de texto. El final de la línea se envuelve a la línea siguiente.

Guardado automático

Guarda el programa al ejecutarlo.

Mostrar información sobre herramientas en escribir

Mostrar información sobre herramientas comprobado.

(52)

4 El IDE 52 Basic4Android Guía del principiante Realizar captura de pantalla

El función puede llamarse desde el:

 Menú de herramientas cuando el IDE está en modo de edición  Menú de depuración cuando el IDE está en modo de depuración

Haga clic en

muestra esta ventana.

Haga clic en para realizar la captura de pantalla Foto desde el dispositivo o el emulador.

Puede guardar la imagen con como un archivo PNG.

Y puede cambiar la orientación de la imagen.

.

Limpiar la carpeta de archivos (archivos no utilizados)

Elimina los archivos que se encuentran en la carpeta de archivos pero no son utilizados por el proyecto (no eliminará

cualquier referencia de archivo por cualquiera de los diseños de proyecto). Se mostrará una lista de archivos no utilizados antes de eliminación (y permite cancelar la operación).

(53)

4 El IDE \/ 4.2 Código área 53 Basic4Android Guía del principiante

4.2 Código de área

El código del módulo seleccionado se mostrará en esta área y puede editarse. Los ejemplos siguientes se basan en el código de la SecondProgram.

4.2.1 Deshacer – rehacer

En el IDE es posible deshacer las operaciones anteriores y rehacer operaciones de deshacer. Haga clic en deshacer y para rehacer.

4.2.2 Contraer una subrutina

En el IDE se puede contraer una subrutina para minimizar el número de líneas que se muestran. La rutina de btnAction_Click expandido.

Haga clic en la pequeña plaza de izquierda a Sub para contraer la subrutina.

La rutina de btnAction_Click se derrumbó.

(54)

4.2.3 Contraer una región

En el código puede definir regiones y er estos. Ejemplo:

# Region GPSestablece el principio de una región y Región # end Fin

A continuación, puede agregar las subrutinas entre los dos límites:

A continuación, haga clic en

se derrumba toda la región.

Flotando sobre GPS

(55)

4.2.4 Contraer el código completo

En el menú Edición existen tres funciones:

-Cambiar todo

Se expande el colapsado las rutinas y se derrumba el rutinas extendidas y regiones. -Se expande todos

Se expande el código completo -Contraer todo

Contrae el código entero.

Haga clic en All ER.

El código de todo se derrumbó.

Flotando con el ratón sobre un subrutina muestra todavía la a partir de su contenido.

(56)

4.2.5 Comentando y uncommenting código

Una parte seleccionada del código puede ser establezca líneas de comentario o a la normalidad.

Código original

Seleccione el código. Haga clic en .

Líneas de ajuste como comentarios. Para definir las líneas a la normalidad. Seleccione las líneas y haga clic en .

4.2.6 Marcadores

Puede configurar 'Favoritos' en todas partes en el código y saltar hacia delante y hacia atrás entre estos marcadores.

Para definir un marcador, coloque el cursor en el línea deseada, 12 en este ejemplo.

Haga clic en .

El signo del marcador se muestra en la izquierda margen.

Para eliminar un marcador, coloque el cursor en la línea y haga clic en .

Haga clic en para avanzar al siguiente marcador. Haga clic en para saltar hacia atrás al marcador anterior.

(57)

4.2.7 Sangría

Una buena práctica es usar la sangría de las piezas de código. Por ejemplo para subrutinas, bucles, estructuras, etc..

Este código es difícil de leer porque el estructura del código no es obvia.

Este código es mucho más fácil de leer, la estructura del código es de evidencia.

Un valor de tabulación de 2 para la sangría es un buen valor.

Ejemplo con un sangría de 4

Personalmente, prefiero un valor 2.

(58)

4 El IDE \/ 4.2 Código área 58 Basic4Android Guía del principiante Todo bloques de código pueden aplicarse sangría hacia adelante y hacia atrás a la vez.

Código original

Seleccione el bloque de código. Haga clic en .

Todo el bloque ha movido una tabulación a la derecho.

Para mover un bloque a la izquierda. Seleccione el código y haga clic en .

El valor de la sangría puede cambiarse en el menú Herramientas.

(59)

4.2.8 Autocompletar

Una herramienta muy útil es la función de Autocompletar. Ejemplo:

Déjenos escribir lblN

Pulse Ctrl + espacio o haga clic en .

Todas las variables, opiniones y nombres de parámetro comienzo con las cartas ya escritas son

se muestra en un menú emergente con la ayuda en línea para la variable resaltada, ver o

nombre del parámetro.

Elegir lblNumber1 Presione retorno. Para elegir lblNumber2 Oprima la tecla menos flecha y presione retorno.

Se completa el nombre seleccionado.

Después de presionar \".\" todos los parámetros y métodos son muestra en un menú emergente.

Al seleccionar un elemento, el ayuda interna se muestra Pulsando arriba o abajo las flechas selecciona la anterior o procede con su ayuda.

Presionando un personaje actualiza la lista y muestra la

a partir de parámetros ese carácter.

(60)

Una segunda función de Autocompletar permite crear subrutinas de evento. Ingrese la palabra Sub + un carácter en blanco.

Presiona Tab.

Seleccione el tipo de botón en nuestro ejemplo.

Seleccione el tipo, haga clic en nuestro ejemplo.

Se genera el marco de la subrutina.

Modificar 'EventName' a la EventName del botón, 'bntOK' en nuestro caso.

(61)

4.2.9 Saltar a una subrutina

A veces resulta útil pasar de una llamada de subrutina a la definición de subrutina. Esto puede realizarse fácilmente:

 Seleccione el texto de la llamada de subrutina.

 Haga clic con el botón derecho sobre el texto seleccionado.

 Haga clic en declaración Goto Sub

(62)

4.2.10 Destacando las ocurrencias de palabras

Al seleccionar una palabra, ésta se resalta en azul oscuro y son todas las ocurrencias en el código resaltado en azul claro y en el scrollview del lado derecho.

Con el deslizador puede subir o bajar el código para ir a las otras ocurrencias.

(63)

4.2.11 Depuración

Para permitir la depuración le debe activar la opción de depuración en la parte superior del IDE.

Si se selecciona esta opción el código compilado contendrá código de depuración.

El código de depuración permite el IDE conectar con el programa y revísela mientras se ejecuta.

Cuando se inicia el programa, esperará hasta 10 segundos para el IDE conectar. Generalmente el IDE se conectará inmediatamente. Sin embargo, si ejecuta el programa manualmente desde el teléfono, verá se espera.

El nombre del archivo compilado APK terminará con _DEBUG.apk. Usted no debe distribuir esta apk archivo que contiene el código de depuración que añade una sobrecarga significativa. Para distribuir archivos debe seleccionar la opción de liberación.

Cuando ejecutamos el programa con la opción de depuración, el IDE abrirá el módulo de depurador en la parte inferior de la pantalla:

Notas sobre el depurador:

 Se omitirán los puntos de interrupción en los siguientes subs: Globals, Process_Globals y Activity_Pause.

 Servicios - puntos de interrupción que aparecen después de una llamada a StartService será ignorada. Puntos de interrupción en Service_Create y Service_Start se pone en pausa el programa para un tiempo específico

(aproximadamente 12 segundos). Esto es para evitar el OS desde matando el servicio.

 Eventos que se ejecutará el fuego cuando el programa está en pausa. Puntos de interrupción del código en el evento se omitirá (sólo cuando el programa ya está en pausa).

 Los datos enviados desde el dispositivo al IDE está limitados en tamaño. Cadenas largas pueden truncarse.  Cuando se ejecuta el depurador, el IDE es de sólo lectura. El usuario no puede cambiar cualquiera de los

texto del programa.

Las dos utilidades principales para la depuración son:

Puntos de interrupción - puede marcar líneas de códigos como los puntos de interrupción. Esto se hace pulsando sobre la zona gris izquierda de la línea.

(64)

4 El IDE \/ 4.2 Código área 64 Basic4Android Guía del principiante Registro - la ficha de registros en el panel de la derecha es muy útil. Muestra mensajes relacionados con la

ciclo de vida de componentes y también pueden mostrar los mensajes que se imprimen con la palabra clave de registro. Usted debe pulsar en el botón Conectar para conectarse a los registros del dispositivo. Tenga en cuenta que hay un filtro

casilla de verificación. Cuando se registra sólo verá mensajes relacionados con su programa. Cuando es que verá todos los mensajes que se ejecutan en el sistema. Si le surgen un error y

no veo ningún mensaje relevante en el registro, vale desmarcar la opción de filtro y buscando un mensaje de error.

Tenga en cuenta que el registro es mantenido por el dispositivo. Cuando se conecte a un dispositivo también verá mensajes anteriores.

Para distribuir el proyecto se debe compilar con:  Relase

El código de depurador no se agregará al archivo apk.  Liberación (ofuscado)

El código de depurador no se agregará al archivo apk. Pero el archivo de programa será modificado, ver abajo. Basic4android v1.8 incluye una nueva característica de ofuscación de código.

Durante la compilación Basic4android genera código Java que luego se compila con Java compilador y convertir en Dalvik (formato de código de bytes de Android).

Existen herramientas que permiten la descompilación del código de bytes de Dalvik en código Java.

El propósito de ofuscación es hacer que el código descompilado menos legible, más difícil de entender y hacen más difícil extraer cadenas como desarrollador cuenta claves.

Es importante entender cómo funciona el Ofuscador. El Ofuscador hace dos cosas:

Ofuscación de cadenas

Cualquier cadena escrita en Process_Globals sub (y sólo en este sub) será ofuscado, haciéndola mucho más difícil de extraer claves importantes. Las cadenas son defuscated en tiempo de ejecución.

Tenga en cuenta que varias teclas se utilizan durante la ofuscación, incluyendo el nombre del paquete, el nombre de la versión y Código de versión. Modificar estos valores con el editor de manifiesto se romperá el proceso de defuscation.

Cambiar el nombre de variables

Los nombres de las variables globales y subs se convierten en cadenas sin sentido. Las variables locales no se ven afectados, como sus nombres se pierden de todas formas durante la compilación.

No se cambia el nombre de los siguientes identificadores:

-Identificadores que contienen un carácter de subrayado (requiere para los controladores de eventos).

-Subs que aparecen en las declaraciones de CallSub. Sólo si el nombre de sub aparece como una cadena estática y luego la identificador se mantendrá como está.

-Nombres diseñador de vistas.

Consejo: Si, por alguna razón, necesita evitar el Ofuscador para cambiar el nombre de un identificador debe agregar un guión bajo en el nombre del identificador.

Se creará un archivo llamado ObfuscatorMap.txt en la carpeta de objetos. Este archivo asigna el

originales nombres de identificadores para los nombres ofuscados. Esta asignación puede ser útil para analizar accidente informes.

Activar el Ofuscador

(65)

4.2.12 Puntos de interrupción

Haciendo clic en una línea en el margen izquierdo, agrega un punto de interrupción. Cuando se ejecuta el programa se detenga en la primer punto de interrupción.

Ejecutar el programa, el programa se detiene en el punto de interrupción y el IDE se parece a continuación. El punto de interrupción línea es resaltada en amarillo.

En la parte inferior del IDE encontrará otra información.

Depurador está conectado.

Haga doble clic para soltar el Debuger. Nombre de la rutina donde se detuvo el programa. Nueva rutina en línea 52.

Llamar a la rutina de la rutina de nueva. Rutina de Activity_Create en la línea 24.

(66)

Continuar con la ejecución de códigoequivalente a F5.

Continúa la ejecución hasta el final o el siguiente punto de quiebre. Paso a la siguiente línea equivalente a F8.

Continúa la ejecución a la línea siguiente, muy interesante durante la depuración para ver la flujo del programa real y la evolución de los valores de las variables.

Pausa el código tan pronto como sea posible.

Detener el programa actual equivalente a F11. También detiene el programa en el emulador.

Detener el programa en el emulador no termina en el IDE!

Variables globales. Lista de la global objetos y variables utilizado por el programa con sus valores y parámetros.

Ejemplos:

btnAction: tipo = botón izquierdo = Top 190 = 0 Width = altura 115 = 55 Tag = texto vacío = OK Número1 = 6

Variables locales. Ninguno en este ejemplo.

Flotando con el ratón sobre una variable muestra su valor.

(67)

4 El IDE \/ 4.2 Código área 67 Basic4Android Guía del principiante Debemos ejecutar el programa paso a paso:

Establecer un punto de interrupción en la línea de 50. Haga clic en para ejecutar el programa o presione F5. El programa se detendrá en la línea de 50.

Los valores de los dos números en el Ventana de variables globales,

ha sido reducido para mostrar sólo los dos números.

Haga clic en F8.

El programa ejecuta la siguiente línea de código.

Ha cambiado el valor de Número1!

Haga clic en F8.

El programa ejecuta la siguiente línea de código.

(68)

4 El IDE \/ 4.3 fichas 68 Basic4Android Guía del principiante

4.3 Fichas

Hay 4 fichas en la parte inferior derecha del IDE que mostrar la siguiente información.

4.3.1 Módulo de y subrutina listas

Todos los módulos del proyecto y todas las subrutinas del módulo seleccionado aparecen en dos listas en el derecho del IDE.

Lista de módulos

Al hacer clic en un módulo muestra su código en el área de código.

Lista de subrutina del módulo seleccionado

Al hacer clic en una subrutina muestra su código en medio de el área de código.

(69)

4.3.2 Archivos

Esta ventana muestra todos los archivos que se han agregado al proyecto. Estos archivos se guardan en la carpeta Files.DirAssets.

Estos pueden ser cualquier tipo de archivos: diseños, imágenes, textos, etc..

Haga clic en para agregar archivos a la lista. Se accede a los archivos de esa carpeta con

File.DirAssets.

En el IDE, en la esquina inferior derecha.

Verificación de uno o más archivos permite la

botón.

Al hacer clic en este botón elimina los archivos seleccionados de la lista de la carpeta de archivos del proyecto.

Asegúrese de tener una copia de los archivos que quitar, porque ellos se quitan los archivos

carpeta, pero no se transfieren a la papelera de reciclaje, que significa que son definitivamente perdidos si no tener una copia.

(70)

4.3.3 Registros

Visualización de comentarios de registro generado por el programa cuando se está ejecutando. Añadimos las dos líneas 51 y 53 en el programa 'SecondProgram' en la rutina del 'Nuevo'.

Ejecute el programa.

Haga clic en para conectar el registrador.

En la ventana vemos el flujo de la programa.

Crear actividad (principal), isFirst = true Primero mensaje de registro

Segundo mensaje de registro

Reanudación de la actividad (principal)

Cuando se activa el filtro sólo verá mensajes relacionados con su programa. Cuando se no está marcada, verá todos los mensajes que se ejecutan en el sistema. Si le surgen un error

y no ve ningún mensaje relevante en el registro, merece la pena desmarcar la opción de filtro y mirando para un mensaje de error

Haga clic en limpiar la ventana de registros.

Si todavía se está ejecutando el depurador, seleccione depuración > Stop en el menú IDE, presione F11 o haga clic en por lo que se puede editar el código.

(71)

4.3.4 Libs

Lista de las bibliotecas disponibles que se pueden utilizar en el proyecto. Compruebe las bibliotecas que usted necesita para su proyecto.

Asegúrese de que tiene la última versión de las bibliotecas.

La documentación de las bibliotecas puede encontrarse aquí: Basic4android - Android programación con el diseñador de Gui

(72)

5 Tamaños de pantalla y resoluciones 72 Basic4Android Guía del principiante

5 Tamaños de pantalla y resoluciones

Existen muchos tamaños de pantalla diferentes con diferentes resoluciones y densidades de pixel. Debemos hacer la diferencia entre los siguientes parámetros.

-Tamaño de pantalla física Ex: 3,6 '' diagonal -Resolución en píxeles Ex: 320 \/ 480 -Píxeles densidad por pulgada Ex: 160

La pantalla estándar es 320 \/ 480 píxeles, densidad 160 píxeles\/pulgada.

Existen otras pantallas con casi el mismo tamaño físico, pero con una mayor resolución para ejemplo 480 \/ 640 píxeles con una densidad de 240 píxeles\/pulgada.

Tabletas tienen mayor tamaño físico pero pueden tener una densidad similar a la pantalla estándar. Ejemplo: 7.2 '' pantalla diagonal, 640 \/ 960 píxeles y una densidad de 160 píxeles\/pulgada.

Una lista no exhaustiva de las pantallas:

Diagonal Resolución Densidad Escala W \/ H Ratio

3.6 320 \/ 480 160 1 3 \/ 2 3.6 480 \/ 720 240 1.5 3 \/ 2 3.9 480 \/ 800 240 1.5 5 \/ 3 3.6 240 \/ 320 120 0.75 4 \/ 3 7.2 640 \/ 960 160 1 3 \/ 2 10 720 \/ 1280 160 1 16 \/ 9

Comparemos las siguientes resoluciones:

1) 320 \/ 480 \/ 160 pantalla ~3.5'' densidad estándar 160 2) 480 \/ 800 \/ 240 pantalla ~3.5'' densidad 240

3) 640 \/ 960 \/ 320 pantalla ~3.5'' densidad 320

4) 640 \/ 960 \/ 160 ~ 7'' pantalla densidad estándar 160

En los casos 1) 2) y 3) el tamaño físico de las pantallas es iguales pero la densidad de los píxeles es diferentes.

En los casos 1) y 4) las densidades son los mismos pero las dimensiones físicas de la pantalla en el caso 4) son el doble de los de la pantalla en el caso 1) dando así una superficie cuatro veces mayor.

Veamos ahora el tamaño de un botón con 80 \/ 80 dip, su tamaño físico.

dips píxeles pulgadas

1) 80 80 0.5

2) 80 120 0.5

2) -- 80 0,375 dimensión en píxeles no en dips

3) 80 160 0.5

3) -- 80 0.25 dimensión en píxeles no en dips

4) 80 80 0.5

DIP = píxel de densidad independiente

(73)

5 Tamaños de pantalla y resoluciones 73 Basic4Android Guía del principiante Un mismo archivo de diseño puede encajar en diferentes resoluciones de pantalla, pero con algunas restricciones. Utilizaremos el programa TestLayouts para probar el mismo diseño con diferentes resoluciones de pantalla. El código fuente se encuentra en el directorio de \\SourceCode\\TestLayouts de <Guide>.

Las diferentes resoluciones son: Pantalla

resolución Densidad H \/ W ratio Altura de Eqivalentpíxeles Píxel diff.

240 \/ 320 120 4 \/ 3 360 -40

320 \/ 480 160 3 \/ 2 480 0

480 \/ 800 240 5 \/ 3 720 + 80

La resolución de referencia es de 320 \/ 480 con una densidad de 160.

Si calculamos, para las otras dos resoluciones, la altura equivalente utilizando la misma proporción de H\/W obtenemos la altura equivalente en píxeles y la diferencia en píxeles.

Esto significa que con el mismo archivo de diseño para todas las tres resoluciones habrá 40 píxeles que faltan con la resolución 240\/320 y 80 píxeles adicionales con la resolución de 480\/800.

El diseño original de la densidad estándar de 320\/480 píxeles 160 Emulador es el siguiente.

Para realizar las pruebas necesitamos tres emuladores: -320 \/ 480 densidad 160

-240 \/ 320 densidad 120 -480 \/ 800 densidad 240

Si no tienes estos emuladores, debe crear en la AVD Manager. Busque aquí para generar un emulador.

Y el código es:

(74)

5 Tamaños de pantalla y resoluciones 74 Basic4Android Guía del principiante Pruebas con los tres emuladores con diferentes resoluciones y diferentes densidades.

480 \/ 800 240 320 \/ 160 480 240 \/ 120 320

Los tamaños de imagen son reducidos por un factor de 0,5 para fácil comparación. Lo que vemos:

- con la resolución estándar, la imagen en el emulador es igual al diseño original. - con la resolución 240\/320 vemos que hay los 'esperados' 40 píxeles que faltan. - con la resolución de 480\/800, vemos que hay el píxel extra 80 'esperado'. Los números de los elementos de ListView son las mismas para todos los tres resoluciones.

(75)

5 Tamaños de pantalla y resoluciones 75 Basic4Android Guía del principiante Segunda prueba con líneas 23 y 24 activado.

En la línea 23 calculamos la parte superior del panel pnlToolBox según la altura de la pantalla. En línea 24 calculamos la altura de ListView según la parte superior de la pnlToolBox.

Lo que vemos:

- con la resolución estándar, la imagen en el emulador es todavía igual al diseño original. - con la resolución 240\/320, vemos que los botones están en la parte inferior de la pantalla, pero la

Altura de ListView se acorta.

- con la resolución de 480\/800 vemos que los botones están en la parte inferior y ListView mayor.

Los números de los elementos de ListView son diferente en los tres diseños porque la altura de ListView se ha adaptado a la altura de la pantalla relativa diferente.

En la primera prueba, el número de elementos en el control ListView eran iguales!

Estos ejemplos muestran que no es fácil tener un diseño para diferentes resoluciones de pantalla. En el ejemplo anterior era relativamente fácil porque la vista en el medio es fácilmente ajustable.

(76)

5 Tamaños de pantalla y resoluciones 76 Basic4Android Guía del principiante Incluso cuando carga el archivo de diseño en los emuladores de tres resoluciones de 480 \/ 800, 320 \/ 480 y 240 \/ 320 píxeles el diseño está estirada o reducido según el tamaño de la pantalla, pero vemos naturalmente también los extras y faltantes píxeles dependiendo de la altura de la pantalla relativa diferente.

El sistema de Android OS autoscale ajusta la izquierda, arriba, anchura, altura, FontSize y otros

los parámetros con la escala de factor, pero no cambia de tamaño las posiciones verticales ni las alturas de la vistas proporcionales a la altura de la pantalla. Lo mismo es válido para el ancho en el modo paisaje.

(77)

5.1 Funciones especiales como 50% x, 50dip

Hay funciones especiales para accomode diferentes tamaños de pantalla y resolución.

5.1.1 PerXToCurrent, PerYToCurrent - 50% x

PerXToCurrent (porcentaje como Float) o 50% x

PerXToCurrent(50)significa el 50% del ancho de la actividad. Puede escribirse como un acceso directo: 50% x.

50% x es igual a Activity.Width * 0.5

PerYToCurrent(30)significa el 30% de la altura de la actividad. Puede escribirse como un acceso directo: 30% y.

30% y es igual a Activity.Height * 0,3

5.1.2 DipToCurrent - 50dip

DipToCurrent (longitud como Int) o 50dip

DipToCurrent calcula una dimensión con la longitud dada según la escala de la actual dispositivo.

DipToCurrent(50) es igual a 50 * DeviceScale

Puede escribirse como un acceso directo: 50dip píxeles independientes de densidad La resolución 'estándar' es 160 dpi (puntos por pulgada) y escala 1.

Sin espacios entre el número y dip!

Si tenemos un botón con una dimensión de escala estándar de 50 * 50 píxeles, para definir sus dimensiones nos debe set Button1.Width = 50dip y Button1.Height = 50dip.

Dependiendo de la escala, la dimensión del botón será: Escala Píxeles

1 50 * 50

1.5 75 * 75

Ejemplo:

Dim Button1 As botón

Button1.Initialize(\"Button1\")

Activity.AddView (Button1, 20% x, 30% y, 100dip, 50dip)

Los valores de las propiedades en el diseñador de izquierda, superior, ancho y altura son considerados como valores de la DIP.

(78)

5.2 Trabajar con diferentes tamaños de pantalla \/ número de diseños

Con el gran número de dispositivos, con diferentes tamaños de pantalla y resoluciones, disponibles en el mercado resulta más complicado diseñar un proyecto que se ve bonito en todos los dispositivos disponibles. No hay ninguna regla universal para manejar este problema, depende de:

 ¿Qué tipo de proyecto está diseñando.

 ¿Qué dispositivos y la pantalla le tamaños son certero.  Lo que desea mostrar en las pantallas diferentes.

 Un mismo diseño pero estirada según los tamaños de pantalla.

 Variantes de diseño diferente para los diferentes tamaños, en una pantalla grande que pueden ser más vistas muestra al mismo tiempo.

Resumen de los tamaños de pantalla físico diferente, cada tamaño puede tener diferentes resoluciones, densidades escalas y proporciones.

resolución escala de densidad relación de aspecto  ~ 3.0'' - 4.0 ''  320 \/ 240 120 0.75 4 \/ 3 1,333  480 \/ 320 160 1 3 \/ 2 1.5  640 \/ 480 240 1.5 4 \/ 3 1,333  800 \/ 480 240 1.5 5 \/ 3 1.667  854 \/ 480 240 1.5 16 \/ 9 1,78  960 \/ 540 240 1.5 16 \/ 9 1,78  960 \/ 640 240 1.5 3 \/ 2 1.5  1280 \/ 720 320 2 16 \/ 9 1,78  ~ 5.5 ''  1280 \/ 800 240 1.5 8 \/ 5 1.6  ~ 7 ''  1024 \/ 600 160 1 1.71  1280 \/ 800 160 1 8 \/ 5 1.6  ~ 10 ''  1024 \/ 600 160 1 1.71  1024 \/ 768 160 1 4 \/ 3 1,333  1280 \/ 800 160 1 8 \/ 5 1.6

Dependiendo de lo que desea que aparezca en las pantallas diferentes puede:  Diseño de variantes de diseño diferente.

Dos diseño variantes (vertical y horizontal) para cada dimensión. Las vistas se redimensionan automáticamente para las diferentes densidades.

Sin embargo podría necesita tener en las proporciones de diferente anchura y altura de cuenta (proporciones), Este ajuste puede hacerse en el código o necesitaría dos variantes de diseño más.

 Calcular todas las dimensiones de vista y posiciones en el código mediante%x,%yy DIPdimensiones. Para la comparación:

 Una pantalla 5.5'' tiene una superficie de aproximadamente 2,5 veces más grande que una pantalla de 3,5 ''.  Una pantalla de 7'' tiene una superficie de aproximadamente 4 veces más grande que una pantalla de 3,5 ''.  Una pantalla de 10'' tiene una superficie de aproximadamente 9 veces más grande que una pantalla de 3,5 ''.

(79)

Los ejemplos siguientes muestran un mismo desplegado de diseño en el código para ajustar los tamaños de pantalla diferentes. El código fuente es OneLayoutStreched, las imágenes son imágenes de emulador.

~3.5'' 240 \/ 320 ~3.5'' 320 \/ 480 ~3.5'' 480 \/ 800 ~5.5'' 800 \/ 1280 \/ 240

7 '' 800 \/ 1280 \/ 160 10 '' 800 \/ 1280 \/ 160

Probablemente no es la mejor solución para tener el mismo desplegado de diseño para todos los tamaños de pantalla. Podría ser más interesante mostrar más vistas en las pantallas más grandes.

(80)

5 Tamaños de pantalla y resoluciones 80 Basic4Android Guía del principiante Código para comprobar el tipo de dispositivo:

Sub CheckDeviceType

' comprobar el tipo de dispositivo utilizado para definir tamaños de texto ' debe completarse si es necesario

LV = GetDeviceLayoutValues Seleccione lv.Escala Caso 2 DeviceType = \"Smartphone 5\" TextSizeRatio = 1.5 Caso 1.5 Si lv.Ancho > 1100 entonces DeviceType = \"Tableta de 7\" TextSizeRatio = 2 Else DeviceType = \"Smartphone 3.5\" TextSizeRatio = 1 End If Caso 1 Si lv.Ancho > 1100 entonces DeviceType = \"Tablet 10\" TextSizeRatio = 3

Else If lv.Ancho < 600 entonces DeviceType = \"Smartphone 3.5\" Else DeviceType = \"Tableta de 7\" TextSizeRatio = 2 End If End Select End Sub

Parte del código para establecer las dimensiones de la vista.

ArgumentException: The incoming token has expired. Get a new access token from the Authorization Server. : ID=3644.V2_Json.Translate.155FA203 ArgumentException: The incoming token has expired. Get a new access token from the Authorization Server. : ID=3741.V2_Json.Translate.13957562 Si Activity.Width > Activity.Height entonces

WB = 100% y \/ 4 pnlToolbox.Left = 100% x - wb pnlToolbox.Width = wb pnlToolbox.Height = 100% y pnlToolbox.Top = 0 btnTest1.Left = 0 btnTest1.Width = wb btnTest1.Top = 0 btnTest1.Height = wb . lblTitle.Left = 10% x lblTitle.Width = 80% x - wb lblTitle.Top = 0 lblTitle.Height = 100% y \/ 8 lstTest.Left = 5% x lstTest.Width = 90% x - wb lstTest.Top = lblTitle.Height lstTest.Height = 100% y - lstTest.Top lstTest.TwoLinesLayout.Label.Height = 12% y lstTest.TwoLinesLayout.Label.Top = 0 lstTest.TwoLinesLayout.SecondLabel.Height = 10% y

(81)

1.2 Instalación de emulador Android 81 Basic4Android Guía del principiante lstTest.TwoLinesLayout.SecondLabel.Top = 12% x lstTest.TwoLinesLayout.ItemHeight = 24% y Else WB = 100% x \/ 4 pnlToolbox.Left = 0 pnlToolbox.Width = 100% x pnlToolbox.Height = wb pnlToolbox.Top = 100% y - wb btnTest1.Left = 0 btnTest1.Width = wb btnTest1.Top = 0 btnTest1.Height = wb . lblTitle.Left = 10% x lblTitle.Width = 80% x lblTitle.Top = 0 lblTitle.Height = 100% x \/ 8 lstTest.Left = 5% x lstTest.Width = 90% x lstTest.Top = lblTitle.Height

lstTest.Height = pnlToolbox.Top - lstTest.Top lstTest.TwoLinesLayout.Label.Height = 12% x lstTest.TwoLinesLayout.Label.Top = 0 lstTest.TwoLinesLayout.SecondLabel.Height = 10% x lstTest.TwoLinesLayout.SecondLabel.Top = 12% x lstTest.TwoLinesLayout.ItemHeight = 22% x End If btnTest1.Text = \"Prueba 1\" btnTest1.TextSize = 16 * TextSizeRatio btnTest2.Text = \"Prueba 2\" btnTest2.TextSize = 16 * TextSizeRatio btnTest3.Text = \"Prueba 3\" btnTest3.TextSize = 16 * TextSizeRatio btnTest4.Text = \"Prueba 4\" btnTest4.TextSize = 16 * TextSizeRatio lblTitle.Text = \"Prueba de diseño\"

lblTitle.TextSize = 20 * TextSizeRatio lstTest.TwoLinesLayout.Label.TextSize = 20 * TextSizeRatio lstTest.TwoLinesLayout.Label.Gravity = Gravity.CENTER_VERTICAL lstTest.TwoLinesLayout.Label.Color = Colors.Blue lstTest.TwoLinesLayout.SecondLabel.TextSize = 16 * TextSizeRatio lstTest.TwoLinesLayout.SecondLabel.Gravity = Gravity.CENTER_VERTICAL lstTest.TwoLinesLayout.SecondLabel.Color = Colors.Green End Sub