Entradas

Mostrando entradas de 2019

Ejemplo: JavaScript desde Kotlin

Imagen
Página web desarrollada con KotlinJS con ejemplos de: Cómo utilizar botones HTML para producir acciones (abrir ventanas de alerta, cambios de estilo, actualizar variables). Insertar código JavaScript con la función js("..."). Declarar de forma segura API de JavaScript con la palabra reservada external .

Ejemplo de Kotlin JS para desarollo web

Imagen
Un ejemplo simple, similar al código que vimos en la entrada Ejemplo: Html Builder (KotlinJS) , sobre cómo usar Kotlin en el desarrollo web en lugar de Javascript. Adaptación del código Kotlin JS for Web development disponible en el repositorio kotlinjs-example .

Ejemplo: Html Builder (KotlinJS)

Imagen
Ejemplo para crear una web html con Kotlin ilustrando y ampliando el contenido expuesto en la entrada Introducción a KotlinJS: Desarrollo web con Kotlin .

Introducción a KotlinJS: Desarrollo web con Kotlin

Imagen
Hasta ahora estamos escribiendo Kotlin principalmente para el desarrollo de aplicaciones en Android, pero Kotlin es un lenguaje de programación versátil con cuatro ámbitos principales de aplicación: Android, JVM, nativo y, lo que nos interesa ahora, desarrollo web .

Android: Diseño adaptado a la orientación de pantalla

Imagen
A la hora de desarrollar una aplicación habitualmente creamos un diseño en vertical puesto que es la orientación por defecto, aunque suele ser conveniente que el diseño sea lo suficientemente flexible para adaptarse a la rotación del dispositivo y mostrarse de manera correcta también en horizontal.

Material Design: Paleta de colores

Imagen
A partir de la versión 5.0 de Android (API 21), Google introduce una guía para el diseño visual de las aplicaciones, conocida como Material Design , que pretende proporcionar una experiencia consistente a través de distintas plataformas y aplicaciones.

Introducción al ciclo de vida de una actividad en Android

Imagen
En Android toda actividad (y también todo fragmento) tiene lo que se conoce como ciclo de vida ( activity lifecycle ), término que hace alusión a los ciclos de vida de los animales, especialmente gráfico en los diferentes estados que atraviesa la mariposa en su proceso de metamorfosis.

Android: log con Timber

Imagen
En entradas anteriores, como por ejemplo en Anatomía de una app básica y en Fundamentos de Android: Interacción del usuario , ya hemos visto el uso de la clase Log para ver el historial de log o registro de eventos o acciones en una aplicación. Por ejemplo, para comprobar el estado Created dentro del ciclo de vida de la actividad de una aplicación, dentro del método onCreate podemos incluir:

Bucles con repeat

Imagen
Hasta ahora hemos creado bucles con instrucciones como for , while y do/while , pero la biblioteca estándar de Kotlin también contiene otra instrucción, repeat , que nos permite otra forma de crear estructuras de repetición.

Expresiones frecuentes en Kotlin

Imagen
Colección de expresiones de uso frecuente (modismos) en Kotlin.

Android Studio con corrector ortográfico en español

Imagen
Con frecuencia Android Studio nos lanza alertas " Typo: in word " en relación, por ejemplo, al nombre de una variable. Este tipo de advertencias nos avisan de posibles errores ortográficos, aunque realmente significan que esa palabra no es reconocida, y más concretamente que esa palabra no está en el diccionario, o mejor dicho, en ninguno de los diccionarios instalados.

Android: Diálogo para introducir datos

Imagen
En esta entrada vamos a ver dos métodos para mostrar un diálogo que sirve para que el usuario introduzca algún dato que la aplicación le solicita. El primer método utiliza la clase AlertDialog para activar un recurso de diseño con un EditText , y luego configura los botones Aceptar y Cancelar:

Crear Views dinámicamente

Imagen
Hasta ahora hemos visto la manera de crear elementos de diseño de manera estática a la vez que diseñamos el aspecto visual, organizados como recursos en los archivos de diseño XML, pero en muchas aplicaciones nos interesa crear elementos visuales programáticamente, esto es, desde el código fuente en función de la dinámica de la propia aplicación.

Navegando por la aplicación (2ª parte)

Imagen
En esta entrada, que es una continuación de Navegando entre fragmentos , vamos a ver cómo facilitar al usuario otras maneras de navegar por una aplicación, y concretamente, partiendo de la aplicación Test CI que vimos en esa entrada, vamos a añadir nuevas posibilidades para moverse entre fragmentos. Para ello vamos a presentar el contenido secuenciado en tres pasos a modo de objetivos:

Clases restringidas o selladas (sealed classes) en Kotlin

Imagen
Antes de entrar en las clases selladas vamos a recordar lo que vimos en su día sobre los enumerados o enum class en Kotlin con un ejemplo:

Navegando entre fragmentos

Imagen
En esta entrada vamos desarrollar una aplicación para ilustrar el uso de fragmentos (en la primera parte) y las rutas de navegación (en una segunda parte) en Android con Kotlin. La aplicación representa un sencillo test de inteligencia cuyo diseño se distribuye en varios componentes principales (estos componentes nos servirán de referencia a la hora de crear los fragmentos):

Android Studio con Java 8

Imagen
Desde la versión 3.0 (y posteriores) Android Studio admite todas las funciones del lenguaje Java 7 además de un subconjunto de funciones de Java 8 que varía según la versión de la plataforma (hay que tener en cuenta que, aunque el uso de Java 8 es opcional, para la compilación de aplicaciones con Java 7 se debe usar JDK 8).

Fundamentos de Android: Introducción a los Fragmentos

Imagen
Android introduce los fragmentos en Android 3.0 (nivel de API 11) principalmente para admitir diseños de la interfaz de usuario (IU o UI, de user interface ) más dinámicos y flexibles en pantallas grandes, como las de las tablets, dividiendo el diseño de una actividad en fragmentos, lo que permite modificar el aspecto de la actividad en tiempo de ejecución. Un fragmento ( fragment ) representa una parte de la IU en una actividad. Podemos combinar múltiples fragmentos en una sola actividad para construir una IU compleja,

Operaciones con colecciones IX: Operaciones de escritura

Imagen
Aunque más adelante veremos otras características y funcionalidades de las colecciones, y concretamente operaciones específicas para listas, conjuntos y diccionarios, con esta entrada terminamos la serie dedicada a las operaciones con colecciones . Las colecciones mutables admiten ciertas operaciones que permiten cambiar su contenido, por ejemplo agregando o eliminando elementos

Ejercicio de diseño: de LinearLayout a ConstraintLayout

Imagen
Hasta ahora hemos visto diversos conceptos relativos al diseño y la distribución de elementos en la pantalla, pero la mejor manera de familiarizarse con ellos es utilizarlos y trastear con el editor de diseño . Por ello, en esta entrada vamos a practicar con el diseño de una aplicación, y concretamente vamos a transformar una aplicación diseñada a base de LinearLayout para convertir el contenedor principal de elementos en un ConstraintLayout (ver Fundamentos de Android: Diseño con ConstraintLayout ) y

Data Binding para mostrar datos

Imagen
En la entrada anterior ( Fundamentos de Android: Data Binding ) vimos cómo utilizar Data Binding para acceder a los elementos del diseño desde la actividad. Pero además podemos usar data binding para mostrar datos haciendo que los objetos de una data class (ver Clase de datos o data class en Kotlin ) estén directamente disponibles para un elemento del diseño.

Fundamentos de Android: Data Binding

Imagen
Hasta ahora hemos visto dos maneras para acceder a los elementos visuales del diseño ( views ) desde la actividad: El clásico método findViewById con la referencia del recurso del elemento como argumento, por ejemplo: val dadoBoton : Button = findViewById ( R . id . dado_boton ) Y el " método síntético " ( synthetics ) de las extensiones de Android de esta manera:

Fundamentos de Android: Diseño con ConstraintLayout

Imagen
Hasta ahora en nuestros diseños hemos utilizado LinearLayout como contenedor de elementos. En esta entrada vamos a utilizar ConstraintLayout para realizar el diseño de una aplicación sencilla, además de repasar otros conceptos ya conocidos como, por ejemplo, el manejo de recursos de distinto tipo (dimensiones, texto, estilos, fuentes...) y la interacción del usuario que puedes revisar en entradas previas.

Operaciones con colecciones VIII: obtener valores de agrupación

Imagen
Continuando la serie sobre operaciones con colecciones , en esta entrada vamos a ver un conjunto de funciones que realizan operaciones (de agrupación o agregación, del inglés aggregate operations ) para calcular ciertos valores o índices de agrupación a partir de los datos de la colección, como por ejemplo, los valores mínimo y máximo, el número de elementos, la suma de todos los elementos, la media o la suma acumulada

Fundamentos de Android: comunicación entre actividades

Imagen
Hasta ahora hemos visto aplicaciones sencillas con una sola actividad pero lo más común es que una aplicación tenga varias actividades , y además que enviemos datos desde una a otra actividad. Vamos a verlo con un ejemplo.

Fundamentos de Android: Interacción del usuario

Imagen
En esta entrada vamos a practicar agregando cierta interacción del usuario a una aplicación, y para ello vamos a retomar la aplicación About que diseñamos en la entrada Fundamentos de Android: Editor gráfico de diseño . Concretamente vamos a permitir al usuario introducir un texto y pulsar un botón para actualizar un elemento visual con ese texto.

Operaciones con colecciones VII: Ordenando los elementos

Imagen
En ciertos tipos de colecciones, el orden de sus elementos es un aspecto importante. Además, hay que tener en cuenta que dos listas con los mismos elementos no son iguales si sus elementos están ordenados de manera diferente. En Kotlin, los objetos se pueden ordenar siguiendo distintos criterios

Fundamentos de Android: Editor gráfico de diseño

Imagen
En esta entrada vamos a practicar con el editor gráfico de diseño de Android Studio . Para ello vamos a crear una aplicación con una actividad del tipo "Acerca de" ( About ) que mostrará información utilizando distintos elementos visuales ( views ), como un TextView , una ImageView y un ScrollView , cuyo diseño se organizarán en un LinearLayout

Funciones estándar (Scope Functions) III: apply y also

Imagen
Tercera entrega sobre las funciones estándar (revisar las entradas Funciones estándar I: let y Funciones estándar II: with y run ), que se centra en las funciones apply() y also()

Android útil: Cambiar icono de aplicación

Imagen
Cada nueva aplicación creada con Android Studio cuenta con un icono de lanzamiento por defecto que representa la aplicación y sirve para iniciarla. Esta entrada breve y muy gráfica, a modo de tip práctico, muestra un método rápido para cambiar el icono de lanzamiento de una aplicación en Android sustituyendo el icono por defecto por una imagen prediseñada

Operaciones con colecciones VI: Recuperar elementos

Imagen
Continuando con la serie sobre Operaciones con colecciones , en esta entrada veremos que las colecciones en Kotlin también proporcionan un conjunto de funciones para recuperar elementos individuales de las colecciones, lo que se aplica tanto a listas como a los conjuntos, utilizando para ello distintos métodos para referirse a los elementos

Funciones estándar (Scope Functions) II: with y run

Imagen
Después de presentar las funciones estándar en Kotlin, ver las principales diferencias entre ellas y detenernos en la función let (ver Funciones estándar (Scope Functions) I: let ), en esta segunda parte veremos otras dos funciones estándar: with y run

Fundamentos de Android: Plantilla de Actividad Básica

Imagen
Ya hemos visto que cuando iniciamos un nuevo proyecto, Android Studio proporciona plantillas de diseño para nuestra aplicación. Cada plantilla incorpora el esquema básico de una actividad y una interfaz de usuario, lo que nos pueden resultar útil para ahorrar tiempo y para seguir las prácticas recomendadas para el diseño, puesto que a partir de una estructura básica podemos ampliar y personalizar cada plantilla según nuestras necesidades

Funciones estándar (Scope Functions) I: let

Imagen
La biblioteca estándar de Kotlin contiene varias funciones cuyo único propósito es ejecutar un bloque de código dentro del contexto de un objeto. Cuando se llama a una función de este tipo con una expresión lambda se forma un ámbito ( scope ) temporal dentro del cual se puede acceder al objeto sin su nombre. Kotlin dispone de cinco funciones de este tipo: let, run, with, apply y also , que en conjunto reciben el nombre de Scope Functions (funciones de alcance) o funciones estándar

Ejercicio: Diccionario (Map) con valor por defecto

Imagen
En esta entrada vamos a ver cómo Kotlin maneja un valor predeterminado en un diccionario ( Map ), y vamos a practicar con soluciones alternativas que llegan al mismo resultado, intentando escribir un código cada vez más simple y conciso. Para ello supongamos que queremos escribir una función genérica que toma una colección como argumento y devuelve un diccionario que contiene los elementos de la colección (claves) asociados a su número de ocurrencias (valores): fun < T > contarFrecuencia ( valores : Collection < T >): Map < T , Int > Vamos a ver distintas maneras de hacerlo. En la primera, usamos un MutableMap y al iterar sobre cada elemento de la lista comprobamos si ese valor aparece en el diccionario: si no es así ( null ), le asignamos un conteo inicial de 1; de lo contrario incrementamos el contador: fun main () {     val letras = listOf ( "a" , "b" , "a" , "d" , "c" )     println ( contarElem...

Operaciones con colecciones V: Extraer partes de una colección

Imagen
La biblioteca estándar de Kotlin contiene funciones de extensión que sirven para recuperar partes de una colección (revisa otras operaciones con colecciones ). Estas funciones utilizan varias formas, como listar sus posiciones explícitamente o especificar el tamaño del resultado, para obtener una colección resultante que selecciona y toma unos elementos de la colección. Algunas de estas funciones son slice(), take() y takeLast(), drop() y dropLast(), chunked() y windowed() . slice() devuelve una lista de elementos de la colección con unos índices determinados que se pasan como argumento, ya sea como un rango o como una colección de valores enteros: val numeros = listOf ( "uno" , "dos" , "tres" , "cuatro" , "cinco" , "seis" ) println ( numeros . slice ( 1 . .3 ))             // [dos, tres, cuatro] println ( numeros . slice ( 0 . .4 step 2 ))      // [uno, tres, cinco] println ( numeros . slice ...

Fundamentos de Android: Niveles API

Imagen
A la hora de desarrollar aplicaciones para Android, una de las cosas que hay que tener en cuenta es la gran cantidad de dispositivos distintos en los que potencialmente se podría ejecutar, no solo smartphones, con distintas características de hardware y distintas versiones de sistema operativo, sino otros dispositivos como tablets, entre otros. Por eso se deben considerar ciertas restricciones y estrategias de compatibilidad cuando se escriben apps para Android. Para hacer esto dos buenos métodos son, por un lado, orientar la aplicación a un nivel específico de la API de Android (versión) y, por otro, usar las bibliotecas de Android Jetpack para admitir dispositivos más antiguos, puesto que cada versión del sistema operativo viene con nuevas características y funcionalidades. Vamos a analizar ambas técnicas. Recuerda que cuando se crea un proyecto con Android Studio , en la ventana ' Configure your project ', en ' Minimun API level ' se indica un nivel mínimo e...

Fundamentos de Android: Recursos de imagen

Imagen
Después de examinar la estructura básica de una aplicación para Android con Kotlin, en esta y posteriores entradas vamos a seguir explorando los fundamentos y componentes de cualquier aplicación , y ahora vamos a tratar concretamente sobre los recursos de imagen . Para ello vamos a continuar trabajando con el proyecto ' TirarDados ' y le vamos a agregar imágenes a esa aplicación (repasa la entrada Anatomía básica de una app para continuar el proyecto donde se dejó). Recuerda que dejamos esa aplicación con un botón que simulaba el lanzamiento de un dado y cada vez que se pulsaba aparecía en pantalla el valor del dado (un número de 1 a 6). Nuestro objetivo ahora será cambiar ese número por una imagen de un dado que muestre la puntuación obtenida al lanzarlo. ¡Empezamos! Abrimos el proyecto y con la vista Android activada, desplegamos la carpeta res . En la carpeta res se archivan los recursos que incluye cualquier aplicación, como imágenes e iconos, diseños asociados a l...

Clases anidadas y clases internas

Imagen
Dentro de una clase se puede definir otra clase que se conoce como clase anidada ( Nested Class ), y como esta clase anidada es miembro de la clase exterior, se puede usar la notación del punto para acceder a la clase anidada y a sus miembros:

Operaciones con colecciones IV: Operaciones de agrupamiento

Imagen
Retomando la serie dedicada a las funciones para realizar operaciones con las colecciones , en esta entrada nos centramos en las operaciones de agrupamiento ( Grouping ). La biblioteca estándar de Kotlin proporciona funciones de extensión para agrupar los elementos de una colección, siendo la función básica groupBy() . Esta función toma como argumento una función lambda y devuelve un diccionario ( Map ). En este diccionario cada clave es el resultado de la función lambda y cada valor correspondiente es una lista de los elementos de ese resultado. Esta función se puede utilizar, por ejemplo, para agrupar una lista de elementos tipo String por su primera letra. val lista = 1 . rangeTo ( 10 ). toList () val paresImpares = lista . groupBy { it % 2 } println ( paresImpares ) // {1=[1, 3, 5, 7, 9], 0=[2, 4, 6, 8, 10]} groupBy() también se puede utilizar con un segundo argumento lambda, una función de transformación del valor, y en este caso las claves producidas por la f...