Watch, Follow, &
Connect with Us

Jose Perez’s Blog

RAD Studio XE5 - Creación de un menú desplazable

Esta entrada es una traducción al español del post "RAD Studio XE5 – Creating a drawer" escrito por José León en su blog personal.


Otro paradigma común en las interfaces de usuario para móviles es un menú desplazable donde mostrar las opciones de la aplicación. En el siguiente screencast mostramos lo fácil que es diseñar un menú desplazable y añadir un poco de animación y sombreado para que tenga un estilo moderno y actual.

Cabe destacar que todo el código programado va a funcionar sin problemas en iOS y Android, no se requieren cambios.

A continuación podemos ver una captura de lo que conseguiremos si seguimos el tutorial paso a paso:

Menú desplazable

En el siguiente screencast podemos ver cómo crear el menú desplazable paso a paso:.

En el siguiente enlace puedes descargar el código fuente de esta demo.

Actualización 17/10/2013

José León ha subido un vídeo de demostración donde podemos ver en funcionamiento el ejemplo de la ventana emergente y un menú desplazable en un dispositivo Android. El vídeo es este:


Esta entrada es una traducción al español del post "RAD Studio XE5 – Creating a drawer" escrito por José León en su blog personal.

Posted by José Pérez on October 16th, 2013 under RadStudioXE5 | Comment now »


RAD Studio XE5 - Creación de un cuadro de mensaje personalizado

Esta entrada es una traducción al español del post "RAD Studio XE5 – Creating a custom MessageBox" escrito por José León en su blog personal.


Este es el primer artículo de una serie en la que vamos a explicar cómo crear patrones de interfaz de usuario (UI) con FireMonkey.

En este artículo mostraremos cómo crear un cuadro de diálogo con un mensaje personalizado, que será multi-dispositivo y adaptable a la plataforma donde sea ejecutada.

Este es el resultado final:

messagebox

En el siguiente screencast veremos cómo crear el efecto de oscurecer la interfaz de usuario, utilizando el componente ShadowEffect, conseguir esquinas redondeadas, el uso de gradientes, etc.

Por lo tanto, en este momento, ¿existe en el mercado algún otro producto que nos permita crear una aplicación con código nativo para mostrar una ventana de dialogo y que funcione en Windows, Mac OS X, iOS y Android? y ¿existe en el mercado algún otro producto que nos permita crear aplicaciones nativas sin tener que aprender nuevos lenguajes de programación diferentes y frameworks de desarrollo?
Si es así, por favor, háganoslo saber.

En el siguiente enlace podrá descargar el código fuente de este ejemplo.


Esta entrada es una traducción al español del post "RAD Studio XE5 – Creating a custom MessageBox" escrito por José León en su blog personal.

Posted by José Pérez on October 15th, 2013 under RadStudioXE5 | Comment now »


RAD Studio XE5 - ¿Qué hay de nuevo en el IDE (VI) - Administrador de dispositivos

Esta entrada es una traducción al español del post "RAD Studio XE5 – What’s new in the IDE (VI) – Device Manager " escrito por José León en su blog personal.


En XE4, la lista de dispositivos que teníamos disponible en el Diseñador de formularios del IDE era limitado y cerrado, es decir, que sólo teníamos disponibles dispositivos iOS (iPhone/iPad). Con la incorporación de la plataforma Android, vamos a disponer de una lista mucho más abierta, por lo que, además de la función de los dispositivos que están conectados/vinculados, podemos añadir nuestros propios dispositivos, por lo que podemos seleccionar en el diseño de aplicaciones móviles.

En el siguiente screencast mostramos cómo agregar un nuevo dispositivo al IDE y la finalidad de cada uno de los campos del Administrador de dispositivos.


Esta entrada es una traducción al español del post "RAD Studio XE5 – What’s new in the IDE (VI) – Device Manager " escrito por José León en su blog personal.

Posted by José Pérez on October 14th, 2013 under RadStudioXE5 | Comment now »


Usando Interbase en una aplicación iOS y Android

Esta entrada es una traducción al español del post "Cooking with InterBase on Android and iOS" escrito por Sarina DuPont en su blog personal.


Si eres usuario de Delphi o RAD Studio XE4, es probable que hayas usado IBLite (versión gratuita de InterBase en iOS) o IBToGo como base de datos en iOS. Con XE5, tenemos disponible IBLite tanto para iOS como para Android.

Hace un par de meses, Sarina Du Pont realizó una aplicación mobile de recetas para iOS llamada “Recipes” que nos permitía registrar nuestras propias recetas en una base de datos InterBase.

Cuando trabajamos con bases de datos en Android e iOS, necesitamos establecer la ruta donde se encuentra el fichero que contiene esa base de datos a través del Deployment Manager (Administrador de despliegues). El archivo RECIPES.IB está almacenado en la misma carpeta que el proyecto y lo he colocado en las siguientes rutas de acceso remoto:

iOS: StartUp\Documents

Android: .\assets\internal

A continuación mostramos la ruta que Sarina ha puesto en el data module (módulo de lectura/escritura datos) para la base de datos. Utilizamos esta función para que funcione en todas las plataformas y establezca en tiempo de ejecución la respectiva carpeta " Documentos " .


uses System.IOUtils;

procedure TDataModule1.DataModuleCreate(Sender: TObject);
begin
SQLConnection1.Params.Values['Database'] := IncludeTrailingPathDelimiter(TPath.GetDocumentsPath) + ‘RECIPES.IB’;
end;

A continuación podemos ver algunas capturas de pantalla de la aplicación ‘Recipes’ ejecutándose en una tablet Nexus 7, un teléfono Nexus 4 y iPhone 5:

A continuación podéis ver una lista de posts (en inglés) relacionados con Delphi para Android y escritos por miembros de RADStudio:


Esta entrada es una traducción al español del post "Cooking with InterBase on Android and iOS" escrito por Sarina DuPont en su blog personal.

Posted by José Pérez on October 14th, 2013 under RadStudioXE5 | Comment now »


RAD Studio XE5 - ¿Qué hay de nuevo en el IDE (V)? - Nuevo IDE Insight

Esta entrada es una traducción al español del post "RAD Studio XE5 – What’s new in the IDE (V) – New IDE Insight" escrito por José León en su blog personal.


En XE5, se ha renovado el IDE Insight para que esté siempre visible y sea más fácil de utilizar, en el siguiente video mostramos cómo se puede utilizar, y todas las combinaciones de teclas que podemos usar para obtener el máximo provecho de ellas.

Si queremos vaciar el campo de búsqueda, basta con pulsar ESCAPE una vez, si pulsamos ESCAPE de nuevo, el foco volverá donde estaba antes de usar la herramienta, por lo que es muy práctico si estamos escribiendo código y no queremos cambiar entre el teclado y el ratón.

En el siguiente screencast (en inglés) podemos ver cómo funciona el nuevo IDE Insight:


Esta entrada es una traducción al español del post "RAD Studio XE5 – What’s new in the IDE (V) – New IDE Insight" escrito por José León en su blog personal.

Posted by José Pérez on October 7th, 2013 under RadStudioXE5 | Comment now »


RAD Studio XE5 - ¿Qué hay de nuevo en el IDE (IV)? - Detección de dispositivos

Esta entrada es una traducción al español del post "RAD Studio XE5 – What’s new in the IDE (IV) – Device detection" escrito por José León en su blog personal.


En este post vamos a mostrar cómo el IDE detecta los dispositivos que tengamos conectados para que podamos seleccionarlos para instalar y ejecutar nuestras aplicaciones desde el mismo.

En XE5, hemos añadido soporte para la detección de dispositivos, tanto para iOS como para Android, siendo la única diferencia de que para iOS, el usuario debe actualizar manualmente el Project Manager (Gestor de proyectos) después de conectar cualquier dispositivo. Para Android, los dispositivos se detectan automáticamente después de conectarlo/desconectarlo en nuestra máquina.

Debemos tener en cuenta que en este post se asume que el usuario ha configurado previamente los drivers (controladores) de cada uno de los dispositivos Android correctamente.

Antes de empezar a trabajar con el IDE y nuestro dispositivo, debemos activar el modo depuración en el mismo:

  • En la mayoría de los dispositivos con Android 3.2 o superior, se encuentra esa opción en Ajustes > Aplicaciones > Desarrollo.
  • En Android 4.0 y posteriores, se encuentra en Configuración > Opciones para desarrolladores.

NOTA: En Android 4.2 y posteriores, las opciones para desarrolladores está oculta de manera predeterminada. Para que esté disponible, debemod ir a Ajustes > Acerca del teléfono y toque "Build number " Construir número siete veces. Volver a la pantalla anterior de encontrar opciones para desarrolladores.

NOTA:Cuando se conecta un dispositivo con Android 4.2.2 o superior al PC, el dispositivo mostrará un cuadro de diálogo preguntando si aceptamos una clave RSA que permita la depuración a través de ese equipo. Este mecanismo de seguridad protege los dispositivos de los usuarios, ya que garantiza que tanto la depuración USB como la ejecución de comandos adb no ejecuten hasta que desbloqueemos el dispositivo y le demos a aceptar en el cuadro de diálogo. Veamos un ejemplo en la siguiente captura:

Screenshot_2013-09-23-13-08-09
En el siguiente screencast muestra un ejemplo detección de dispositivos desde el IDE:


Esta entrada es una traducción al español del post "RAD Studio XE5 – What’s new in the IDE (IV) – Device detection" escrito por José León en su blog personal.

Posted by José Pérez on October 4th, 2013 under RadStudioXE5 | Comment now »


RAD Studio XE5 - ¿Qué hay de nuevo en el IDE (III)? – Deployment y construcción del APK

Esta entrada es una traducción al español del post "RAD Studio XE5 – What’s new in the IDE (III) – Deployment and APK building" escrito por José León en su blog personal.


El objetivo de este post es explicar lo que ocurre cuando seleccionamos la opción Run (Ejecutar) en nuestro proyecto Android.

Resumiendo, hay dos pasos importantes: Creación y Deployment, y esos pasos se dividen a su vez en otras dos etapas, como Compilación (Compiling), Enlazada (Linking), Empaquetado (Packaging), etc En el siguiente esquema podemos ver los pasos más importantes:

  • Construcción
    • Compilación: Genera los ficheros objeto de la aplicación
    • Enlazado (Linking): Utiliza los ficheros objeto generados para crear el ejecutable final, que para Android es una librería dinámica (un fichero con extensión .so)
  • Deployment

    • Packaging (Empaquetado): Crea el archivo apk que contiene los archivos binarios y los metadatos necesarios
    • Firmado (Signing): Firma el archivo apk, usando el keystore (almacén de claves) en modo (depuración) o una versión final con la keystore (almacén de claves) proporcionado por el usuario.
    • Zipalign: Optimiza el .apk según las especificaciones de Android.

En este artículo no vamos a explicar cómo se copia el .apk en el dispositivo, y tampoco cómo se ejecuta, que se verá más adelante.

Si siguientes curiosidad acerca de lo que pasa bajo el deployment, puedes utilizar la ventana de mensajes para obtener una lista de todos los comandos ejecutados en el proceso.

En el siguiente screencast se explica con detalle el proceso de deployment y construcción del APK:


Esta entrada es una traducción al español del post "RAD Studio XE5 – What’s new in the IDE (III) – Deployment and APK building" escrito por José León en su blog personal.

Posted by José Pérez on October 3rd, 2013 under RadStudioXE5 | Comment now »


RAD Studio XE5 - ¿Qué hay de nuevo en el IDE (II) - AndroidManifest.xml

Esta entrada es una traducción al español del post "RAD Studio XE5 – What’s new in the IDE (II) – AndroidManifest.xml" escrito por José León en su blog personal.


En este artículo explicaremos cómo genera el IDE el archivo AndroidManifest.xml que se debe incluir en el APK de la aplicación, qué ajustes se han introducido y cómo se puede personalizar libremente este archivo para agregar lo que necesitemos.

Para generar el archivo AndroidManifest.xml, el IDE busca en el directorio del proyecto un archivo llamado AndroidManifest.template.xml, si no existe, se copia un archivo estándar que se encuentra en C:\Program Files\Embarcadero\RAD Studio\12.0\ObjRepos\en\Android\AndroidManifest.xml en el directorio del proyecto.

A continuación, se reemplazarán todos los marcadores de posición (%variable%) por sus valores correspondientes, por ejemplo, %minSdkVersion%, colocando el fichero AndroidManifest.xml final en la carpeta de salida diseñada para el proyecto. Una vea realizado esto ya tenemos preparada la aplicación para su empaquetamiento (packaging) y firmado final.

Así que, como podemos ver, el IDE nos permite generar fácilmente el archivo AndroidManifest.xml, y, en caso de que necesitemos realizar cualquier ajuste de forma manual, nos permite hacerlo editando libremente el template (plantilla) AndroidManifest.template.xml al que también debemos considerar como un archivo de código fuente.


Esta entrada es una traducción al español del post "RAD Studio XE5 – What’s new in the IDE (II) – AndroidManifest.xml" escrito por José León en su blog personal.


Posted by José Pérez on October 2nd, 2013 under RadStudioXE5 | Comment now »


RAD Studio XE5 - ¿Qué hay de nuevo en el IDE (I) - Introducción

Esta entrada es una traducción al español del post "RAD Studio XE5 – What’s new in the IDE (I) – Introduction " escrito por José León en su blog personal.


Primer artículo de una serie en la que mostraremos cuáles son las nuevas características que podemos encontrar en el nuevo RAD Studio XE5. Estos artículos están directamente relacionados con los nuevos requerimientos/mejoras que hemos implementado en el producto, y el objetivo es proporcionar una comprensión más o menos profunda de lo que se hemos añadido en esta nueva versión.

En el siguiente video explicamos los cambios introducidos en la página de inicio (Start Here), donde se puede acceder a la configuración de la plataforma Android desde el gestor de proyectos (Project Manager). En futuros artículos nos centraremos en características individuales e intentaremos explicar todo con el mayor detalle posible.


Esta entrada es una traducción al español del post "RAD Studio XE5 – What’s new in the IDE (I) – Introduction " escrito por José León en su blog personal.

Posted by José Pérez on September 12th, 2013 under RadStudioXE5 | Comment now »


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.



Posted by José Pérez on May 16th, 2013 under RADStudioXE4 | Comment now »




Server Response from: BLOGS2