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!!!
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! :)
Cuando utilizamos aplicaciones web con conexión a base de datos MYSQL, se suele crear una clase que gestione la interacc...
Lenguaje: C# Nivel: Básico 1) Se desea desarrollar un programa que permita introducir una oración por teclado y contar l...
Cuando desarrollamos aplicaciones en el IDE (Entorno de Desarrollo Integrado) de Android Studio, es importante indicar e...
En esta oportunidad aprovechando el interés que tienen ahora los superheroes de Marvel, crearemos un formulario de logue...
En este post implementaremos el código necesario para multiplicar matrices con el lenguaje Kotlin, pero para realizar es...
OS.js a pesar de lo que sugiere su nombre, no es en si un Sistema Operativo, es más, en su web oficial no se nombra por...
Los comentarios estan cerrados
Si trabajas con redes sociales (RRSS) a continuación te muestro tres herramintas gratuitas que te ayudaran a la hora de...
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...
En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...
Excelente tuto, gracias