Uso del componente TListView en nuestras aplicaciones móviles
Esta entrada es una traducción al español del post "Using TListView in your mobile applications" escrito por Sarina DuPont en su blog personal de Embarcadero Techonologies.
En Delphi XE4 se ha introducido el componente TListView que está diseñado para listas largas de datos, desplazables y que dichos datos contengan un enlace a otra página.
Un buen ejemplo de cómo utilizar el componente TListView en nuestras aplicaciones móviles y que además puede ser visualizado tanto en teléfonos como en tablets, es utilizar una plantilla maestra. Podemos acceder a estas plantillas a través del wizard (asistente) de creación nuevas aplicaciones móviles: File -> New -> FireMonkey Mobile Application
Si echamos un vistazo al componente TListView en la vista de estructura (Structure), veremos la propiedad ItemAppearance. Esta propiedad puede ser expandida, lo que nos permite elegir entre diferentes elementos preestablecidos de visualización tanto para el modo de pantalla normal como par el modo de edición.
TListView soporta totalmente los LiveBindings. Dependiendo del estilo establecido a los ítems de la lista, veremos diferentes miembros enlazables de la TListView en el LiveBindings Designer el cual podemos enlazar al origen de los datos que queremos visualizar, por ejemplo, una consulta de base datos, un XML, etc.
Share This | Email this page to a friend
Posted by José Pérez on May 16th, 2013 under RADStudioXE4 | Comment now »RAD Studio XE4 – Que hay de Nuevo en el IDE (IV) – Soporte al iPhone 5
Esta entrada es una traducción al español del post "RAD Studio XE4 – What’s new in the IDE (IV) – iPhone 5 Support" escrito por José León en su blog personal.
En RAD Studio XE4 se ha añadido soporte para el iPhone 5, para ello hay que seleccionarlo en el desplegable del diseñador del móvil, llamado iPhone 5, que cambia automáticamente las dimensiones específicas del diseñador.
Además, cuando creamos un nuevo formulario, podemos seleccionar el dispositivo que se mostrará en el diseñador, esto es muy útil si estamos diseñando nuestra aplicación para un tamaño de formulario específico y deseamos crear un nuevo formulario mobile específico para ese dispositivo.
Por último en el siguiente vídeo mostramos cómo una aplicación puede utilizar todo el estado real de la pantalla del iPhone 5, ya que damos soporte a la pantalla de bienvenida del iPhone 5 siguiendo la especificación estándar. Existe una alternativa que es utilizando la propiedad BorderStyle con el valor bsNone, que nos permite quitar la barra de estado de la pantalla.
Share This | Email this page to a friend
Posted by José Pérez on May 13th, 2013 under RADStudioXE4 | Comment now »RAD Studio XE4 – Que hay de Nuevo en el IDE (III) – Frames en FireMonkey
Esta entrada es una traducción al español del post "RAD Studio XE4 – What’s new in the IDE (III) – FireMonkey Frames" escrito por José León en su blog personal.
En XE4, hemos añadido soporte para crear Frames en las aplicaciones FireMonkey. Esto significa que ahora podemos dividir en trozos o frames la interfaz de usuario y reutilizarlos para construir nuestra aplicación. Para desarrolladores de la VCL, lo que queremos decir es que esto funciona igual que los Frames VCL.
El objetivo de los frames es proporcionar un contenedor visual donde poder colocar cualquiera de los componentes y crear una pieza reutilizable de la interfaz de usuario. Más tarde, cuando estemos diseñando nuestros formularios, vamos a poder colocar en ellos frames (trozos) y utilizarlos como paneles que contienen la interfaz de usuario con un comportamiento específico.
Podemos cambiar el frame y ese cambio se verá reflejado en todas las instancias de ese frame. Si deseamos personalizar un ejemplo de un Frame en un formulario específico, podemos hacerlo, pero después de eso los cambios en la estructura base no se verá reflejado en el control que contiene las instancias del frame.
A continuación se adjunta un vídeo donde podemos visualizar cómo funciona:
Share This | Email this page to a friend
Posted by José Pérez on May 13th, 2013 under RADStudioXE4 | Comment now »Crear un control segmentado para iOS en RAD Studio XE4
Esta entrada es una traducción al español del post "Creating a segmented control for iOS in RAD Studio XE4" escrito por Sarina DuPont en su blog personal de Embarcadero Techonologies.
Los controles segmentados son muy comunes actualmente en todas las aplicaciones iOS.
En XE4, podemos diseñar fácilmente un TSpeedButton que parezca y se comporte como un control segmentado cambiando la propiedad stylelookup y definiendo un nombre de grupo.
Podemos utilizar los pasos siguientes para crear rápidamente un componente de control segmentado ( reutilizable).
- Colocar 3 componentes TSpeedButton en un formulario.
- Cambiar la propiedad stylelookup de cada TSpeedButton a segmentedbuttonleft, segmentedbuttonmiddle y segmentedbuttonright.
- Seleccionar los 3 componentes TSpeedButton y el tipo en un GroupName (es decir mysegments)
Si queremos tener seleccionado uno de los segmentos por defecto, colocar la propiedad IsPressed del SpeedButton a True.
Para facilitar la reutilización en un futuro, seleccionamos los 3 TSpeedButtons del formulario (se puede utilizar la tecla Mayús para selección múltiple), e ir a Compent (componentes) - Crate Component Template (Crear plantilla de componentes).
A continuación podemos ver un captura de ejemplo:
Share This | Email this page to a friend
Posted by José Pérez on April 25th, 2013 under RADStudioXE4 | Comment now »RAD Studio XE4 - ¿Qué hay de nuevo en el IDE (II) - Soporte al Icono Retina para aplicaciones MAC OS X
Esta entrada es una traducción al español del post "RAD Studio XE4 – What’s new in the IDE (II) – Retina Icon Support for Mac OS X apps" escrito por José León en su blog personal.
Como se explicó en el anterior artículo "RAD Studio XE4 – Qué hay de nuevo en el IDE parte I – Empezar aquí", esta serie no es sólo acerca de iOS, pero sobre todas las modificaciones que se han realizado en el IDE para la versión XE4. Si bien éste ya estaba disponible en la versión P64, hemos pensado que podría ser útil hacer un nuevo post sobre ello.
Apple requiere que cualquier aplicación MAC enviada al App Store ofrezca las resoluciones Retina para el icono de la aplicación. Ahora podemos cumplir con ese requisito directamente mediante la especificación de un archivo ICNS que usaremos como el icono de la aplicación. ICNS es un formato específico de Apple, que puede contener más formatos y resoluciones más altas que su equivalente de Windows.
En versiones anteriores, el archivo ICNS se generaba mediante la conversión de un archivo ICO, pero dado que el formato ICO tiene un límite de 256×256 píxeles, hemos añadido una nueva opción dentro del IDE para que podamos especificar el archivo ICNS directamente.
Echemos un vistazo al siguiente vídeo para saber cómo funciona:
Share This | Email this page to a friend
Posted by José Pérez on April 24th, 2013 under RADStudioXE4 | Comment now »Embarcadero Technologies presenta una suite de desarrollo para realizar aplicaciones nativas para múltiples dispositivos: RADStudio XE4
Esta entrada es una traducción al español del post "Embarcadero Technologies Unveils Multi-Device, True Native App Development Suite" escrito por Tim DelChiaro en su blog personal.
Resumen: El producto RAD Studio XE4 permite a los desarrolladores crear aplicaciones profesionales para PCs, tablets y smartphones
Embarcadero Technologies, proveedor líder en herramientas de desarrollo software y de bases de datos, ha anunciado la disponibilidad de RAD Studio XE4, la suite de desarrollo de aplicaciones para desarrolladores que necesiten crear aplicaciones nativas para PCs, tablets, y smartphones y llevarlos al mercado rápidamente. Elaborado por Desarrolladores para Desarrolladores, RAD Studio XE4 permite a los usuarios gestionar una base de código, un equipo y un programa sin sacrificar el rendimiento.
"Este año cerca de mil millones de smartphones serán enviado, y por primera vez también se proyecta vender más tablets que PCs", dijo Michael Swindell, vicepresidente senior de productos. "Al mismo tiempo, ISVs y las empresas están bajo una tremenda presión para entregar rápidamente una gran experiencia del usuario en plataformas de dispositivos múltiples. A diferencia de HTML5 y el desarrollo de soluciones móviles basadas en JavaScript, RAD Studio XE4 permite a las organizaciones ofrecer verdaderas aplicaciones en scripts gratuitos, nativas a través de smartphones, tablets, PCs y Macs con una sola base de código ".
"Este es un anuncio emocionante", dijo Gary Barnett, Ovum. "Embarcadero se ha basado en una larga e impresionante historia de publicación de herramientas de desarrollo sólidas. Los desarrolladores pueden crear aplicaciones multicanal que son verdaderamente nativo para cada plataforma, y hacerlo con una base de código en un único entorno de desarrollo ".
RAD Studio XE4 ofrece el desarrollo de múltiples dispositivos para ARM y dispositivos Intel, incluyendo el iPhone de Apple, iPod touch, iPad, Mac OS X, Windows PC, pizarras y tabletas Surface Pro. Los beneficios que incluye son:
Desarrollo de aplicaciones multi-dispositivo
Con RAD Studio XE4, los desarrolladores pueden crear aplicaciones compiladas y optimizadas para plataformas de dispositivos múltiples. La complejidad se reduce a un conjunto de recursos de desarrollo para crear aplicaciones para múltiples plataformas - una base de código, un equipo y un horario.
Share This | Email this page to a friend
Posted by José Pérez on April 24th, 2013 under RADStudioXE4 | Comment now »RAD Studio XE4 – Qué hay de nuevo en el IDE parte I – Empezar aquí
Esta entrada es una traducción al español del post "RAD Studio XE4 – What’s new in the IDE (I) – Start Here" escrito por José León en su blog personal.
Primer post relacionado con el IDE RAD Studio XE4. En esta serie de artículos nos vamos a centrar exclusivamente en lo nuevo que se ha añadido en esta versión, desde el punto de vista de los requisitos. No nos vamos a centrar exclusivamente en la plataforma iOS, pero en cualquier mejora/cambio que se ha relacionado en el IDE. Por lo tanto, si quieres saber todos los detalles sobre las novedades en el IDE RAD Studio XE4, manténgase al tanto.
En el siguiente video se explica cómo funciona la nueva página de bienvenida. Dicha página es lo primero que vemos cuando arranca el IDE, y ahora, la sección por defecto es la sección Start Here (Empezar aquí). Esta página es una página sencilla de introducción con todo lo que necesitamos para la instalación y empezar a trabajar rápidamente.
El vídeo se puede visualizar aquí:
Share This | Email this page to a friend
Posted by José Pérez on April 23rd, 2013 under RADStudioXE4 | 1 Comment »HTML5 Builder – Contextos y Barra de herramientas secundaria
Esta entrada es una traducción al español del post "HTML5 Builder – Contexts and Secondary Toolbar" escrito por José León en su blog personal.
Uno de los grandes cambios en HTML5 Builder respecto a las versiones anteriores de RadPHP, es la inclusión del concepto "contextos". Lo que hemos tratado con este concepto es permitir al usuario centrarse en lo que está haciendo y eliminar herramientas que en realidad no son necesarias. Si usted está escribiendo código, sólo tiene que ver la estructura de su código y nada más. Al diseñar la interfaz de usuario de la aplicación, no es necesario ver la estructura del proyecto en todo momento. Eso es el objetivo de lo que llamamos "contextos", lo permite concentrarse en la tarea que está haciendo mediante la modificación del IDE de ofrecer sólo las herramientas que necesita.
Veamos una captura de pantalla de RadPHP XE2:
Para averiguar qué contexto es el que está activo en cada momento, podemos averiguarlo desde el menú de la parte superior derecha del IDE. Veremos algo como esto:
Los contextos disponibles dependen del tipo de módulo que está activo. Por ejemplo, las páginas del cliente (Client Page) tienen un contexto extra llamado “Template” (plantilla), y las páginas HTML tienen otro contexto denominado “Preview” (vista previa). Se puede cambiar de un contexto a otro simplemente haciendo clic en la etiqueta del contexto al queremos cambiar. El contexto activo se resaltará en color azul. En esta captura vemos los contextos para una página de servidor (Server Page). Echemos un vistazo a cada uno de ellos:
Home (Inicio)
Este es el contexto por defecto que siempre está disponible y muestra todas las opciones globales. En este contexto se puede acceder al "Project Manager" (Gestor de proyectos), Paquetes, todos los asistentes de instalación/despliegue, internacionalización, documentación, etc, y la ayuda.
A continuación podemos ver una captura del contexto Home:
Code (Código fuente)
Al cambiar a este contexto, el IDE oculta las herramientas que no son necesarios, como el “Object Inspector” (Inspector de Objetos), la “Tool Palette” (Barra de Herramientas), “Data Base Explorer” (Explorador de Base de Datos), etc, y sólo muestra el estructura y el editor de código dejando todo el espacio que necesitamos para escribir código cómodamente.
A continuación podemos ver una captura del contexto Code:
Podemos expandir dos barras de herramientas secundarias haciendo click en las flechas que hay debajo y a la derecha de la ventana. En realidad estas opciones no son necesarias para escribir código, pero tanto la barra de "templates" como la ventana de mensajes nos ayudan a escribir código y a visualizar información del código que estamos escribiendo. En la siguiente captura podemos las dos barras de herramientas expandidas:
A la derecha vemos desplegada la ventana de templates (plantillas con código predefinido), y en la barra de herramientas inferior diversas pestañas para visualizar los breakpoints (puntos de parada en una sesión de depuración), mensajes de error o advertencias, etc.
Design (contexto de diseño)
En este contexto, el IDE muestra las herramientas de diseño, como el panel Structure (estructura), el Object Inspector (inspector de objetos), la Tool Palette (barra de herramientas) y el Data Explorer (explorador de Datos). Cabe destacar que hemos ocultado la barra de estado, que estaba disponible en el contexto del Código, para tener más espacio para el contexto de diseño.
History (histórico)
Este contexto proporciona las herramientas necesarias para volver a una versión anterior de un archivo o para comparar diferentes versiones y así realizar un seguimiento de los cambios.
Debug (Depuración)
El cambio a este contexto, hace que el IDE muestre las herramientas relacionadas con la depuración, visualizaciones, variables locales y globales, Pila de llamadas, etc.
Barra de herramientas secundaria
Also that toolbar shows only the options available depending on what can be done, for example, you cannot copy some text if you don’t have something selected, so that option is not shown.
Prestemos atención ahora a la barra de herramientas secundaria que está colocada en la parte superior del contexto activado en ese momento, es una barra de herramientas más pequeña que la barra superior y contiene herramientas específicas para el contexto activo. Además esa barra de herramientas sólo muestra las opciones disponibles en función de lo que queramos hacer, por ejemplo, no se puede copiar un texto si no tiene algo seleccionado, por lo que esa opción no se muestra.
A continuación podemos ver algunas fotos de la barra de herramientas secundaria para los diferentes contextos y de estado:
Esta entrada es una traducción al español del post "HTML5 Builder – Contexts and Secondary Toolbar" escrito por José León en su blog personal.
Share This | Email this page to a friend
Posted by José Pérez on November 8th, 2012 under HTML5 Builder, css3, html5 | Comment now »HTML5 Builder - Interfaz de usuario - El repositorio
Esta entrada es una traducción al español del post "HTML5 Builder – UI – Repository" escrito por José León en su blog personal.
Otro objetivo era eliminar la mayor cantidad posible de cuadros de diálogo modales. Cuadros de diálogo modales es una manera fea de solicitar información a los usuarios, donde los usuarios se bloquean hasta que se presente una respuesta al software. Es un vestigio de antiguas aplicaciones de terminal y menor la aplicación tenga, mejor. Todavía hay algunos en el IDE, pero estar seguro de que va a tratar de eliminar cuando sea posible. Así que, siguiendo con los artículos relacionados con la interfaz de usuario, vamos a comprobar cómo se ha modificado el repositorio, la ubicación central desde donde se pueden crear todo tipo de módulos para el IDE. Este es RadPHP Repositorio XE2:
Este es el tamaño predeterminado de la ventana, en la que vamos a destacar varios aspectos:
- Si nunca ha utilizado el producto no sabrá para qué sirve cada elemento, por lo que tendrá que ir a la sección de ayuda.
- El tamaño de la ventana es limitado, aunque podemos cambiar su tamaño, el usuario encontrará restricciones de espacio limitado.
- Al ser una ventana modal debemos seleccionar una opción o cancelar el cuadro de diálogo.
Por tanto, lo que hemos hecho es lo siguiente:
- Cuando se selecciona un elemento se visualiza una descripción bastante completa incluyendo enlaces a a la documentación por si fuera necesario ampliar la información de ese elemento.
- Al no existir ningún cuadro de dialogo, esta página de bienvenida usa todo el espacio disponible en la pantalla, por lo que ya no hay necesidad de cambiar el tamaño de la ventana.
- No hay necesidad de proporcionar ningún dato, todos los elementos están ahí para que sean seleccionados. Si no necesitamos crear nada tan sólo tenemos que seleccionar otra opción.
Si queremos ejecutar cualquier elemento, hacemos doble click sobre él, o podemos usar la barra de herramientas, la opción más arriba a la izquierda la cual lanzará la opción elegida. Podemos acceder a la ayuda desde el icono de ayuda de la barra de herramientas.
Como se puede observar, sólo están visibles las opciones que realmente necesitamos en función del contexto en el que nos encontremos, quitando desorden en el entorno de trabajo.
Esta entrada es una traducción al español del post "HTML5 Builder – UI – Repository" escrito por José León en su blog personal.
Share This | Email this page to a friend
Posted by José Pérez on November 7th, 2012 under HTML5 Builder, css3, html5 | Comment now »Interesting links for develop HTML5 & CSS3 applications
Interesting links for develop HTML5 & CSS3 applications:
Company Support / Showcase
- http://www.apple.com/html5/
- https://demos.mozilla.org/en-US/
- http://www.chromeexperiments.com/
- http://www.html5rocks.com/en/
- http://ie.microsoft.com/testdrive/
- http://beta.theexpressiveweb.com/
Tutorials
- Building Apps with HTML5: What You Need to Know
- http://www.20thingsilearned.com/es-ES
- Dzinepress’ Ultimate Collection of HTML5 Tutorials and Useful Links
Others
Enlaces interesantes para desarrollar aplicaciones en HTML5 & CSS3:
Share This | Email this page to a friend
Posted by José Pérez on November 7th, 2012 under HTML5 Builder, css3, html5 | 2 Comments »
RSS Feed
Connect with Us