Crear ayuda HTML para programa con JavaFX Swing

En este post veremos como crear una aplicación de ayuda al usuario similar al extinto javahelp. Pero en esta oportunidad usaremos los componentes web de javafx mucho mejores en comparación con java swing. Los archivos de ayuda estarán en formato HTML y se cargaran en local, pero, podemos también hacer uso de archivos que estén en la red.

Necesitamos.

IDE Netbeans o Eclipse
Java 7 o Superior
Conocimientos sobre java, html y CSS
Herramienta online: Conversor de imágenes https://www.base64-image.de/

Tiempo: 30 minutos

Nivel: Intermedio – Avanzado

Paso 1. El Proyecto

Crea un nuevo proyecto «java application» con el nombre de «HelpFX» y añade los siguientes paquetes y archivos.

Definiremos la clase HelpJFrame como Main Class.

Paso 2: Interfaz de usuario

Abre el archivo HelpJFrame.java en modo diseño y crea la siguiente interfaz:

Paso 3: Clase Help.java

Creamos una clase que usaremos para cargar los archivos HTML en el browser y el texto en el JTree. La clase es la siguiente:

/**
 * Clase para manejar archivos de ayuda HTML
 * @see https://www.jc-mouse.net/
 * @author mouse
 */
public class Help {
    
    /**
     * Texto que se vera en el JTREE
     */
    private String text;
    /**
     * Archivo o direccion web a cargar
     */
    private String html;
    /**
     * Local true: archivo se carga en loca
     * Local false: se carga desde internet
     */
    private boolean local=true;
    
    /**
     * Contructor de clase
     * @param text
     * @param html
     */
    public Help(String text, String html) {
        this.text = text;
        this.html = html;
    }

    /**
     * Contructor de clase
     * @param text
     * @param html
     * @param local
     */
    public Help(String text, String html,boolean local) {
        this.text = text;
        this.html = html;
        this.local = local;
    }
    
    public String getText() {
        return text;
    }

    public String getHtml() {
        return html;
    }

    public boolean isLocal() {
        return local;
    }
    
    @Override
    public String toString() {
        return text;
    }
    
}//Help

Paso 4. Archivos de ayuda HTML

Java swing puede manejar etiquetas HTML pero tiene muchas limitaciones y se a quedado atrás con respecto a los componentes web de JavaFX, es por esto que es mucho mejor usar FX para trabajar con HTML.

Creamos nuestro archivo de ayuda HTML como cualquier otra pagina web, teniendo en cuenta un par de detalles:

El CSS ira dentro el archivo HTML entre las etiquetas head
Para usar imágenes, primero los codificaremos en base64 usando esta herramienta online https://www.base64-image.de/

El contenido para el archivo index.html es el siguiente

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">        
        <style type="text/css">
        body{ 
          background-image: url(data:image/gif;base64,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);
          font-family: Arial,Verdana,Sans-serif;
          color: #999; 
          font-size: 8pt;
          text-align:center;
        }
        #header{ 
            height:100px;
            width:750px;
            margin-left:auto;
            margin-right:auto;  
            border:#CCC 1px solid;
            background-color:#FFF;
            color:#FF9900;
        }
        #main{ 
            width: 750px;
            margin-top:20px;
            margin-left:auto;
            margin-right:auto;
            border:#CCC 1px solid;
            background-color: #FFF;  
            font-size:9pt;
            color:#666;
        }
        #content { 
            width:510px;
            float:left;
            padding:20px;
            text-align:justify;
        }
        .logo{ 
            width:200px;
            float:left;
            text-align:left;
            padding:15px 0 10px 15px;
            overflow: hidden;
        }
        h1{ 
            background-color: #FFF;
            color:#FF9900;
            font-size:12pt;
            font-weight:bold;
            margin-top:0;
            margin-bottom:10px;
        }
        h2{
            background-color: #fff;
            color:#FF9900;
            font-size:10pt;
            font-weight:normal;
            margin-top:0;
            margin-bottom:0;
        }
        #nav{ 
            width:180px;
            float:left;
            margin-right:5px;
            margin-top:20px;
        }    
        #footer{ 
            height:30px;
            width:750px;
            margin-top:20px;
            margin-left:auto;
            margin-right:auto;
            padding:10px 0;  
            border:#ccc 1px solid;
            background-color: #fff;
            font-size:8pt;
            color:#999;
            text-align:center;
        }
        #footer a:link, #footer a:visited, #footer a:active{ 
            background-color: #fff; text-decoration: none; color:#999;}
        #footer A:hover{ background-color: #fff; text-decoration: none; color:#ff9900;}
        .footer { 
            clear: both; 
            background:#fff;
            color:inherit;
            height:1px;
        }
        .menu { 
            width:auto;
            text-align:right;
            font-weight:bold;
            font-size:12pt;
            padding:35px 15px 0 0;
            float: right;
            overflow: hidden;
        }
        .left{ 
            width:250px;
            float:left;
            margin:10px 15px 10px 0;
            text-align:justify;  
            overflow: hidden;
        }
        .mid { 
            width:auto;
            padding:10px 0 0 10px;
            margin-left:auto;
            margin-top:0;
            overflow: hidden;
        }
        .navhead{ 
            width:170px;
            height:18px;
            padding: 3px 3px 0 5px;
            border:#ddd 1px solid;
            text-align: left;
            font-size:8pt;
            background-color:#eee;
            color:#666;
        }
        .navitem{ 
            width:172px;
            padding: 15px 3px 0 3px;
            border-bottom:#ddd 1px solid;
            border-right:#ddd 1px solid;
            border-left:#ddd 1px solid;  
            font-size:8pt;
            font-weight: normal;
            text-align:justify;
        }
        ul { 
            list-style:circle;
            margin:0 5px;
            padding:0 0 0 20px;
        }
        li{ 
            padding:0 4px 8px 10px;            
        }
        .img{ border:0; }
        </style>
    </head>
    <body>
        <div id="header">
            <div class="logo">&nbsp;Ayuda con JavaFX - HTML<br /><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+EDL2h0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMwNjcgNzkuMTU3NzQ3LCAyMDE1LzAzLzMwLTIzOjQwOjQyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2QzZFNUIwRDREMjAxMUU2Qjg5NUQyQzk1QjA1MTEzNCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2QzZFNUIwQzREMjAxMUU2Qjg5NUQyQzk1QjA1MTEzNCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRTFEQkM3M0NCN0IxMUU1OTc3NUE2RkY1MzQ2QUMxMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRTFEQkM3NENCN0IxMUU1OTc3NUE2RkY1MzQ2QUMxMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uAA5BZG9iZQBkwAAAAAH/2wCEAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwK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" /></div>            
        </div>
        <div id="main">
<div id="content">
<h1>Header Using h1</h1>
<h2>Sub Header Using h2</h2>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce at velit ac neque scelerisque blandit. 
	Aenean malesuada. Suspendisse vestibulum orci. Quisque posuere vehicula justo. Integer sollicitudin ligula vitae tellus. 
	Vestibulum a nibh vel quam molestie hendrerit. Proin posuere magna vitae neque. Maecenas id ante. Etiam nec ante. Morbi 
	ultrices magna et neque. In hac habitasse platea dictumst. Quisque vehicula ultricies neque. Aenean volutpat varius lectus. 
	Morbi tempor justo at ante. Ut ac pede. Donec metus libero, aliquet id, dictum at, pharetra vel, odio. Maecenas ut erat. Nullam 
	urna ante, laoreet at, ornare vel, pulvinar ut, velit. 
	<div class="left"><h2>Sub Header</h2>In ullamcorper blandit nisl. Integer tempus rutrum mi. Donec nec risus. Duis accumsan. Vivamus id risus ut
	metus interdum tempus. Curabitur orci nulla, vulputate vitae, vestibulum at, aliquam id, risus. Sed placerat blandit sem. Cras
	lacinia, magna non facilisis congue, turpis massa vestibulum nibh, at tempor elit leo quis arcu. Duis ligula nulla, hendrerit eget,
	dapibus et, placerat vitae, urna. Maecenas interdum, augue ac pellentesque laoreet, lorem dui tempor ipsum, quis porta eros
	enim et erat. Nam a arcu sit amet dui iaculis tincidunt. Pellentesque vulputate nisi. Sed ligula velit, eleifend non, dapibus vitae,
	pretium eu, metus. </div>	
	<div class="mid"><h2>Sub Header</h2>Suspendisse posuere vulputate lacus. Sed congue, est quis malesuada condimentum, ante massa faucibus 
	erat, a imperdiet ipsum nibh sed augue. Fusce quis mi. Nam faucibus, lacus non posuere porttitor, enim quam rutrum dolor, vitae 
	convallis nulla velit ut enim. Aenean vitae nibh et felis aliquam adipiscing. Suspendisse eget est. Vestibulum feugiat. Pellentesque 
	feugiat malesuada turpis. Aliquam id lacus. Ut nonummy sapien. Maecenas pede risus, ultricies eget, congue sed, ullamcorper ac, 
	massa. Morbi venenatis. Proin sapien leo, iaculis a, hendrerit vitae, tempus eget, nisl. Vestibulum 
      condimentum. Proin leo mi, sodales ac, placerat porttitor, pharetra vitae, pede. </div>
	<h1>Another Header</h1><p>Etiam dapibus, tortor vitae dapibus nonummy, ante elit mollis ligula, sit amet pretium tellus eros ac lacus. Praesent enim risus, 
	feugiat in, viverra non, egestas pharetra, quam. Cras dolor eros, congue non, aliquet et, aliquam et, metus. Donec eros augue, faucibus 
	hendrerit, pharetra sed, viverra a, tortor. Integer malesuada nisi.</p>
	<p>Cras lobortis dolor ut purus. Phasellus nunc elit, laoreet vitae, 
	accumsan quis, lobortis venenatis, elit. Nam lobortis sapien. Vivamus hendrerit.  Quisque non felis ultricies odio venenatis vestibulum. 
	Sed interdum ultricies purus.  Quisque pharetra. Curabitur ut enim in purus mollis venenatis.</p>

</div>

<div id="nav">
	<div class="navhead">NEWS &amp; UPDATES</div>
	<div class="navitem">
		<ul><li>09.15.06  News item here. Curabitur ut erat nec augue suscipit placerat.</li>
		<li>09.01.06  Etiam eu ipsum. Quisque commodo tempor nisi.</li>
		<li>08.30.06  Cras lobortis dolor ut purus. Phasellus nunc elit, laoreet vitae, accumsan quis, lobortis venenatis, elit.
		Nam lobortis sapien.</li>
		<li>08.26.06  Fusce a purus id mi condimentum nonummy. Duis sed sem ac nulla tempor tincidunt.</li>		
		<li>08.25.06  Etiam tincidunt arcu non nunc. Donec elementum massa non purus. Duis ullamcorper lorem in mauris</li></ul>
	</div>
	<p></p>
	<div class="navhead">SITE DETAILS</div>
	<div class="navitem"><ul><li>Kindly retain the "Website by MLP Design" tag and link when you use this template. Thank you.</li></ul></div>
</div>
<div class="footer"></div>
</div>

        <div id="footer">
                Copyright &copy; 2016 jc-Mousee Bolivia. All Rights Reserved.  
                <br />Website by <a href="https://www.jc-mouse.net/" title="jc mouse">jc Mouse</a>.  	  
        </div>

    </body>
</html>

Al resto de los archivos HTML, los dejaremos tal cual están.

Paso 5: Integrando todo el código y recursos

Abre el archivo HelpJFrame en modo código, lo primero que haremos es agregar las librerías que usaremos:

import java.awt.BorderLayout;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import javafx.application.Platform;
import javafx.embed.swing.JFXPanel;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javax.swing.tree.DefaultMutableTreeNode;
import javax.swing.tree.DefaultTreeModel;
import javax.swing.tree.TreePath;

A continuación definimos las variables que usaremos:

    /**
     * Contenedor para componente FX
     */
    private final JFXPanel jfxPanel = new JFXPanel();
    /**
     * Componentes FX
     */
    private WebView browser;
    private WebEngine webEngine;

Definimos un método que nos cree un browser y lo agregamos a nuestro jfxpanel. También cargamos el archivo index.html, que sera el que se vea primero.

    /**
     * Crea el escenario FX con el componente browser y webEngine
     */
    private void createScene(){
        Platform.runLater(() -> {
            browser = new WebView();
            webEngine = browser.getEngine();
            webEngine.load(HelpJFrame.class.getResource("/help/html/index.html").toExternalForm());            
            jfxPanel.setScene(new Scene((browser)));//añade al panel contenedor
        } //end run
        );             
    }

Creamos también un método que nos permita interactuar entre swing y fx para poder cargar los diferentes archivos HTML que compondrán nuestra aplicación de ayuda.

    /**
     * encargado de cargar un archivo HTML en el componente FX
     * @param file archivo HTML a cargar o direccion web
     * @param local true: el archivo se carga desde un archivo HTML
     *              false: el archivo se carga desde internet 
     */
    private void loadHelp(String file, boolean local){        
        Platform.runLater(() -> {
            if(webEngine!=null){
                if(local){
                    webEngine.load(HelpJFrame.class.getResource("/help/html/"+file+".html").toExternalForm());
                }else{
                    webEngine.load(file);
                }                
            }
                
        });
    }

Para terminar, nos ubicamos en el constructor de clase y después de initComponents(), añadimos el siguiente código:

        HelpJFrame.this.setTitle("Ayuda con JAVAFX - by Mouse Bolivia");
        HelpJFrame.this.setLocationRelativeTo(null);
        /**
         * Crea escenario FX 
         */
        createScene();
         
        /**
         * Crea el arbol y sus hojas
         */
        DefaultMutableTreeNode root = new DefaultMutableTreeNode(new Help("Ayuda","index"));   
        DefaultTreeModel modelo = new DefaultTreeModel( root ); 
        DefaultMutableTreeNode help1 = new DefaultMutableTreeNode( new Help("Tema 1","tema1"));
        root.add(help1);  
        DefaultMutableTreeNode help2 = new DefaultMutableTreeNode( new Help("Tema 2","tema2"));
        root.add(help2);  
        DefaultMutableTreeNode help3 = new DefaultMutableTreeNode( new Help("Tema 3","tema3"));
        root.add(help3);  
        DefaultMutableTreeNode help4 = new DefaultMutableTreeNode( new Help("Tema Online","http://www.google.com.bo",false));
        root.add(help4);  
        
        /**
         * añade el modelo aj JTREE
         */
        jTree1.setModel(modelo);
        jTree1.setCursor(new java.awt.Cursor(java.awt.Cursor.HAND_CURSOR));
        
        /**
         * Agrega el panel FX al panel swing
         */
        jPanel1.setLayout(new BorderLayout());
        jPanel1.add(jfxPanel,BorderLayout.CENTER); 
        
        /**
         * Listener para capturar en que hoja el usuario hace clic
         */
        jTree1.addMouseListener ( new MouseAdapter (){
            
            @Override
            public void mouseReleased(MouseEvent e){                                           
                TreePath path = jTree1.getSelectionPath();
                if (path != null){
                    DefaultMutableTreeNode NodoSeleccionado = (DefaultMutableTreeNode)path.getLastPathComponent();
                    if( NodoSeleccionado.getUserObject() instanceof  Help ){
                        /**
                         * Carga el archivo HTML correspondiente
                         */
                        loadHelp( ((Help)NodoSeleccionado.getUserObject()).getHtml(),((Help)NodoSeleccionado.getUserObject()).isLocal());    
                    }
                }
            }
        });

Si no tenemos ningún error ejecutamos.

enjoy!!! 🙂

Crear ayuda HTML para programa con JavaFX Swing

Tags

Últimas entradas

Convierte tus fotos al estilo Ghibli gratis y fácil: Guia paso a paso

Edita fotografias gratis con esta IA de Google

Que es y como se usa la App de la ANH Abastecimiento

Fin de una era. RIP Skype 2003-2025

Ggwave: Conoce el idioma que usan las IAs para comunicarse

Artículos similares

Reportes y Subreportes con iReport

Generar clases desde Esquemas XSD

Migrar proyecto Netbeans a Eclipse

Proyecto Ascii Art (metodo de Black/white)

DOM4J: Creación de archivos XML

Activar/Desactivar Bluetooth

JC Mouse | Bolivia