Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Java / Crear ventana de ayuda sin JavaHelp

Crear ventana de ayuda sin JavaHelp

Autor jc mouse martes, marzo 24, 2015

Java Help es (o era) una librería para java que permitía añadir ventanas de ayuda HTML a nuestros proyectos, al ser una librería que ya tiene muchos años sin una nueva actualización estamos obligados a buscar otras maneras de presentar los archivos de ayuda al usuario final, archivos PDF, HTML e incluso videotutoriales son utilizados en los proyectos, pero tienen la desventaja de que no están al alcance de los usuarios como lo hacia JavaHelp, pero podemos solucionar este problema creando nuestra propia versión de java help y esta es la finalidad de este post.

help me

Necesitamos

  • IDE Netbeans 7.x o eclipse
  • Conocimientos en java y html

Tiempo: 20 minutos

Nivel: Avanzado

PROYECTO

Paso 1. Proyecto base

Partiremos de un proyecto base que llamamos JHELP, es decir esta es nuestra aplicación que desarrollaríamos normalmente.

basico

Este proyecto a parte de todo los controles, ventanas y otros recursos que tenga, le pondremos un botón “AYUDA” que nos permitirá invocar a nuestros archivos de ayuda html.

botonazo

Paso 2. Mi Java Help

Cuando ya tenemos nuestro proyecto listo y queremos incluir los archivo de ayuda html, crearemos un paquete a parte del paquete de la aplicación principal, esto para mantener un cierto orden en el desarrollo del software. Nuestro proyecto entonces queda de la siguiente manera:

ayudame proyecto

Nuestro paquete de ayuda “help“, esta compuesto de los siguientes archivos:

  • Help.java es un JFrame, la ventana principal de nuestra ayuda
  • HelpArchivo.java es una clase que nos permitirá trabajar con los archivos html.
  • indice.txt un archivo de texto que como su nombre indica nos permite guardar la lista de archivos que hacen parte de nuestra ayuda
  • close.jpg, open.jpg y sheet.jpg son archivos de imagen que representan los diferentes estados , tienen una dimensión de 17×17 pixeles.

open spanish

Paso 3. Interfaz Help.java

La interfaz esta compuesta por un jSplitPane, un jEditorPane y un jTree.

proyecto interfaz

Paso 4. Clase HelpArchivo.java

El código es:

public class HelpArchivo {

    private String Texto;
    private String archivo;

    public String getTexto() {
        return Texto;
    }

    public void setTexto(String Texto) {
        this.Texto = Texto;
    }

    public String getArchivo() {
        return archivo;
    }

    public void setArchivo(String archivo) {
        this.archivo = archivo;
    }

    @Override
    public String toString() {
        return Texto;
    }

}

Paso 5. indice.txt

JavaHelp hace uso de archivos XML para manejar la información de una manera estructurada, sin embargo esto hace que dependamos de librerías externas que hace que el proyecto crezca y necesite de más recursos, para evitar esto en este tutorial, se hará uso de un archivo de texto (*.TXT), al perder las ventajas que nos brinda XML, deberemos crear nuestra propia forma de representar la información así como implementar los métodos para manejaros y cargar la información en un JTree

Nuestro metalenguaje tendrá la siguiente estructura:

simbolo [ texto ][ archivo ]

Explicación:

  • simbolo: sera “>”  para indicar que esta linea corresponde a la raiz de nuestro indice de contenido, una “|”  para señalar que a esta linea es una rama y que tendrá 0,1 o más hojas, finalmente un guion “-“ indicara que esta linea corresponde a una hoja.
  • texto: en esta sección se colocara un texto, por lo general el titulo del documento de ayuda que se podrá visualizar en el JTree
  • archivo: Aquí indicamos el archivo de ayuda en HTML correspondiente.
Dicho todo esto, el contenido de nuestro indice es:
>[Java Applications][archivo1]
   |[Java Project Setup and Configuration][archivo2]
      - [About Projects][archivo3]
      - [Working with Projects][archivo4]
      - [Creating a Java Project][archivo5]
   |[Editing Java Source Files][archivo6]
      - [About Editing Java Source File][archivo7]
   |[Web Applications][archivo8]

No es necesario tabular cada linea, pero para que se pueda apreciar mejor la estructura del indice es preferible hacerlo.

Paso 6. Archivos de ayuda HTML

Abre la carpeta en donde tienes el proyecto, en esa carpeta, crea una nueva carpeta que se llamara “help

ayudalo

Esta es la carpeta donde se almacenaran los archivos de ayuda HTML así como de sus imágenes, si es que hacen uso de estas, en el ejemplo de este post, nuestro indice tiene 8 items, por lo que necesitamos 8 archivos html, ayudandote de un editor de texto o del propio netbeans crea estos archivos pero cuidado con el uso de etiquetas y estilos ya que java y su componente jEditorPane no tienen soporte para los tags mas recientes.

Ejmplo: archivo1.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
    </head>
    <body style="background:#F4EFEF;">
    <div style="margin:24px 34px;">
        <h1>Java Applications</h1>        
        <p>Lorem ipsum ad his scripta blandit partiendo, eum no falli viris intellegam, ut fugit veritus placerat per.</p>
        <p><img src="proj_props_libraries.jpg" width="450" height="325"></p>
        <p>Ius id vidit volumus mandamus, vide veritus democritum te nec. </p>
        <ul>
          <li>No mei ferri graeco dicunt, ad cum veri accommodare. </li>
          <li>Sed at malis omnesque delicata, usu et iusto zzril meliore. </li>
          <li>Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. </li>
        </ul>
        <p>Ne quodsi ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p>        
        <h3>Id vel sensibus honestatis omittantur, vel cu nobis commune patrioque. </h3>
        <p>In accusata definiebas qui mutat ullum forensibus ex,<strong>Assum</strong> maiestatis nec.</p>
 </div>
    </body>
</html>

Importante: Al final, una vez que creemos el JAR de nuestra aplicación, la carpeta “help” y todo su contenido deben ir en la misma carpeta que el JAR principal.

Paso 7. Help.java codificación

Abre el archivo “help.java” y añade los siguientes import

import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.util.Scanner;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.event.TreeSelectionEvent;
import javax.swing.event.TreeSelectionListener;
import javax.swing.tree.DefaultMutableTreeNode;
import javax.swing.tree.DefaultTreeCellRenderer;
import javax.swing.tree.DefaultTreeModel;
import javax.swing.tree.TreePath;

A continuación declara la variable correspondiente a la ruta completa de la carpeta help, que es donde tenemos nuestros archivos html.

private String help_path = System.getProperty("user.dir") + "\\help\\";

en el constructor de clase pega:

    /** Constructor */
    public Help() {
        initComponents();

        setTitle("MI JAVA HELP - [jc-mouse.net]");
        //propiedades de splipanel
        jSplitPane1.setOneTouchExpandable(true);
        jSplitPane1.setDividerLocation(250);
        jSplitPane1.setDividerSize(10);        
        //propiedades de editorpanel
        jEditorPane1.setEditable(false);        
        jEditorPane1.setContentType( "text/html" );
        jEditorPane1.getDocument().putProperty("IgnoreCharsetDirective", Boolean.TRUE);
        jEditorPane1.setText( readFile("archivo1") );//lee el primer archivo
        jEditorPane1.setCaretPosition(0);

        //jtree 
        jTree1.setModel(createTreeModel());       
        //listener
        jTree1.getSelectionModel().addTreeSelectionListener(new TreeSelectionListener() {

            @Override
            public void valueChanged(TreeSelectionEvent e) {             
                //cuando se realice un clic sobre algun item, se carga el archivo HTML correspondiente
                TreePath path = jTree1.getSelectionPath();
                if( path!=null )
                {
                    DefaultMutableTreeNode NodoSeleccionado = (DefaultMutableTreeNode)path.getLastPathComponent();              
                    //Obtiene el nombre del archivo HTML correspondiente al item seleccionado
                    String archivo = ((HelpArchivo) NodoSeleccionado.getUserObject()).getArchivo();
                    jEditorPane1.setText( readFile(archivo) );
                    jEditorPane1.setCaretPosition(0);
                }
            }            
        }); 
        //iconos del jtree
        DefaultTreeCellRenderer render= (DefaultTreeCellRenderer)jTree1.getCellRenderer();
        render.setLeafIcon(new ImageIcon(getClass().getResource("sheet.jpg")));        
        render.setOpenIcon(new ImageIcon(getClass().getResource("open.jpg")));
        render.setClosedIcon(new ImageIcon(getClass().getResource("close.jpg")));
    }

A continuación del constructor, definimos los cuatro métodos necesarios para leer el archivo indice.txt, crear el model del JTree, cargar los archivos HTML en el jTextPane y un metodo replaceSRC para poder visualizar las imágenes en el jTextPane.

    /**
 * Metodo para leer un archivo HTML
 * @param String fileName
 * @return String 
 */
    private String readFile(String fileName)
    {        
      StringBuilder result = new StringBuilder("");     
      File  file = new File( help_path + fileName + ".html"); 
 try {
            if( file.exists() )
            {
                Scanner scanner = new Scanner(file);
                //lee archivo linea por linea
                while (scanner.hasNextLine()) {
                   String line = replaceSRC(scanner.nextLine().trim());
                   result.append(line);                        
                } 
                scanner.close(); 
            }    
            else
            {
                JOptionPane.showMessageDialog(new JFrame(), "El archivo ["+fileName+".html] no existe.", "Error",JOptionPane.ERROR_MESSAGE);
            }
 } catch (IOException e) {
            System.err.println(e.getMessage());
 } 
 return result.toString();
    }

    /**
 * Metodo que lee el archivo HELP para crear el arbol de ayuda
 * @return DefaultTreeModel
 */
    private DefaultTreeModel createTreeModel()
    {
       DefaultMutableTreeNode root  = new DefaultMutableTreeNode();   
       DefaultMutableTreeNode hoja = new DefaultMutableTreeNode();           
       //carga archivo help 
 try {
            InputStream input = getClass().getResourceAsStream("/help/indice.txt");            
            Scanner scanner = new Scanner(input);
            //lee archivo linea por linea
     while (scanner.hasNextLine()) {
     String line = scanner.nextLine().trim();                        
                if( line.substring(0, 1).equals(">") )//es la raiz del arbol
                {
                    root = new DefaultMutableTreeNode( createHelpArchivo(line.substring(1, line.length())) );         
                }
                else if( line.substring(0, 1).equals("|") )//es una rama u hoja
                {
                    hoja = new DefaultMutableTreeNode( createHelpArchivo(line.substring(1, line.length())) );    
                    root.add(hoja);
                }
                else if( line.substring(0, 1).equals("-") )//es una hoja
                {
                    hoja.add(new DefaultMutableTreeNode( createHelpArchivo(line.substring(1, line.length())) ));
                }
            } 
            scanner.close(); 
            //se añade arbol al modelo
            DefaultTreeModel modelo = new DefaultTreeModel(root);
            return modelo; 
 } catch (NullPointerException e) {            
             JOptionPane.showMessageDialog(new JFrame(), e.getMessage(), "Error",JOptionPane.ERROR_MESSAGE);
 } 
 return null;
    }    

    /**
 * Dado un valor string "value" crea una clase HelpArchivo
 * @param String value de la forma
 * Ej. [texto][archivo html]
 * @return HelpArchivo
 */
    private HelpArchivo createHelpArchivo( String value )
    {
       HelpArchivo helpArchivo = new HelpArchivo();
       //System.out.println( value );
       Pattern patron = Pattern.compile("\\[(.*)\\]\\[(\\w+)\\]");
       Matcher matcher = patron.matcher(value);       
       matcher.find();//busca cadenas
       helpArchivo.setTexto(matcher.group(1));
       helpArchivo.setArchivo(matcher.group(2));        
       return helpArchivo;
    }

    /**
 * Metodo que reemplaza la ruta de imagen 
 * Antes src="imagen.jpg"
 * despues src="file:\\\c:\carpeta\carpeta\appHelp\help\imagen.jpg"
 * @param String value
 * @return String
 */
    private String replaceSRC(String value)
    {        
        //si existe imagen
        if( value.indexOf("src=") != -1 )
        {            
            //System.out.println("Antes: " + value); 
            Pattern patron = Pattern.compile("src=\"(\\w+).(jpg|png|gif)\"");
            Matcher matcher = patron.matcher(value);
            matcher.find();            
            value = value.replaceAll( matcher.group(1), Matcher.quoteReplacement("file:\\\\\\"+help_path) + matcher.group(1) );
            //System.out.println("Despues: " + value ) ; 
        }
        return value;
    }

Finalmente, debemos llamar a la ayuda desde nuestra aplicación principal, recuerda que creamos un boton, pues solo debemos colocar lo siguiente en el code del jbutton:

Help help = new Help();
help.setVisible(true);

Ya solo nos queda ejecutar nuestro proyecto y probar que tengamos todo correcto 🙂

help me

Proyecto completo en este enlace pobre  – AQUI

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

Material Design: BottomNavigationView

Material Design: BottomNavigationView

BottomNavigationView es una barra de navegación que se sitúa en la parte inferior de la pantalla en los dispositivos móv...

Crear PopupMenu (Ventana Emergente)

Crear PopupMenu (Ventana Emergente)

En este tutorial crearemos una aplicación android que nos permitirá abrir un PopupMenu de donde podremos seleccionar una...

Formulario de autenticación circular

Formulario de autenticación circular

En este tutorial crearemos un formulario de logueo de forma circular usando el lenguaje java y el IDE de Netbeans. Neces...

Envío de correo HTML con php

Envío de correo HTML con php

PHP cuenta con la función mail que nos permite el envío de correo desde nuestro servidor web bool mail ( string $to , st...

JPlay CD – Autoejecutable para java

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...

Proyecto Base de Datos Access y Java

Proyecto Base de Datos Access y Java

La base de datos elegida es Access 2007 (*.accdb), pero claro la migracion hacia otra base de datos como MySQL o Postgre...

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

PHPUnit es un framework que se utiliza para escribir tests en PHP, Netbeans nos permite configurarlo y usarlo fácilmente...

Una Prueba Unitaria, es una forma de comprobar que nuestro código, hace lo que se supone debe hacer; es decir, se asegur...

La prueba del camino básico, es una prueba de “caja blanca” que consiste en verificar el código de nuestros...

Si quieres cambiar el nombre de tus atributos sin tener que reescribir código java por X o Y razón, GSON te permite reno...

Android Bolivia

Bandera en Alto