Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Java / Crear ayuda HTML para programa con JavaFX Swing

Crear ayuda HTML para programa con JavaFX Swing

Por jc mouse lunes, julio 18, 2016

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.

java help fx

 

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:

interfaz fx

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.

ayuda al usuario

enjoy!!! 🙂

Tags

Artículos similares

Blog MVC – Iniciando el proyecto [p2]

Segunda parte del tutorial [Crea tu blog con el patrón MVC y php]. En esta 2da parte toca ver lo que es la creación del[...]

Configurar Chrome para usar Tor

Tor es la forma más fácil de navegar por internet de una manera segura y anónima,  Tor cuenta con su propio navegador «T[...]

Camara de Seguridad por Internet (LiveCam)

Existen muchas camaras de seguridad por internet algunas protegidas por contraseña pero la mayoria no, utilizando el hac[...]

JPlay CD – Autoejecutable para java

En este tutorial se explica una forma de crear CD autoejecutable para programas hechos en java asi como para instalar la[...]

Gráfico de lineas con jfreechart

Los gráficos de líneas muestran una serie como un conjunto de puntos conectados mediante una línea. Los valores se repre[...]

Tangram: El rompecabezas chino

El Tangram es un juego chino muy antiguo, esta compuesto por 7 piezas: un paralelogramo (romboide), un cuadrado y 5 triá[...]