{"id":312,"date":"2026-02-28T15:29:54","date_gmt":"2026-02-28T14:29:54","guid":{"rendered":"http:\/\/www.ccorreas.es\/wordpress\/?p=312"},"modified":"2026-02-28T15:29:54","modified_gmt":"2026-02-28T14:29:54","slug":"proyecto-de-ejemplo-javafx","status":"publish","type":"post","link":"https:\/\/www.ccorreas.es\/wordpress\/index.php\/2026\/02\/28\/proyecto-de-ejemplo-javafx\/","title":{"rendered":"Proyecto de ejemplo JavaFX"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">El primer paso ser\u00e1 crear la estructura de paquetes model, view, controller.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"375\" height=\"298\" src=\"http:\/\/92.222.81.203\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.13.59.png\" alt=\"\" class=\"wp-image-314\" srcset=\"https:\/\/www.ccorreas.es\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.13.59.png 375w, https:\/\/www.ccorreas.es\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.13.59-300x238.png 300w\" sizes=\"auto, (max-width: 375px) 100vw, 375px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">En el segundo paso a\u00f1adiremos la librer\u00eda de JavaFX al proyecto. Para ello vamos a File -> Project Structure -> Modules -> Dependencies y a\u00f1adimos JavaFX<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"330\" src=\"http:\/\/92.222.81.203\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.15.40.png\" alt=\"\" class=\"wp-image-317\" srcset=\"https:\/\/www.ccorreas.es\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.15.40.png 1020w, https:\/\/www.ccorreas.es\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.15.40-300x97.png 300w, https:\/\/www.ccorreas.es\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.15.40-768x248.png 768w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Creamos la clase Main.java que hereda de Application.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>import javafx.application.Application;\nimport javafx.fxml.FXMLLoader;\nimport javafx.scene.Parent;\nimport javafx.scene.Scene;\nimport javafx.stage.Stage;\n\npublic class Main extends Application {\n    public static void main(String[] args) {\n        launch(args);\n    }\n\n    @Override\n    public void start(Stage stage) throws Exception {\n        Parent root = FXMLLoader.load(getClass().getResource(\".\/view\/ejemplo.fxml\"));\n        stage.setTitle(\"JavaFX y CSS\");\n        stage.setScene(new Scene(root));\n        stage.show();\n    }\n}\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">import<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">javafx<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #8FBCBB\">application<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #8FBCBB\">Application<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">import<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">javafx<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #8FBCBB\">fxml<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #8FBCBB\">FXMLLoader<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">import<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">javafx<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #8FBCBB\">scene<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #8FBCBB\">Parent<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">import<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">javafx<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #8FBCBB\">scene<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #8FBCBB\">Scene<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">import<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">javafx<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #8FBCBB\">stage<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #8FBCBB\">Stage<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">class<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Main<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">extends<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB; font-weight: bold\">Application<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">static<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">void<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">main<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #8FBCBB\">String<\/span><span style=\"color: #ECEFF4\">[]<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">args<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #88C0D0\">launch<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9FF\">args<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">@<\/span><span style=\"color: #D08770\">Override<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">public<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">void<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">start<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #8FBCBB\">Stage<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">stage<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">throws<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #8FBCBB\">Exception<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #8FBCBB\">Parent<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">root<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">=<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">FXMLLoader<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">load<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #88C0D0\">getClass<\/span><span style=\"color: #ECEFF4\">().<\/span><span style=\"color: #88C0D0\">getResource<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">.\/view\/ejemplo.fxml<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">))<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">stage<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setTitle<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">JavaFX y CSS<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">stage<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">setScene<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #81A1C1\">new<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">Scene<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #D8DEE9FF\">root<\/span><span style=\"color: #ECEFF4\">))<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #D8DEE9\">stage<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #88C0D0\">show<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Lo siguiente ser\u00e1 configurar el ejecutable Main. Current File -> Edit Configurations -> Add Application<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Modify options -> Add VM Options y agregamos esta l\u00ednea.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>--module-path \"$JavaFX25$\" --add-modules javafx.controls,javafx.fxml<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">--<\/span><span style=\"color: #D8DEE9FF\">module<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">path <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">$JavaFX25$<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">--<\/span><span style=\"color: #D8DEE9FF\">add<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">modules <\/span><span style=\"color: #D8DEE9\">javafx<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">controls<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #D8DEE9\">javafx<\/span><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">fxml<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora pasamos a SceneBuilder y en Controller asignamos la ruta y nombre del controlador.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"284\" height=\"316\" src=\"http:\/\/92.222.81.203\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.24.16.png\" alt=\"\" class=\"wp-image-322\" srcset=\"https:\/\/www.ccorreas.es\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.24.16.png 284w, https:\/\/www.ccorreas.es\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.24.16-270x300.png 270w\" sizes=\"auto, (max-width: 284px) 100vw, 284px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora vamos a View -> Show Simple Skelleton Controller y lo guardamos en el paquete controller.<br><br>Y podemos ejecutar el programa.<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"603\" height=\"431\" src=\"http:\/\/92.222.81.203\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.25.20.png\" alt=\"\" class=\"wp-image-323\" srcset=\"https:\/\/www.ccorreas.es\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.25.20.png 603w, https:\/\/www.ccorreas.es\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.25.20-300x214.png 300w\" sizes=\"auto, (max-width: 603px) 100vw, 603px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Para agregar estilos CSS vamos a crear el paquete style y dentro de \u00e9l el archivo styles.css.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En SceneBuilder vamos a Properties -> Stylesheets y selecci\u00f3namos el archivo CSS que acabamos de crear.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"272\" height=\"355\" src=\"http:\/\/92.222.81.203\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.29.17.png\" alt=\"\" class=\"wp-image-325\" srcset=\"https:\/\/www.ccorreas.es\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.29.17.png 272w, https:\/\/www.ccorreas.es\/wordpress\/wp-content\/uploads\/2026\/02\/Captura-de-pantalla-2026-02-28-a-las-15.29.17-230x300.png 230w\" sizes=\"auto, (max-width: 272px) 100vw, 272px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ejemplo de c\u00f3digo CSS para JavaFX.<br><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:clamp(14px, .875rem, 21px);font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(20px, 1.25rem, 30px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>@font-face {\n    fx-font-family: \"Airstrike\";\n    src: url(\"fonts\/Airstrike.ttf\");\n}\n\n.root {\n    -fx-font-family: \"Airstrike\";\n    -fx-background-color: #2b2b2b;\n}\n\n.boton_principal {\n    -fx-background-color: #1E74FA;\n    -fx-text-fill: #ffffff;\n    -fx-font-size: 20px;\n    -fx-effect: dropshadow(\n            gaussian,\n            rgba(0,0,0,0.4),\n            10,\n            0.3,\n            0,\n            3\n    );\n}\n\n.boton_principal:hover {\n    -fx-background-color: #85b5ff;\n}\n\n.boton_principal:pressed {\n    -fx-background-color: #265cb0;\n    -fx-cursor: pointer;\n}\n\n.navbar {\n    -fx-background-color: #1E74FA;\n    -fx-text-fill: #ffffff;\n    -fx-font-size: 20px;\n}\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #ECEFF4\">@<\/span><span style=\"color: #D08770\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">face <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    fx<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Airstrike<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    src<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">url<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">fonts\/Airstrike.ttf<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">root<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">fx<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">family<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #A3BE8C\">Airstrike<\/span><span style=\"color: #ECEFF4\">&quot;<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">fx<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">color<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> #2b2b2b<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">boton_principal<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">fx<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">color<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> #1E74FA<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">fx<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">text<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">fill<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> #ffffff<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">fx<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">size<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> 20px<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">fx<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">effect<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">dropshadow<\/span><span style=\"color: #ECEFF4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            gaussian<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #88C0D0\">rgba<\/span><span style=\"color: #ECEFF4\">(<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><span style=\"color: #B48EAD\">0.4<\/span><span style=\"color: #ECEFF4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #B48EAD\">10<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #B48EAD\">0.3<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #B48EAD\">0<\/span><span style=\"color: #ECEFF4\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">            <\/span><span style=\"color: #B48EAD\">3<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #ECEFF4\">)<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">boton_principal<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\">hover <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">fx<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">color<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> #85b5ff<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">boton_principal<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\">pressed <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">fx<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">color<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> #265cb0<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">fx<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">cursor<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> pointer<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">.<\/span><span style=\"color: #D8DEE9\">navbar<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">fx<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">background<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">color<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> #1E74FA<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">fx<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">text<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">fill<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> #ffffff<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">fx<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">font<\/span><span style=\"color: #81A1C1\">-<\/span><span style=\"color: #D8DEE9FF\">size<\/span><span style=\"color: #81A1C1\">:<\/span><span style=\"color: #D8DEE9FF\"> 20px<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>El primer paso ser\u00e1 crear la estructura de paquetes model, view, controller. En el segundo paso a\u00f1adiremos la librer\u00eda de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":331,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,8],"tags":[],"class_list":["post-312","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-java","category-javafx"],"_links":{"self":[{"href":"https:\/\/www.ccorreas.es\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/312","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ccorreas.es\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ccorreas.es\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ccorreas.es\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ccorreas.es\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=312"}],"version-history":[{"count":0,"href":"https:\/\/www.ccorreas.es\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/312\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ccorreas.es\/wordpress\/index.php\/wp-json\/wp\/v2\/media\/331"}],"wp:attachment":[{"href":"https:\/\/www.ccorreas.es\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ccorreas.es\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ccorreas.es\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}