[{"data":1,"prerenderedAt":607},["ShallowReactive",2],{"navigation_docs":3,"-movil-navegacion":298,"-movil-navegacion-surround":602},[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":208,"body":300,"description":595,"extension":596,"links":597,"meta":598,"navigation":599,"path":209,"seo":600,"stem":210,"__hash__":601},"docs\u002F6.movil\u002F07.navegacion.md",{"type":301,"value":302,"toc":589},"minimark",[303,307,312,324,353,360,411,417,421,428,461,471,481,485,491,529,536,566,572,576,585],[304,305,306],"p",{},"En Android, la navegación entre pantallas es una parte fundamental de la experiencia del usuario. Con Jetpack Compose, puedes implementar la navegación de manera sencilla utilizando el componente de navegación. A continuación, te mostraré cómo configurar y utilizar la navegación en Android con Jetpack Compose.",[308,309,311],"h2",{"id":310},"configuración-de-la-navegación-en-jetpack-compose","Configuración de la Navegación en Jetpack Compose",[304,313,314,315,319,320,323],{},"Para configurar la navegación en Jetpack Compose, primero debes agregar las dependencias necesarias en tu archivo ",[316,317,318],"code",{},"build.gradle"," del módulo ",[316,321,322],{},"app",":",[325,326,331],"pre",{"className":327,"code":328,"language":329,"meta":330,"style":330},"language-groovy shiki shiki-themes github-dark","dependencies {\n    implementation \"androidx.navigation:navigation-compose:2.4.0\"\n}\n","groovy","",[316,332,333,341,347],{"__ignoreMap":330},[334,335,338],"span",{"class":336,"line":337},"line",1,[334,339,340],{},"dependencies {\n",[334,342,344],{"class":336,"line":343},2,[334,345,346],{},"    implementation \"androidx.navigation:navigation-compose:2.4.0\"\n",[334,348,350],{"class":336,"line":349},3,[334,351,352],{},"}\n",[304,354,355,356,359],{},"Una vez que hayas agregado la dependencia, puedes configurar la navegación en tu aplicación. Para hacerlo, debes crear un ",[316,357,358],{},"NavHost"," que contendrá las diferentes pantallas de tu aplicación. Aquí tienes un ejemplo básico:",[325,361,365],{"className":362,"code":363,"language":364,"meta":330,"style":330},"language-kotlin shiki shiki-themes github-dark","@Composable\nfun MyApp() {\n    val navController = rememberNavController()\n    NavHost(navController = navController, startDestination = \"home\") {\n        composable(\"home\") { HomeScreen(navController) }\n        composable(\"details\") { DetailsScreen(navController) }\n    }   \n}   \n","kotlin",[316,366,367,372,377,382,388,394,400,406],{"__ignoreMap":330},[334,368,369],{"class":336,"line":337},[334,370,371],{},"@Composable\n",[334,373,374],{"class":336,"line":343},[334,375,376],{},"fun MyApp() {\n",[334,378,379],{"class":336,"line":349},[334,380,381],{},"    val navController = rememberNavController()\n",[334,383,385],{"class":336,"line":384},4,[334,386,387],{},"    NavHost(navController = navController, startDestination = \"home\") {\n",[334,389,391],{"class":336,"line":390},5,[334,392,393],{},"        composable(\"home\") { HomeScreen(navController) }\n",[334,395,397],{"class":336,"line":396},6,[334,398,399],{},"        composable(\"details\") { DetailsScreen(navController) }\n",[334,401,403],{"class":336,"line":402},7,[334,404,405],{},"    }   \n",[334,407,409],{"class":336,"line":408},8,[334,410,352],{},[304,412,413,414,416],{},"En este ejemplo, hemos creado un ",[316,415,358],{}," con dos destinos: \"home\" y \"details\". Cada destino está asociado a una pantalla específica, que se define como una función composable.",[308,418,420],{"id":419},"navegación-entre-pantallas","Navegación entre Pantallas",[304,422,423,424,427],{},"Para navegar entre pantallas, puedes utilizar el ",[316,425,426],{},"navController"," que has creado. Por ejemplo, para navegar desde la pantalla de inicio a la pantalla de detalles, puedes usar el siguiente código:",[325,429,431],{"className":362,"code":430,"language":364,"meta":330,"style":330},"@Composable\nfun HomeScreen(navController: NavController) {\n    Button(onClick = { navController.navigate(\"details\") }) {\n        Text(\"Ir a Detalles\")\n    }\n}\n",[316,432,433,437,442,447,452,457],{"__ignoreMap":330},[334,434,435],{"class":336,"line":337},[334,436,371],{},[334,438,439],{"class":336,"line":343},[334,440,441],{},"fun HomeScreen(navController: NavController) {\n",[334,443,444],{"class":336,"line":349},[334,445,446],{},"    Button(onClick = { navController.navigate(\"details\") }) {\n",[334,448,449],{"class":336,"line":384},[334,450,451],{},"        Text(\"Ir a Detalles\")\n",[334,453,454],{"class":336,"line":390},[334,455,456],{},"    }\n",[334,458,459],{"class":336,"line":396},[334,460,352],{},[304,462,463,464,467,468,470],{},"En este ejemplo, hemos creado un botón en la pantalla de inicio que, al hacer clic, navega a la pantalla de detalles utilizando el método ",[316,465,466],{},"navigate"," del ",[316,469,426],{},".",[304,472,473,474,477,478,480],{},"Nota que la función ",[316,475,476],{},"HomeScreen"," recibe el ",[316,479,426],{}," como parámetro, lo que permite que la pantalla de inicio controle la navegación hacia otras pantallas.",[308,482,484],{"id":483},"pasar-datos-entre-pantallas","Pasar Datos entre Pantallas",[304,486,487,488,490],{},"Puedes pasar datos entre pantallas utilizando argumentos en la navegación. Para hacerlo, puedes definir argumentos en tu ",[316,489,358],{}," y luego pasarlos al navegar. Aquí tienes un ejemplo:",[325,492,494],{"className":362,"code":493,"language":364,"meta":330,"style":330},"NavHost(navController = navController, startDestination = \"home\") {\n    composable(\"home\") { HomeScreen(navController) }\n    composable(\"details\u002F{itemId}\") { backStackEntry ->\n        val itemId = backStackEntry.arguments?.getString(\"itemId\")\n        DetailsScreen(navController, itemId)\n    }\n}\n",[316,495,496,501,506,511,516,521,525],{"__ignoreMap":330},[334,497,498],{"class":336,"line":337},[334,499,500],{},"NavHost(navController = navController, startDestination = \"home\") {\n",[334,502,503],{"class":336,"line":343},[334,504,505],{},"    composable(\"home\") { HomeScreen(navController) }\n",[334,507,508],{"class":336,"line":349},[334,509,510],{},"    composable(\"details\u002F{itemId}\") { backStackEntry ->\n",[334,512,513],{"class":336,"line":384},[334,514,515],{},"        val itemId = backStackEntry.arguments?.getString(\"itemId\")\n",[334,517,518],{"class":336,"line":390},[334,519,520],{},"        DetailsScreen(navController, itemId)\n",[334,522,523],{"class":336,"line":396},[334,524,456],{},[334,526,527],{"class":336,"line":402},[334,528,352],{},[304,530,531,532,535],{},"En este ejemplo, hemos definido un argumento ",[316,533,534],{},"itemId"," en la ruta de la pantalla de detalles. Luego, al navegar a esta pantalla, puedes pasar el valor del argumento:",[325,537,539],{"className":362,"code":538,"language":364,"meta":330,"style":330},"@Composable\nfun HomeScreen(navController: NavController) {\n    Button(onClick = { navController.navigate(\"details\u002F123\") }) {\n        Text(\"Ir a Detalles\")\n    }\n}\n",[316,540,541,545,549,554,558,562],{"__ignoreMap":330},[334,542,543],{"class":336,"line":337},[334,544,371],{},[334,546,547],{"class":336,"line":343},[334,548,441],{},[334,550,551],{"class":336,"line":349},[334,552,553],{},"    Button(onClick = { navController.navigate(\"details\u002F123\") }) {\n",[334,555,556],{"class":336,"line":384},[334,557,451],{},[334,559,560],{"class":336,"line":390},[334,561,456],{},[334,563,564],{"class":336,"line":396},[334,565,352],{},[304,567,568,569,571],{},"En este caso, estamos pasando el valor \"123\" como argumento ",[316,570,534],{}," a la pantalla de detalles. En la pantalla de detalles, puedes recuperar este valor y utilizarlo según tus necesidades.",[308,573,575],{"id":574},"conclusión","Conclusión",[304,577,578,579,581,582,584],{},"La navegación en Android con Jetpack Compose es fácil de implementar utilizando el componente de navegación. Puedes configurar tu ",[316,580,358],{}," para definir las diferentes pantallas de tu aplicación y utilizar el ",[316,583,426],{}," para navegar entre ellas. Además, puedes pasar datos entre pantallas utilizando argumentos en la navegación. Con estas herramientas, puedes crear una experiencia de usuario fluida y coherente en tu aplicación Android.",[586,587,588],"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":330,"searchDepth":343,"depth":343,"links":590},[591,592,593,594],{"id":310,"depth":343,"text":311},{"id":419,"depth":343,"text":420},{"id":483,"depth":343,"text":484},{"id":574,"depth":343,"text":575},"Aprende a implementar la navegación entre pantallas en Android utilizando Jetpack Compose y el componente de navegación.","md",null,{},{"icon":190},{"title":208,"description":595},"Z-S19LnPf5HpgL9_GsTV-21qNJPceibs2fGNhgR4oHg",[603,605],{"title":204,"path":205,"stem":206,"description":604,"icon":190,"children":-1},"Aprende a utilizar las intenciones en Android para navegar entre pantallas y realizar acciones específicas utilizando Jetpack Compose.",{"title":218,"path":219,"stem":220,"description":606,"children":-1},"En este ejemplo, crearemos una clase abstracta para validar expresiones regulares y luego implementaremos una subclase concreta que valide direcciones de correo electrónico.",1775101375167]