Am I wry ? No: jquery

Hola:

JQuery es mi framework favorito para el desarrollo de paginas web interactivas, ademas de tener exelentes herramientas en su web, en esta entrada les mostrare como usar JQuery ui el cual pueden personalizar desde este sitio http://jqueryui.com/themeroller/.

Paso 1. Configurar nuestro theme en con las opciones que están en las pestañas y despues dar click en download theme.

Después se mostrara una pagina como la siguiente den click en download , seleccionen todas las opciones.

Descomprimir el zip con nombre jquery-ui-1.8.2.custom, tendrá los siguientes archivos.

Paso 2. Creamos un archivo html llamado prueba.html y otro dentro de la carpeta css que se llame prueba.css

Codigo de prueba.html:

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/le-frog/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
        <link type="text/css" href="css/prueba.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>

</head>
    <body>

<div id="ui_contededor" class="ui-widget">

<div id="ui_1" class="ui_1">
    <h3 class="ui-widget-header ui-corner-all">Widget</h3>
    <div class="ui-widget-content ui-corner-top">
        <a>Prueba</a>
    </div>
</div>

<div id="espacio" class="espacio"></div>

<div id="ui_2" class="ui_2">
    <h3 class="ui-widget-header ui-corner-all">Widget</h3>
    <div class="ui-widget-content ui-corner-top">
    <a>Prueba</a>

</div>

</div>
</div>

</body>
</html>

Codigo de prueba.css

body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}

.espacio{
padding: 4px;
width: 1%;
margin-left: 2px;
float: left;
}

.ui_1{
float: left;
width: 400px;
}

.ui_2{
float: left;
width: 400px;
}

Salida:

En este link ahi mas información sobre css y themes de jquery.

En este ejemplo creamos dos widgets por medio de dos div la manera de como se logra esto es por medio de los css, ejemplo: para poner en encabezado ocupamos lo siguiente
<h3 class="ui-widget-header ui-corner-all">Widget</h3>
y para el contenido:
<div class="ui-widget-content ui-corner-top">
Pero podemos empezar a jugar con los css de jquery algunos son los siguientes:

Widget Containers

.ui-widget: Crea un contenedor de Widgets (Aplica estilos css)

.ui-widget-header: Crea un encabezado de un widget (Aplica estilos css)

.ui-widget-content: Aplica estilos al contenido del widget

Misc Visuals

Corner Radius helpers (Estilos de bordes)

.ui-corner-tl: Applies corner-radius to top left corner of element.
.ui-corner-tr: Applies corner-radius to top right corner of element.
.ui-corner-bl: Applies corner-radius to bottom left corner of element.
.ui-corner-br: Applies corner-radius to bottom right corner of element.
.ui-corner-top: Applies corner-radius to both top corners of element.
.ui-corner-bottom: Applies corner-radius to both bottom corners of element.
.ui-corner-right: Applies corner-radius to both right corners of element.
.ui-corner-left: Applies corner-radius to both left corners of element.
.ui-corner-all: Applies corner-radius to all 4 corners of element.

En nuestro ejemplo el contenido solo tiene borde redondeado en la parte de arriba, pero si queremos que tenga solo del lado derecho, solo es cuestion de ocupar el estilo correspondiente ejemplo:

<div id="ui_1" class="ui_1">
   <h3 class="ui-widget-header ui-corner-right">Widget</h3>
   <div class="ui-widget-content ui-corner-top">
       <a>Prueba</a>
       <a>Prueba</a>
   </div>
</div>

Con el nuevo estilo el encabezado tiene borde redondeado solo a la derecha, es fácil y rápido.

Bueno un amigo me dijo que le ayuda a hacer un grid con jquery me paso el link de donde descargarlo y estaba en php pero yo lo voy a hecer en java con la ayuda de json (deben descargar el jar de json,ok) y la repuesta se hara con un jsp.
de este link lo pueden descargar http://www.trirand.com/blog/?page_id=6

Bueno primero creamos un proyecto web en cualquier IDE yo ocupe Netbeans, para ese ejemplo lo llamaremos Cliente (Es un clásico):

Como un tip cuando vayan a crear un bean con sus getters y setters no es necesario crear cada get y set por cada atributo netbeans milagrosamente nos ayuda (jijiji+++)

solo den click derecho y después insert code y despues crear getter y setter

Bueno esto los ayudara mucho pero de todas maneras pongo el código:

package modelo;

import java.util.Date;

/**
*
* @author isaac
*/
public class Cliente {

private String cve;
private Date date;
private String nombre;
private double cantidad;
private double tax;
private double total;
private String notas;

public double getCantidad() {
return cantidad;
}

public void setCantidad(double cantidad) {
this.cantidad = cantidad;
}

public String getCve() {
return cve;
}

public void setCve(String cve) {
this.cve = cve;
}

public Date getDate() {
return date;
}

public void setDate(Date date) {
this.date = date;
}

public String getNombre() {
return nombre;
}

public void setNombre(String nombre) {
this.nombre = nombre;
}

public String getNotas() {
return notas;
}

public void setNotas(String notas) {
this.notas = notas;
}

public double getTax() {
return tax;
}

public void setTax(double tax) {
this.tax = tax;
}

public double getTotal() {
return total;
}

public void setTotal(double total) {
this.total = total;
}

}

depues para crear el json el codigo es el siguiente: bueno antes la estructura del json que debemos crear es la siguiente:

{"total":"1","page":"1","rows":[{"id":"1","cell":["1","Wed Mar 25 15:16:35 CST 2009","Josue Isaac 0"
,"100.0","10.0","110.0","Salva al mundo usa JAVA 0"]},{"id":"2","cell":["2","Wed Mar 25 15:16:35 CST
2009","Josue Isaac 1","101.0","11.0","112.0","Salva al mundo usa JAVA 1"]},{"id":"3","cell":["3","Wed
Mar 25 15:16:35 CST 2009","Josue Isaac 2","102.0","12.0","114.0","Salva al mundo usa JAVA 2"]}],"records"
:"3"}

Pueden crear esta estructura con su base datos, pero no entrare en detalles:

package json;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import modelo.Cliente;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

/**
*
* @author isaac
*/
public class Json {

public static String construlleJson() throws JSONException{
List listCliente = new ArrayList();
for(int i=0;i < cliente =" new">
cliente.setCve((i+1)+"");
cliente.setDate(new Date());
cliente.setNombre("Josue Isaac "+i);
cliente.setCantidad(100+i);
cliente.setTax(10+i);
cliente.setTotal(cliente.getCantidad()+cliente.getTax());
cliente.setNotas("Salva al mundo usa JAVA "+i);
listCliente.add(cliente);
}

JSONObject jsonObj = new JSONObject();
jsonObj.put("page","1");
jsonObj.put("total","1");
jsonObj.put("records", listCliente.size()+"");

JSONArray array = new JSONArray();
for(Cliente cliente:listCliente){
JSONObject jsonDatos= new JSONObject();
jsonDatos.put("id",cliente.getCve());
JSONArray arrayCell = new JSONArray();
arrayCell.put(cliente.getCve());
arrayCell.put(cliente.getDate());
arrayCell.put(cliente.getNombre());
arrayCell.put(cliente.getCantidad()+"");
arrayCell.put(cliente.getTax()+"");
arrayCell.put(cliente.getTotal()+"");
arrayCell.put(cliente.getNotas()+"");

jsonDatos.put("cell",arrayCell);

array.put(jsonDatos);
}
jsonObj.put("rows",array);

return jsonObj.toString();
}

public static void main(String[] args) throws JSONException {
System.out.println(Json.construlleJson());
}

}

Las lineas en rojo es donde creo una lista de clientes la cual servirá para crear la estructura del json pero ustedes pueden crear un cotenedor que les retorne una lista de Clientes, o con lo quieran llenar su grid, desde su bd. La linea en azul es el objeto principal json y el que retornamos al final, el código de jsp es este:


<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="json.Json"%>
<%@page import="org.json.*"%>
<%
  String stringJson="";
  try {
      stringJson = Json.construlleJson();
  } catch (JSONException ex) {
     out.print("{\"totalCount\":0,\"datos\":[]}");
  }
  out.println(stringJson);
%>

el html o jsp que contrenda el grid de jquery tendra lo siguiente:


<html> <head> <title>jqGrid Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="eder/themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="eder/themes/jqModal.css" />
<script src="eder/jquery.js" type="text/javascript"></script>
<script src="eder/jquery.jqGrid.js" type="text/javascript"></script>
<script src="eder/js/jqModal.js" type="text/javascript"></script>
<script src="eder/js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">


function load()
  {
jQuery("#list2").jqGrid({ url:'json.jsp', datatype: "json", colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:55}, {name:'invdate',index:'invdate', width:90}, {name:'name',index:'name asc, invdate', width:100}, {name:'amount',index:'amount', width:80, align:"right"}, {name:'tax',index:'tax', width:80, align:"right"}, {name:'total',index:'total', width:80,align:"right"}, {name:'note',index:'note', width:150, sortable:false} ], rowNum:10, rowList:[10,20,30], imgpath: 'eder/themes/basic/images', pager: jQuery('#pager2'), sortname: 'id', viewrecords: true, sortorder: "desc", caption:"JSON Example" }).navGrid('#pager2',{edit:false,add:false,del:false});
}



</script>
</head>
<body onload="load()">
<table id="list2" class="scroll"></table>
<div id="pager2" class="scroll" style="text-align:center;"></div>
</body>
</html>

la estructura del proyecto seria la siguiente:

Al final el grid se debe paser a este:

Adios...

Am I wry ? No

jueves, 24 de junio de 2010

JQuery ui

Widget Containers

.ui-widget: Crea un contenedor de Widgets (Aplica estilos css)

.ui-widget-header: Crea un encabezado de un widget (Aplica estilos css)

.ui-widget-content: Aplica estilos al contenido del widget

Misc Visuals

Corner Radius helpers (Estilos de bordes)

En nuestro ejemplo el contenido solo tiene borde redondeado en la parte de arriba, pero si queremos que tenga solo del lado derecho, solo es cuestion de ocupar el estilo correspondiente ejemplo:

<div id="ui_1" class="ui_1">
   <h3 class="ui-widget-header ui-corner-right">Widget</h3>
   <div class="ui-widget-content ui-corner-top">
       <a>Prueba</a>
       <a>Prueba</a>
   </div>
</div>

Con el nuevo estilo el encabezado tiene borde redondeado solo a la derecha, es fácil y rápido.

miércoles, 25 de marzo de 2009

grid en jquery con jsp y json (java)

Páginas

Acerca de mí

jueves, 24 de junio de 2010

JQuery ui

Widget Containers

.ui-widget: Crea un contenedor de Widgets (Aplica estilos css)

.ui-widget-header: Crea un encabezado de un widget (Aplica estilos css)

.ui-widget-content: Aplica estilos al contenido del widget

Misc Visuals

Corner Radius helpers (Estilos de bordes)

En nuestro ejemplo el contenido solo tiene borde redondeado en la parte de arriba, pero si queremos que tenga solo del lado derecho, solo es cuestion de ocupar el estilo correspondiente ejemplo:

<div id="ui_1" class="ui_1"> <h3 class="ui-widget-header ui-corner-right">Widget</h3> <div class="ui-widget-content ui-corner-top"> <a>Prueba</a> <a>Prueba</a> </div> </div>

Con el nuevo estilo el encabezado tiene borde redondeado solo a la derecha, es fácil y rápido.

miércoles, 25 de marzo de 2009

grid en jquery con jsp y json (java)

<div id="ui_1" class="ui_1">
<h3 class="ui-widget-header ui-corner-right">Widget</h3>
<div class="ui-widget-content ui-corner-top">
<a>Prueba</a>
<a>Prueba</a>
</div>
</div>