Home

Tutorial

1. Chapter 1 Introducci n Bienvenido a Xojo el modo m s sencillo de crear aplicaciones multiplataforma y web Section 1 Bienvenido COMENZAR CON XOJO 1 Descarga el instalador para tu sistema operativo desde http www xojo com downloads 2 Ejecuta el instalador 3 Ejecuta Xojo 4 En el Selector de Proyecto elige Escritorio y haz clic en OK Este Tutorial es para las personas que empiecen a programar y tengan su primer contacto con Xojo Es una introducci n al entorno de desarrollo de escritorio Xojo y te guiar a lo largo del desarrollo de una aplicaci n de escritorio Completar este tutorial deber a de tomarte en torno a una hora Nota si tienes experiencia con otros lenguajes de programaci n tambi n querr s leer la Gu a del Usuario y la Referencia del Lenguaje Section 2 Convenciones de Presentaci n El Tutorial utiliza capturas de pantalla obtenidas de las versiones de Windows OS X y Linux de Xojo El dise o de la interfaz y el conjunto de caracter sticas es id ntico para todas las plataformas de modo que las diferencias son solamente cosm ticas y tienen que ver con las diferencias intr nsecas entre las interfaces gr ficas de Windows OS X y Linux Negrita Se utiliza para destacar la primera vez que se utiliza un t rmino y para resaltar conceptos importantes Adicionalmente los t tulos de libros como Gu a de usuario Xojo se indican en cursiva Cuando se indique que elija
2. por tanto selecciona el manejador de Figure 3 1 The Action evento Action y haz clic en Event Handler for ShowButton OK Action Observa que el Navegador se actualiza para mostrar el evento Action bajo el control ShowButton y aparece el Editor de C digo El comando para abrir un URL en el navegador por defecto del usuario es ShowURL Para probar este bot n hazlo para que abra la misma p gina cada vez ShowURL http www xojo com ShowURL es un m todo global porque no est asociado a 21 ning n objeto en concreto Puede ser llamado desde cualquier lugar de la aplicaci n Ejecuta la app y haz clic en el bot n Show Deber a de abrirse tu navegador web por defecto para mostrar la p gina inicial de Xojo Esto no resulta muy til de modo que a continuaci n has de modificar el c digo para que utilice el URL que ha introducido el usuario en el campo URL Sal de la aplicaci n para volver a la ventana de edici n selecciona Archivo gt Salir en Windows o Linux o URLManager debug gt Salir en OS X Vuelve al Editor de c digo para el evento Action de ShowButton y elimina el c digo a adido previamente Ahora necesitas obtener el URL escrito en el campo URL Puedes pensar que puedes obtener el URL con s lo referirte al campo URLHField Casi pero no es lo que quieres hacer Lo que necesitas en realidad es una propiedad del URLField Cuando debes de referirte a una propiedade de un objeto utili
3. 1 En el campo Name situado en el grupo ID cambia el nombre de Listbox1 a URLList Pulsa Retorno para ver el cambio del nombre en el Navegador 2 Ahora necesitas hacer Figura 2 8 Anclaje para cambios en el anclaje de UBLList modo que el Listbox sea non m s grande o peque o a medida que var e el tama o de la ventana En el grupo Locking observa la imagen que muestra una ventana con peque os iconos de candados cerrados en los m rgenes izquierdo y superior y abiertos en 15 Section 7 Propiedades Botones Los tres botones de la Ventana se utilizan para realizar acciones Debes cambiar las siguientes propiedades en cada bot n Name Caption and Locking Bot n Delete El bot n Delete se utiliza para eliminar los URL de la URLList 1 En primer lugar en el Editor de Dise o haz clic en el bot n Delete para seleccionarlo este es el bot n situado justo bajo el Listbox El Inspector muestra ahora las propiedades del PushButton 2 En el campo Name del Inspector situado en el grupo ID cambia el nombre de PushButton1 a DeleteButton Pulsa Retorno para ver el cambio del nombre en el Navegador 3 En el campo Caption situado en el grupo Appearance cambia el nombre de Button a Delete Pulsa Retorno para ver el cambio de nombre del bot n en la ventana 4 Ahora tendr s que cambiar el anclaje de modo que el bot n Delete permanezca sobre el margen d
4. derecho Haz clic sobre los candados para que est n cerrados los situados en los m rgenes izquierdo e inferior y abiertos los situados en los m rgenes superior y derecho En el campo Caption situado en En el Editor de Dise o haz clic en el bot n Show para seleccionarlo este es el bot n situado directamente bajo el TextField en la derecha El Inspector muestra ahora las propiedades del PushbButton En el campo Name situado en el grupo ID cambia el nombre de PushButton3 a ShowButton Pulsa Retorno para ver el cambio del nombre en el Navegador Figura 2 11 Anclaje para ShowButton el grupo Appearance cambia el nombre de OK a Show Pulsa Retorno para ver el cambio del nombre del bot n en la ventana Ahora necesitas cambiar el anclaje de modo que el bot n Complete permanezca en el margen derecho cuando var e el tama o de la ventana En el grupo Locking observa la Imagen que muestra una ventana con peque os iconos de candados cerrados en los m rgenes superior e izquierdo y abiertos en los m rgenes Bot n Show inferior y derecho El bot n Show se utiliza para abrir el navegador web y mostrar el Haz clic en los candados de modo que est n cerrados el URL que est en el TextField inferior y el derecho y abiertos el superior y el izquierdo 17 Section 8 Propiedades de Text Field El Text Field es donde tu usuario escribir los URL para a adir al ventana con
5. listado para eliminarla de dicho control Sigue estos pasos para a adir el c digo 1 En la ventana haz doble clic en el control DeleteButton etiquetado Delete Aparecer la ventana Add Event Handler Tal y como has aprendido con los otros botones querr s utilizar el manejador de evento Action para que tu c digo se ejecute cuando el usuario haga clic en el bot n Selecciona Action en el listado Event Handler y haz clic en OK Observa que el Navegador se actualiza para mostrar el evento Action bajo el control DeleteButton y muestra el editor de c digo Para eliminar una fila del Listbox primero has de determinar qu fila si procede est seleccionada En un Listbox la fila actualmente seleccionada est contenida en la propiedad Listindex Utiliza el m todo RemoveRow del Listbox para eliminar una fila del ListBox Debes pasar a RemoveRow como par metro el n mero de la fila que se ha de eliminar El c digo ser as URLList RemoveRow URLList ListIndex Guarda el proyecto seleccionando Archivo gt Guardar Ejecuta la app para probarla Escribe los URL en el campo de URL y haz clic en el bot n Add para a adirlo a listado Ahora haz clic en un URL y haz clic sobre el bot n Delete El URL es eliminado de la lista Pero hay un bug en tu aplicaci n Qu ocurre si alguien hace clic sobre el bot n Delete pero no hay ninguna fila seleccionada en el listado Pru balo Tu aplicaci n
6. peque os iconos cerrados en los m rgenes listado Tambi n es donde se muestran los URL cuando se han izquierdo y superior y abiertos en los m rgenes inferior y seleccionado en el listado Necesitas cambiar las siguientes derecho propiedades Name y Locking Haz clic sobre los candados de modo que est n cerrados el izquierdo y el derecho y abiertos el superior y el inferior 1 En primer lugar en el Editor de Dise o haz clic en el Text Field para seleccionarlo El Inspector muestra ahora las propiedades para el TextField 2 En el campo Name situado en el grupo ID cambia el nombre de TextField1 a URLField Pulsa Retorno para ver el cambio del nombre en el Navegador 3 Ahora necesitar s hacer cambios en el anclaje de Figure 2 1 Locking for modo que el TextField URLFiela aumente su tama o o lo gt reduzca en funci n del cambio de tama o de la ventana En el grupo Locking observa la imagen que muestra la 18 Section 9 Probando el Proyecto Guardando tu Proyecto Debes guardar tu trabajo de forma peri dica y siempre antes de ejecutar tu proyecto 1 Guarda el proyecto seleccionando Archivo gt Guardar 2 Nombra el proyecto QuickStartDesktop y haz clic en Guardar Ejecutar el Proyecto Ahora puedes probar la aplicaci n finalizada El dise o de tu interfaz de usuario est completo ahora de modo que es hora de probarlo Haz clic en el bot n Ejecutar en la barr
7. a de herramientas para ejecutar el proyecto Cuando aparezca URL Manager puedes interactuar con los botones haciendo clic sobre ellos puedes escribir en el TextField y cambiar el tama o de la ventana para ver como los botones se reposicionan autom ticamente Pero URL Manager no hace nada todav a Para ello has de a adir algo de c digo y que es el asunto del pr ximo cap tulo Figura 2 12 Dise o de Ventana completado de URL Manager 19 Chapter 3 A adir C digo El paso final en la creaci n de URL Manager consiste en a adir c digo Section 1 Bot n Show A adir C digo al Bot n Show El primer control a actualizar es el bot n Show Cuando el usuario hace clic sobre este bot n deber a de abrirse el navegador por defecto del usuario para mostrar el URL que se ve en el campo URL Sigue estos pasos para a adir el c digo 1 En la ventana haz doble clic en el control ShowButton Etiquetado Show Figura 3 1 Di logo para A adir Event Handler Action Description Close ConstructContextualMenu ContextualMenuAction DragEnter DragExit DragOver DropObject GotFocus KeyDown KeyUp LostFocus MouseDown MouseEnter MouseExit n MouseMove Cancel OK Aparece el di logo Add Event Handler Cuando el usuario hace clic en un PushButton se ejecuta el c digo de su manejador de evento Action Esto significa que querr s a adir tu c digo al manejador de evento Action
8. a vez que hayas seleccionado las plataformas que quieras y hayas definido los ajustes de compilaci n estar s listo para compilar la aplicaci n Para ello haz clic en el bot n Compilar en la barra de herramientas o selecciona Proyecto gt Compilar Aplicaci n en el men de Aplicaci n Xojo crear una aplicaci n aut noma para cada una de las plataformas seleccionadas Probar la Aplicaci n Compilada En la carpeta que contiene tu proyecto ver s ahora una carpeta denominada Builds TutorialDesktop rbp y dentro de esta carpeta estar n carpetas para las compilaciones de cada una de las plataformas Navega por la compilaci n de tu actual plataforma y haz doble clic sobre el archivo para ejecutarlo 35 Section 4 iListo Enhorabuena Has completado con xito el Tutorial de Escritorio y ahora tienes una aplicaci n completamente funcional Para continuar tu viaje en el aprendizaje de Xojo deber as de seguir con la Gu a del Usuario donde se cubre Xojo por completo Tambi n querr s consultar la Referencia del Lenguaje y que cubre los detalles de los elementos del lenguaje las clases y otros detalles de Xojo 36
9. adir los Botones En la Librer a haz clic sobre el control de bot n gen rico y Ahora a adir s el bot n Delete a la ventana El bot n de borrar arr stralo sobre la ventana cerca de la esquina interior se utilizar para eliminar los URL del ListBox derecha 1 A ade el Bot n Delete 4 Tu ventana se ver as En la Librer a haz clic sobre el control de bot n gen rico situado en el grupo Buttons y arr stralo sobre la ventana Figura 2 2 Dise o de Ventana con Botones bajo la esquina inferior derecha del ListBox Utiliza los indicadores de alineaci n para situar el bot n de modo que se alinee con el margen derecho del ListBox 2 A adir el Bot n Add En la Librer a haz clic sobre el control de bot n gen rico y arr stralo cerca de la esquina inferior izquierda Utiliza los indicadores de alineaci n para situar del bot n 3 A ade el Bot n Show 11 Section 3 Text Field A ade el Campo del URL El campo URL es donde el usuario escribe el URL que se a adir al listado Figura 2 3 Dise o de Ventana con Text Field 1 En la Librer a haz clic sobre el TextField y arr stralo sobre la ventana de modo que est entre los botones Delete y Add 2 Cambia el tama o del campo URL Selecciona el manejador de tama o situado m s a la derecha y arrastra el TextField de modo que tenga la misma anchura que el ListBox Utiliza los indicadores de alineaci n como gu as para ayudarte a alinear todo
10. correctamente 3 Tu ventana deber a de tener este aspecto 12 Section 4 Propiedades Qu es una Propiedad Una propiedad es un valor de una clase como por ejemplo un control o una Ventana Cambiando los valores de las propiedades se cambia el comportamiento de la clase Para este proyecto querr s cambiar varias propiedades para la ventana y sus controles Algunas de las cosas que has de hacer son e Cambia el nombre de todos los controles y de la ventana de modo que describa su comportamiento y resulte f cil de referenciar desde el c digo e A ade un texto Caption a los Botones e Define las propiedades de anclaje Locking para que los controles var en su tama o correctamente cuando lo haga la ventana Inspector El Inspector se utiliza para cambiar las Figura 2 4 Propiedades de Ventana en el Inspector Name Windowl sp Scope Oo Interfaces Behavior placement Visible GN Full Screen Live Resize Implicit Instance MTV gt Width 600 Height 400 Width 64 Height 64 Width 32000 Height 32000 Frame Type Title Untitled Close Button MT gt Resizeable MTV gt Maximize Button Minimize Button MT propiedades de la ventana y de los controles Comparte la misma rea en la derecha de la ventana principal que la Librer a Para acceder al Inspector haz clic sobre el bot n Inspector en la barra de herramientas Puedes cambiar entre la Librer a y el Inspector u
11. de las funciones para prop sitos de depuraci n 33 OS X Los ajustes de compilaci n OS X te permiten indicar el nombre de la aplicaci n Mac la arquitectura Carbon o Cocoa el C digo de Creador los Tipos de Archivo y el Identificador de Bundle Figura 4 3 Ajustes de Compilaci n OS X Mac App Name URLManager 4 Architecture Cocoa Creator Code Multiple Accept File Types Choose Bundle Identifier com mycompany urlmanager Windows Los Ajustes de Compilaci n para Windows te permiten definir el nombre de la aplicaci n para Windows los nombres de la Compa a Producto y el Nombre Interno y que aparece en el archivo de propiedades para la aplicaci n si est s usando MDI Multiple Document Interface y en tal caso cu l es el t tulo Por ltimo puedes activar GDI Plus Interfaz de Dispositivo Gr fico mejorado Figura 4 4 Ajustes de Compilaci n Windows ID Windows App Name URLManager exe Company Name My Company Product Name Multiple Internal Name Multiple MDI OFF MDI Caption Multiple Use GDI Plus i OFF 34 Linux Los ajustes de Compilaci n Linux s lo te permiten cambiar el nombre de la aplicaci n para Linux Este Ordenador La secci n Este Ordenador muestra los ajustes de compilaci n para la plataforma que est s utilizando actualmente Por ejemplo si est s usando OS X entonces Este Ordenador mostrar los ajustes de compilaci n OS X Compilar tu Aplicaci n Un
12. erecho de la ventana cuando esta modifique su tama o En el grupo Locking observa la Figura 2 9 Anclaje Imagen que muestra la ventana para el DeleteButton con los peque os iconos de unos candados cerrados para los m rgenes superior e Izquierdo y abiertos en los m rgenes inferior y derecho Haz clic en los candados de modo que est n cerrados el derecho y el inferior y abiertos el Izquierdo y el superior Bot n Add El bot n Add se utiliza para a adir el URL introducido en el TextField en el URLList 1 En el Editor de Dise o haz clic en el bot n Add para seleccionarlo este es el bot n situado m s a la izquierda en la ventana bajo el TextField El Inspector muestra ahora las propiedades del PushButton 16 2 En el campo Name situado en el grupo ID cambia el nombre de PushButton2 a AddButton Pulsa Retorno para ver el cambio del nombre en el Navegador En el campo Caption situado en el grupo Appearance cambia el nombre de Button a Add URL Pulsa Retorno para ver el cambio de nombre Figura 2 10 Anclaje para AddbButton sobre el bot n en la ventana Ahora debes comprobar el anclaje de modo que el bot n Add permanezca en la parte inferior de la ventana cuando esta var e su tama o En el grupo Locking observa la Imagen que muestra una ventana con peque os iconos de candados cerrados en los m rgenes superior e izquierdo y abiertos en los m rgenes inferior y
13. ibrer a en la barra de herramientas para mostrarlo Inspector no mostrado en la anterior ilustraci n se encuentra el Inspector que te permite ver y cambiar las propiedades del control seleccionado Este rea de la ventana Principal es compartida con la Librer a Puedes acceder al Inspector haciendo clic sobre el bot n del Inspector en la barra de herramientas El inspector muestra informaci n sobre el elemento seleccionado en el Navegador o en el Editor Los contenidos del Inspector cambian en funci n del elemento seleccionado Puedes cambiar un valor del Inspector introduciendo un nuevo valor en el campo situado a la derecha de la etiqueta del campo Section 5 Acerca de la Aplicaci n En este tutorial crear s una aplicaci n que gestiona los URL y las direcciones de correo electr nico Por lo general un URL est precedido de http para indicar que es una direcci n de una p gina web Un URL tambi n puede tener el prefijo mailto para enviar un mensaje de correo electr nico usando el software de correo por defecto URL Manager Para la aplicaci n URL Manager introduces un URL en el Campo de Texto y haces clic en el bot n Show para mostrarlo en el navegador por defecto Haz clic en el bot n Add para guardarlo en el ListBox Para mostrar un URL del ListBox selecci nalo y haz clic en Mostrar Delete Para eliminar un URL selecci nalo del ListBox y haz clic en URL Manager utiliza
14. on etiquetado Ada Aparecer la ventana Add Event Handler Como ya has visto en el caso de ShowButton quieres que Figura 3 2 Manejador de Evento Action para AdabButton el manejador de evento Action tenga el c digo a ejecutar cuando el usuario haga clic sobre el bot n Selecciona Action en el listado de Event Handler y haz clic en OK Action Observa que el Navegador se actualiza para mostrar el evento Action bajo el control AddButton y se muestra el editor de c digo 2 Para a adir una fila al Listbox utilizas el m todo AddRow Ya sabes como obtener el texto del campo URL Combina los dos para obtener este c digo URLList AddRow URLField Text Tal y como ya has visto anteriormente los objetos pueden tener propiedades Y como ves ahora con el URLList los objetos tambi n pueden tener m todos AddRow es uno de los m ltiples m todos disponibles para las ListBox Guarda el proyecto seleccionando Archivo gt Guardar Ejecuta la app para probarla Escribe los URL en el campo URL y haz clic en el bot n Add para ver como aparecen en el listado de URL Sal de la aplicaci n para volver al Editor selecciona Archivo gt Salir en Windows o Linux o URLManager debug gt Salir en OS X 23 Section 3 Bot n Delete A adir C digo al Bot n Delete El bot n Delete se utiliza para eliminar los URL del listado El c digo que a ades al bot n necesita determinar la fila seleccionada del
15. r la ventana Add Event Handler Aqu estar s viendo otro listado diferente de manejadores de eventos Cada tipo de control tiene su listado espec fico de gestores de eventos En este caso queremos desactivar los botones AddButton y ShowButton cuando no haya texto en el campo URL El evento TlextChange es llamado bien porque el usuario escriba o bien porque el c digo cambie la propiedad Text Selecciona lextChange en el listado Event Handler y haz clic en OK Observa que el Navegador se actualiza para mostrar el evento Change bajo el control URLField y aparece el Editor de C digo 4 Querr s a adir este c digo want to add this code If Me Text lt gt Then ShowButton Enabled True AddButton Enabled True Else ShowButton Enabled False AddButton Enabled False End If Este c digo comprueba la propiedad Text del Text Field Figura 4 2 Manejadores de Evento para Text Field Add Event Handler to TextFieldl a The TextEdit Text Text property of the TextField has been changed LostFocus MouseDown MouseEnter MouseExit MouseMove MouseUp MouseWheel ValidationError Conce Me Text para ver si tiene alg n contenido Si hay texto entonces se activan ShowbButton y AddButton definiendo sus 31 propiedades Enabled a True Si no hay texto se desactivan ambos botones definiendo sus propiedades Enabled a False 5 Guardar el proyecto seleccionando Archivo gt Guardar Ejecuta la app para p
16. rante la comprobaci n aparece un error entonces un panel aparecer en la parte inferior de la ventana para su revisi n Section 3 Comenzando Si aun no lo has hecho ahora es el momento de iniciar Xojo Figure 1 1 Ventana de Selector de Proyecto Application Name Company Name My Company Application Identifier com mycompany myapp Haz doble clic en el icono de la aplicaci n Xojo para iniciarlo Cuando finalice la carga aparecer el Selector de Proyecto Xojo te permite crear tres tipos diferentes de aplicaciones Escritorio Web y Console Para este Tutorial crearemos una aplicaci n web por tanto haz clic sobre Web Ahora ver s tres campos que debes cumplimentar Nombre de Aplicaci n Nombre de Empresa e Identificador de Aplicaci n Nombre de Aplicaci n es el nombre de tu aplicaci n Este ser el nombre del archivo que se utilizar para guardar la aplicaci n Nombre de Empresa es el nombre de tu empresa Puedes dejarlo vac o Identificador de Aplicaci n es un identificador nico para esta aplicaci n Se rellenar autom ticamente utilizando lo introducido como Nombre de Aplicaci n y de Empresa pero tambi n puedes cambiarlo por cualquier otra cosa Introduce SimpleBrowser como el Nombre de la Aplicaci n Puedes dejar el Nombre de la Empresa tal cual o bien cambiarlo Haz clic en OK para abrir la ventana principal de Xojo denominada Espacio de trabajo donde comenzar s a dise ar
17. robarla Observa que los botones Add y Show est n desactivados inicialmente Prueba a escribir algo de texto en el campo URL Ambos botones pasan a estar activos de inmediato Y si eliminas el texto del campo URL entonces los botones pasan a estar desactivados nuevamente 32 Section 3 Compilar una App aut noma Compartir tu Aplicaci n Ahora que has creado esta gran aplicaci n probablemente querr s compartirla con el mundo Para ello tendr s que crear una aplicaci n aut noma Xojo te permite crear aplicaciones jai Figure 4 1 Build de escritorio para OS X Windows y Settings Linux Lo primero que querr s BUILD y Shared Settings Mac OS X hacer ser decidir para qu plataformas quieres compilar Windows C Linux A This Computer Haces esto mediante la secci n Build del Navegador En primer lugar marca la casilla de verificaci n asociada a las plataformas para las que quieras compilar Por defecto Este Ordenador est marcada de modo que como m nimo tendr s una compilaci n para la plataforma que est s utilizando en ese momento Ajustes Compartidos contiene los ajustes compartidos para las tres plataformas Para obtener detalles sobre cada plataforma haz clic sobre el nombre de cada una de ellas Ajustes Compartidos Los Ajustes de Compilaci n Compartidos contienen la informaci n de versi n y los ajustes a utilizar por la carpeta de compilaci n y para incluir los nombres
18. s 25 Section 4 List Box A adir C digo al Listbox El ltimo control sobre el que trabajar es el Listbox Todas las URL se a aden y se muestran en el Listbox Cuando el usuario hace clic en un URL en el Listbox tu aplicaci n deber a de mostrar el URL en el TextField Sigue estos pasos para a adir el c digo 1 En la ventana haz doble clic en el control URLList Aparece la ventana Add Event Handler Aparece una lista diferente de gestores de eventos en comparaci n con lo que has visto en el caso de los PushButton Querr s actualizar el URL en el TextField cuando el usuario haga clic sobre una fila Y ocurre que el gestor del evento Change es llamado precisamente cuando el usuario selecciona una nueva fila Selecciona Change en la lista Event Handler y haz clic en OK Observa que el Navegador de la izquierda se actualiza para mostrar el evento Change bajo el control URLList y que aparece el editor de c digo Figura 3 5 A adir el Event Handler de Change CellAction Description CellBackgroundPaint CellClick Listbox Change CellGotFocus CellKeyDown CellLostFocus CellTextChange CellTextPaint Change Close CollapseRow CompareRows ConstructContextualMenu ContextualMenuAction DoubleClick DragEnter _ Cancel 0Kk El texto de la fila seleccionada en el Listbox est almacenado en la propiedad lext Y ya sabes que la propiedad TextField text contiene el texto introducido por el us
19. s un elemento de los men s de Xojo ver s algo as como selecciona Archivo Nuevo Proyecto Esto es equivalente a elige Nuevo Proyecto en el men Archivo Los elementos entre comillas son atajos de teclado y consisten de una secuencia de teclas que deben de pulsarse en el orden en el que aparecen listadas En Windows y Linux la tecla modificadora es Ctrl en Macintosh la tecla modificadora es Comando Por ejemplo cuando veas el atajo de teclado Ctrl 0 o 26 0 significa mantener pulsada la tecla COntrol en Windows o Linux y pulsar a continuaci n la tecla O o pulsar la tecla 4 en Macintosh y pulsar a continuaci n la tecla O Has de soltar la tecla modificadora s lo despu s de haber pulsado la tecla del atajo Cualquier cosa que deba de escribirse aparecer entrecomillado Algunos pasos te pedir n que introduzcas l neas de c digo en el Editor de C digo Estas aparecen en una caja sombreada ShowURL SelectedURL Text Cuando introduzcas c digo por favor ten en cuenta las siguientes normas Escribe cada l nea impresa en una l nea separada del Editor de C digo No intentes unir dos o m s l neas impresas en la misma l nea o bien partir una l nea larga en dos o m s l neas No a adas espacios adicionales donde no se indica en el c digo impreso Cuando ejecutes tu aplicaci n Xojo comprobar en primer lugar el c digo en busca de errores de sintaxis Si du
20. tilizando Comando K en OS X o Control K en Windows y Linux 13 Section 5 Propiedades de Ventana Si aun no lo has hecho accede al Inspector haciendo clic en el y ver s el cambio del nombre en la barra de t tulo de la bot n Inspector de la barra de herramientas ventana Debes cambiar las propiedades Name y Title Figura 2 7 Dise o de Ventana con la Barra de T tulo E actualizada 1 En primer lugar en el Editor de Dise o haz clic en la barra de t tulo de la ventana para seleccionarla El Inspector mostrar ahora las propiedades para la ventana 2 En el campo Name Figura 2 6 Cambio de situado en el grupo ID Nombre en el Navegador cambia el nombre de Window1 a ea URLManagerWindow IT J PushButton1 Pulsa Retorno para ver el SS cambio del nombre en el Navegador Figura 2 5 Cambio de la Barra de 3 En el campo Title situado T tulo para la Ventana en el grupo Frame Frame cambia el nombre de Type Untitled a URL Manager Pulsa Retorno Title URL Manager 14 Section 6 Propiedades del ListBox El Listbox es donde se almacena los URL introducidos por tu los m rgenes inferior y derecho usuario Puedes cambiar las siguientes propiedades Name y Haz clic en los candados de modo que todos est n cerrados Locking En primer lugar en el Editor de Dise o haz clic sobre el Listbox para seleccionarlo El Inspector mostrar ahora las propiedades del Listbox
21. tres tipos de controles Figura 1 2 Aplicaci n URL Manager List Box un control que contiene listas desplazables Puede contener listados de una nica columna o con m ltiples columnas y desplazarse en los sentidos vertical y horizontal Text Field Un control que contiene una nica l nea de texto Button Un bot n est ndar Con frecuencia se utiliza m s para iniciar una acci n Chapter 2 DOES E interfaz de Usuario Ahora dise ar s la interfaz para URL Manager Section 1 Lista de URL A adir la Lista de URL Deber as de tener abierto Xojo y con la Editor de Dise o de Ventana Si no es as consulta el Cap tulo 1 Secciones 3 y 4 Ahora a adir s un ListBox a la ventana El ListBox se utiliza para el almacenamiento de los URL 1 A adir el ListBox En la Librer a haz clic sobre el ListBox y arr stralo a la esquina superior izquierda del Editor de Dise o A medida que te aproximes a los m rgenes ver s los indicadores de alineaci n que te ayudar n a posicionar el control Suelta el ListBox cuando est s contento con su posici n sobre la ventana 2 Cambia el tama o del ListBox Haz clic sobre el ListBox de modo que aparezcan sus manejadores de tama o Arrastra el manejador de la parte inferior derecha hasta que complete 2 3 de la ventana 3 Tu ventana deber a de parecerse a esta Figura 2 1 Dise o de Ventana con ListBox 10 Section 2 Botones An
22. tu aplicaci n Section 4 Espacio de trabajo Xojo abre el Espacio de trabajo con la ventana por defecto de la aplicaci n seleccionada en el Navigator y mostrada en el Editor de Dise o Figura 1 1 Ventana Principal de Xojo Layout Editor o Untitled AREARE A A Navegador el rea de la parte superior izquierda muestra todos los elementos del proyecto Por defecto puedes ver Window1 seleccionada el objeto App y el objeto MainMenuBar Utiliza el Navegador para navegar por el proyecto Editor de Dise o el rea central es el Editor de Dise o Utilizas el Editor de Dise o para dise ar la interfaz de usuario de las ventanas de la aplicaci n Muestra la ventana y previsualiza la ventana tal y como ser cuando se ejecute la aplicaci n En esta ilustraci n la ventana est vac a porque aun no se han a adido controles de interfaz de usuario desde la Librer a Librer a el rea de la derecha es la Librer a y muestra los controles y los elementos de la interfaz de usuario que se pueden a adir a la ventana o al proyecto Dise as la ventana arrastrando controles desde la Librer a hacia ella Tambi n puedes a adirlo a la ventana haciendo doble clic sobre l Cambias el modo en el que se muestran los controles en la Librer a haciendo clic en el icono con forma de rueda dentada 1 y eligiendo un ajuste distinto Nota si la Librer a no est visible haz clic en el bot n L
23. uario en el campo Tambi n puedes asignar un valor a esta propiedad para introducir texto en el campo mediante c digo De modo que tu c digo ser como este 26 URLField Text Me Text Observa que est s usando Me Text para obtener el texto de la fila Figura 3 6 URL Manager en Windows UINE YO arva Jer File Edit seleccionada en el ListBox Tambi n podr as haber usado URList Text Cu l es la diferencia Dado que est s en el gestor del evento Change del ListBox te puedes referir a los m todos del Listbox y a sus propiedades usando Me Esto te permite renombrar el control ListBox sin tener que cambiar tu c digo para usar el nuevo nombre asignado al Listbox Guardar el proyecto seleccionando Archivo gt Guardar Ejecuta la app para probarla Escribe varios URL en el campo de URL y haz clic en el bot n Add para que aparezcan en el URL o List Una vez que tengas unos cuantos en el listado haz clic Ade Show sobre ellos y advierte que el URL aparece en el campo URL Sal de la aplicaci n para volver al Editor selecciona Archivo gt Salir en Windows o Linux o URLManager debug gt Salir en OS X Listo tu aplicaci n ya est completa 2 Chapter 4 Siguientes Pasos Piensas que ya has terminado Todav a no Section 1 Probar URL Manager Aun debes de Seguir Probando S lo porque hayas terminado de introducir c digo en la aplicaci n no significa que hayas terminado Un b
24. uen desarrollador siempre prueba a conciencia sus aplicaciones para descubrir posibles problemas Ya has encontrado y solucionado un problema hacer clic en Delete sin que est una fila seleccionada Crees que hay otros problemas que deban de solucionarse Ejecuta tu aplicaci n y sala durante un tiempo Anota aquellas cosas que quieras cambiar En la pr xima secci n a adir s algunas mejoras a URL Manager 29 Section 2 Mejoras Uso de los Botones Has advertido que hay ocasiones en las que los botones de URL Manager probablemente no deber an de realizar su acci n Por ejemplo el bot n Show no deber a de mostrar un URL si no se ha introducido ning n texto en el campo URL DE igual modo no querr s a adir un URL en el listado si no se ha introducido nada en el campo URL Hay varias formas de lograr esto pero una es desactivando los botones cuando no deban de ser utilizados Sigue estos pasos para a adir esta mejora Figura 4 1 Propiedad 1 En la ventana selecciona el Enabled ShowButton etiquetado Enabled Show En el Inspector conmuta la propiedad Enabled en el grupo Appearance a Off 2 En la ventana selecciona AddButton etiquetado Add En el Inspector conmuta la propiedad Enabled en el grupo Appearance a Off 30 3 Ahora a adir s el c digo para activar dichos botones cuando haya texto en el campo URL En la ventana haz doble clic en el control URLField Aparece
25. volver al 24 Editor con la l nea de c digo seleccionada Tu c digo se ha Figura 3 4 Error de ejecuci n en el Depurador Sub Action URLList RemoveRow URLList ListIndex End Sub colgado con un OutOfBoundsException y est s ahora en el depurador El error ha ocurrido porque has intentado eliminar una fila que no existe Cuando no est seleccionada ninguna fila la Figura 3 3 Mensaje de Errro del Runtime An exception of class OutOfBoundsException was not YA handled The application must shut down TN o j propiedad Listindex devuelve 1 Si haces clic en el bot n Continuar en la barra de herramientas del Depurador ver s el mensaje de error concreto 6 Sal de la aplicaci n para volver al Editor selecciona Archivo gt Salir en Windows o Linux o URLManager debug gt Salir en OS X 7 Ahora puedes a adir c digo para evitar el error En esencia no querr s llamar al m todo RemoveRow si no est seleccionada ninguna fila El c digo es as If URLList Listindex gt 0 Then URLList RemoveRow URLList ListIndex End If Este c digo verifica que la fila est seleccionada comprobando para ello la propiedad Listindex para asegurarse de que contiene una fila v lida Si es as entonces se elimina la fila 8 Guarda el proyecto seleccionando Archivo gt Guardar 9 Ejecuta el proyecto de nuevo y haz clic sobre el bot n Delete sin seleccionar una fila en el listado de URL No m s cuelgue
26. zas el nombre del objeto seguido por un punto seguido por el nombre de la propiedad En otras palabras utilizas la sintaxis NombreDeObjeto NombreDePropiedad Esto es algo denominado notaci n por punto y se utiliza por lo general en la programaci n orientada a objetos En este caso el objeto es URLField y la propiedad que quieres es Text utiliza la Referencia del Lenguaje para encontrar todo sobre las propiedades disponibles en los TextField Ahora puedes a adir este c digo ShowURL URLField Text Si est s teniendo problemas introduciendo el texto asegurate de haber salido de la aplicaci n URL Manager que estabas ejecutando en la anterior prueba Guardar el proyecto seleccionando Archivo gt Guardar Ejecuta la app e introduce un URL en el URL Fleld Prueba diferentes URL en esta ocasi n como por ejemplo http www xojoblog com y haz clic en el bot n Show Tu navegador web por defecto deber a de abrir la p gina Sal de la aplicaci n para volver al Editor selecciona Archivo gt Salir en Windows o Linux o URLManager debug gt Salir en OS X 22 Section 2 Bot n Add A adir C digo al Bot n Add El bot n Add se utiliza para a adir los URL al listado El c digo que a ades al bot n debe tomar lo que se ha escrito en el campo URL y a adirlo como una nueva fila en el listado Sigue estos pasos para a adir el c digo 1 En la ventana haz doble clic en el control AddButt

Tutorial

Contents

Download Pdf Manuals

Related Search

Related Contents