2014 Release 3 Xojo, Inc.
Contents
1. X X OJO Gu a R pida IOS Cap tulo 1 Introducci n Bienvenido a Xojo la forma m s sencilla de crear apps multiplataforma de escritorio web e iOS Secci n 1 Acerca de la Gu a Rapida OS COMENZAR CON XOJO 1 Descarga el instalador para tu sistema operativo desde http www xojo com download 2 Ejecuta el instalador 3 Ejecuta Xojo 4 En el Selector de Proyecto selecciona OS y pulsa OK Acerca de la Gu a R pida OS Bienvenido a Xojo la herramienta m s sencilla para crear apps multiplataforma de escritorio web e iOS Xojo est compuesto por un rico set de objetos de interfaz gr fica un lenguaje moderno y orientado a objetos un depurador integrado y un compilador multiplataforma Juntos componen el Entorno de Desarrollo Integrado o IDE de Xojo En el IDE puedes crear la interfaz de tu app simplemente arrastrando y soltando los objetos de la interfaz en las vistas de dise o de la app En esta Gu a R pida ver s cuan sencillo es Xojo te proporciona todas las herramientas necesarias para crear virtualmente cualquier tipo de app que puedas imaginar Esta Gu a R pida es para las personas reci n llegadas al mundo de la programaci n y reci n llegadas a Xojo Te proporcionar una introducci n al entorno de desarrollo de Xojo y te guiar por el desarrollo de una app funcional de OS un navegador web sencillo Deber a de llevarte de 15 a 20 minutos completar la Gu a R pida Cop2. como Nombre de Aplicaci n Puedes dejar el Nombre de Empresa tal cual o cambiarlo Pulsa OK para abrir la ventana principal de Xojo denominada Workspace donde comenzar s a dise ar tu app Vista general Xojo abre el Workspace con la vista por defecto de tu app seleccionada en el Navegador y mostrada en el Editor de Diseno Figure 1 2 The Xojo Workspace SimpleBrowser Bd o Feedback E AA AN espectou A Fire E Ela 218 D eee Ela a a SimpleBrowser CONTENTS Launch Images BUILD SETTINGS Navegador el rea superior izquierda muestra todos los elementos del proyecto Por omisi n puedes ver View1 seleccionada el objeto App y los elementos de pantalla iPhone e iPad Utiliza el Navegador para navegar por los diferentes elementos del proyecto Editor de Dise o el rea central es el Editor de Dise o Utiliza el Editor de Dise o para dise ar la interfaz de usuario para las vistas de tu app Muestra la vista y previsualiza el aspecto que tendr al ejecutarse En esta ilustraci n la vista est vac a dado que aun no se ha a adido ning n control de interfaz 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 la vista del proyecto Dise as la vista arrastrando los controles desde la Librer a hacia la vista Puedes a adir un control a la vista haciendo dob
3. Propiedades de Button Tus usuarios hacen tap en el bot n para mostrar la p gina web Has de cambiar estas propiedades Name Caption y Auto Layout 1 En la vista Figure 2 1 Inspector Properties for selecciona el control Ne Button Button1 El ID Inspector cambia o EZ _ p Super iOSButton para mostrar las _ gt j Scope Public propiedades de gt W uuu Behavior Button Caption Show Enabled ELM 2 En el campo Name TextColor MEN cambia el nombre Visible ORT de Button1 a Auto Layout ShowButton Height 30 Right Parent Right StandardGap Pulsa Return para Top AddressField Top ver el cambio del Width 100 nombre en el Navegador 3 Asigna un texto a tu J Edit bot n cambiando el campo Caption de Untitled a Show Si no has alineado el Button con las guias de dise o es posible que quieras cambiar el Auto Layout de modo que el Button permanezca bajo la barra de navegaci n y est anclado a la derecha de la vista cuando cambie el tama o del dispositivo En la secci n Auto Layout ver s una lista de reglas que controlan el modo en el que aparece el Button en la vista En concreto querr s cambiar la regla Top para que se alinee con la parte superior del Text Field y la regla Right para asegurarte de que el Button permanece a la derecha de la vista En primer lugar selecciona la regla Top y haz clic en el bot n Edit Si no se m
4. abierto y View 1 visible en el Editor de Dise o Si no es as consulta el Prefacio Secciones 3 y 4 Ya est s listo para a adir controles a la nueva vista 1 Empieza con el Text Field En la Librer a haz clic en el icono del Text Field y arr stralo a la esquina superior izquierda de la vista en el Editor de Dise o A medida que te acerques a los bordes ver s indicadores de alineaci n 2 Acontinuaci n a ade el Button Figura 2 2 El Text Field en la Librer a ill All Controls a Buttons Inputs Controllers Project Items En la librer a haz clic en el icono Button y arr stralo a la esquina superior derecha de la vista El ltimo control es el HTML o Viewer lt A gt Arrastra el icono HTML Viewer sobre el rea vacia restante de la vista Ajusta el tama o de este contro using los manejadores de selecci n de modo que complete la mayor parte de la vista bajo el Text Field y el Button y usa las gu as de bloqueo que aparecen para ayudarte a alinearlo Figura 2 3 El HTML Viewer en la Librer a Buttons j Ta lI MO Controllers Project Items 0 a Q 10 Figura 2 4 Dise o de Vista con Controles O O 4 El ltimo paso consiste en cambiar el tama o del Text Field para hacerlo m s ancho Haz clic sobre l para que aparezcan los manejadores Haz clic sobre el manejador central derecho y arr str
5. adas a las interfaces gr ficas de usuario Negrita Se utiliza para enfatizar el primer uso de un nuevo t rmino en el libro y para destacar conceptos importantes Adem s los titulos de los libros como Gu a de Usuario Xojo se indican en cursiva e Cuando se indique que ha de seleccionarse un elemento en uno de los men s ver s selecciona File gt New Project Esto es equivalente a Selecciona New Project en el men File e Los atajos de teclado consisten en una secuencia de teclas que deben de pulsarse en el orden mostrado En Windows y Linux la tecla Ctrl es el modificador en OS X la tecla 36 Comando es el modificador Cuando veas el atajo Ctrl 0 o 3 0 significa que pulses la tecla Control en Windows o Linux y pulses a continuaci n la tecla O o bien la tecla Lo que deba de escribirse se muestra entre comillas como GoButton Algunos pasos te pedir n que introduzcas l neas de c digo en el Editor de C digo Aparecer n en una caja sombreada ShowURL Se lectedURL Text Cuando introduzcas el c digo ten en cuenta lo siguiente Escribe cada linea impresa en una l nea diferente del Editor de C digo No combines dos o m s l neas impresas en la misma l nea o bien dividas una l nea larga en dos o m s l neas No a adas espacios adicionales donde no est n indicados en el c digo impreso Por supuesto puedes copiar y pegar el c digo Cuando ejecutes tu app Xojo co
6. alo a la derecha hasta que las guias de alineaci n indiquen que est suficientemente cerca del Button Carrier F La vista final deberia de ser como la mostrada Untitled Untitled Secci n 3 Propiedades Qu es una Propiedad Una propiedad es una valor de una clase La modificaci n de los valores de propiedad permiten cambiar el comportamiento de la clase Para este proyecto querr s cambiar varias propiedades de la vista y sus controles Algunas de las cosas que haremos son Cambiar el nombre de todos los controles y la vista para que describan mejor su comportamiento y referirnos a ellos en el c digo e A adir un Titulo al Button e Definir las propiedades de Auto Layout para que los controles cambien de tama o correctamente en dispositivos OS de diferente tama o Inspector Se utiliza el Inspector para cambiar las propiedades de la vista y los controles Comparte la misma rea en la derecha del Workspace con la Librer a Para mostrar el Inspector haz clic en el bot n Inspector de la barra de herramientas o pulsa 36 1 Ctrl l en Windows y Linux 12 Secci n 4 Propiedades de Vista gt Si no lo has hecho a n muestra el Inspector haciendo clic en will disappear as they are covered by the navigation bar el bot n Inspector de la barra de herramientas y selecciona You will fix this in the next sections View1 en el Navegador 4 In the Title field change the name to SimpleBro
7. es controles e Text Field se utiliza un control Text Field para introducir texto En este proyecto el URL a mostrar se escribe en un Text Field en la parte superior de la vista Button se utiliza un Button para disparar una acci n El usuario hace clic en el bot n para cargar la p gina web del URL en el visor HTML HTML Viewer se utiliza un HTML Viewer para mostrar HTML una p gina web En este proyecto es lo que muestra la p gina web del URL Las siguientes secciones te guiar n en la creaci n de la interfaz de usuario y en la adici n del c digo necesario para hacer que la app funcione Figura 2 1 La App SimpleBrowser completada en un iPhone 6 Carrier F 2 24 PM L J SimpleBrowser http www wikipedia org Show Search Wikipedia Today s featured article Carsten Borchgrevink 1864 1934 was an Anglo Norwegian polar explorer and a pioneer of modern Antarctic travel He was the precursor of Robert Falcon Scott Ernest Shackleton Roald Amundsen and others associated with the Heroic Age of Antarctic Exploration He began his exploring career in 1894 by joining a Norwegian whaling expedition from which he brought back a collection of the first specimens of vegetable life within the Antarctic Circle From 1898 to 1900 Borchgrevink led the British financed Southern Cross Expedition which in 1899 Secci n 2 Crear la Interfaz de Usuario Dise ar La Vista Deber as de tener Xojo
8. le clic sobre l Puedes cambiar como se muestran los controles en la Librer a haciendo clic en el icono de rueda dentada y eligiendo un ajuste diferente Nota si la libreria no est visible haz clic en el bot n Libreria de la barra de herramientas Inspector no se muestra en la anterior ilustraci n Permite ver y cambiar las propiedades del control seleccionado Este rea de la ventana Workspace est compartida con la Librer a Puedes mostrar el Inspector haciendo clic en el bot n Inspector de la barra de herramientas El Inspector muestra informaci n sobre el elemento seleccionado en el Navegador o Editor Los contenidos del Inspector varian en funci n del elemento seleccionado Puedes cambiar el valor del Inspector introduciendo un nuevo valor en el campo situado a la derecha de la etiqueta de campo Cap tulo 2 App de Navegador Sencillo Aprende a crear una app de un navegador web Secci n 1 Vista General Sobre la App El mejor modo de aprender con rapidez a usar Xojo es creando una app Para esta Gu a R pida crear s un navegador web sencillo Una app Xojo est compuesta por una colecci n de objetos denominados clases Pr cticamente todo en Xojo es una clase incluyendo las vistas y sus controles En el proyecto SimpleBrowser utilizas la clase View por defecto para crear tu vista y a adir controles clases de interfaz de usuario a la vista para componer el dise o La app utiliza tr
9. mprobar en primer lugar el en OS X y a continuaci n la tecla O Suelta la tecla c digo en busca de errores de sintaxis Si esta comprobaci n modificadora despu s de haber ejecutado el atajo de teclado deriva en un error aparecer un panel en la parte inferior de la ventana principal para que lo revises Secci n 3 Comenzamos Ejecuta Xojo Si no lo has hecho ya es el momento de ejecutar Xojo 1 Haz doble clic en el icono de la aplicaci n para ejecutar Xojo Cuando termine la carga aparecer el Selector de Proyecto Figure 1 1 Project Chooser Window 8 0 0 Project Choose A k Q Web Company Name My Company Application Identifier com mycompany myapp Console d iOS 0 Recent Projects e 2 Xojo te permite crear diferentes tipos de aplicaciones Escritorio Web Consola e OS Para esta Gu a R pida crear s una app OS de modo que pulsa sobre OS 3 Deber as de ver tres campos a completar Nombre de aplicaci n Nombre de empresa e Identificador de Aplicaci n Nombre de Aplicaci n es el nombre de tu app Este ser el nombre de archivo que se crear para la app Nombre de Empresa es el nombre de tu empresa Puedes dejarlo en blanco Identificador de Aplicaci n es un identificador nico para esta app Se crear autom ticamente a partir de lo introducido en los dos campos previos pero puedes cambiarlo por lo que quieras Introduce SimpleBrowser
10. proyecto Los pasos que has de realizar son 1 Averiguar que el usuario ha hecho tap sobre ShowButton llamado Show en la vista 2 Obtener el URL que tu usuario ha introducido en el AddressField 3 Que el WebViewer muestre the URL Sigue estos pasos para a adir el c digo 1 En la vista haz doble clic en el control de bot n ShowButton etiquetado Show Aparecer la ventana Add Event Handler Cuando un usuario haga tap en un Button tu app ejecutar el c digo Figure 2 3 Add Event Handler Window Add Event Handler to ShowButton The Action event handler is called when the button is pressed tapped clicked etc incluido en su manejador de evento Action Esto significa que querr s a adir el c digo al manejador de evento Action as que selecciona Action en la lista de Event Handler y haz clic en OK Observa que el Navegador se actualiza para mostrar el evento Action bajo el control ShowButton y pasa a mostrar el Editor de C digo Este paso soluciona tu primer problema a la hora de saber si el usuario ha hecho tap sobre ShowButton 20 2 Ahora has de obtener el URL que ha introducido El valor introducido por el usuario en un Text Field se almacena en la propiedad Text del Text Field Puedes acceder a la propiedad Text as AddressField Text 3 El ltimo paso es lograr que el WebViewer muestre la p gina web Esto se lleva a cabo llamando el m todo LoadURL del control HTML Viewe
11. r WENE cambia el nombre de Visible ORIO TextField1 a lb AddressFiela Pulsa Left Parent Left StandardGap Return Dara ver el Right ShowButton Left StandardGap i Top TopLayoutGuide Bottom Standar cambio del nombre en el Navegador 3 En el campo Edit KeyboardType Selecciona el valor URL del menu desplegable Esto mostrar el teclado especial de URL en el dispositivo OS una vez que el usuario haga tap sobre el campo En el campo Text cambia el texto de Untitled a http www wikipedia org Sino has alineado el Text Field usando las gu as de dise o es posible que debas de hacer cambios a Auto Layout de modo que el Text Field sea m s peque o o grande cuando el tama o de la vista cambie sobre los diferentes dispositivos en los que se vaya a usar En la secci n Auto Layout ver s una lista de reglas que controlan el modo en el que aparecer la vista en el Text Field En particular querr s cambiar la regla Top de modo que el Text Field utilice un espacio est ndar bajo la gu a de dise o superior Para ello haz clic en la regla Top y haz clic a continuaci n en el bot n Edit 14 6 Define los valores para la regla de Auto Layout tal y como se muestra y pulsa en Done Auto Layout Top s Equal To Relative To TopLayoutGuide 4 4 4 Edge Bottom Scale 100 Offset Standard w Priority Auto m 15 Secci n 6
12. r y envi ndole el URL introducido por el usuario Ahora tu c digo tendr este aspecto WebViewer LoadURL AddressField Text 4 A ade este c digo en el Editor de C digo Empiza haciendo clic en el espacio en blanco bajo el nombre del evento Action y escribe este c digo escr belo en vez de copiarlo y pegarlo WebViewer LoadURL AddressField Text Eso es todo Tu primera app est completa Secci n 9 Probar el Navegador Sencillo QU VIENE A CONTINUACI N La Gu a R pida te ha introducido a Xojo Has aprendido como dise ar una vista a adir controles a adir c digo y ejecutar el proyecto A continuaci n deber as de seguir el Tutorial y explorar seguidamente la Gu a del Usuario y la Gu a de Referencia para continuar aprendiendo c mo crear apps geniales con Xojo Guardar tu Proyecto Deberisa de guardar de forma peri dica tu proyecto y siempre antes de ejecutarlo 1 Guarda el proyecto seleccionando File gt Save 2 Asigna el nombre SimpleBrowser al proyecto y haz clic en Save Ejecutar tu Proyecto Ahora puedes probar tu app finalizada 1 Para ejecutar un proyecto OS debes de descargar e instalar en primer lugar Xcode de modo que puedas utilizar la app OS Simulator sobre OS X Puedes descargar Xcode de forma gratuita desde la Mac App Store Despu s de que hayas descargado e instalado Xcode has de ejecutarlo una vez al menos para aceptar el Acuerdo de Licencia Despu
13. s de eso puedes salir de Xcode dado que no lo necesitar s 2 Haz clic en el bot n Run de Xojo para ejecutar la app en el simulador de IOS 3 Escribe el URL de tu elecci n o utiliza el introducido por omisi n y haz clic en el bot n Show 22 4 Ver s la p gina web 5 Cuando hayas terminado de experimentar con la app Simple Browser puedes salir del Simulador iOS para volver a Xojo 23
14. ublic Pulsa Return para ii Stala 100 O ver el cambio del Sekavior Cl r Visible ETH et Standard w nombre en el gt u ama Auto Layout Priority Auto lt Navegador Bottom BottomLayoutGuide Bottom Cancel Left Parent Left 3 Por ltimo has de Right Parent Right Ti AddressField Bottom StandardGa cambiar el Auto de i Layout de modo que el HTML Viewer siempre utilice el resto del 18 5 Selecciona la regla Left haz clic en Edit y define sus valores a los mostrados Auto Layout Left ls Equal To 4 4 Relative To Parent Edge Left Scale 100 4 Offset 0 Priority Auto Cancel Done 6 Selecciona la regla Right haz clic en Edit y define sus valores a los mostrados Auto Layout Right is EqualTo Relative To Parent Edge Right Scale 100 Offset 0 Priority Auto lt Cancel Done Recuerda si cualquiera de las reglas que quieres editar no aparecen en el listado puedes a adirlas usando el bot n de la secci n Auto Layout del Inspector 19 Secci n 8 A adir el C digo Editor de C digo Tu app ya est casi completa Ahora es el momento de a adir el c digo que indicar al HTML Viewer qu p gina web ha de mostrar Xojo utiliza un lenguaje de programaci n orientado a objetos que es f cil de aprender S lo necesitas una l nea de c digo para finalizar el
15. uestra la regla Top puedes a adirla usando el bot n en la parte inferior del rea de Auto Layout Define los valores de la regla Auto Layout como 16 se muestra y pulsa en Done Auto Layout C ccc Top s Equal To Relative To AddressField 4 4 Edge Top Scale 100 Offset 0 v 4 Priority Auto gt 6 Por ltimo haz clic en la regla Right haz clic en Edit define sus valores como se muestra y pulsa en Done Auto Layout Right s Equal To 4 Relative To Parent 4 4 Edge Right Scale 100 Offset Standard w Priority Auto a 17 Secci n 7 Propiedades de HTML Viewer El ltimo cambio de la interfaz de usuario es el rea en la View En concreto cambiar s estas reglas de correspondiente al HTML Viewer Aqu tendr s que cambiar Auto Layout rules Top Left y Right Es posible que no estas propiedades Name y Auto Layout debas de cambiarlas todas si has usado las gu as de dise o al posicionar el HTML Viewer 1 En la vista selecciona el control HTMLViewer1 El Inspector cambia para mostrar las propiedades del HTML 4 Selecciona la regla Top haz clic en Edit y define sus Viewer valores a los mostrados Figure 2 2 Inspector Properties for AA 2 En el Campa Name HTML Viewer H cambia el nombre D Is Equal To 4 de HTMLViewer1 Name Relative To AddressField sx ci Super iOSHTMLViewer Le _ Scope P
16. wser Has de cambiar las propiedades Name Press Return and you will see the name change in the NavigationBarVisible y Title navigation bar 1 En primer lugar en el Editor de Figura 2 5 Inspector de View Diseno haz clic en el borde iPhone ID de la vista para seleccionarla El Name Inspector mostrar ahora las Super iosView propiedades para la vista Interfaces Choose 2 En el campo Name ubicado en el PP grupo ID cambia el nombre de Rao ios O on d View1 a BrowserView Pulsa NavigationBarVisible Return para ver el cambio reflejado TabTitle en el Navegador Title SimpleBrowser 3 En el campo NavigationBarVisible pon el switch a ON Esto muestra la barra de navegaci n para la vista When you do this the Text Field and Button 13 Secci n 5 Propiedades de Text Field El Text Field es donde tu usuario introducir el URL que quiera ver en el navegador Querr s cambiar las siguientes propiedades en el Inspector Name KeyboardType PlaceHolder Text y Auto Layout Figura 2 6 Propiedades del Inspector para el Text Field 1 En el Navegador ID Name AddressField selecciona el control Super OSTextField TextField1 de Scope Public BrowserView El Inspector cambia para Enabled FE KeyboardType URL mostrar las propiedades j PlaceHolder del Text Field Text http www wikipedia org TextAlignment Left 2 En el campo Name TextColo
17. yright Todo el contenido est protegido por derecho de copia en favor de Xojo Inc 2014 Todos los derechos reservados No se puede reproducir o transmitir de forma alguna parte de los contenidos o de los archivos relacionados bajo ning n medio ya sea electr nico fotocopia grabaci n o de alg n otro modo sin el consentimiento expreso por escrito por parte del editor Marcas registradas Xojo es una marca registrada de Xojo Inc Este libro identifica los nombres de producto y servicios conocidos por ser marcas marcas registradas o marcas de servicios de sus respectivos propietarios Se utilizan a lo largo de este libro s lo con prop sito editorial Adicionalmente los terminos que puedan ser marcas marcas registradas o servicios protegidos como marca se han diferenciado mediante el uso de may sculas si bien Xojo Inc no puede aseverar la precisi n de esta informaci n El uso de un termino en este libro no deber a de observarse como la validez o confirmaci n de una marca marca registrada o servicio de marca Xojo Inc no est asociado con ning n producto o fabricante mencionado en este libro Secci n 2 Convenciones de Presentaci n La Gu a R pida utiliza capturas de pantalla obtenidas en las versiones Xojo de Windows OS X y Linux El dise o de interfaz y el conjunto de caracter sticas son id nticos en todas las plataformas de modo que las diferencias entre las plataformas son cosm ticas y limit
Download Pdf Manuals
Related Search