[{"data":1,"prerenderedAt":1192},["ShallowReactive",2],{"navigation_docs":3,"-personalizacion-theme-02":298,"-personalizacion-theme-02-surround":1187},[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":101,"body":300,"description":1180,"extension":1181,"links":1182,"meta":1183,"navigation":1184,"path":102,"seo":1185,"stem":103,"__hash__":1186},"docs\u002F3.personalizacion\u002F07.theme-02.md",{"type":301,"value":302,"toc":1174},"minimark",[303,307,312,315,318,513,520,524,528,539,1013,1016,1094,1104,1108,1115,1156,1163,1167,1170],[304,305,306],"p",{},"En esta sección, exploraremos cómo utilizar delegadores de UI para personalizar la apariencia de los componentes en Swing. Los delegadores de UI son una parte fundamental del sistema de renderizado de Swing y te permiten definir cómo se dibujan y se comportan los componentes en tu aplicación. A continuación, se presentan los conceptos clave que debes entender para aprovechar al máximo los delegadores de UI en tu proceso de personalización.",[308,309,311],"h2",{"id":310},"primero-definamos-la-paleta-de-colores","Primero definamos la paleta de colores",[304,313,314],{},"Antes de personalizar los delegadores de UI, es importante definir una paleta de colores que se alinee con la identidad visual de tu aplicación. Esto te ayudará a mantener una apariencia coherente en toda la interfaz de usuario. Puedes elegir colores que reflejen la personalidad de tu marca o que simplemente sean agradables a la vista. Por ejemplo, podrías optar por una paleta de colores pastel para una aplicación de bienestar o colores vibrantes para una aplicación de entretenimiento.",[304,316,317],{},"Tomemos como ejemplo una paleta de colores que incluye tonos de azul, verde y gris:",[319,320,325],"pre",{"className":321,"code":322,"language":323,"meta":324,"style":324},"language-java shiki shiki-themes github-dark","public class ColorPalette {\n    public static final Color PRIMARY_COLOR = new Color(70, 130, 180); \u002F\u002F Azul acero\n    public static final Color SECONDARY_COLOR = new Color(60, 179, 113); \u002F\u002F Verde mar\n    public static final Color BACKGROUND_COLOR = new Color(245, 245, 245); \u002F\u002F Gris claro\n    public static final Color TEXT_COLOR = new Color(33, 33, 33); \u002F\u002F Gris oscuro\n}\n","java","",[326,327,328,348,397,435,471,507],"code",{"__ignoreMap":324},[329,330,333,337,340,344],"span",{"class":331,"line":332},"line",1,[329,334,336],{"class":335},"snl16","public",[329,338,339],{"class":335}," class",[329,341,343],{"class":342},"svObZ"," ColorPalette",[329,345,347],{"class":346},"s95oV"," {\n",[329,349,351,354,357,360,363,366,369,372,375,379,382,385,387,390,393],{"class":331,"line":350},2,[329,352,353],{"class":335},"    public",[329,355,356],{"class":335}," static",[329,358,359],{"class":335}," final",[329,361,362],{"class":346}," Color PRIMARY_COLOR ",[329,364,365],{"class":335},"=",[329,367,368],{"class":335}," new",[329,370,371],{"class":342}," Color",[329,373,374],{"class":346},"(",[329,376,378],{"class":377},"sDLfK","70",[329,380,381],{"class":346},", ",[329,383,384],{"class":377},"130",[329,386,381],{"class":346},[329,388,389],{"class":377},"180",[329,391,392],{"class":346},"); ",[329,394,396],{"class":395},"sAwPA","\u002F\u002F Azul acero\n",[329,398,400,402,404,406,409,411,413,415,417,420,422,425,427,430,432],{"class":331,"line":399},3,[329,401,353],{"class":335},[329,403,356],{"class":335},[329,405,359],{"class":335},[329,407,408],{"class":346}," Color SECONDARY_COLOR ",[329,410,365],{"class":335},[329,412,368],{"class":335},[329,414,371],{"class":342},[329,416,374],{"class":346},[329,418,419],{"class":377},"60",[329,421,381],{"class":346},[329,423,424],{"class":377},"179",[329,426,381],{"class":346},[329,428,429],{"class":377},"113",[329,431,392],{"class":346},[329,433,434],{"class":395},"\u002F\u002F Verde mar\n",[329,436,438,440,442,444,447,449,451,453,455,458,460,462,464,466,468],{"class":331,"line":437},4,[329,439,353],{"class":335},[329,441,356],{"class":335},[329,443,359],{"class":335},[329,445,446],{"class":346}," Color BACKGROUND_COLOR ",[329,448,365],{"class":335},[329,450,368],{"class":335},[329,452,371],{"class":342},[329,454,374],{"class":346},[329,456,457],{"class":377},"245",[329,459,381],{"class":346},[329,461,457],{"class":377},[329,463,381],{"class":346},[329,465,457],{"class":377},[329,467,392],{"class":346},[329,469,470],{"class":395},"\u002F\u002F Gris claro\n",[329,472,474,476,478,480,483,485,487,489,491,494,496,498,500,502,504],{"class":331,"line":473},5,[329,475,353],{"class":335},[329,477,356],{"class":335},[329,479,359],{"class":335},[329,481,482],{"class":346}," Color TEXT_COLOR ",[329,484,365],{"class":335},[329,486,368],{"class":335},[329,488,371],{"class":342},[329,490,374],{"class":346},[329,492,493],{"class":377},"33",[329,495,381],{"class":346},[329,497,493],{"class":377},[329,499,381],{"class":346},[329,501,493],{"class":377},[329,503,392],{"class":346},[329,505,506],{"class":395},"\u002F\u002F Gris oscuro\n",[329,508,510],{"class":331,"line":509},6,[329,511,512],{"class":346},"}\n",[304,514,515,516,519],{},"En este ejemplo, hemos definido una clase ",[326,517,518],{},"ColorPalette"," que contiene constantes para los colores primarios, secundarios, de fondo y de texto. Puedes utilizar estos colores en tus delegadores de UI para mantener una apariencia consistente en toda tu aplicación.",[521,522,523],"note",{},"Recuerda que la elección de colores es crucial para la experiencia del usuario, así que asegúrate de seleccionar colores que sean accesibles y que proporcionen un buen contraste para mejorar la legibilidad.",[308,525,527],{"id":526},"personalizando-los-delegadores-de-ui","Personalizando los delegadores de UI",[304,529,530,531,534,535,538],{},"Una vez que hayas definido tu paleta de colores, puedes comenzar a personalizar los delegadores de UI para aplicar estos colores a tus componentes. Para personalizar un delegador de UI, debes crear una clase que extienda la clase base del delegador correspondiente al componente que deseas personalizar. Por ejemplo, si deseas personalizar el botón (JButton), debes crear una clase que extienda ",[326,532,533],{},"BasicButtonUI"," o ",[326,536,537],{},"MetalButtonUI",", dependiendo del Look and Feel que estés utilizando.",[319,540,542],{"className":321,"code":541,"language":323,"meta":324,"style":324},"import javax.swing.*;\nimport javax.swing.plaf.basic.BasicButtonUI;\nimport java.awt.*;\n\npublic class CustomButtonUI extends BasicButtonUI {\n\n    @Override\n    public void installUI(JComponent c) {\n        super.installUI(c);\n        c.setOpaque(false);\n        c.setBorder(BorderFactory.createEmptyBorder(10, 20, 10, 20));\n        c.setForeground(ColorPalette.BACKGROUND_COLOR);\n        c.setBackground(ColorPalette.PRIMARY_COLOR);\n        c.setCursor(new Cursor(Cursor.HAND_CURSOR));\n    }\n\n    @Override\n    public void paint(Graphics g, JComponent c) {\n        AbstractButton button = (AbstractButton) c;\n        Graphics2D g2d = (Graphics2D) g;\n        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);\n        g2d.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);\n        if (button.getModel().isPressed()){\n            g2d.setColor(ColorPalette.PRIMARY_ACTIVE_COLOR);\n        } else if (button.getModel().isRollover()) {\n            g2d.setColor(ColorPalette.PRIMARY_HOVER_COLOR);\n        } else if (!button.isEnabled()) {\n            g2d.setColor(ColorPalette.PRIMARY_DISABLED_COLOR);\n        } else {\n            g2d.setColor(ColorPalette.PRIMARY_COLOR);\n        }\n        g2d.fillRoundRect(0, 0, c.getWidth(), c.getHeight(), 20, 20);\n        super.paint(g, c);\n    }\n}\n",[326,543,544,558,565,576,582,599,603,612,633,648,665,700,711,722,741,747,752,759,782,793,804,816,826,847,859,883,893,916,926,935,944,950,990,1003,1008],{"__ignoreMap":324},[329,545,546,549,552,555],{"class":331,"line":332},[329,547,548],{"class":335},"import",[329,550,551],{"class":346}," javax.swing.",[329,553,554],{"class":377},"*",[329,556,557],{"class":346},";\n",[329,559,560,562],{"class":331,"line":350},[329,561,548],{"class":335},[329,563,564],{"class":346}," javax.swing.plaf.basic.BasicButtonUI;\n",[329,566,567,569,572,574],{"class":331,"line":399},[329,568,548],{"class":335},[329,570,571],{"class":346}," java.awt.",[329,573,554],{"class":377},[329,575,557],{"class":346},[329,577,578],{"class":331,"line":437},[329,579,581],{"emptyLinePlaceholder":580},true,"\n",[329,583,584,586,588,591,594,597],{"class":331,"line":473},[329,585,336],{"class":335},[329,587,339],{"class":335},[329,589,590],{"class":342}," CustomButtonUI",[329,592,593],{"class":335}," extends",[329,595,596],{"class":342}," BasicButtonUI",[329,598,347],{"class":346},[329,600,601],{"class":331,"line":509},[329,602,581],{"emptyLinePlaceholder":580},[329,604,606,609],{"class":331,"line":605},7,[329,607,608],{"class":346},"    @",[329,610,611],{"class":335},"Override\n",[329,613,615,617,620,623,626,630],{"class":331,"line":614},8,[329,616,353],{"class":335},[329,618,619],{"class":335}," void",[329,621,622],{"class":342}," installUI",[329,624,625],{"class":346},"(JComponent ",[329,627,629],{"class":628},"s9osk","c",[329,631,632],{"class":346},") {\n",[329,634,636,639,642,645],{"class":331,"line":635},9,[329,637,638],{"class":377},"        super",[329,640,641],{"class":346},".",[329,643,644],{"class":342},"installUI",[329,646,647],{"class":346},"(c);\n",[329,649,651,654,657,659,662],{"class":331,"line":650},10,[329,652,653],{"class":346},"        c.",[329,655,656],{"class":342},"setOpaque",[329,658,374],{"class":346},[329,660,661],{"class":377},"false",[329,663,664],{"class":346},");\n",[329,666,668,670,673,676,679,681,684,686,689,691,693,695,697],{"class":331,"line":667},11,[329,669,653],{"class":346},[329,671,672],{"class":342},"setBorder",[329,674,675],{"class":346},"(BorderFactory.",[329,677,678],{"class":342},"createEmptyBorder",[329,680,374],{"class":346},[329,682,683],{"class":377},"10",[329,685,381],{"class":346},[329,687,688],{"class":377},"20",[329,690,381],{"class":346},[329,692,683],{"class":377},[329,694,381],{"class":346},[329,696,688],{"class":377},[329,698,699],{"class":346},"));\n",[329,701,703,705,708],{"class":331,"line":702},12,[329,704,653],{"class":346},[329,706,707],{"class":342},"setForeground",[329,709,710],{"class":346},"(ColorPalette.BACKGROUND_COLOR);\n",[329,712,714,716,719],{"class":331,"line":713},13,[329,715,653],{"class":346},[329,717,718],{"class":342},"setBackground",[329,720,721],{"class":346},"(ColorPalette.PRIMARY_COLOR);\n",[329,723,725,727,730,732,735,738],{"class":331,"line":724},14,[329,726,653],{"class":346},[329,728,729],{"class":342},"setCursor",[329,731,374],{"class":346},[329,733,734],{"class":335},"new",[329,736,737],{"class":342}," Cursor",[329,739,740],{"class":346},"(Cursor.HAND_CURSOR));\n",[329,742,744],{"class":331,"line":743},15,[329,745,746],{"class":346},"    }\n",[329,748,750],{"class":331,"line":749},16,[329,751,581],{"emptyLinePlaceholder":580},[329,753,755,757],{"class":331,"line":754},17,[329,756,608],{"class":346},[329,758,611],{"class":335},[329,760,762,764,766,769,772,775,778,780],{"class":331,"line":761},18,[329,763,353],{"class":335},[329,765,619],{"class":335},[329,767,768],{"class":342}," paint",[329,770,771],{"class":346},"(Graphics ",[329,773,774],{"class":628},"g",[329,776,777],{"class":346},", JComponent ",[329,779,629],{"class":628},[329,781,632],{"class":346},[329,783,785,788,790],{"class":331,"line":784},19,[329,786,787],{"class":346},"        AbstractButton button ",[329,789,365],{"class":335},[329,791,792],{"class":346}," (AbstractButton) c;\n",[329,794,796,799,801],{"class":331,"line":795},20,[329,797,798],{"class":346},"        Graphics2D g2d ",[329,800,365],{"class":335},[329,802,803],{"class":346}," (Graphics2D) g;\n",[329,805,807,810,813],{"class":331,"line":806},21,[329,808,809],{"class":346},"        g2d.",[329,811,812],{"class":342},"setRenderingHint",[329,814,815],{"class":346},"(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);\n",[329,817,819,821,823],{"class":331,"line":818},22,[329,820,809],{"class":346},[329,822,812],{"class":342},[329,824,825],{"class":346},"(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);\n",[329,827,829,832,835,838,841,844],{"class":331,"line":828},23,[329,830,831],{"class":335},"        if",[329,833,834],{"class":346}," (button.",[329,836,837],{"class":342},"getModel",[329,839,840],{"class":346},"().",[329,842,843],{"class":342},"isPressed",[329,845,846],{"class":346},"()){\n",[329,848,850,853,856],{"class":331,"line":849},24,[329,851,852],{"class":346},"            g2d.",[329,854,855],{"class":342},"setColor",[329,857,858],{"class":346},"(ColorPalette.PRIMARY_ACTIVE_COLOR);\n",[329,860,862,865,868,871,873,875,877,880],{"class":331,"line":861},25,[329,863,864],{"class":346},"        } ",[329,866,867],{"class":335},"else",[329,869,870],{"class":335}," if",[329,872,834],{"class":346},[329,874,837],{"class":342},[329,876,840],{"class":346},[329,878,879],{"class":342},"isRollover",[329,881,882],{"class":346},"()) {\n",[329,884,886,888,890],{"class":331,"line":885},26,[329,887,852],{"class":346},[329,889,855],{"class":342},[329,891,892],{"class":346},"(ColorPalette.PRIMARY_HOVER_COLOR);\n",[329,894,896,898,900,902,905,908,911,914],{"class":331,"line":895},27,[329,897,864],{"class":346},[329,899,867],{"class":335},[329,901,870],{"class":335},[329,903,904],{"class":346}," (",[329,906,907],{"class":335},"!",[329,909,910],{"class":346},"button.",[329,912,913],{"class":342},"isEnabled",[329,915,882],{"class":346},[329,917,919,921,923],{"class":331,"line":918},28,[329,920,852],{"class":346},[329,922,855],{"class":342},[329,924,925],{"class":346},"(ColorPalette.PRIMARY_DISABLED_COLOR);\n",[329,927,929,931,933],{"class":331,"line":928},29,[329,930,864],{"class":346},[329,932,867],{"class":335},[329,934,347],{"class":346},[329,936,938,940,942],{"class":331,"line":937},30,[329,939,852],{"class":346},[329,941,855],{"class":342},[329,943,721],{"class":346},[329,945,947],{"class":331,"line":946},31,[329,948,949],{"class":346},"        }\n",[329,951,953,955,958,960,963,965,967,970,973,976,979,982,984,986,988],{"class":331,"line":952},32,[329,954,809],{"class":346},[329,956,957],{"class":342},"fillRoundRect",[329,959,374],{"class":346},[329,961,962],{"class":377},"0",[329,964,381],{"class":346},[329,966,962],{"class":377},[329,968,969],{"class":346},", c.",[329,971,972],{"class":342},"getWidth",[329,974,975],{"class":346},"(), c.",[329,977,978],{"class":342},"getHeight",[329,980,981],{"class":346},"(), ",[329,983,688],{"class":377},[329,985,381],{"class":346},[329,987,688],{"class":377},[329,989,664],{"class":346},[329,991,993,995,997,1000],{"class":331,"line":992},33,[329,994,638],{"class":377},[329,996,641],{"class":346},[329,998,999],{"class":342},"paint",[329,1001,1002],{"class":346},"(g, c);\n",[329,1004,1006],{"class":331,"line":1005},34,[329,1007,746],{"class":346},[329,1009,1011],{"class":331,"line":1010},35,[329,1012,512],{"class":346},[304,1014,1015],{},"Analicemos el código anterior:",[1017,1018,1019,1059],"ol",{},[1020,1021,1022,1025,1026],"li",{},[1023,1024,644],"strong",{},": En este método, configuramos las propiedades del botón, como la opacidad, el borde, el color de fondo y el color del texto utilizando los colores definidos en la paleta de colores. También cambiamos el cursor a una mano para indicar que el botón es interactivo.\n",[1027,1028,1029,1035,1041,1047,1053],"ul",{},[1020,1030,1031,1034],{},[326,1032,1033],{},"setOpaque(false)",": Esto permite que el botón tenga un fondo transparente, lo que es útil para personalizar su apariencia.",[1020,1036,1037,1040],{},[326,1038,1039],{},"setBorder(BorderFactory.createEmptyBorder(10, 20, 10, 20))",": Esto agrega un borde vacío alrededor del botón para aumentar el espacio entre el texto y los bordes del botón, mejorando la apariencia visual.",[1020,1042,1043,1046],{},[326,1044,1045],{},"setForeground(ColorPalette.BACKGROUND_COLOR)",": Esto establece el color del texto del botón utilizando el color de fondo definido en la paleta de colores.",[1020,1048,1049,1052],{},[326,1050,1051],{},"setBackground(ColorPalette.PRIMARY_COLOR)",": Esto establece el color de fondo del botón utilizando el color primario definido en la paleta de colores.",[1020,1054,1055,1058],{},[326,1056,1057],{},"setCursor(new Cursor(Cursor.HAND_CURSOR))",": Esto cambia el cursor a una mano cuando el usuario pasa el mouse sobre el botón, indicando que es interactivo.",[1020,1060,1061,1063,1064,1067,1068],{},[1023,1062,999],{},": En este método, personalizamos la forma en que se dibuja el botón. Utilizamos ",[326,1065,1066],{},"Graphics2D"," para habilitar el antialiasing y mejorar la calidad visual. Cambiamos el color del botón según su estado (presionado, en hover, deshabilitado) utilizando diferentes tonos de la paleta de colores.\n",[1027,1069,1070,1076,1082,1088],{},[1020,1071,1072,1075],{},[326,1073,1074],{},"setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON)",": Esto habilita el antialiasing para suavizar los bordes del botón y mejorar su apariencia visual.",[1020,1077,1078,1081],{},[326,1079,1080],{},"setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON)",": Esto habilita el antialiasing para el texto del botón, mejorando su legibilidad.",[1020,1083,1084,1087],{},[326,1085,1086],{},"g2d.setColor(...)",": Aquí cambiamos el color del botón según su estado. Puedes definir colores adicionales en tu paleta de colores para los estados activo, hover y deshabilitado.",[1020,1089,1090,1093],{},[326,1091,1092],{},"g2d.fillRoundRect(...)",": Esto dibuja un rectángulo redondeado para el botón, lo que le da una apariencia más moderna y atractiva.",[521,1095,1096,1097,1099,1100,1103],{},"La función ",[326,1098,957],{}," se utiliza para dibujar un rectángulo con bordes redondeados, lo que puede mejorar la apariencia visual de los botones y hacer que se vean más modernos. Puedes ajustar los parámetros de esta función para cambiar el radio de los bordes redondeados según tus preferencias, de la siguiente manera: ",[326,1101,1102],{},"g2d.fillRoundRect(0, 0, c.getWidth(), c.getHeight(), 20, 20);"," donde los últimos dos parámetros (20, 20) representan el radio de los bordes redondeados en el eje X e Y respectivamente.",[308,1105,1107],{"id":1106},"aplicando-el-delegador-de-ui-personalizado","Aplicando el delegador de UI personalizado",[304,1109,1110,1111,1114],{},"Una vez que hayas creado tu delegador de UI personalizado, debes aplicarlo a los componentes de tu aplicación. Puedes hacerlo utilizando el método ",[326,1112,1113],{},"setUI"," en el componente que deseas personalizar. Por ejemplo:",[319,1116,1118],{"className":321,"code":1117,"language":323,"meta":324,"style":324},"JButton myButton = new JButton(\"Custom Button\");\nmyButton.setUI(new CustomButtonUI());\n",[326,1119,1120,1140],{"__ignoreMap":324},[329,1121,1122,1125,1127,1129,1132,1134,1138],{"class":331,"line":332},[329,1123,1124],{"class":346},"JButton myButton ",[329,1126,365],{"class":335},[329,1128,368],{"class":335},[329,1130,1131],{"class":342}," JButton",[329,1133,374],{"class":346},[329,1135,1137],{"class":1136},"sU2Wk","\"Custom Button\"",[329,1139,664],{"class":346},[329,1141,1142,1145,1147,1149,1151,1153],{"class":331,"line":350},[329,1143,1144],{"class":346},"myButton.",[329,1146,1113],{"class":342},[329,1148,374],{"class":346},[329,1150,734],{"class":335},[329,1152,590],{"class":342},[329,1154,1155],{"class":346},"());\n",[304,1157,1158,1159,1162],{},"En este ejemplo, hemos creado un botón y le hemos asignado nuestro ",[326,1160,1161],{},"CustomButtonUI"," para que se renderice con la apariencia personalizada que hemos definido.",[308,1164,1166],{"id":1165},"conclusión","Conclusión",[304,1168,1169],{},"Los delegadores de UI son una herramienta poderosa para personalizar la apariencia de los componentes en Swing. Al crear tus propios delegadores de UI, puedes lograr una apariencia única y atractiva para tu aplicación, mejorando la experiencia del usuario. En las siguientes secciones, exploraremos cómo personalizar otros aspectos de los componentes utilizando delegadores de UI y cómo integrarlos con otros elementos de personalización, como colores y fuentes. Recuerda que la personalización de delegadores de UI puede requerir un conocimiento profundo de cómo funcionan los componentes en Swing, así que no dudes en experimentar y consultar la documentación oficial para obtener más información sobre cómo personalizar los delegadores de UI de manera efectiva.",[1171,1172,1173],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}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);}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}",{"title":324,"searchDepth":350,"depth":350,"links":1175},[1176,1177,1178,1179],{"id":310,"depth":350,"text":311},{"id":526,"depth":350,"text":527},{"id":1106,"depth":350,"text":1107},{"id":1165,"depth":350,"text":1166},"Aprende a utilizar delegadores de UI para personalizar la apariencia de los componentes en Swing, creando una experiencia de usuario única y atractiva.","md",null,{"editButton":104},{"icon":83},{"title":101,"description":1180},"HJE6AFVdnBkV2l-IDeL8ws3nsbqupmQt5Erbij_BFw8",[1188,1190],{"title":97,"path":98,"stem":99,"description":1189,"icon":83,"children":-1},"Aprende a utilizar UI Delegates para personalizar la apariencia de los componentes en Swing, creando una experiencia de usuario única y atractiva.",{"title":111,"path":107,"stem":108,"description":1191,"icon":83,"children":-1},"La concurrencia es la capacidad de un sistema para ejecutar múltiples tareas al mismo tiempo, lo que permite mejorar la eficiencia y el rendimiento de las aplicaciones.",1775101371912]