[{"data":1,"prerenderedAt":949},["ShallowReactive",2],{"navigation_docs":3,"-movil-componentes-basicos":298,"-movil-componentes-basicos-surround":944},[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":200,"body":300,"description":937,"extension":938,"links":939,"meta":940,"navigation":941,"path":201,"seo":942,"stem":202,"__hash__":943},"docs\u002F6.movil\u002F05.componentes-basicos.md",{"type":301,"value":302,"toc":931},"minimark",[303,307,312,319,354,357,363,480,484,489,524,531,535,625,629,634,657,668,672,755,759,764,815,830,834,902,916,927],[304,305,306],"p",{},"En Jetpack Compose, existen varios componentes básicos que puedes utilizar para construir tu interfaz de usuario. A continuación, te mostraré algunos de los componentes más comunes y cómo utilizarlos.",[308,309,311],"h2",{"id":310},"text","Text",[304,313,314,315,318],{},"El componente ",[316,317,311],"code",{}," se utiliza para mostrar texto en la pantalla. Puedes personalizar su apariencia utilizando diferentes atributos, como el tamaño de fuente, el color y el estilo. Aquí tienes un ejemplo básico:",[320,321,326],"pre",{"className":322,"code":323,"language":324,"meta":325,"style":325},"language-kotlin shiki shiki-themes github-dark","@Composable\nfun MyText() {\n    Text(\"¡Hola, Jetpack Compose!\", fontSize = 24.sp, color = Color.Blue)\n}\n","kotlin","",[316,327,328,336,342,348],{"__ignoreMap":325},[329,330,333],"span",{"class":331,"line":332},"line",1,[329,334,335],{},"@Composable\n",[329,337,339],{"class":331,"line":338},2,[329,340,341],{},"fun MyText() {\n",[329,343,345],{"class":331,"line":344},3,[329,346,347],{},"    Text(\"¡Hola, Jetpack Compose!\", fontSize = 24.sp, color = Color.Blue)\n",[329,349,351],{"class":331,"line":350},4,[329,352,353],{},"}\n",[304,355,356],{},"En este ejemplo, hemos creado un componente de texto que muestra el mensaje \"¡Hola, Jetpack Compose!\" con un tamaño de fuente de 24sp y un color azul.",[304,358,359,360,362],{},"Los atributos más comunes para el componente ",[316,361,311],{}," son los siguientes:",[364,365,366,379],"table",{},[367,368,369],"thead",{},[370,371,372,376],"tr",{},[373,374,375],"th",{},"Atributo",[373,377,378],{},"Descripción",[380,381,382,392,406,420,438,452,470],"tbody",{},[370,383,384,389],{},[385,386,387],"td",{},[316,388,310],{},[385,390,391],{},"El texto que se mostrará en la pantalla.",[370,393,394,399],{},[385,395,396],{},[316,397,398],{},"fontSize",[385,400,401,402,405],{},"El tamaño de la fuente del texto. Puedes usar unidades como ",[316,403,404],{},"sp"," para especificar el tamaño.",[370,407,408,413],{},[385,409,410],{},[316,411,412],{},"color",[385,414,415,416,419],{},"El color del texto. Puedes usar la clase ",[316,417,418],{},"Color"," para definir colores personalizados o utilizar colores predefinidos.",[370,421,422,427],{},[385,423,424],{},[316,425,426],{},"fontWeight",[385,428,429,430,433,434,437],{},"El peso de la fuente, como ",[316,431,432],{},"FontWeight.Bold"," para texto en negrita o ",[316,435,436],{},"FontWeight.Light"," para texto más ligero.",[370,439,440,445],{},[385,441,442],{},[316,443,444],{},"fontStyle",[385,446,447,448,451],{},"El estilo de la fuente, como ",[316,449,450],{},"FontStyle.Italic"," para texto en cursiva.",[370,453,454,459],{},[385,455,456],{},[316,457,458],{},"textAlign",[385,460,461,462,465,466,469],{},"La alineación del texto, como ",[316,463,464],{},"TextAlign.Center"," para centrar el texto o ",[316,467,468],{},"TextAlign.Start"," para alinearlo a la izquierda.",[370,471,472,477],{},[385,473,474],{},[316,475,476],{},"modifier",[385,478,479],{},"Permite aplicar modificaciones al componente de texto, como padding, tamaño, etc.",[308,481,483],{"id":482},"button","Button",[304,485,314,486,488],{},[316,487,483],{}," se utiliza para crear botones interactivos en tu interfaz de usuario. Puedes personalizar su apariencia y comportamiento utilizando diferentes atributos. Aquí tienes un ejemplo básico:",[320,490,492],{"className":322,"code":491,"language":324,"meta":325,"style":325},"@Composable\nfun MyButton() {\n    Button(onClick = { \u002F* Acción al hacer clic *\u002F }) {\n        Text(\"Haz clic aquí\")\n    }\n}\n",[316,493,494,498,503,508,513,519],{"__ignoreMap":325},[329,495,496],{"class":331,"line":332},[329,497,335],{},[329,499,500],{"class":331,"line":338},[329,501,502],{},"fun MyButton() {\n",[329,504,505],{"class":331,"line":344},[329,506,507],{},"    Button(onClick = { \u002F* Acción al hacer clic *\u002F }) {\n",[329,509,510],{"class":331,"line":350},[329,511,512],{},"        Text(\"Haz clic aquí\")\n",[329,514,516],{"class":331,"line":515},5,[329,517,518],{},"    }\n",[329,520,522],{"class":331,"line":521},6,[329,523,353],{},[304,525,526,527,530],{},"En este ejemplo, hemos creado un botón que muestra el texto \"Haz clic aquí\". El atributo ",[316,528,529],{},"onClick"," se utiliza para definir la acción que se ejecutará cuando el usuario haga clic en el botón.",[304,532,359,533,362],{},[316,534,483],{},[364,536,537,545],{},[367,538,539],{},[370,540,541,543],{},[373,542,375],{},[373,544,378],{},[380,546,547,556,570,579,593,611],{},[370,548,549,553],{},[385,550,551],{},[316,552,529],{},[385,554,555],{},"La acción que se ejecutará cuando el usuario haga clic en el botón.",[370,557,558,563],{},[385,559,560],{},[316,561,562],{},"enabled",[385,564,565,566,569],{},"Controla si el botón está habilitado o deshabilitado. Si se establece en ",[316,567,568],{},"false",", el botón no será interactivo.",[370,571,572,576],{},[385,573,574],{},[316,575,476],{},[385,577,578],{},"Permite aplicar modificaciones al botón, como padding, tamaño, etc.",[370,580,581,586],{},[385,582,583],{},[316,584,585],{},"colors",[385,587,588,589,592],{},"Permite personalizar los colores del botón utilizando la clase ",[316,590,591],{},"ButtonDefaults",". Puedes definir colores para el fondo, el texto, etc.",[370,594,595,600],{},[385,596,597],{},[316,598,599],{},"shape",[385,601,602,603,606,607,610],{},"Permite personalizar la forma del botón utilizando la clase ",[316,604,605],{},"Shape",". Puedes definir formas como ",[316,608,609],{},"RoundedCornerShape"," para botones con bordes redondeados.",[370,612,613,618],{},[385,614,615],{},[316,616,617],{},"contentPadding",[385,619,620,621,624],{},"Permite personalizar el padding interno del botón utilizando la clase ",[316,622,623],{},"PaddingValues",". Puedes definir el padding para cada lado del botón.",[308,626,628],{"id":627},"image","Image",[304,630,314,631,633],{},[316,632,628],{}," se utiliza para mostrar imágenes en tu interfaz de usuario. Puedes cargar imágenes desde recursos locales o desde la red. Aquí tienes un ejemplo básico:",[320,635,637],{"className":322,"code":636,"language":324,"meta":325,"style":325},"@Composable\nfun MyImage() {\n    Image(painter = painterResource(id = R.drawable.my_image), contentDescription = \"Descripción de la imagen\")\n}\n",[316,638,639,643,648,653],{"__ignoreMap":325},[329,640,641],{"class":331,"line":332},[329,642,335],{},[329,644,645],{"class":331,"line":338},[329,646,647],{},"fun MyImage() {\n",[329,649,650],{"class":331,"line":344},[329,651,652],{},"    Image(painter = painterResource(id = R.drawable.my_image), contentDescription = \"Descripción de la imagen\")\n",[329,654,655],{"class":331,"line":350},[329,656,353],{},[304,658,659,660,663,664,667],{},"En este ejemplo, hemos creado un componente de imagen que carga una imagen desde los recursos locales utilizando ",[316,661,662],{},"painterResource",". El atributo ",[316,665,666],{},"contentDescription"," se utiliza para proporcionar una descripción de la imagen para mejorar la accesibilidad.",[304,669,359,670,362],{},[316,671,628],{},[364,673,674,682],{},[367,675,676],{},[370,677,678,680],{},[373,679,375],{},[373,681,378],{},[380,683,684,701,710,719,737],{},[370,685,686,691],{},[385,687,688],{},[316,689,690],{},"painter",[385,692,693,694,696,697,700],{},"El recurso de imagen que se mostrará. Puedes usar ",[316,695,662],{}," para cargar imágenes desde los recursos locales o ",[316,698,699],{},"rememberImagePainter"," para cargar imágenes desde la red.",[370,702,703,707],{},[385,704,705],{},[316,706,666],{},[385,708,709],{},"Una descripción de la imagen para mejorar la accesibilidad. Es importante proporcionar una descripción significativa para que los usuarios con discapacidades visuales puedan entender el contenido de la imagen.",[370,711,712,716],{},[385,713,714],{},[316,715,476],{},[385,717,718],{},"Permite aplicar modificaciones a la imagen, como padding, tamaño, etc.",[370,720,721,726],{},[385,722,723],{},[316,724,725],{},"contentScale",[385,727,728,729,732,733,736],{},"Controla cómo se escala la imagen dentro de su contenedor. Puedes usar valores como ",[316,730,731],{},"ContentScale.Crop"," para recortar la imagen o ",[316,734,735],{},"ContentScale.Fit"," para ajustar la imagen dentro del contenedor sin recortarla.",[370,738,739,744],{},[385,740,741],{},[316,742,743],{},"alignment",[385,745,746,747,750,751,754],{},"Controla la alineación de la imagen dentro de su contenedor. Puedes usar valores como ",[316,748,749],{},"Alignment.Center"," para centrar la imagen o ",[316,752,753],{},"Alignment.TopStart"," para alinearla a la esquina superior izquierda.",[308,756,758],{"id":757},"textfield","TextField",[304,760,314,761,763],{},[316,762,758],{}," se utiliza para crear campos de texto interactivos donde los usuarios pueden ingresar información. Aquí tienes un ejemplo básico:",[320,765,767],{"className":322,"code":766,"language":324,"meta":325,"style":325},"@Composable\nfun MyTextField() {\n    var text by remember { mutableStateOf(\"\") }\n    TextField(\n        value = text,\n        onValueChange = { text = it },\n        label = { Text(\"Ingresa tu nombre\") }\n    )\n}\n",[316,768,769,773,778,783,788,793,798,804,810],{"__ignoreMap":325},[329,770,771],{"class":331,"line":332},[329,772,335],{},[329,774,775],{"class":331,"line":338},[329,776,777],{},"fun MyTextField() {\n",[329,779,780],{"class":331,"line":344},[329,781,782],{},"    var text by remember { mutableStateOf(\"\") }\n",[329,784,785],{"class":331,"line":350},[329,786,787],{},"    TextField(\n",[329,789,790],{"class":331,"line":515},[329,791,792],{},"        value = text,\n",[329,794,795],{"class":331,"line":521},[329,796,797],{},"        onValueChange = { text = it },\n",[329,799,801],{"class":331,"line":800},7,[329,802,803],{},"        label = { Text(\"Ingresa tu nombre\") }\n",[329,805,807],{"class":331,"line":806},8,[329,808,809],{},"    )\n",[329,811,813],{"class":331,"line":812},9,[329,814,353],{},[304,816,817,818,821,822,825,826,829],{},"En este ejemplo, hemos creado un campo de texto donde los usuarios pueden ingresar su nombre. El atributo ",[316,819,820],{},"value"," se utiliza para controlar el valor del campo de texto, mientras que ",[316,823,824],{},"onValueChange"," se utiliza para actualizar el valor cuando el usuario ingresa texto. El atributo ",[316,827,828],{},"label"," se utiliza para mostrar una etiqueta dentro del campo de texto.",[304,831,359,832,362],{},[316,833,758],{},[364,835,836,844],{},[367,837,838],{},[370,839,840,842],{},[373,841,375],{},[373,843,378],{},[380,845,846,855,864,873,883,892],{},[370,847,848,852],{},[385,849,850],{},[316,851,820],{},[385,853,854],{},"El valor actual del campo de texto. Debe ser controlado por un estado mutable para que el campo de texto sea interactivo.",[370,856,857,861],{},[385,858,859],{},[316,860,824],{},[385,862,863],{},"La función que se ejecutará cuando el valor del campo de texto cambie. Esta función debe actualizar el estado mutable que controla el valor del campo de texto.",[370,865,866,870],{},[385,867,868],{},[316,869,828],{},[385,871,872],{},"Una etiqueta que se muestra dentro del campo de texto para indicar al usuario qué tipo de información se espera que ingrese.",[370,874,875,880],{},[385,876,877],{},[316,878,879],{},"placeholder",[385,881,882],{},"Un texto de marcador de posición que se muestra cuando el campo de texto está vacío. Proporciona una pista visual sobre el tipo de información que se espera que el usuario ingrese.",[370,884,885,889],{},[385,886,887],{},[316,888,476],{},[385,890,891],{},"Permite aplicar modificaciones al campo de texto, como padding, tamaño, etc.",[370,893,894,899],{},[385,895,896],{},[316,897,898],{},"keyboardOptions",[385,900,901],{},"Permite configurar las opciones del teclado, como el tipo de teclado que se muestra (por ejemplo, numérico, de texto, etc.) y las acciones del teclado (por ejemplo, \"Enviar\", \"Siguiente\", etc.).",[304,903,904,905,908,909,908,912,915],{},"Estos son solo algunos de los componentes básicos que puedes utilizar en Jetpack Compose para construir tu interfaz de usuario. Jetpack Compose ofrece una amplia variedad de componentes adicionales, como ",[316,906,907],{},"Card",", ",[316,910,911],{},"Checkbox",[316,913,914],{},"Switch",", entre otros, que te permiten crear interfaces de usuario más complejas y personalizadas. Te recomiendo explorar la documentación oficial de Jetpack Compose para descubrir todos los componentes disponibles y cómo utilizarlos en tus proyectos Android.",[304,917,918,919,926],{},"Para más información sobre Jetpack Compose, puedes consultar la documentación oficial en el siguiente enlace: ",[920,921,925],"a",{"href":922,"rel":923},"https:\u002F\u002Fdeveloper.android.com\u002Fdevelop\u002Fui\u002Fcompose\u002Fcomponents?hl=es-419",[924],"nofollow","Jetpack Compose Documentation",".",[928,929,930],"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":325,"searchDepth":338,"depth":338,"links":932},[933,934,935,936],{"id":310,"depth":338,"text":311},{"id":482,"depth":338,"text":483},{"id":627,"depth":338,"text":628},{"id":757,"depth":338,"text":758},"Aprende a utilizar los componentes básicos de Jetpack Compose para construir interfaces de usuario en Android.","md",null,{},{"icon":190},{"title":200,"description":937},"LCUF9r8RoX99IjoACx5IjQaeJlvFQIOGVh499H8F45k",[945,947],{"title":196,"path":197,"stem":198,"description":946,"children":-1},"Aprende a organizar tu interfaz de usuario utilizando filas y columnas en Jetpack Compose.",{"title":204,"path":205,"stem":206,"description":948,"icon":190,"children":-1},"Aprende a utilizar las intenciones en Android para navegar entre pantallas y realizar acciones específicas utilizando Jetpack Compose.",1775101374911]