NetBeans y Pruebas Centradas en el Usuario

jueves, 20 de octubre de 2016

006 Crear interfaz para web

Ing. Honoria Reyes Macedo

INTRODUCCION: En esta práctica se usara html5 para crear un prototipo de interfaz para web. html(HyperText Markup Language) utiliza una serie de etiquetas que el navegador interpreta, se usan para manipular paginas, texto, imágenes, videos, juegos, entre otros.

Esta interfaz se podra utilizar posteriormente en forma dinamica( se podra usar para jsp, php, asp, .net…).

Este es un ejemplo de un archivo en html5 creado en un block de notas ó en dreamweaver:

El archivo se llama: inicio.html y contiene lo siguiente

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>TITULO DEL DOCUMENTO</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<header>
<h1>ENCABEZADO PRINCIPAL</h1>
<nav>
MENUS
</nav>
</header>
<section> <p>CONTENIDO</p>
<header>
ENCABEZADO SECUNDARIO
</header>
<article> PARTE DEL CONTENIDO
</article>

</section>
<section>
</section>
<footer>
<p>
COMENTARIOS, DERECHOS RESERVADOS
</p>
</footer>
</body>
</html>

ACTIVIDADES

1.- Paso 1. Crear Un prototipo de interfaz. Crear un archivo inicio.html en una carpeta paginaWeb

* El tema a escoger se define en clase

1.1 Utilizar las siguientes etiquetas para definir las secciones o cajas:

section, aside, article, figcation, figure, footer, header, hgroup, nav.

1.2 Agregar etiquetas como h1, h2, h4, a, div, li, etc. de acuerdo a las

necesidades de el prototipo

Ejemplo: El siguiente prototipo de interfaz describe las secciones en las que se divide

Nota: En la interfaz se describe a donde pertenece cada seccion, por lo que tus secciones las puedes identificar con id(#)

OPTION 1 EN "header nav li a" => Indica que ese texto esta dentro de una etiqueta a que a su vez esta dentro de una lista li y a su vez dentro de nav que a su vez esta dentro de header

2.- Paso 2. Crear un archivo estilos.css (cascading style sheets) en una carpeta llamada css dentro de la carpeta paginaWeb, para separar la presentacion de la estructura html

Nota: En archivo inicio.html dentro de <head> hacer referencia al archivo en cascada con:

<link rel="stylesheet" href="css/estilos.css" />

2.1 El primer contenido de estilos.css debera indicar los valores iniciales:

@charset "UTF-8";

border:0;

margin:0; /*Distancia alrededor del elemento*/

margin-bottom:0;

padding:0; /*Distancia entre el borde y su contenido*/

}

/*Etiquetas semanticas*/

article,figcation,figure,footer,header,hgroup,nav,section

{

display:block;

}

2.2 El siguiente contenido es para dar un orden y un fondo a cada seccion:

- Indicar cuales estaran alineadas en forma horizontal. Estas secciones deberan pertenecer a una misma caja o seccion.

Nota: Se pueden indicar las caracteristicas de varias secciones al mismo tiempo, como por ejemplo section, aside, footer

section, aside, footer {

background:#D2CDD0 url(../img/fondo-interno.jpg);

display:inline-block; /*Los pone al mismo nivel en forma horizontal*/

}

Para indicar que las secciones se alinean en una misma linea de acuerdo a su longitud indicada en width:45%; se usa:

display:inline-block;

Para indicar que fondo se utiliza, se puede indicar el color o la imagen a utilizar:

background:#D2CDD0 url(../img/fondo-interno.jpg);

background-color:#FFF;

2.3 Usar el siguiente contenido. Es para dar bordes, color, margenes, etc. a las etiquetas(directivas) y secciones:

Para el ancho utilizar porcentajes

width:45%;

Para el ancho maximo

max-width:100%;

Para el margen interno

padding:0.25em;

Para el margen externo

margin:0.25em;

Para el margen inferior

margin-bottom:.25em auto;

Para alinear en la parte de arriba(Es utilizado para las secciones que estan en un display:inline-block)

vertical-align:top;

Para alinear en la parte izquierda

text-align:left;

Para posicionar en forma flotante

float: left;/*Se desplaza todo lo posible a la izquierda, y los demas elementos se adaptan en los espacios libres*/

Nota: Usando display:inline-block; Ya no sera necesario utilizar float.

Para poner sombra al texto de los titulos. Ejemplos en un h1 y h2

h1{

text-shadow: 1px 2px #999;

}

h1{

text-shadow: 3px 3px 2px #696; /*Sombra desenfocada*/

}

h2{

-ms-text-shadow:5px 5px 10px rgba(106,163,253,1); /* x, y, blur, */ /*Para Internet Explorer*/

-moz-text-shadow:5px 5px 10px rgba(106,163,253,1); /*Para FireFox*/

-o-text-shadow:5px 5px 10px rgba(106,163,253,1); /*Para Opera*/

-webkit-text-shadow:5px 5px 10px rgba(106,163,253,1); /*Para Chrome, Zafari*/

text-shadow:5px 5px 10px rgba(106,163,253,1);

}

La directiva <a> la utilizamos para crear vinculos (hipervinculos) y tambien le damos un formato

a{
background:#212121 url(../img/probando.jpg);
border:0.1em #CFECF0 solid;
border-radius:0.25em;
box-shadow: .25em .25em .25em #009;

}

Para quitar subrayado de la directiva <a>

text-decoration:none;

Para quitar viñetas en las listas

list-style:none; /*quita viñetas*/

Para poner viñetas

list-style-type:circle;

list-style-type:square;

list-style-type:disc;

Para poner bordes

border:0.1em #009 solid ;

border-radius:0.25em; /*Todas las esquina redondeada*/

border-radius:0 0.5em 0 0.5em; /*2 esquinas opuestas redondeadas*/

Para dar efectos de transicion, como ejemplo para la etiqueta a (Se recomienda hacer cambio de color antes de poner la transición)

Ejemplo:

nav a{

background-color:#FFF;

display:block; /*Formar una caja con a*/

transition:all 0.5s ease-in;

-ms-transition:all 0.5s ease-in; /*Opcional, para la transicion del boton*/

-moz-transition:all 0.5s ease-in;

-o-transition:all 0.5s ease-in;

-webkit-transition:all 0.5s ease-in;

transition:all 0.5s ease-in;

}

y cuando se coloca el puntero sobre a -- > a:hover

Ejemplo:

nav a:hover{

background:#212121;

-ms-transition:all 0.5s ease-out; /*Opcional, para la transicion del boton*/

-moz-transition:all 0.5s ease-out;

-o-transition:all 0.5s ease-out;

-webkit-transition:all 0.5s ease-out;

transition:all 0.5s ease-out;

}

Para dar estilo a letras

font-size:1.2em;

font-weight:bold;

font-family:Arial, Helvetica, sans-serif;

text-align:justify;

text-align:right;

2.4 En su contenido se pueden utilizar tipos de letras personalizadas

@font-face {

font-family: "fontexo";

src: url("../fonts/exo-bold-webfont.eot");

src: url("../fonts/exo-bold-webfont.eot?#iefix") format("embedded-opentype"),

url("../fonts/exo-bold-webfont.woff") format("woff"),

url("../fonts/exo-bold-webfont.ttf") format("truetype"),

url("../fonts/exo-bold-webfont.svg#Chalet") format("svg");

font-weight: normal;

font-style: normal;

}

Para agregarlo a la etiqueta

font-family:"fontexo", Helvetica, Verdana;

Deberan existir en la carpeta fonts:
( usar una carpeta fonts para almacenar el tipo de letra que se bajo de http://www.fontsquirrel.com/)

3.- Paso 3. Agregar flexslider para el desplazamiento de las imágenes :

3.1 Bajar los archivos (desde http://www.woothemes.com/flexslider/ )
En la carpeta css copiar el archivo

3.2 En Inicio.html dentro de <head> escribir la siguiente linea

<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

3.3 En la carpeta fonts/flexslider copiar los arhivos

3.4 Para desplazar nos auxiliamos de los archivos correspondientes:

a) Crear una carpeta js dentro de la carpeta paginaWeb y pegar los siguientes archivos

b). Escoger imágenes que hagan referencia al tema de tu pagina

4.1 Crear la carpeta img dentro de la carpeta paginaWeb y colocar las imágenes a utilizar

4.2 Indicar en que lugar se visualizan las imagnes en el archivo inicio.html

<img class="fade" alt="Lugar de Analisis y Sistemas" src="img/logo_principal.png" />

c) En el archivo inicio.html antes de cerrar <body> escribir las siguientes lineas

d) Las imágenes se deberan acomodar dentro de div li img, lo puedes integrar
dentro de un article (Cada <img> estara dentro de un <li>)

Nota: la etiqueta <div> debera contener el id="flexslider" y la <ul> contendra el id= "slides

<div class="flexslider">

<ul class="slides">

<li>

<img src="img/slide-0.jpg" />

<p class="flex-caption"> Capacitación de empleados </p>

</li>

</ul>

</div>

4.- Paso 5 Agregar widgets sociales. Se recomienda poner una etiqueta y su logo correspondiente

<p>Conoce nuestro face
      <a class="fade" href="http://facebook.com" title="Facebook" target="_blank">
                  <img src="img/logo-face.png" />
      </a>
</p>

El control <a> nos permite crear vínculos hacia otras páginas (hipervinculos)

5.- Agregar un icono, para mostrar en la pestaña del navegador:
     En este caso se escogio una pequeña imagen"pestana2.ico"
   Copiar la siguiente linea en la etiqueta <head>
    <link rel="shortcut icon" type="image/x-icon" href="img/pestana2.ico" />

RECURSOS EN INTERNET>
Tipos de letras:
http://www.fontsquirrel.com/

Desplazamiento de contenido:
http://www.woothemes.com/flexslider/

colores:
http://html-color-codes.info/codigos-de-colores-hexadecimales/
http://meyerweb.com/eric/css/colors/

---------------------------------------------------000-------000-----------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------

lunes, 3 de octubre de 2016

005 Llenado de Tables con Base de Datos

Ing. Honoria Reyes Macedo

INTRODUCCION: En esta práctica se usa el manejo de OBJETOS para llenar un ArrayList que utilizara el jTable.

La realación que existe entre la tabla materia y califica es de uno a varios. Ya que por cada materia existiran varias calificaciones. Para resolver esta situación se crea la clase MateriaVo con un ArrayList que se llena con cada objeto de la table CalificaVo.(Ver anexo II)

Para llevar a cabo esta practica

a) Es necesario tener las dos clases creadas en la practica anterior 004 :

MateriaVo.java y CalificaVo.java

ACCIONES DEL PROGRAMA

ACTIVIDADES:
1.- CREAR UNA INTERFAZ

Crear un JFrame Form “ConsultaCalificaFrm.java” con los componentes:
Las librerias:

import images.ImagenPanel;
import javax.swing.ImageIcon;
import java.awt.event.*;
import java.awt.*;

import javax.swing.*;
import java.util.ArrayList;

los controles:

jBtnSalir

jTblMate_Calif (Nombre de un JTable)

Nota: Observar que el constructor de MateriaDAO y CalificaDAO obtiene la conexión a la

base de datos al ejecutar el método getConexion()

Ejemplo

public class CalificaDAO
JDBConexion ObjConecta = new JDBConexion();

Connection miConexion=null; // Canal de conexion

ResultSet miTabla=null; //Guarda informaci�n de las columnas(campos)

Statement miInstruccion=null; //Ejecuta sentencias SQL sin par�metros

PreparedStatement miInstruccionPrep=null; /

int miResultado;

public CalificaDAO() {

try{

miConexion=ObjConecta.getConexion();

}catch(Exception ex){

                                       JOptionPane.showMessageDialog(null,"No se conecto a la Base de Datos: "
                                         + ex.getMessage(),"ERROR DE CONEXION",
                                          JOptionPane.ERROR_MESSAGE);

}

2) Agregar una variable arreglo en la clase MateriaVo.java
private ArrayList<CalificaVo> calificaciones = new ArrayList<CalificaVo>();

Agregar su GET y su SET

public void setCalificaciones(CalificaVo cal){ this.calificaciones.add(cal); }

public ArrayList<CalificaVo> getCalificaciones(){ return calificaciones; }

3) Llenar la tabla que muestra las calificaciones:

- Hacer una consulta con las dos tablas: Materia y califica y guardar los resultados en un arrayList para llenar la tabla

Cada fila del ArrayList sera un objeto de materia(Recuerda que por cada materia hay tres calificaciones)

SOLUCION: En la clase  ConsultaCalificaFrm.java
   a) Declarar un modelo para la tabla
                        DefaultTableModel dtm = new DefaultTableModel();
CalificaDAO ObjMat= new CalificaDAO();
   b) En la propiedad model de la tabla "jTblMate_Calif", agregar: dtm (Para NetBenas)

      El programa automaticamente asignara:
jTblMate_Calif.setModel(dtm); (Agregar manualmente si no es en NetBeans)

3.1) El Llenado de un ArrayList en la clase CalificaDAO.java:

Agregar la librería ArrayList

Nota: Se muestran dos posibles soluciones para el llenado del ArrayList

SOLUCION1:

public ArrayList<MateriaVo> ConsultaMateCalif(){

int mateUno;

ResultSet miTabla2=null;

MateriaVo mate;

CalificaVo cali;

ArrayList<MateriaVo> ArrayMate = new ArrayList<MateriaVo>();

try{

String BuscaMate ="select ca.cvepersona, ma.clavemate, ma.nombremateria,ca.clavecalifica, "

+ " ca.descripcion,ca.calificacion,ca.fechacalif, ca.status from materia ma,"

+ " califica ca where ca.clavemate=ma.clavemate and ca.status=1 "

+ " order by ca.cvepersona, ma.clavemate";

miInstruccionPrep=miConexion.prepareStatement(BuscaMate);

miTabla=miInstruccionPrep.executeQuery();

mateUno=0;

mate=new MateriaVo();

while(miTabla.next()){

if (mateUno!=0 && (mateUno!=miTabla.getInt(2))){

ArrayMate.add(mate);

mate=new MateriaVo();

}

if (mateUno!=miTabla.getInt(2)){

mate.setClavemate(miTabla.getInt(2));

mate.setNombremateria(miTabla.getString(3));

}

cali=new CalificaVo();

cali.setCvePersona(miTabla.getInt(1));

cali.setClaveCalifica(miTabla.getInt(4));

cali.setDescripcion(miTabla.getString(5));

cali.setCalificacion(miTabla.getDouble(6));

cali.setFecha_Calif(miTabla.getString(7));

cali.setStatus(miTabla.getInt(8));

mate.setCalificaciones(cali);

mateUno= miTabla.getInt(2);

}

ArrayMate.add(mate);

}catch(Exception ex){

JOptionPane.showMessageDialog(null,"ERROR: " + ex.getMessage(),"ERROR DE BUSQUEDA",JOptionPane.ERROR_MESSAGE);

}

return ArrayMate;

}

***************** **********************

SOLUCION2:

public ArrayList<MateriaVo> ConsMateCalif(){

ResultSet miTabla2=null;

MateriaVo mate;

CalificaVo cali;

ArrayList<MateriaVo> ArrayMate = new ArrayList<MateriaVo>();

try{

String BuscaMate ="select distinct(clavemate),nombremateria, status from materia";

miInstruccionPrep=miConexion.prepareStatement(BuscaMate);

miTabla=miInstruccionPrep.executeQuery();

while(miTabla.next()){

mate=new MateriaVo();

mate.setClaveMate(miTabla.getInt(1));

mate.setNombreMateria(miTabla.getString(2));

mate.setStatus(Boolean.parseBoolean(String.valueOf(miTabla.getInt(3))));

String BuscaCali= "select clavecalifica, descripcion, calificacion, fecha_calif,status from califica where clavemate=" + mate.getClaveMate();

miInstruccionPrep=miConexion.prepareStatement(BuscaCali);

miTabla2=miInstruccionPrep.executeQuery();

while(miTabla2.next()){

cali=new CalificaVo();

cali.setClaveCalifica(miTabla2.getInt(1));

cali.setDescripcion(miTabla2.getString(2));

cali.setCalificacion(miTabla2.getDouble(3));

cali.setFecha_Calif(miTabla2.getString(4));

cali.setStatus(miTabla2.getInt(5));

mate.setCalificaciones(cali);

}

ArrayMate.add(mate);

}

}catch(SQLException ex){

JOptionPane.showMessageDialog(null,"ERROR: " + ex.getMessage(),"ERROR DE BUSQUEDA2",JOptionPane.ERROR_MESSAGE);

}

return ArrayMate;

}

**************** ************

3.2) En la clase de la interfaz “ConsultaCalificaFrm.java” crear un metodo para llenar el jTable. Utilizar el ArrayList creado en el paso 1: (Se utiliza tambien el metodo TitulosModelo() para poner encabezados )

public void TitulosModelo(){
//Agregar Titulos
dtm.addColumn("CvePersona");
dtm.addColumn("CveMateria");
dtm.addColumn("Materia");
dtm.addColumn("CveCalifica");
dtm.addColumn("Descripción");
dtm.addColumn("Calificación");
dtm.addColumn("Fecha");
}

public void llenaCalificaciones(){
int CalificaTamanio;
Object[] arrayCal = new Object[7];
ArrayList<MateriaVo> ListMateria= ObjMat.ConsultaMateCalif();

TitulosModelo();
CalificaTamanio=ListMateria.size();
int x=0;
//Recorre primero las materias
for(MateriaVo Obj:ListMateria){
ArrayList<CalificaVo> misCalif= Obj.getCalificaciones();
for(CalificaVo Ob:misCalif){
x=0;
arrayCal[x]=Ob.getCvePersona();
x+=1;
arrayCal[x]=Obj.getClavemate();
x+=1;
arrayCal[x]=Obj.getNombremateria();
x+=1;
arrayCal[x]=Ob.getClaveCalifica();
x+=1;
arrayCal[x]=Ob.getDescripcion();
x+=1;
arrayCal[x]=Ob.getCalificacion();
x+=1;
arrayCal[x]=Ob.getFecha_Calif();
dtm.addRow(arrayCal);
}
}
}

3)      Ejecutar el metodo llenaCalificaciones() desde el constructor de la clase ConsultaCalificaFrm.java

Compilar y Ejecutar

4)      Agregar un evento "MouseClicked" a la Tabla jTblMate_Calif de la clase ConsultaCalificaFrm.java
4.1 Agregar una etiqueta al formulario
private javax.swing.JLabel jlSeleccion;
jlSeleccion = new javax.swing.JLabel();
jlSeleccion.setText("INFORMACION");
jp.add(jlSeleccion);
jlSeleccion.setBounds(60, 20, 680, 30);

4.2 Crear la clase anonima de jTblMate_Calif  dentro del metodo initComponents()

jTblMate_Calif.addMouseListener(new java.awt.event.MouseAdapter() {
public void mouseClicked(java.awt.event.MouseEvent evt) {
jTblMate_CalifMouseClicked(evt);
}
});
4.3 Agregar el metodo que se ejecuta desde la clase anonima

private void jTblMate_CalifMouseClicked(java.awt.event.MouseEvent evt) {
DefaultTableModel modelotabla=(DefaultTableModel) jTblMate_Calif.getModel();
int filaselec= this.jTblMate_Calif.getSelectedRow();
String Datos=(String)(modelotabla.getValueAt(filaselec, 0)+ " "+ modelotabla.getValueAt(filaselec, 1)+" "+ modelotabla.getValueAt(filaselec, 4));
jlSeleccion.setText(Datos);
}

Compilar y Ejecutar

**********************************************************************
**************************** ANEXO I********************************
CONECTAR MOTORES DE BASES DE DATOS AL PROYECTO

Para conectarse a MySql, SQLServer u Oracle :

I) CONECTAR A Mysql

1.1 Bajar y el driver mysql-connector-java-5.3.38-bin.jar y configurarlo en NetBeans

Crear la carpeta lib dentro del proyecto y pegar el archivo

1.2 Agregar el archivo a las librerías del proyecto desde Project Settings

- Presionar New + Add Archive + <Enter>

- Seleccionar el archivo que se guardo en la carpeta lib + <Open>

- Ponerle un nombre: MySql Connector + <OK>

- Escoger el driver + <OK>

         Agregar la ruta del Driver en el ClassPath de windows


        1.3 En el archivo de Conexion.java verificar

import javax.swing.*;
import java.sql.*;

public class Conexion {
    private Connection con = null;
    public Connection getConexion() throws SQLException{
//                **********Conexion a MySQL    **************
String driver = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://localhost/calificaciones";
String user = "root";
String password="Mysql";

try{
    Class.forName(driver);
    con = DriverManager.getConnection(url,user,password);
}catch(ClassNotFoundException ex){
    JOptionPane.showMessageDialog(null,"No se encontro el driver jdbc instalado en el sistema!\n\n"+ex.getMessage(),"Error de conexion",JOptionPane.ERROR_MESSAGE);    }
    return con;
}
}

II) CONECTAR A SqlServer

2.1.- Bajar el driver sqljdbc.jar y configurarlo en NetBeans

- En las librerias del proyecto en NetBeans: Libraries + Add JAR/Folder

- En databases + Driver + new Driver + Add + Buscar el driver

Para probar : usar la coneccion en el mismo driver

· El host lo encuentras desde la ventana command con hostname

· Puerto por defecto es: 1433;

    2.2.- En la clase Conexion.java cambiar los siguientes valores de acuerdo a la base de datos

import javax.swing.*;
import java.sql.*;

public class Conexion {
    private Connection con = null;
    public Connection getConexion() throws SQLException{

// **********Conexion a SqlServer **************

String driver = "com.microsoft.sqlserver.jdbc.SQLServerDriver";

String url= "jdbc:sqlserver://DESKTOP-CHPM3KJ\\SQLEXPRESS:1433 /materiauvm";

String user = "sa";

       String password=" ";

try{
    Class.forName(driver);
    con = DriverManager.getConnection(url,user,password);
}catch(ClassNotFoundException ex){
    JOptionPane.showMessageDialog(null,"No se encontro el driver jdbc instalado en el sistema!\n\n"+ex.getMessage(),"Error de conexion",JOptionPane.ERROR_MESSAGE);    }
    return con;
}
}

2.3.- En caso de no conectarse: Verificar que en SQL Server tenga:

propiedades + conexiones + permitir conexiones remotas.

y en seguridad + Modo de Autenticación de windows y SQL Server

y reiniciar el servicio con mouse derecho

Verificar que en Seguridad + usuario: activar conceder y habilitado

en conexión a BD e inicio de sesion respectivamente

III) CONECTAR A Oracle

3.1.- Cargar la libreria de Oracle:
ojdbc

3.2.- En la clase Conexion.java cambiar los siguientes valores de acuerdo a la base de datos

import javax.swing.*;
import java.sql.*;

public class Conexion {
    private Connection con = null;
    public Connection getConexion() throws SQLException{
//                **********Conexion a Oracle **************
String driver = "oracle.jdbc.driver.OracleDriver";
String url = "jdbc:oracle:thin:@192.168.7.127:1521:oracledb";    //oracledb es mi base de datos
String user = "progvisual";
String password="TICuarto";
try{
    Class.forName(driver);
    con = DriverManager.getConnection(url,user,password);
}catch(ClassNotFoundException ex){
    JOptionPane.showMessageDialog(null,"No se encontro el driver jdbc instalado en el sistema!\n\n"+ex.getMessage(),"Error de conexion",JOptionPane.ERROR_MESSAGE);    }
    return con;
}
}

**********************************************************************
**************************** ANEXO II *******************************
CLASES DE LAS ENTIDADES Vo(Value Object)

**********************************************************************
******************* ANEXO III ****************************************

----------------------------000------000-------------------------------------------------------
--------------------------------------------------------------------------------------------------