Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Java / Crear ayuda HTML para programa con JavaFX Swing

Crear ayuda HTML para programa con JavaFX Swing

Autor 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 http://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="http://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

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Introducción a Scene Builder y MVC (Parte I)

Introducción a Scene Builder y MVC (Parte I)

En este tutorial realizaremos una introducción al diseño de interfaces gráficas en JavaFX y Scene Builder, así también v...

Descargar Doodle Google Pacman

Descargar Doodle Google Pacman

Hace un par de años atras google para el aniversario del juego de Pacman saco un doodle en su homenaje, ese doodle que s...

Animación de JProgressBar con hilos

Animación de JProgressBar con hilos

Si nuestra aplicación tiene que llevar a cabo un cierto trabajo que no sabemos cuanto durará y que a la vez consume much...

Google Circles en java

Google Circles en java

En este tutorial crearemos el botón de Google+ Google Circles para una interfaz de escritorio 🙂 si no sabes lo que son e...

Compartir imagen desde android – Share Image

Compartir imagen desde android – Share Image

En este post crearemos una aplicación android que nos permitirá compartir una imagen con Facebook, whatsapp, bluetooth,...

Crea tu propia aplicacion para realizar llamadas

Crea tu propia aplicacion para realizar llamadas

En este tutorial Android Bolivia 🙂 construiremos una sencilla aplicación para realizar llamadas por teléfono, aprenderem...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

Desde java 7 esta disponible la interface ExecutorService que se extiende de Executor y nos proporciona los métodos nece...

En este post crearemos una app para utilizar el vibrador de nuestro dispositivo android usando para ello el IDE Android...

En un post anterior vimos como utilizar GSON para serializar un objeto java en JSON, en esta oportunidad se vera el proc...

Gson es una biblioteca de código abierto para Java desarrollado por Google Inc que permite la serialización y deserializ...

Android Bolivia

Bandera en Alto