Herramientas de usuario

Herramientas del sitio


bloque3:usabilidad

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

bloque3:usabilidad [2020/11/24 09:54] – [Iconos intuitivos] fernandobloque3:usabilidad [2024/09/16 20:55] (actual) – editor externo 127.0.0.1
Línea 88: Línea 88:
  
 ===== Iconos intuitivos ===== ===== Iconos intuitivos =====
-Los botones de la mayoría de aplicaciones, no son botones que contengan texto, sino que contienen iconos. Del mismo modo los elementos de los menús, aunque si que contienen texto, también indican su función mediante un icono. Debemos seleccionar las imágenes que contienen dichos botones de forma que representen las funciones que realizan. + 
-{{ :bloque3:intuitive-icons.jpg?200|}}+Los botones de la mayoría de aplicaciones, no son botones que contengan texto, sino que contienen iconos. Del mismo modo los elementos de los menús, aunque si que contienen texto, también indican su función mediante un icono.  
 + 
 +Debemos seleccionar las imágenes que contienen dichos botones de forma que representen las funciones que realizan. 
 +{{ :bloque3:intuitive-icons.jpg?200 |}}
  
  
Línea 433: Línea 436:
 ==== Clase ResourceBundle ==== ==== Clase ResourceBundle ====
 Es la clase sobre la que basamos la internacionalización. Nos permite cargar propiedades de diferentes ficheros dependiendo de las propiedades del objeto ''Locale'' indicado.  Es la clase sobre la que basamos la internacionalización. Nos permite cargar propiedades de diferentes ficheros dependiendo de las propiedades del objeto ''Locale'' indicado. 
 +
 +Mediante el método estático ''getBundle()'' indicamos las propiedades de localización. Podemos indicarle un objeto ''Locale'' o que se utilice el actual:
 +
 +  * **getBundle**("miResourceBundle", locale) -> Usa el objeto ''Locale'' indicado en el parámetro //locale//
 +  * **getBundle**("miResourceBundle") -> Usa el objeto ''Locale'' actual (el que devuelve Locale.getDefault())
  
 <code java> <code java>
Línea 440: Línea 448:
  
 String texto = bundle.getString("btnNuevoUsuario");   //Obtengo "Nuevo" String texto = bundle.getString("btnNuevoUsuario");   //Obtengo "Nuevo"
- 
  
 //Nos carga el fichero EtiquetasBundle_en.properties (inglés) //Nos carga el fichero EtiquetasBundle_en.properties (inglés)
Línea 447: Línea 454:
 String texto = bundle.getString("btnNuevoUsuario");   //Obtengo "New" String texto = bundle.getString("btnNuevoUsuario");   //Obtengo "New"
  
 +
 +//Si no pasamos un parametro Locale, usa el actual (Locale.getDefault())
 +Locale.setDefault(Locale.UK);
 +ResourceBundle bundle = ResourceBundle.getBundle("EtiquetasBundle");
 </code> </code>
  
Línea 478: Línea 489:
 {{ vimeo>475614087?medium }} {{ vimeo>475614087?medium }}
  
 +==== Opciones de Internacionalización en IntelliJ ====
 +El IDE IntelliJ, permite algunas facilidades a la hora de internacionalizar una aplicación:
 +  * Permite crear ResourceBundle de varios idiomas
 +  * Ofrece añadir claves directamente, tanto desde el editor de código como desde un GUI Form
 +  * Facilita la traducción de los ficheros ''properties'' a varios idiomas con su editor de ResourceBundle
  
 +Para poder añadir claves a nuestro //ResourceBundle// con los literales de String que tengamos en nuestro código fuente, es aconsejable habilitar una opcion de la configuracion: **File -> Settings -> Editor -> Inspections**.
 +Dentro del árbol buscar la sección **Java -> Internationalization Issues -> Marcar el checkbox //Hard coded strings//**
  
 +A partir de ahí puedo añadir literales de strings desde mi código fuente como claves a los ficheros //.properties// de los ResourceBundles.
  
 +En el siguiente video se explican las diferentes funcionalidades de IntelliJ respecto a la internacionalización:
 +
 +{{ vimeo>492804959?medium }}
  
 ===== Pantalla de carga (SplashScreen) ===== ===== Pantalla de carga (SplashScreen) =====
Línea 488: Línea 510:
  
 {{ :bloque3:splashscreen.png?direct&400 |}} {{ :bloque3:splashscreen.png?direct&400 |}}
- 
-Para emplear una //SplashScreen// en nuestra aplicación, no nos queda otro remedio que emplear un hilo de ejecución disferente al principal de nuestra aplicación. De este modo mientras se realizan las operaciones pertinentes, puedo mostrar una ventana con una barra de progreso en otro hilo de ejecución distinto. 
  
 El siguiente código se puede descargar y muestra un ejemplo de una ventana de carga con una imagen y una barra de carga: El siguiente código se puede descargar y muestra un ejemplo de una ventana de carga con una imagen y una barra de carga:
Línea 504: Línea 524:
 import javax.swing.SwingConstants; import javax.swing.SwingConstants;
  
-public class SplashScreen2 extends JDialog implements Runnable{+public class SplashScreen2 extends JDialog{
  
- private static final long serialVersionUID = 1L; +   private JProgressBar barraProgreso;
- private JProgressBar barraProgreso;+
   
- public SplashScreen2() { +   public SplashScreen2() { 
- setBounds(100, 100, 637, 566); +      setBounds(100, 100, 637, 566); 
-  +      JPanel contentPane = new JPanel(); 
- JPanel contentPane = new JPanel(); +      contentPane.setLayout(new BorderLayout()); 
- contentPane.setLayout(new BorderLayout()); +      setContentPane(contentPane); 
- setContentPane(contentPane); +    
-  +      //Creo una etiqueta con la imagen en el centro 
- //Creo una etiqueta con la imagen en el centro +      JLabel lblImagen = new JLabel(); 
- JLabel lblImagen = new JLabel(); +      //Indico la imagen que quiero mostrar en la label 
- //Indico la imagen que quiero mostrar en la label +      lblImagen.setIcon(new ImageIcon(SplashScreen.class.getResource("/gui/splash.jpg"))); 
- lblImagen.setIcon(new ImageIcon(SplashScreen.class.getResource("/gui/splash.jpg"))); +      contentPane.add(lblImagen, BorderLayout.CENTER); 
- contentPane.add(lblImagen, BorderLayout.CENTER); +    
-  +      //Creo un panel al sur con una barra de carga y una label para el autor 
- //Creo un panel al sur con una barra de carga y una label para el autor +      JPanel panelInferior = new JPanel(); 
- JPanel panelInferior = new JPanel(); +      panelInferior.setLayout(new GridLayout(2, 1, 0, 0)); 
- panelInferior.setLayout(new GridLayout(2, 1, 0, 0)); +      barraProgreso = new JProgressBar(); 
- barraProgreso = new JProgressBar(); +      //Muestra el % de carga 
- //Muestra el % de carga +      barraProgreso.setStringPainted(true); 
- barraProgreso.setStringPainted(true); +      panelInferior.add(barraProgreso); 
- panelInferior.add(barraProgreso); +    
-  +      JLabel lblFersoft = new JLabel("FerSoft 2020"); 
- JLabel lblFersoft = new JLabel("FerSoft 2020"); +      lblFersoft.setForeground(Color.BLUE); 
- lblFersoft.setForeground(Color.BLUE); +      lblFersoft.setHorizontalAlignment(SwingConstants.CENTER); 
- lblFersoft.setHorizontalAlignment(SwingConstants.CENTER); +      panelInferior.add(lblFersoft); 
- panelInferior.add(lblFersoft); +    
-  +      //Anado el panel inferior al principal 
- //Anado el panel inferior al principal +      contentPane.add(panelInferior, BorderLayout.SOUTH); 
- contentPane.add(panelInferior, BorderLayout.SOUTH); +    
-  +      setResizable(false); //Impedir redimensionar la ventana 
- setResizable(false); //Impedir redimensionar la ventana +      setUndecorated(true); //Eliminar la barra de título y sus botones 
- setUndecorated(true); //Eliminar la barra de título y sus botones +      setLocationRelativeTo(null); //Mostrar en el centro 
- setLocationRelativeTo(null); //Mostrar en el centro +      setVisible(true); 
- setVisible(true); +    
- } +      try { 
-  +         iniciarBarraCarga(); 
- //Metodo implementado por Runnable +      } catch (InterruptedException e) { 
- @Override +         throw new RuntimeException(e); 
- public void run() { +      } 
-    try { +      //Al terminar la carga cierro la ventana 
-              //Cada 20ms avanzamos la barra de progreso 0-100 +      dispose(); 
-              for(int i = 0; i < 100; i++) { +   } 
-                 Thread.sleep(20); +    
-                 barraProgreso.setValue(i); +   private void iniciarBarraCarga() throws InterruptedException { 
-              +      for(int i = 0; i <100; i++){ 
-           catch (InterruptedException ie) { +         Thread.sleep(20); 
-            ie.printStackTrace(); +         actualizarBarraProgreso(i); 
-           +      
-    //Al terminar la espera cierro el JDialog +   } 
-    dispose(); + 
- }+   private void actualizarBarraProgreso(int valor) { 
 +      SwingUtilities.invokeLater(new Runnable() { 
 +         @Override 
 +         public void run() { 
 +            progressBar1.setValue(valor); 
 +         
 +      }); 
 +   }
 } }
 </file> </file>
Línea 572: Línea 598:
    Vista vista = new Vista();    Vista vista = new Vista();
  
-   //El controlador arranca y realiza las operaciones necesarias+   //El controlador arranca 
    Controlador controlador = new Controlador(vista, modelo);    Controlador controlador = new Controlador(vista, modelo);
  
-   //Creamos el hilo +   SplashScreen splash = new SplashScreen(); 
-   Thread hilo new Thread(new SplashScreen()); +  
-   //Iniciamos el hilo de la splash screen +
-   hilo.start(); +
- +
-   //hacemos que el hilo principal espere a que termine el hilo splashScreen (join()) +
-   try { +
-      hilo.join(); +
-   } catch (InterruptedException e) { +
-      e.printStackTrace(); +
-   } +
- +
    //Cuando ha terminado la ejecucion del SplashScreen    //Cuando ha terminado la ejecucion del SplashScreen
-   // continua la ejecucion del hilo principal+   // se muestra la ventana principal
    vista.setVisible(true);    vista.setVisible(true);
 } }
 </code> </code>
 +Esta //SplashScreen// es simplemente decorativa, pero podría realizar un trabajo en algún otro hilo de la propia clase y que solo se cierre cuando se haya terminado, dando paso a la ventana principal.
 ===== Ayuda y manuales de usuario ===== ===== Ayuda y manuales de usuario =====
 Cuando trabajamos con alguna aplicación de software hay una parte común en todas ellas y es la sección de ayuda. Esta sección nos ofrece la documentación de usuario del software, y la forma de mostrarla y acceder a ella puede ser más o menos interactiva. En nuestro caso debemos crear una sección que permita al menos visualizar los manuales de usuario de nuestro software. Cuando trabajamos con alguna aplicación de software hay una parte común en todas ellas y es la sección de ayuda. Esta sección nos ofrece la documentación de usuario del software, y la forma de mostrarla y acceder a ella puede ser más o menos interactiva. En nuestro caso debemos crear una sección que permita al menos visualizar los manuales de usuario de nuestro software.
bloque3/usabilidad.1606211678.txt.gz · Última modificación: 2024/09/16 20:55 (editor externo)