Ir al contenido principal

Snippets Mongo DB

 Esta publicación servirá para ir colocando fragmentos de consultas que en algún momento me fueron útiles para usarlo en MongoDB Fragmento 1:  Se requería obtener todos los elementos que dentro de un atributo que es de tipo array(arreglo) coincida  con type:"fire"  Fragmento 2: Se requería actualizar el atributo " lastUpdate "  de toda la colección donde la  edad sea mayor o igual a 15.
Publicar un comentario

Ejemplo Highchart con DWR

Esta vez traigo un ejemplo que puede ser útil en algún momento se trata de un escenario que presenta por una parte utilizar Highchart para gráficas (Front) y por otra parte WDR para trabajar el negocio(Backend), este también servirá para que la interacción entre el Frontend y Backend pueda realizarse de forma asíncrona ayudando a la visualización que la gráfica tenga movimiento.



Creamo nuestro proyecto New-> Dynamic Web Project


Una vez que dimos a todo siguiente obtenemos el proyecto, para iniciar debemos crear los paquetes com.elkardumen.inicia y com.elkardumen.thread tal como se ve en la siguiente imagen
 

El en paquete com.elkardumen,inicia debemos crear la clase Inicia.java y en el paquete com.elkardumen.thread crear la clase HiloLectura.java tal como se ve en

En la clase Inicia.java colocaremos el siguiente código.
package com.elkardumen.inicia;


import javax.servlet.ServletContext;

import org.directwebremoting.ServerContext;
import org.directwebremoting.ServerContextFactory;
import org.directwebremoting.WebContextFactory;


import com.elkardumen.thread.HiloLectura;


public class Inicia 
{
private ServerContext sctx;
    
    private transient boolean active = true;
    
    public Inicia()
    {
        ServletContext servletContext = WebContextFactory.get().getServletContext();
        sctx = ServerContextFactory.get(servletContext);
    }

  
public synchronized void toggle() {
// active = !active;
System.out.println("!!!!!!!!" + active);
if (active) {

try {

HiloLectura hiloInter = new HiloLectura(sctx);
Thread theReader = new Thread(hiloInter);
theReader.start();

System.out.println("!!!!!!!!Generaste Hilo");
active = false;

} catch (Exception e) {
e.printStackTrace();
}

}
}

}
En a clase HiloLectura.java debemos colocar el siguiente codigo.


package com.elkardumen.thread;


import java.util.Collection;

import org.directwebremoting.ServerContext;
import org.directwebremoting.proxy.dwr.Util;

public class HiloLectura implements Runnable{
    
private ServerContext sctx;
 

    
    public HiloLectura (ServerContext sctx){
        this.sctx=sctx;
    }
    
    public  void run(){
        try{
        System.out.println("Incia envio de info...");
    int i=0;
    Collection sessions=null;
    Util pages=null;
    String Json;
    int contador=0;
    while (true) {
       sessions= sctx.getScriptSessionsByPage("/HighChartWithDwr/index.html");
                    pages = new Util(sessions);
                    Json="{\"hora\":\""+System.currentTimeMillis() +"\",\"conteo\":\""+contador+"\"}";  
                System.out.println(Json);
                    pages.addFunctionCall("putDatos",Json);
                contador++;
                Thread.sleep(10000);
    }  
       
        }catch(Exception e){
            e.printStackTrace();
        }
    }
    
  
    
}

Si tenemos problemas con las clases o marca alguna excepción  en el código pegado deberemos colocar la carpeta lib en WEB-INF los .jar siguientes:

Ahora bien el siguiente paso es crear la vista, para esto iniciamos colocando en la carpeta WebContent la carpeta js dentro de esta jquery.js y highstock.js estos js son los framework para crear gráficas y colocaDatos.js es el js donde colocaremos nuestro código.

Código de colocaDatos.js
var TRX;
var chartI;

$(document).ready(function(){
inicializaGraficaGeneric("","");
});


function putDatos(jsonStr){
if(jsonStr!=null &&  jsonStr!=""){

if(typeof jsonStr =='object')
{
 obj=jsonStr;
}else{
//obj = JSON && JSON.parse(jsonStr);
obj=jQuery.parseJSON(jsonStr);
}
}
//console.log(jsonStr);
TRX.series[0].addPoint([Number(obj.hora),Number(obj.conteo)],true,false);
TRX.series[1].addPoint([Number(obj.hora),Number(obj.conteo)],true,false);
//chartI.series[0].addPoint([Number(obj.hora),Number(obj.conteo)],true,false);
}



function inicializaGraficaGeneric(id, data) {
id="TRX";
data="[{ \"name\": \"Incorrectas\", \"type\": \"area\", \"color\": \"#FFff00\",\"tooltip\": { \"valueDecimals\": 0 },  \"fillColor\": {  \"linearGradient\": {  \"x1\": 0, \"y1\": 0, \"x2\": 0, \"y2\": 1 },  \"stops\": [[0, \"rgb(255, 255, 0)\"], [1, \"rgb(85,255,0)\"]] }, \"pointInterval\": 1000, \"pointStart\": 1381254009795, \"showInLegend\": true, \"data\": [ [1381254009795,0],[1381255160172,510]] }," +
  "{ \"name\": \"Correctas\", \"type\": \"area\", \"color\": \"#00FFFF\", \"tooltip\": { \"valueDecimals\": 0}, \"fillColor\": {  \"linearGradient\": {  \"x1\": 0, \"y1\": 0, \"x2\": 0, \"y2\": 1 },  \"stops\": [ [0, \"rgb(6, 255, 255)\"], [1, \"rgb(153,0,255)\"]] }, \"yAxis\": 1, \"pointInterval\": 1000, \"pointStart\": 1381254009795, \"showInLegend\": true, \"data\": [ [1381254009795,0 ],[1381255160172,510]] }]";
str = jQuery.parseJSON(data);
var options ={ 
chart :{
backgroundColor: true,
marginTop: 0,
renderTo: id,
borderRadius: 0,
type: 'area',
zoomType: 'x',
width:560,
height:333
},
rangeSelector: {
buttonTheme: {
align: 'right',
fill: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
fillWidth: 0,
stops: [[0.4, '#373737'],[0.6, '#141414']]
      },
      stroke: false,
      style: {
         color: '#787878',
         fontSize: '10px',
         fontFamily: 'Gill Sans'
      },
      states: {
         hover: {
            fill: {
               linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
               stops: [[0.4, '#888'],[0.6, '#555']]
            },
            stroke: false,
            style: {
                   color: '#787878',
                   fontSize: '10px',
                   fontFamily: 'Gill Sans'
            }
         },
         select: {
            fill: {
               linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
               stops: [[0.1, '#464646'],[0.3, '#1E1E1E']]
            },
            stroke: false,
            style: {
                color: '#787878',
                fontSize: '10px',
     fontFamily: 'Gill Sans'
            }
         }
      }
   },
buttons: [{
count: '30',
type: 'minute',
text: '30m'
}, {
count: '2',
type: 'hour',
text: '2h'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0,
labelStyle: {
fontSize: '6px',
color: '#939393',
fontFamily: 'Lucida Sans Unicode, Lucida Grande'
}
},
scrollbar: {
enabled: false,
trackBackgroundColor: {
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
        stops: [
           [0, '#000'],
           [1, '#333']
        ]
     },
     trackBorderColor: '#666'
},
navigator: {
maskFill: 'rgba(10, 10, 10, 0.7)',
    series: {
type: "area",
        color: "#6E6E6E",
        fillColor:{
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
               [0, '#5F5F5F'],
               [1, '#5F5F5F']
            ]
         },
           lineColor: "#6E6E6E"
       },
     
xAxis: {
tickWidth: 0,
lineWidth: 0,
startOnTick: false,
endOnTick: false,
gridLineWidth: 0,
tickPixelInterval: 100,
labels: {
style: {
    fontSize: '8px',
    color: '#939393',
    fontFamily: 'Lucida Sans Unicode, Lucida Grande'
},
y: 8,
x: -10
}
},
    height: 23,
    margin: 0,
    marker: {
enabled: false
},
shadow: false,
    handles: {
    backgroundColor: 'RGB(130,130,130)'
    }
},
credits:{
enabled:false
   },
   exporting: {
enabled: false
   },
   tooltip: {
valueDecimals : 0,
shared: true,
backgroundColor: 'rgba(10,10,10, 0.6)',
  borderWidth: 1,
  style: {
  color: 'rgb(255,255,255)',
  fontSize: '11px',
  fontFamily: 'Gill Sans'    
 
  },
crosshairs: {
dashStyle: 'dash'
}
},
xAxis: {
     lineColor: '#6e6e6e',
type :'datetime',
tickInterval : 240000 * 60 *1,
dateTimeLabelFormats: {
day:'%H:%M:%S'
},
labels: {
         style: {
          fontSize: '9px',
          color: '#5a5a5a',
          fontFamily: 'Gill Sans'
},
         enabled: true
     }, 
showFirstLabel: true
},
yAxis: [{
labels: {
style: {
fontSize: '11px',
color: '#FFFF00',
fontFamily: 'Gill Sans'
},
enabled: true
},
plotLines: [{
width: 1,
color: '#FFFF00'
}],
height: 129,
top: 10,
min: 0,
offset: 0,
endOnTick: true,
startOnTick: true,
showFirstLabel: true,
gridLineColor: ''
 },{
   height: 129,
top: 142,
offset: 0,
lineWidth: 0,
min: 0,
endOnTick: true,
startOnTick: true,
showFirstLabel: true,
labels: {
style: {
fontSize: '11px',
color: '#05E8FA',
fontFamily: 'Gill Sans'
},
enabled: true
},
gridLineColor: ''
 }],
   legend: {
       enabled: false
   },
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: true
}
}
}
}  
},
   series:str
};
Highcharts.setOptions({
global : {
useUTC : false
}

});

TRX= new Highcharts.StockChart(options);
}

Ahora es necesario agregar nuestro dwr.xml con la siguiente configuración
<?xml version="1.0" encoding="UTF-8"?>

<dwr>
<allow>
<create creator="new" javascript="Inicial" scope="application">
<param name="class" value="com.elkardumen.inicia.Inicia" />
</create>
</allow>

</dwr>

y en web.xml agregar la siguiente configuracion

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>HighChartWithDwr</display-name>
  
  
  
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>activeReverseAjaxEnabled</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>pollAndCometEnabled</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>allowScriptTagRemoting</param-name>
      <param-value>true</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>

  
</web-app>


Y en index.html colocaremos

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Insert title here</title>

  <script type='text/javascript' src='dwr/interface/Inicial.js'> </script>
  <script type='text/javascript' src='dwr/engine.js'> </script>
  <script type='text/javascript' src='dwr/util.js'> </script>
  

 <script type="text/javascript" src="js/jquery.js"></script>  
<script type="text/javascript" src="js/highstock.js"></script>
<script type="text/javascript" src="js/colocaDatos.js"></script>

 <script>
 $(document).ready(function (){

 
 });

  </script>
</head>
<body onload="dwr.engine.setActiveReverseAjax(true);Inicial.toggle();">
<div id="TRX" ></div>

 <div id="container" style="height: 270px;"></div>

</body>
</html>

Una vez hecho todo esto solo queda hacer el Run as.. y en nuestro navegador debermos tener lo siguiente.




Ya saben si no sale pues acá esta el código fuente:
PD: Este ejemplo nu hubiera sido elaborado sin el apoyo de mi buen amigo @mariof4
 
Descarga
Etiquetas:

Comentarios

  1. Unknown12:44 p.m.

    Muy buen ejemplo campeon , buen blog!!

    ResponderBorrar
  2. xola1394:58 p.m.

    Pues que te digo Bro , es el cascaron de tu antiguo trabajo..

    ResponderBorrar
  3. Unknown5:52 p.m.

    xD

    ResponderBorrar
  4. Unknown5:53 p.m.

    Muy bien aqui comenzo todo, esto te llevara a un lado de Patriarca Bro muy bien

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

No se puede llamar Invoke o a BeginInvoke

Que tal banderola pues aca escribiendo sobre un error que me dio al instalar el administrador Microsoft SQL 2008 , pues bien resulta que necesitaba instalar esta tool, y cuando trataba de iniciar el wizard me lanzaba un error que decia algo asi " No se puede llama a Invoke o a BeginInvoke en un control hasta que se halla creado el indentificador de ventana" si no me creen vean la imagen : y entonces me dije a mi mismo, "mi mismo como le voy hacer" entonces pues tube que recurrir a mi salvacion como siemore :D San Google.com, y ya con unas cuantas palabras clave pues que me lanza algunos resultados de los cuales me habia encontrado algo como esto: Problemas al instalar SQL Server 2008 ? Para lo cual no hice caso a este tip pues resulta que yo no tenia instaldo el windows xp, mas bien tenia instalado el windows 7 por que leyendo en los comentarios que se habian hecho llegue a un muy buen tip que decia algo asi: "Para aquellos compañeros que quieren instalar el S...
108 comentarios
Leer más

Restaurar base de datos Microsoft SQL con archivos .mdf y .ldf

Pues bien esto es muy rapido yaque ami no me costo nada pero lo pongo aqui por si e algun momento dado se me llega a olvidar ya saben cuando ando comiendo moscas y no se me ocurre nada, ahora explico, si tenemos acceso a los archivos .mdf y .ldf de nuestra base de datos lo ucio que debemos hacer es copiar estos archivos a y una carpeta llamada Data y que se encuantra en la carpeta de Microsoft SQL Server entonces por ejemplo yo tengo esta ruta donde pegare los archivos .mdf y .ldf mi ruta es: C:\Archivos de programa\Microsoft SQL Server\MSSQL.1\MSSQL\Data Justo aqui pegare mis archivos, ahora cabe mensionar que yo estoy utilziando Microsoft SQL Server Management Studio Express en su version 9.00.2047.00, una vez que halla copiado los archivos me dirijo al Server Management de Microsoft entonces el la base de datos master ejecutare un query oara hablitar mi base datos ... esta es la sentancia exec sp_attach_single_file_db 'Mi_base','C:\Archivos de programa\Microsoft SQL...
10 comentarios
Leer más