[{"data":1,"prerenderedAt":481},["ShallowReactive",2],{"navigation_docs":3,"-movil-jetpack-compose":298,"-movil-jetpack-compose-surround":476},[4,18,70,105,149,178,212,257],{"title":5,"path":6,"stem":7,"children":8,"icon":17},"Evaluación","\u002Fintroduction","1.introduction\u002F1.index",[9,12],{"title":10,"path":6,"stem":7,"icon":11},"Método de Evaluación","i-iconamoon-cheque-bold",{"title":13,"path":14,"stem":15,"icon":16},"Plataforma de Aprendizaje","\u002Fintroduction\u002Fplataforma","1.introduction\u002F2.plataforma","i-lucide-book-marked","i-lucide-house",{"title":19,"path":20,"stem":21,"children":22,"icon":25},"Interfaz Gráfica de Usuario","\u002Fgui","2.gui\u002F01.index",[23,26,30,34,38,42,46,50,54,58,62,66],{"title":24,"path":20,"stem":21,"icon":25},"¿Qué es una Interfaz Gráfica de Usuario (GUI)?","i-carbon-gui-management",{"title":27,"path":28,"stem":29,"icon":25},"Creación de Interfaces Gráficas de Usuario (GUI)","\u002Fgui\u002Fbuild-gui","2.gui\u002F02.build-gui",{"title":31,"path":32,"stem":33,"icon":25},"Componentes Básicos de Swing","\u002Fgui\u002Fcomponentes-basicos","2.gui\u002F03.componentes-basicos",{"title":35,"path":36,"stem":37},"El componente JFrame","\u002Fgui\u002Fjframe","2.gui\u002F04.jframe",{"title":39,"path":40,"stem":41},"El componente JPanel","\u002Fgui\u002Fjpanel","2.gui\u002F05.jpanel",{"title":43,"path":44,"stem":45},"El componente JButton","\u002Fgui\u002Fjbutton","2.gui\u002F06.jbutton",{"title":47,"path":48,"stem":49,"icon":25},"Elementos de texto en interfaces gráficas con Swing","\u002Fgui\u002Ftext","2.gui\u002F07.text",{"title":51,"path":52,"stem":53},"Elementos Visuales","\u002Fgui\u002Felementos-visuales","2.gui\u002F08.elementos-visuales",{"title":55,"path":56,"stem":57,"icon":25},"Eventos en Swing","\u002Fgui\u002Feventos","2.gui\u002F09.eventos",{"title":59,"path":60,"stem":61,"icon":25},"Controles en Swing","\u002Fgui\u002Fcontroles","2.gui\u002F10.controles",{"title":63,"path":64,"stem":65,"icon":25},"Atributos Comunes de los Componentes de Diseño","\u002Fgui\u002Fatributos-comunes","2.gui\u002F11.atributos-comunes",{"title":67,"path":68,"stem":69,"icon":25},"Layouts","\u002Fgui\u002Flayout","2.gui\u002F12.layout",{"title":71,"icon":25,"path":72,"stem":73,"children":74,"page":104},"Personalización","\u002Fpersonalizacion","3.personalizacion",[75,79,84,88,92,96,100],{"title":76,"path":77,"stem":78},"Jerarquía de clases en Swing","\u002Fpersonalizacion\u002Fjerarquia","3.personalizacion\u002F01.jerarquia",{"title":80,"path":81,"stem":82,"icon":83},"Personalización Inicial de Componentes Swing","\u002Fpersonalizacion\u002Fpersonalizacion-inicial","3.personalizacion\u002F02.personalizacion-inicial","i-carbon-palette",{"title":85,"path":86,"stem":87,"icon":83},"Tema y Personalización Avanzada en Swing","\u002Fpersonalizacion\u002Ftheme","3.personalizacion\u002F03.theme",{"title":89,"path":90,"stem":91,"icon":83},"Pintando en Swing","\u002Fpersonalizacion\u002Fpaint","3.personalizacion\u002F04.paint",{"title":93,"path":94,"stem":95,"icon":83},"Mi Tema 1: Comenzando con la Personalización","\u002Fpersonalizacion\u002Ftheme-start","3.personalizacion\u002F05.theme-start",{"title":97,"path":98,"stem":99,"icon":83},"UI Delegates: Personalizando la Apariencia de los Componentes","\u002Fpersonalizacion\u002Fui-delegates","3.personalizacion\u002F06.ui-delegates",{"title":101,"path":102,"stem":103,"icon":83},"Empleado delegadores de UI para personalizar la apariencia de los componentes","\u002Fpersonalizacion\u002Ftheme-02","3.personalizacion\u002F07.theme-02",false,{"title":106,"path":107,"stem":108,"children":109,"icon":148},"Programación concurrente","\u002Fconcurrencia","4.concurrencia\u002F01.index",[110,112,116,120,124,128,132,136,140,144],{"title":111,"path":107,"stem":108,"icon":83},"¿Qué es la concurrencia?",{"title":113,"path":114,"stem":115,"icon":83},"Unidades de Ejecución","\u002Fconcurrencia\u002Funidades-ejecucion","4.concurrencia\u002F02.unidades-ejecucion",{"title":117,"path":118,"stem":119,"icon":83},"Programa de flujo único y de flujo múltiple","\u002Fconcurrencia\u002Fflujos","4.concurrencia\u002F03.flujos",{"title":121,"path":122,"stem":123,"icon":83},"Hilos con Thread y Runnable","\u002Fconcurrencia\u002Fthread-runnable","4.concurrencia\u002F04.thread-runnable",{"title":125,"path":126,"stem":127},"Paralelismo V.S. Concurrencia","\u002Fconcurrencia\u002Fparalelismo","4.concurrencia\u002F05.paralelismo",{"title":129,"path":130,"stem":131,"icon":83},"Problemas clásicos de concurrencia","\u002Fconcurrencia\u002Fproblemas","4.concurrencia\u002F06.problemas",{"title":133,"path":134,"stem":135,"icon":83},"Emulando condiciones de carrera en Java","\u002Fconcurrencia\u002Fcondiciones-carrera","4.concurrencia\u002F07.condiciones-carrera",{"title":137,"path":138,"stem":139,"icon":83},"Semáforos en Java","\u002Fconcurrencia\u002Fsemaforos","4.concurrencia\u002F08.semaforos",{"title":141,"path":142,"stem":143,"icon":83},"La clase Timer en Java Swing","\u002Fconcurrencia\u002Ftimer","4.concurrencia\u002F09.timer",{"title":145,"path":146,"stem":147,"icon":83},"Algoritmos de ordenamiento de procesos","\u002Fconcurrencia\u002Falgoritmos-procesos","4.concurrencia\u002F10.algoritmos-procesos","i-carbon-parallel-groups",{"title":150,"path":151,"stem":152,"children":153,"icon":177},"Acceso a datos","\u002Fdatos","5.datos\u002F01.index",[154,157,161,165,169,173],{"title":155,"path":151,"stem":152,"icon":156},"Java y las bases de datos","i-carbon-database",{"title":158,"path":159,"stem":160},"Cliente Servidor","\u002Fdatos\u002Fcliente-servidor","5.datos\u002F02.cliente-servidor",{"title":162,"path":163,"stem":164},"CRUD","\u002Fdatos\u002Fcrud","5.datos\u002F03.crud",{"title":166,"path":167,"stem":168},"Sentencias Preparadas con JDBC","\u002Fdatos\u002Fsentencia-preparada","5.datos\u002F04.sentencia-preparada",{"title":170,"path":171,"stem":172},"DAO (Data Access Object)","\u002Fdatos\u002Fdao","5.datos\u002F05.dao",{"title":174,"path":175,"stem":176},"Usando Hibernate ORM","\u002Fdatos\u002Form","5.datos\u002F06.orm","i-gravity-ui-database-fill",{"title":179,"path":180,"stem":181,"children":182,"icon":211},"Programación móvil","\u002Fmovil","6.movil\u002F01.index",[183,186,191,195,199,203,207],{"title":184,"path":180,"stem":181,"icon":185},"¿Qué es Android y Kotlin?","i-carbon-mobile",{"title":187,"path":188,"stem":189,"icon":190},"¿Qué es Android Studio?","\u002Fmovil\u002Fandroid-studio","6.movil\u002F02.android-studio","i-carbon-application",{"title":192,"path":193,"stem":194,"icon":190},"¿Qué es Jetpack Compose?","\u002Fmovil\u002Fjetpack-compose","6.movil\u002F03.jetpack-compose",{"title":196,"path":197,"stem":198},"Filas y Columnas con Jetpack Compose","\u002Fmovil\u002Ffilas-columnas","6.movil\u002F04.filas-columnas",{"title":200,"path":201,"stem":202,"icon":190},"Componentes Básicos en Jetpack Compose","\u002Fmovil\u002Fcomponentes-basicos","6.movil\u002F05.componentes-basicos",{"title":204,"path":205,"stem":206,"icon":190},"Las Intenciones en Android con Jetpack Compose","\u002Fmovil\u002Fintentions","6.movil\u002F06.intentions",{"title":208,"path":209,"stem":210,"icon":190},"Navegación en Android con Jetpack Compose","\u002Fmovil\u002Fnavegacion","6.movil\u002F07.navegacion","phone_android",{"title":213,"icon":25,"path":214,"stem":215,"children":216,"page":104},"Ejemplos","\u002Fejemplos","7.ejemplos",[217,221,225,229,233,237,241,245,249,253],{"title":218,"path":219,"stem":220},"Ejemplo 01: Creando un validador abstracto de expresiones","\u002Fejemplos\u002Fejemplo-01","7.ejemplos\u002F01.ejemplo-01",{"title":222,"path":223,"stem":224},"Ejemplo 02: Diferencias de validar un JTextField y un JFormattedTextField","\u002Fejemplos\u002Fejemplo-02","7.ejemplos\u002F02.ejemplo-02",{"title":226,"path":227,"stem":228},"Ejemplo 03: Creando una Aplicación con GUI en Java Swing","\u002Fejemplos\u002Fejemplo-03","7.ejemplos\u002F03.ejemplo-03",{"title":230,"path":231,"stem":232},"Ejemplo 4: Estilizando componentes Swing con Delegadores","\u002Fejemplos\u002Fejemplo-04","7.ejemplos\u002F04.ejemplo-04",{"title":234,"path":235,"stem":236,"icon":83},"Ejemplo 5: Uso de Hilos con Thread y Runnable","\u002Fejemplos\u002Fejemplo-05","7.ejemplos\u002F05.ejemplo-05",{"title":238,"path":239,"stem":240,"icon":83},"Ejemplo 06: Manejando Hilos de formas Diferentes en Java","\u002Fejemplos\u002Fejemplo-06","7.ejemplos\u002F06.ejemplo-06",{"title":242,"path":243,"stem":244,"icon":83},"Ejemplo 7: Condiciones de carrera en Java","\u002Fejemplos\u002Fejemplo-07","7.ejemplos\u002F07.ejemplo-07",{"title":246,"path":247,"stem":248,"icon":83},"Ejemplo 8: Control de acceso a recursos compartidos con semáforos","\u002Fejemplos\u002Fejemplo-08","7.ejemplos\u002F08.ejemplo-08",{"title":250,"path":251,"stem":252,"icon":83},"Ejemplo 9: El restaurante y los pedidos","\u002Fejemplos\u002Fejemplo-09","7.ejemplos\u002F09.ejemplo-09",{"title":254,"path":255,"stem":256},"Ejemplo 10: Proceso FIFO (First In, First Out) con Semáforos y Swing","\u002Fejemplos\u002Fejemplo-10","7.ejemplos\u002F10.ejemplo-10",{"title":258,"icon":25,"path":259,"stem":260,"children":261,"page":104},"Actividades","\u002Factividades","8.actividades",[262,266,270,274,278,282,286,290,294],{"title":263,"path":264,"stem":265,"icon":25},"Actividad 1: Introducción al diseño de interfaces","\u002Factividades\u002Fact-01","8.actividades\u002F01.act-01",{"title":267,"path":268,"stem":269,"icon":25},"Actividad 2: Diseño de wireframes y prototipos","\u002Factividades\u002Fact-02","8.actividades\u002F02.act-02",{"title":271,"path":272,"stem":273,"icon":25},"Actividad 3: Propuesta de Proyecto y Wireframe inicial","\u002Factividades\u002Fact-03","8.actividades\u002F03.act-03",{"title":275,"path":276,"stem":277,"icon":83},"Actividad 4: Temas y Componentes Personalizados en Swing","\u002Factividades\u002Fact-04","8.actividades\u002F04.act-04",{"title":279,"path":280,"stem":281,"icon":83},"Actividad 5: Explicando la Concurrencia a un Niño de 5 Años","\u002Factividades\u002Fact-05","8.actividades\u002F05.act-05",{"title":283,"path":284,"stem":285,"icon":83},"Actividad 6: Simulación de una cocina con múltiples chefs (hilos)","\u002Factividades\u002Fact-06","8.actividades\u002F06.act-06",{"title":287,"path":288,"stem":289,"icon":83},"Actividad 7: Sistema de retiro bancario","\u002Factividades\u002Fact-07","8.actividades\u002F07.act-07",{"title":291,"path":292,"stem":293,"icon":83},"Actividad 8: Simulación de Round Robin con hilos e Interfaz Gráfica","\u002Factividades\u002Fact-08","8.actividades\u002F08.act-08",{"title":295,"path":296,"stem":297,"icon":83},"Actividad 9: CRUD con Hibernate y Swing","\u002Factividades\u002Fact-09","8.actividades\u002F09.act-09",{"id":299,"title":192,"body":300,"description":469,"extension":470,"links":471,"meta":472,"navigation":473,"path":193,"seo":474,"stem":194,"__hash__":475},"docs\u002F6.movil\u002F03.jetpack-compose.md",{"type":301,"value":302,"toc":461},"minimark",[303,307,312,347,351,354,358,361,373,420,423,427,446,451,457],[304,305,306],"p",{},"Jetpack Compose es un moderno toolkit de UI para Android que permite a los desarrolladores crear interfaces de usuario de manera más rápida y sencilla utilizando un enfoque declarativo. Fue desarrollado por Google y se basa en el lenguaje de programación Kotlin, lo que facilita la creación de interfaces de usuario reactivas y flexibles.",[308,309,311],"h2",{"id":310},"características-de-jetpack-compose","Características de Jetpack Compose",[313,314,315,323,329,335,341],"ul",{},[316,317,318,322],"li",{},[319,320,321],"strong",{},"Declarativo",": Jetpack Compose utiliza un enfoque declarativo para construir interfaces de usuario, lo que significa que los desarrolladores describen cómo debería verse la UI en lugar de cómo se debe construir. Esto simplifica el proceso de desarrollo y mejora la legibilidad del código.",[316,324,325,328],{},[319,326,327],{},"Reactividad",": Jetpack Compose es reactivo por naturaleza, lo que permite a los desarrolladores crear interfaces de usuario que se actualizan automáticamente en respuesta a cambios en los datos o el estado de la aplicación.",[316,330,331,334],{},[319,332,333],{},"Integración con Kotlin",": Jetpack Compose está diseñado para trabajar de manera fluida con Kotlin, lo que permite a los desarrolladores aprovechar las características del lenguaje, como la seguridad de null y la sintaxis concisa, para crear interfaces de usuario de alta calidad.",[316,336,337,340],{},[319,338,339],{},"Compatibilidad con Android",": Jetpack Compose es compatible con todas las versiones de Android a partir de la API 21, lo que permite a los desarrolladores crear aplicaciones que pueden ejecutarse en una amplia gama de dispositivos Android.",[316,342,343,346],{},[319,344,345],{},"Componentes reutilizables",": Jetpack Compose permite a los desarrolladores crear componentes de UI reutilizables, lo que facilita la creación de interfaces de usuario consistentes y mantenibles.",[308,348,350],{"id":349},"cómo-funciona-jetpack-compose","¿Cómo funciona Jetpack Compose?",[304,352,353],{},"Jetpack Compose funciona utilizando un enfoque declarativo para construir interfaces de usuario. Los desarrolladores describen cómo debería verse la UI utilizando funciones de composición, que son funciones de Kotlin que generan la UI en función del estado de la aplicación. Estas funciones de composición pueden ser anidadas y reutilizadas, lo que permite a los desarrolladores crear interfaces de usuario complejas de manera sencilla. Jetpack Compose también utiliza un sistema de recomposición, que actualiza automáticamente la UI en respuesta a cambios en el estado de la aplicación, lo que facilita la creación de interfaces de usuario reactivas y dinámicas.",[308,355,357],{"id":356},"instalación-y-configuración-de-jetpack-compose","Instalación y configuración de Jetpack Compose",[304,359,360],{},"Para instalar y configurar Jetpack Compose en tu proyecto Android, desde Android Studio, crea un nuevo proyecto de tipo \"Empty Activity\" y selecciona Kotlin como lenguaje de programación.",[304,362,363,364,368,369,372],{},"Al hacerlos notarás que dentro del archivo ",[365,366,367],"code",{},"build.gradle"," del módulo ",[365,370,371],{},"app",", se han agregado las siguientes dependencias para Jetpack Compose:",[374,375,380],"pre",{"className":376,"code":377,"language":378,"meta":379,"style":379},"language-groovy shiki shiki-themes github-dark","dependencies {\n    implementation \"androidx.compose.ui:ui:1.0.0\"\n    implementation \"androidx.compose.material:material:1.0.0\"\n    implementation \"androidx.compose.ui:ui-tooling-preview:1.0.0\"\n    implementation \"androidx.activity:activity-compose:1.3.0\"\n}\n","groovy","",[365,381,382,390,396,402,408,414],{"__ignoreMap":379},[383,384,387],"span",{"class":385,"line":386},"line",1,[383,388,389],{},"dependencies {\n",[383,391,393],{"class":385,"line":392},2,[383,394,395],{},"    implementation \"androidx.compose.ui:ui:1.0.0\"\n",[383,397,399],{"class":385,"line":398},3,[383,400,401],{},"    implementation \"androidx.compose.material:material:1.0.0\"\n",[383,403,405],{"class":385,"line":404},4,[383,406,407],{},"    implementation \"androidx.compose.ui:ui-tooling-preview:1.0.0\"\n",[383,409,411],{"class":385,"line":410},5,[383,412,413],{},"    implementation \"androidx.activity:activity-compose:1.3.0\"\n",[383,415,417],{"class":385,"line":416},6,[383,418,419],{},"}\n",[304,421,422],{},"Es posible que según la versión de Android Studio que estés utilizando, las versiones de las dependencias de Jetpack Compose puedan variar. Asegúrate de consultar la documentación oficial de Jetpack Compose para obtener las versiones más recientes y compatibles.",[308,424,426],{"id":425},"los-colores-temas-y-tipografías-en-jetpack-compose","Los Colores, Temas y Tipografías en Jetpack Compose",[304,428,429,430,433,434,437,438,441,442,445],{},"Si has creado tu proyecto con la plantilla \"Empty Activity\", notarás que dentro del directorio ",[365,431,432],{},"ui\u002Ftheme"," se encuentran los archivos ",[365,435,436],{},"Color.kt",", ",[365,439,440],{},"Theme.kt"," y ",[365,443,444],{},"Type.kt",". Estos archivos contienen la configuración de colores, temas y tipografías para tu aplicación utilizando Jetpack Compose. Puedes personalizar estos archivos para adaptar el diseño de tu aplicación a tus necesidades y preferencias.",[447,448,450],"h3",{"id":449},"colores","Colores",[304,452,453,454,456],{},"En el archivo ",[365,455,436],{},", puedes definir los colores que utilizarás en tu aplicación. Puedes agregar nuevos colores o modificar los existentes para crear una paleta de colores personalizada.",[458,459,460],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":379,"searchDepth":392,"depth":392,"links":462},[463,464,465,466],{"id":310,"depth":392,"text":311},{"id":349,"depth":392,"text":350},{"id":356,"depth":392,"text":357},{"id":425,"depth":392,"text":426,"children":467},[468],{"id":449,"depth":398,"text":450},"En este artículo se explicará qué es Jetpack Compose, sus características, cómo funciona y el proceso de instalación y configuración de Jetpack Compose para el desarrollo de aplicaciones Android utilizando Kotlin.","md",null,{"editButton":104},{"icon":190},{"title":192,"description":469},"jP4IgNaduvqOMNn7-IYxN-kIN1jmvoWZ43ZQtMJe45c",[477,479],{"title":187,"path":188,"stem":189,"description":478,"icon":190,"children":-1},"En este artículo se explicará qué es Android Studio, sus características, cómo funciona y el proceso de instalación y configuración de Android Studio para el desarrollo de aplicaciones Android utilizando Kotlin.",{"title":196,"path":197,"stem":198,"description":480,"children":-1},"Aprende a organizar tu interfaz de usuario utilizando filas y columnas en Jetpack Compose.",1775101374603]