Home

Retorno

1. Desplegar Tare Aplicacion Web Compartir tu Aplicacion Ahora que has creado esta buena aplicacion probablemente querras compartirla con el mundo Aunque puedes ejecutar una aplicacion web en local y acceder a ella mediante un navegador web una aplicacion web se ejecuta por lo general en un servidor web y se accede en local desde un navegador web Paracompartir Figura 4 3 Ajustes de tu aplicaci n web querr s Compilaci n compilarla y desplegarla a BUILD continuaci n sobre un servidor ar Shared Settings web a Windows Tu app web puede compilarse _ Linux para cualquiera de las plataformas Y This Computer soportadas incluyendo Windows OS X y Linux La mayor a de los servidores web utilizan Linux de modo que es probable que quieras seleccionar la opci n Linux Opciones de Despliegue Lo siguiente a decidir es si se va a deplegar como Aplicaci n web aut noma o como Aplicaci n web CGI Aplicaci n Web Aut noma Una Aplicacion web Aut noma es una aplicaci n que ejecutas manualmente sobre el servidor Debes de iniciarla generalmente desde la linea de comandos y dejarla funcionando para que la gente pueda acceder a la app web Adem s una Aplicaci n web aut noma es accedida a trav s de un puerto y que se indica al compilar la aplicaci n En esencia una aplicaci n web aut noma consiste del servidor web y de la aplicaci n web Las aplicaciones web aut nomas se benefician de los WebSockets
2. Chapter 1 Introducci n Este tutorial te muestra como crear una aplicaci n 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 Web y haz clic en OK Este Tutorial es para aquellas personas que acaben de aterrizar en el mundo de la programaci n y que usen Xojo por primera vez Es una introducci n al Entorno de Desarrollo de escritorio de Xojo y te guiar a trav s del desarrollo de una aplicaci n web Completar este tutorial deber a de tomarte en torno a una hora Nota si tienes experiencia en otros lenguajes de programaci n tambi n querr s revisar la Gu a del Usuario y la Referencia del Lenguaje Section 2 Convenciones de Presentaci n El Tutoria utiliza una serie de 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 el
3. una caracter stica que mejora el rendimiento de las aplicaciones web al proporciona un canal de comunicaci n bidireccional Una aplicaci n desplegada como aut noma deber de ser accedida mediante un URL como este http www mywebsite com 8080 Aplicaci n Web CGI Una aplicacion web compilada para usar CGI emplea bien Apache o IIS Microsoft Internet Information Services como su 34 servidor web El servidor web se comunica con la aplicaci n web usando CGI Para facilitarlo un script Perl proporcionado cuando se compila la aplicaci n gestiona la comunicaci n entre el servidor web y la aplicaci n web Actualmente las aplicaciones CGl no pueden utilizar WebSockets Algunos navegadores web como Safari seguir n mostrando un indicador de carga incluso cuando la p gina web haya finalizado de cargarse Este es un resultado del m todo utilizado por el servidor web para comunicarse con la aplicaci n web Dedo que un despliegue CGI utiliza el software de servidor web existente no tendr s que indicar un puerto cuando se accede a la aplicaci n web Un URL t pico tiene este aspecto http www mywebsite com cgi bin mywebapp cgi Desliegue Teniendo en cuenta la amplia variedad de servidores y sus ajustes concretos los detalles sobre el despliegue de una aplicacion web en un servidor esta mas alla del tratamiento de este tutorial En general los pasos para desplegar una aplicacion web sobre un servidor Linux son si
4. Una pista qu ocurre si haces clic en el bot n Complete o Delete sin que est seleccionada una tarea Prueba 1 Ejecuta la app y haz clic en el bot n Complete sin hacer nada LA mas Figura 3 4 Depurador deternido en la l nea de c digo que ha causado el error Sub Action TaskList Cell TaskList Listindex 0 V End Sub Tu aplicaci n cambiar al Depurador con la linea de c digo seleccionada Tu c digo se ha colgado con un OutOfBoundsException y ahora est s en el depurador El error ha ocurrido porque has intentado eliminar o completar una fila que aun no exist Cuando no est seleccionada una fila en el Listbox la propiedad Listindex devuelve 1 Dado que no es una fila v lida del ListBox el comando Cell lanza un OutOfBoundsException Figura 3 5 Un Error mostrado en el navegador This application has encountered a fatal error Unhandled OutOfBoundsException Message Attempted to access cell 1 0 but limit is 0 1 Stack WebListBox _ValidCellMb o lt WebListBox gt i4i4 WebListBox CellObject o lt DataCell gt o lt WebListBox gt i4i4 WebListBox Cell o lt WebListBox gt i4i4s TaskManagerPage TaskManagerPage CompleteButton_Action o lt TaskManagerPage TaskManagerPage gt o lt WebButton gt Delegate IM_Invoke o lt WebButton gt Please describe what actions produced this error so we can better solve this problem 2 Haz clic en el bot n Resumir en la barra de herramientas del depurador de modo que p
5. an error an error pane appears at the bottom of the main window for you to review Section 3 Comenzando Si aun no lo has hecho ahora es el momento de iniciar Xojo Haz doble clic en el icono de la aplicaci n Xojo para iniciarlo Cuando finalice la carga aparecer el Selector de Proyecto Figura 1 1 Ventana del Selector de Proyecto Application Name Company Name My Company Application Identifier com mycompany myapp 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 TaskManager 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 tu aplicaci n Section 4 Espacio de
6. digo al Bot n Add Figura 3 2 Event El bot n Add a ade tareas al listado El c digo que a adas al Observa que el Navegador se Handler de Action bot n necesita tomar lo que se haya escrito en el TaskField y actualiza para mostrar el evento a adirlo como una nueva fila del listado Action bajo el control AddButton y Action que se muestra el editor de c digo Sigue estos pasos para a adir el c digo 2 Ahora necesitas tomar la tarea escrita en el campo Task 1 En la p gina web haz doble Podr as pensar que esto se hace refiri ndote clic en el control AddButton Figura 3 1 Di logo del Event Handler para Simplemente al nombre del campo TaskField Casi etiquetado Ada Add pero no exactamente lo que has de hacer Aparecer la ventana Add Action Description Lo que necesitas es acceder a una propiedad del Event Handler Cuando un ContextaMeruacton TaskField Cuando has de referirte a una propiedad usuario hace clic en un pragover de un objeto utilizas el nombre del objeto seguido WebButton se llama al Gotfocs por un punto seguido por el nombre de la manejador de evento Action LostFocus propiedad En otras palabras utilizas esta sintaxis Esto significa que querr s Mouse Co NombreDeObjeto NombreDePropiedad Por lo a adir t c digo al manejador general se suele denominar notaci n por punto de evento Action de modo en la programaci n orientada a objetos que selecciona Action en el listado Event Handler y
7. el cambio del nombre del boton en la pagina web Ahora debes comprobar el bloqueo de modo que el bot n Add permanezca anclado sobre el margen inferior de la p gina web cuando esta cambie su tama o En el grupo Locking observa la imagen que muestra los peque os iconos de candados cerrados para los m rgenes superior e izquierdo y abiertos para los m rgenes inferior y derecho Haz clic en los candados para que est n cerrados el izquierdo y el inferior y abiertos el superior y el derecho Bot n Complete Completar El bot n Complete se utiliza para marcar una tarea como completada En el Editor de Dise o haz clic en el bot n Complete para seleccionarlo este es el bot n que se encuentra debajo del TextField en la derecha El Inspector muestra ahora las propiedades del WebButton En el campo Name situado en el grupo ID cambiael Figura 2 12 Bloqueo nombre de Button3 a para CompleteButton CompleteButton Pulsa Retorno para ver el cambio del nombre en el Navegador En el campo Caption situado en el grupo Appearance cambia el Figura 2 11 Controles nombre de Button a que aparecen en el Complete Pulsa Navegador TaskManagerPage Retorno para ver el cambio a Controls del nombre en la p gina L J AddButton web CompleteButton LJ DeleteButton Ahora tienes que hacer ci js cambios en el bloqueo de TJ TextField1 18 modo que el bot n Complete perm
8. haz clic en OK En este caso el objeto es TaskField y la propiedad que 23 quieres es Text utiliza la Referencia del Lenguaje para averiguar cu les son todas las propiedades disponibles para los TextField La sintaxis ser asi TaskField Text Para a adir una fila al ListBox utilizas el m todo AddRow Ya sabes como obtener el texto en el campo Task Combina ambas para obtener este c digo TaskList AddRow TaskField Text Tal y como has visto anteriormente los objetos pueden tener propiedades Y como ves ahora con la TaskList los objetos tambi n tienen m todos AddRow es uno de los m ltiples m todos disponibles para las Listbox El anterior comando a ade valores a las dos columnas de la TaskList La primera columna contiene el estado de completado de modo que inicialmente est en blanco La segunda columna contiene el nombre de la tarea 4 Guarda el proyecto seleccionando Archivo gt Guardar 5 Ejecuta la app para probarla Escribe tareas en el campo lask y haz clic en el bot n Add para ver como aparece en la lista de tareas Cierra la pesta a o ventana del navegador para volver al Editor de C digo 24 Section 2 Bot n Completado A adir C digo al Bot n Completado Cuando el usuario hace clic en el bot n de Completado la tarea seleccionada en el Listbox deber a marcarse como completada Esto se indica mostrando una marca de verificaci n V en la columna Completed Sig
9. ver el Figura 2 6 Propiedades de P gina web en el Inspector Name WebPagel ts super Scope O Interfaces Width 600 Height 400 Width 600 Height 400 Title Untitled Behavior Cursor Implicit Instance On Styles sye None 13 Section 5 Propiedades de P gina Web Si no lo has hecho aun muestra el Inspector haciendo clic en el bot n de Inspector en la barra de herramientas o o Figura 2 7 Dise o de Pagina Web con la barra de titulo Necesitas cambiar las propiedades Name y Title de la pagina actualizada web 1 En primer lugar en el Editor de Diseno haz clic en la barra de titulo de la pagina web para seleccionarla El panel del Inspector muestra las propiedades de la pagina web 2 En el campo Name situado Figure 2 2 Name en el grupo ID cambia el Change in Navigator nombre de WebPage1 a TaskManagerPage Pulsa v ay Controls Retorno para ver el cambio Button Button2 del nombre en el Navegador A M 482 am 3 En el campo Title situado en el grupo Frame cambia el nombre de Untitled a Task Manager Pulsa Retorno para ver el cambio del nombre en la barra de t tulo de la p gina 14 Section 6 Propiedades de ListBox El Listbox es donde se muestran y almacenan las tareas introducidas por tus usuarios Puedes cambiar las siguientes propiedades Name ColumnCount Default Value ColumnWidths and Locking 1 En primer luga
10. 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 del nombre sobre el bot n en la p gina web 4 Ahora tienes que hacer cambios en los candados de modo que Figura 2 9 Bloqueo el bot n Delete permanezca para el DeleteButton sobre el margen derecho de la p gina web cuando esta cambie su tama o En el grupo Locking observa la imagen que muestra una p gina web con peque os Iconos de candados cerrados para los m rgenes superior e izquierdo y abiertos para los m rgenes inferior y derecho Haz clic sobre los candados de modo que el derecho y el inferior est n cerrados y el izquierdo y el superior abiertos Bot n Add A adir 5 El bot n Add se utiliza para a adir la tarea introducida en el TextField a la Lista de Tareas 1 En el Editor de Dise o haz clic en el bot n Add para seleccionarlo este es el bot n situado en el margen izquierdo 17 de la p gina web bajo el TextField El Inspector muestra ahora las propiedades del PushButton En el campo Name situado en el grupo ID cambia el nombre de Button2 a AddButton Pulsa Retorno para ver el cambio del nombre en el Navegador En el campo Caption situado Figura 2 10 Bloqueo en el grupo Appearance para el AddButton cambiar el nombre de Button a Add Task Pulsa Retorno para ver
11. y solucionado un problema hacer clic sobre el bot n Delete o Complete sin una fila seleccionada Crees que hay otros problemas que deban de solucioarse Ejecuta tu aplicaci n y sala durante un tiempo Anota aquellas cosas que quieras cambiar En la pr xima secci n har s algunas mejoras en Task Manager 30 Section 2 Mejoras Uso del Bot n Has advertido que hay ocasiones en las que los botones de Task Manager no deber an de ejecutar su acci n Por ejemplo el bot n Complete no deber a de intentar marcar una tarea como completada si no hay ninguna seleccionada Justo ahora puedes hacer clic pero no ocurre nada Del mismo modo no deber as de poder a adir una nueva tarea si no se ha introducido nada en el campo de tareas Existen varios modos de solucionarlo pero un modo consiste en desactivar los botones cuando no deber an de ser utilizados Sigue estos pasos para a adir esta mejora Figura 4 1 Propiedad Enabled en el Inspector 1 En la p gina web selecciona de CompleteButton CompleteButton etiquetado enabled OVOrr Complete En el Inspector conmuta la propiedad Enabled en el grupo Appearance a Off Selecciona AddButton etiquetado Add En el Inspector conmuta la propiedad Enabled en el grupo Appearance group a Off Selecciona DeleteButton etiquetado Delete En el Inspector conmuta la propiedad Enabled en el grupo Appearance a Off Ahora a adir s
12. Box Un WebListBox se utiliza para mostrar un listado de informaci n En este proyecto es lo que va a mostrar las tareas introducidas en el TextField Las siguientes secciones te guiar n por la creaci n de la interfaz de usuario y a ade el c digo necesario para que hacer que la aplicaci n funcione Chapter 2 DIX E A Interfaz de usuario Ahora dise ar s la interfaz de usuario para la aplicaci n web de Gesti n de Tareas Section 1 Lista de Tareas A adir el Listado de Tareas Deber as tener Xojo funcionando y la WebPage1 abierta en el Editor de Dise o Si no es as por favor consulta el Capitulo 1 Secciones 3 y 4 Ahora a adir s un Listbox a la p gina web El Listbox se utiliza para almacenar las tareas 1 A ade el Listbox En la Librer a de Figura 2 1 Control ListBox Control haz clic sobre Viewers el Listbox y arr stralo sobre la esquina z superior izquierda del Editor de Dise o A medida que te aproximes a los m rgenes de la p gina web ver s indicadores de alineaci n que te ayudan a posicionar el control Suelta el Listbox cuando est s conforme con su posici n en la p gina web 2 Cambia el tama o del Listbox Haz clic en el Listbox de modo que aparezcan los manejadores de cambio de tama o Arrastra el manejador de la esquina inferior derecha y arr stralo para estirar el Listbox hasta que complete 2 3 de la p gina web Figura 2 2 Dis eo de Web Page con Li
13. anezca en el margen derecho de la p gina web cuando esta cambie de tama o Figura 2 13 Dise o de P gina Web con textos de los botones Task Manager pr le Completed Task Delete Complete En el grupo Locking observa la imagen que muestra unos peque os iconos de candados cerrados en el margen superior e izquierdo y abiertos en los m rgenes inferior y derecho Haz clic en los candados de modo que el derecho e inferior est n cerrados y el izquierdo y superior abiertos En la Lista de Proyecto los nuevos controles reci n renombrados aparecen bajo Controls para TaskManagerPage El aspecto del diseno de la pagina web deberia de ser como el mostrado 19 Section 8 Propiedades de Text Field cerrados en los m rgenes superior e izquierdo y abiertos en los m rgenes inferior y derecho El TextField es donde el usuario escribe la tarea para a adirla al Haz clic en los candados de modo que est n cerrados el listado Debes cambiar las siguientes propiedades Name and A izquierdo el inferior y el derecho y que el superior est Locking abierto 1 En el Editor de Dise o haz clic en WebTextField para seleccionarlo El Inspector muestra ahora las propiedades del Web TextField 2 En el campo Name situado en el grupo ID cambia el nombre de TextField1 a TaskField Pulsa Retorno para ver el cambio del nombre en el Navegador Figura 2 14 Bloqueo ara TaskField 3 Aho
14. el c digo que activar el bot n Add cuando haya texto en el campo de tarea En la p gina web haz Figura 4 2 Event Handlers para Text Field doble clic EnableMenultems Description GotFocus sobre el ba TextField TextChange par con t ro MouseDown MouseEnter TaskField MouseExit MouseMove MouseUp MouseWheel Open z SelChange Aparecer la TextChange ValidationError A Cancel ventana Add Cancel ok Event 31 Handler Aqu ver s otro listado de manejadores de evento Cada tipo de control tiene un listado especifico de manejadores de evento En este caso queremos desactivar el AddButton cuando no haya texto en el campo de tarea y activarlo cuando s contenga texto El evento TextChanged es llamado cada vez que se ha cambiado el texto en el campo de tarea ya sea por el usuario escribiendo o mediante nuestro c digo cambiando la propiedad Text Selecciona TextChanged en el listado Event Handler y haz clic en OK Observa que el Listado de Proyecto a la izquierda se actualiza para mostrar el evento Change bajo el control TaskField y aparece el Editor de C digo 5 Querr s a adir este c digo If Me Text lt gt Then AddButton Enabled True Else AddButton Enabled False End If Este c digo comprueba la propiedad Text del TextField Me Text para ver si contiene algo Si hay texto entonces se activan los botones CompleteButton y AddButton poniendo su propiedad Enabled a True Si no hay tex
15. ijas 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 O o d O significa mantener pulsada la tecla COntrol en Windows o Linux y pulsar a continuaci n la tecla O o pulsar la tecla 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 codigo por favor ten en cuenta las siguientes normas Escribe cada linea impresa en una linea 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 Whenever you run your application Xojo first checks your code for spelling and syntax errors If this checking turns up
16. mientas para mostrarla Inspector no mostrada en la anterior ilustraci n est el Inspector y que permite ver y cambiar las propiedades correspondientes al control seleccionado Este rea de la ventana Principal es compartida con la Libreria Puedes ver el Inspector haciendo clic sobre el bot n de Inspector en la barra de herramientas El Inspector muestra la informaci n sobre el elemento seleccionado en el Navegador o en el Editor Los contenidos del Inspector cambian en funci n de cual sea el elemento seleccionado Puedes cambiar un valor en el Inspector Introduciendo un nuevo valor en el campo situado a la derecha de la etiqueta del campo Section 5 Acerca de la Aplicaci n Gestor de Tareas En este tutorial crear s una aplicaci n como se muestra para registrar las tareas Figura 1 3 Aplicaci n Web de Gesti n de Tareas no ea amm Ear Google Completed Introduces tareas en el campo de texto y haces clic sobre Add para a adirla al listado Puedes hacer clic sobre cada una de las tareas del listado para borrarla o bien para marcarla como completada Task Manager utiliza tres controles Web TextField Un control WebTextField se utiliza para introducir texto En este proyecto la tarea a a adir se introduce en un Web TextField en la parte inferior de la ventana WebButton Un WebButton se utiliza para disparar una acci n Este proyecto utiliza varios botones para realizar diferentes acciones WebList
17. mples 1 Compila tu aplicaci n web para Linux 2 Conecta a tu servidor web usando FTP 3 Sube tu aplicaci n web incluyendo la carpeta Libs 4 Verifica que aun est activado el flag de ejecuci n para los archivos que acabas de subir Algunos clientes FTP tienden a cambiar este flag durante la carga Los detalles pueden ser mucho m s enrevesados Consulta la informaci n sobre Despliegue Web en la Wiki de Documentation para obtener m s detalles 35 Section 4 Todo Listo Enhorabuena Has completado con xito el Tutorial Web y ahora tienes una aplicaci n totalmente funcional Para continuar tu viaje en el funcionamiento de Xojo deber as de continuar con la Gu a del Usuario en la que se cubre Xojo al completo Tambi n querr s consultar la Referencia del Lenguaje en la que se cubren los detalles sobre los elementos del lenguaje las casles y otros aspectos de Xojo 36
18. nar una fila del El bot n Delete se utiliza para eliminar tareas del listado El Listbox A RemoveRow se le pasa como par metro el c digo que a adas al bot n tiene que determinar la fila numero de fila a eliminar Tu c digo ser asi seleccionada en el listado y eliminarla TaskList RemoveRow TaskList ListIndex Sigue estos pasos para anadir el codigo 1 En la pagina web haz doble clic sobre el control 4 Guarda el proyecto seleccionando Archivo gt Guardar DeleteButton etiquetado Delete 5 Ejecuta la app y a ade unas cuantas tareas de ejemplo Ahora Aparecer la ventana Add Event Handler Como has haz clic sobre una tarea en el Listado de Tareas y haz clic aprendido con los otros botones usas el manejador de sobre el bot n Delete La tarea se eliminar del listado evento Action para ejecutar el c digo cuando el usuario haga clic sobre un bot n Elige Action en el listado Event Handler y haz click en OK Observa que el Navegador se actualiza para mostrar el manejador de evento Action bajo el control DeleteButton mostrando el Editor de C digo 2 Dado que se borrar la fila seleccionada deber s de utilizar nuevamente la propiedad Listindex 26 Encontrar Bugs Aunque tu aplicaci n funciona bien existen un par de bugs que deben de resolverse Un bug es cuando el c digo o la aplicaci n hace algo no esperado por lo general derivando en un cuelgue Te has dado cuenta de cu l puede ser el problema
19. r en el Editor de Diseno haz clic en el Listbox para seleccionarlo El panel del Inspector muestra ahora las propiedades del Listbox 2 En el campo Name situado en el grupo ID cambia el nombre de Listbox1 a TaskList Pulsa Retorno para ver el cambio del nombre en el Navegador 3 El Listbox tiene dos columnas una para mostrar el estado de completado y otro para mostrar el nombre de la tarea En el campo ColumnCount cambia el valor de 1 a 2 Pulsa Retorno para ver si el Listoox aparece con dos columnas sobre el dise o de la p gina web 4 Querr s cambiar las cabeceras de la columna para describir los datos del listado Haz clic sobre el bot n Configura Valor por Defercto de TaskList en la barra de herramientas del Editor de Dise o 4 Esto abre la ventana del Editor de Valores Figura 2 8 Valor por Defecto para TaskList AAG OQ Googe o o Set TaskList Contents a Haz doble clic sobre Column 1 en la cabecera paa editar este valor Escribe Completado y pulsa Retorno 15 b Haz doble clic sobre la segunda columna vac a en la cabecera para editar este valor Escribe Tarea y pulsa Retorno c Haz clic de nuevo en el bot n Configurar Valor por Defecto de TaskList para cerrar la ventana Ahora aparecer Completado y Tarea como las cabeceras para la TaskList Dado que Completado solo va a contener una caja de verificacion cuando la
20. ra has de hacer los cambios en p ON los candados de forma que el TextField aumente su tama o en funci n del cambio del tama o de la p gina web En el grupo Locking observa la imagen de la p gina web con peque os iconos de candados 20 Section 9 Probando el Proyecto Guardar 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 TutorialWeb y haz clic en Guardar Ejecutar el Proyecto Ahora puedes probar la aplicaci n terminada El dise o de tu interfaz de usuario est completada ahora de modo que es el momento de probarla Haz clic en el bot n Run de la barra de herramientas para ejecutar el proyecto Cuando se muestra Task Manager puedes interactuar con los botones haciendo clic sobre ellos puedes escibir en el TextField y puedes cambiar el tama o de la p gina web para comprobar como se reposicionan los botones Tu aplicaci n aun no hace nada Para eso has de a adir c digo y que es el asunto del siguiente cap tulo Cierra la pesta a o ventana del navegador para volver al Editor de Dise o Figura 2 15 Dise o Completado de la P gina Web Task Manager PITO PUNA ra FUN e WO Google 21 Chapter 3 A adir C digo El ltimo paso en la creaci n de tu aplicaci n consiste en a adir el c digo Section 1 Bot n A adir A adir C
21. st Box Seo Untitied Y AO PS EOS AA 3 Tu P gina web deber a verse as 10 Section 2 Botones A adir los Botones En la Librer a haz clic en el control Button y arr stralo sobre Ahora a adir s los tres botones necesarios por el Gestor de la p gina web cerca del margen inferior izquierdo Tareas en la p gina web Nuevamente utiliza los indicadores de alineaci n para El bot n Delete elimina tareas del Listbox el bot n Add a ade ayudarte a situar el bot n tareas al Listbox y el bot n Complete marca las tareas en el Listbox como completadas 3 A ade el Bot n Completar 1 A ade el Bot n Delete En la Librer a haz clic en el control Button y arr stralo a la p gina web En la Librer a haz clic em ONO snare cocada Figura 2 4 Dise o de P gina Web con los sobre el control Button y margen botones colocados arr stralo a la p gina web L MM inferior bajo la esquina inferior derecho derecha del Listbox 4 Tu pagina Utiliza los indicadores de alineaci n para ayudarte a web deber a posicionar el bot n de modo que est alineado con el margen de verse asi derecho del Listbox 2 Anade el Boton Add 11 Section 3 Text Field A ade el Text Field El Text Field es donde el usuario escribe la Tarea que se a adir a la lista 1 Cambia el tama o del y campo Task Selecciona En la Librer a haz clic en el TextField y arr stralo Figure 2 1 Text Field Con
22. tarea sea marcada como completada puede ser m s estrecha En el campo ColumnWidths cambia el valor de a 100 Pulsa Retorno para ver como cambian los anchos de las columnas en la p gina web Usando 100 se indica al Listbox que la primera columna Figure 2 3 Locking for deber a de ser siempre de 100 TaskList p xeles de ancho y que el resto de las columnas comparten el ancho disponible Por ltimo tendr s que hacer cambios en los candados de modo que el Listbox se m s largo o estrecho en funci n de como cambie el tama o de la p gina web En el grupo Locking observa la Imagen que muestra una p gina web con peque os iconos de candados cerrados en el margen superior e izquierdo y abiertos en los m rgenes inferior y derecho Haz clic sobre los candados de modo que est n todos los candados cerrados 16 Section 7 Propiedades Button Los tres botones se utilizan para realizar acciones Debes cambiar las siguientes propiedades para cada bot n Name Caption y Locking Bot n Delete Borrar El bot n Delete se utiliza para eliminar tareas de la TaskList 1 En primer lugar en el Editor de Dise o haz clic sobre el bot n Delete para seleccionarlo este es el bot n situado directamente bajo el Listbox El Inspector muestra ahora las propiedades del WebButton 2 En el campo Name situado en el grupo ID cambia el nombre de Button1 a DeleteButton Pulsa Retorno para
23. to entonces ambos botones se configuran con su propiedad Enabled a False Ya has a adido c digo en el Capitulo 3 Secci n 4 para evitar que los botones Delete y Complete pudiesen hacer algo en el caso de que no hubiese una fila seleccionada en el Listado de Tareas Ahora tambi n puedes hacer que estos botones se activen cuando se seleccione una fila y que se desactiven cuando no haya una fila seleccionada Esto se realiza mediante la propiedad Listindex del Listbox Haz doble clic en el control TaskList Aparecer la ventana Add Event Handler Aqu ver s el listado de manejadores de evento para el WebListBox El evento SelectionChanged es llamado cada vez que cambia la selecci n en el control TaskList Elige SelectionChanged y haz clic en OK A ade este c digo If Me ListIndex gt 0 Then DeleteButton Enabled True CompleteButton Enabled True Else DeleteButton Enabled False CompleteButton Enabled False Ena TE 32 9 Guarda el proyecto seleccionando Archivo gt Guardar 10 Ejecuta la app para probarla Observa que el bot n Add est desactivado inicialmente Prueba a escribir alg ntexto en el campo Task El bot n Add pasar a estar actiado de inmediato Y Si eliminas el texto del campo Task los botones pasar n a estar de nuevo desactivados De igual modo cuando haces clic sobre una fila en la lista de tareas los botones Delete y Complete pasar n a estar activados 33 Section 3
24. trabajo Xojo abre el Espacio de trabajo con la ventana por defecto para la aplicaci n seleccionada en el Navegador y mostrada en el Editor de Dise o Figura 1 2 Ventana Principal de Xojo Layout Editor o Untitled pw E E A A Navegador El rea en la parte superior izquierda muestra todos los elementos del proyecto Por defecto puedes ver WebPage1 seleccionada el objeto App y el objeto Session Utilizas 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 para las ventanas de la aplicaci n Muestra la ventana y previsualiza como quedar cuando se ejecute la aplicaci n En esta ilustraci n la ventana est vac a porque aun no se ha a adido ning n control de interfaz de usuario desde la Librer a Librer a el rea de la derecha es la Librer a y muestra los controles y elementos de interfaz que puedes a adir a una ventana o al proyecto Dise as la ventana arrastrando los controles desde la Librer a hacia la ventana Tambi n puedes a adir un control a la ventana haciendo doble clic sobre l Puedes cambiar el modo en el que se muestran los controles en la Librer a haciendo clic sobre el icono con forma de rueda dentada 4 y seleccionando un ajuste diferente Nota si la Librer a no est visible haz clic sobre el bot n Librer a en la barra de herra
25. trol sobre la p gina web de modo que est entre los I Fee botones de borrar y a adir Ia TE Q el manejador situado m s a la derecha y arrastra el TextField de modo que tenga el mismo ancho que el Listbox Utiliza los indicadores de alineaci n como gu as para asegurarte de que todo est alineado correctamente Tu p gina web deber a de verse as Figura 2 5 Dise o de P gina Web Completado 12 Section 4 Propiedades Qu es una Propiedad Inspector haz clic sobre Una propiedad es un valor de una clase Cambiando los valores el bot n Ispector en la de las propiedades puedes cambiar el comportamiento de la barra de herramientas ile Puedes cambiar entre la Para este proyecto querras cambiar varias propiedades para la Libreria y el Inspector p gina web y sus controles Algunas cosas que deber s de usando 6 K en OS Xo hacer son Ctrl K en Windows y Linux e Cambiar el nombre de todos los controles y la p gina web de modo que puedan describir su comportamiento y sea f cil de referirse a ellos desde el c digo e A adir un texto Caption a los Buttons e Definir las propiedades de bloqueo Locking de modo que el control var e su tama o en consecuencia con el redimensionamiento de la ventana Inspector El Inspector se utiliza para cambiar las propiedades de la ventana y de los controles Comparte la misma rea de la derecha en la ventana principal que la Librer a Para
26. ue estos pasos para a adir el c digo 1 En la p gina web haz doble clic en el control CompleteButton etiquetado Complete Aparecer la ventana Add Event Handler Cuando el usuario hace clic sobre un WebbButton se llama a su manejador de evento Action Esto significa que querr s a adir tu c digo al manejador de evento Action de modo que selecciona Action en la lista Figura 3 3 El Manejador Event Handler y haz clic en OK de Evento Action y E ShowButton Observa que el Navegador se PESE actualiza para mostrar el evento Action bajo el control CompleteButton y se muestra el Editor de C digo Para cambiar una fila necesitas saber qu fila esta seleccionada En un Listbox la fila seleccionada est en la propiedad Listindex Para definir el valor de una celda en concreto de la Listbox utilizas la propiedad Cell indicando la fila y la columna El c digo es el siguiente TaskList Cell TaskList ListIndex 0 Y Este c digo pone el caracter de marca de verificaci n en la columna 0 de completado en la fila seleccionada Ejecuta la app y a ade algunas tareas de ejemplo Ahora haz clic en la tarea y haz clic en el bot n Complete Aparecer una marca de verificaci n en la columna Completed Cierra la pesta a o ventana del navegador para volver al Editor de C digo 25 Section 3 Bot n Borrar A adir C digo al bot n Borrar 3 Utiliza el m todo RemoveRow para elimi
27. uedas ver el mensaje de error rea ef 3 Cierra la pesta a o ventana del navegador para volver al Editor Nadie quiere c digo con bugs Afortunadamente es f cil evitar que ocurra este bug wants buggy code Esencialmente has de asegurarte de que est seleccionada una fila antes de intentar borrarla o marcarla como completada 1 Ell c digo para ello utiliza lo que ya hemos aprendido Este es el c digo del manejador de evento Action para DeleteButton If TaskList ListIndex gt 0 Then TaskList RemoveRow TaskList ListIndex End If 2 El c digo para el bot n Complete es similar If TaskList ListIndex gt 0 Then TaskList Cell TaskList ListIndex 0 J End If 3 En ambos casos el codigo verifica que esta seleccionada una fila comprobando su propiedad ListIndex y asegurandose que contiene una fila v lida antes de que se llame al m todo que nos interesa 4 Guarda el proyecto seleccionando Archivo gt Guardar 5 Ejecuta el proyecto de nuevo y haz clic sobre elbot n Complete sin seleccionar una fila en la lista de tareas Ya no se cuelga 28 Chapter 4 Siguientes Pasos Piensas que ya has terminado Todav a no Section 1 Probando Task Manager Aun debes de Probarlo S lo porque hayas terminado la programaci n de tu aplicaci n no significa que hayas terminado Un buen desarrollador siempre prueba concienzudamente sus aplicaciones en busca de posibles problemas Ya has encontrado

Retorno

Contents

Download Pdf Manuals

Related Search

Related Contents