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

Arrastrar y abrir archivo Excel

Arrastrar y abrir archivo Excel

En este post, crearemos una aplicación java que nos permita arrastrar un archivo excel hacia la aplicación, abrirlo y ca...

JToggleButton y base de datos

JToggleButton y base de datos

En este tutorial veremos una forma de trabajar con el swing  JToggleButton y una base de datos para dar respuesta a una...

Añade un PlaceHolder a un JTextField

Añade un PlaceHolder a un JTextField

PlaceHolder: PlaceHolder es un atributo propio de HTML5 y es el texto que aparece dentro de un campo de texto (un JTextF...

Agregar tablas a los items de un JComboBox

Agregar tablas a los items de un JComboBox

En este post personalizaremos un componente JComboBox para que sus elementos acepten tablas (JTable) en lugar de texto s...

Procedimientos almacenados en java

Procedimientos almacenados en java

En este tuto realizaremos la implementación y ejecución de procedimientos almacenados de MySQL en Java, si quieres darle...

GraphADT: Clases para trabajar con grafos en java

GraphADT: Clases para trabajar con grafos en java

GraphADT es una proyecto alojado en github escrito en java que te permite trabajar con grafos, a la fecha de escribir es...

1 comentario en “Crear ventana de ayuda sin JavaHelp”

  1. Marcelo espinoza dice:

    Excelente tuto, gracias

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

JSON es un formato de texto ligero para el intercambio de datos ampliamente usado en los Servicios Web. En este post uti...

En este post conoceremos algunos de los operadores de comparación que existen en Linux y realizaremos unos ejercicios pa...

En este post conocernos lo que son las Estructuras de Control IF en los script de Bash. Estas estructuras nos ayudan a c...

Todo producto tecnológico tiene un ciclo de vida, algunos bastante corto otros muy largo, podemos mencionar el software...

Android Bolivia

MAUS