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.
Necesitamos
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.
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.
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:
Nuestro paquete de ayuda «help«, esta compuesto de los siguientes archivos:
Paso 3. Interfaz Help.java
La interfaz esta compuesta por un jSplitPane, un jEditorPane y un jTree.
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:
>[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»
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 🙂
Proyecto completo en este enlace pobre – AQUI –
Enjoy!!!
Como dice un viejo dicho, «La practica hace al maestro» y en el mundo de la programación no es diferente, por eso siempr[...]
¿Que es la facturación electrónica? Una factura es un documento que sirve para describir el costo de los servicios y des[...]
Cuando se hace uso de programas a veces no importa que este cree más de una instancia al mismo tiempo, por ejemplo podem[...]
Necesitamos: Android Studio 2 tipos de fuente TTF Agregar Archivo de fuente al proyecto Paso 1: Crear carpeta assets Cli[...]
En este post conocernos lo que son las Estructuras de Control IF en los script de Bash. Estas estructuras nos ayudan a c[...]
En este post personalizaremos un componente JComboBox para que sus elementos acepten tablas (JTable) en lugar de texto s[...]
