martes, 12 de febrero de 2013

Select Distinct in XSL, using xsl:key

Para esta entrada les comparto una forma de obtener una lista de nodos (distintos) a partir de una variable usando XPATH sobre XSLT.

Podríamos comparar esta sentencia como un "Select Distinct", ese que usamos en sql para obtener registros distintos de acuerdo a los criterios de búsqueda. Bueno entonces este es el proceso:

Primero, usé un ejemplo que hallé en Internet, en esta url.

Segundo, esta paginita en la que podemos hacer las pruebas de transformación online 

Por último, la mágia:

tenemos entonces un xml como este:
<?xml version="1.0" encoding="UTF-8"?>
<DropDownItems>
        <DropDownItem>
                <direction>E</direction>
                <street>10TH</street>
                <price>
                   <tax>10p</tax>
                </price>
                <streetType>AVE</streetType>
        </DropDownItem>
        <DropDownItem>
                <direction>E</direction>
                <street>11TH</street>
                <price>
                   <tax>10p</tax>
                </price>
                <streetType>DR</streetType>
        </DropDownItem>
       <DropDownItem>
                <direction>E</direction>
                <street>10TH</street>
                <price>
                   <tax>10p</tax>
                </price>
                <streetType>AAR</streetType>
        </DropDownItem>

</DropDownItems>

Ahora queremos obtener simplemente los nodos cuyo valor "X" sea distinto.
<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:key name="by-street" match="DropDownItem" use="street"/>
  <xsl:template match="DropDownItems">
    <xsl:copy>
      <xsl:copy-of select="DropDownItem[generate-id() = generate-id(key('by-street', street)[1])]"/>
    </xsl:copy>
  </xsl:template>
</xsl:stylesheet>
Entonces usamos el código de la página donde obtuve el ejemplo. Pero realmente no se trata de mostrar lo mismo, primero una breve explicación, y un ejemplo el cual me llevó a publicar mi propio ejemplo.

vemos un xsl:key, el cual nos va a permitir indexar los nodos de acuerdo al valor de (un atributo || nodo), para lo cual hay que tener en cuenta lo siguiente:
1. xsl:key, se usa a nivel global, es decir, que no se puede crear dentro de un template
2. name, lo usamos para referenciar nuestra key
3. match, es la ruta relativa del nodo que contiene nuestro valor para la key
4 use, es el nodo dentro del match, o atributo del match que usaremos como filtro, entonces si es un nodo, simplemente le colocamos el nombre, y de ser un atributo le adicionamos como prefijo un "@" ej: 

<xsl:key name="by-attr" match="DropDownItem" use="@street"/>
select="DropDownItem[generate-id() = generate-id(key('by-attr', @street)
Ahora, supongamos que nuestro atributo o nodo para filtro no es hijo del nodo que necesitamos obtener, entonces hay que modificar un poco nuestro XPATH, para obtener el resultado:

primero la key:  

<xsl:key name="by-street" match="DropDownItem/price" use="tax"/>

ahora el select:

select="DropDownItem[price[generate-id() = generate-id(key('by-street', tax)[1])]]">

Se puede ver que ahora, que nuestro filtro será el nodo TAX, para lo que debemos definir nuestra key apuntando a esa ruta, y luego ajustamos nuestro select, para que el XPATH entienda que nuestro nodo de resultado debe ser un DropDownItem, y la búsqueda de la key es en uno de sus hijos llamado price.

Espero les sirva este aporte.



martes, 8 de enero de 2013

Formato de fechas en JavaScript

Generalmente cuando usamos fechas deseamos darle el formato necesario, ya sea por el tipo de cultura en el que trabajamos o sencillamente porque el formato es indispensable para los procesos que se realizan con las fechas. Para cualquier necesidad aparecen muchas opciones poco "Elegantes", por lo que les comparto la mejor que encontré, y que además permite muchas opciones para formatear fechas. 


En este link encontramos una serie de conversiones que especifican un comportamiento sobre las fechas, como por ejemplo:


%d    representa el día del mes (01-31)
%m   representa el mes del año (01-12)
%y    representa el año (00-99)

y lo usamos de la siguiente manera:
 
var fecha = new Date("18/01/2013");
fecha.toLocaleFormat("%d") ;  retorna  "18";

fecha.toLocaleFormat("%m") ;  retorna  "01";
 
fecha.toLocaleFormat("%y") ;  retorna  "13";

para un formato de fecha "dd/MM/yy"
fecha.toLocaleFormat("%d/%m/%y") ;  retorna  "18/01/2013";


jueves, 19 de julio de 2012

Uso de Gráficas en la web

En el desarrollo web, es indispensable el uso de gráficas adecuadas para presentar a los usuarios información relevante, resumida y de gran valor, es por esto que acudimos a muchas opciones que presenta el mercado, y comenzamos a divagar tratando de conocer cual es la más fácil de usar y la más adecuada para nuestras aplicaciones.

He tenido la oportunidad de trabajar con las charts de .net en framework 3.5 y 4, algunas librerias bastante complicadas, y después de probar algunos sin sabores y amplias limitaciones, me presentaron highchart y kendo dos tecnologías basadas en javascript y que definitivamente me han dado excelentes resultados y son gratuitas sin soporte. Los pre-requisitos para sacar mayor provecho a estas tecnologías son POO en JavaScript cuyo concepto difiere un poco al que estamos acostumbrados, conceptos básicos de la estructura de las gráficas. 

Estos son algunas de las cosas que he logrado realizar usando dichas tecnologías (no puedo compartirles el código por cuestiones de contrato), para que se hagan una idea de lo que se puede lograr:
  • Construcción de gráficas dinámicamente o a petición
  • Uso de las dos tecnologías (highchart y kendo) usando un script trabajando como factory
  • Consumo de datos a través de servicios web
  • Actualización de gráficas si recargar la página
Las ventajas son muchas sobre todo en performance de la página y la experiencia de los usuarios. Espero la estudien y les sirva.


highchart  http://www.highcharts.com/demo/dynamic-update
Kendo      http://demos.kendoui.com/dataviz/overview/index.html

jueves, 12 de julio de 2012

Patrones de Diseño JavaScript

Incursionando en este mundo del JavaScript avanzado, quise dejarle a mi actual empresa un semi proyecto en JS orientado a la fábrica de objetos tipo gráfica, con el cual se facilite el trabajo de los demás equipos de desarrollo, además implementando patrones de diseño para darle un toque distintivo para mejoras en el futuro y dejar alguna huella; entonces me encuentro con este pequeño libro donde podemos aprender el uso de este patrón, además de un video explicativo del tema, el cual espero les sirva para mejorar sus práticas de desarrollo.


libro      http://addyosmani.com/resources/essentialjsdesignpatterns/book/
video    http://vimeo.com/44094122

miércoles, 13 de junio de 2012

Failed to load viewstate


Failed to load viewstate.  The control tree into which viewstate is being loaded must match the control tree that was used to save viewstate during the previous request.  For example, when adding controls dynamically, the controls added during a post-back must match the type and position of the controls added during the initial request.


Tuve un encuentro con este caso particular que a simple vista puede generar terror e inconformidad. Mi escenario fue el siguiente: un pagina con un formview y un gridview, cuyo desarrollo me cedieron para realizar algunas modificaciones. En la lógica el formview nunca se muestra en modo itemtemplate, por lo cual sólo realizé los cambios necesarios para el inserttemplate y el edittemplate, esto ocasionaba que por defecto, una vez que se realizaba una actualización, este intentara mostrar en modo readonly, lo cual generaba el error referenciado, entonces hay dos opciones para resolver el problema.

  1. Crear adecuadamente el itemtempleta para que carge los datos correctamente (si es necesario)
  2. Como en mi caso no se usa este template, simplemente cambié el defaultmode a Edit
Soluciones practicas a problemas simples.

martes, 27 de marzo de 2012

Call server methodo from client javascript

Aveces nos veremos obligados a llamar un método que tenemos del lado del servidor, o simplemente no queremos complicarnos en buscar la manera desde el cliente de obtener los datos necesarios para ejecutar el método deseado, para eso tenemos la siguiente de muchas opciones:


Por mensionarlo, tenemos estas opciones:
__doPostBack ==> detallado más adelante
RadAjaxManager ==> nos permite ejecutar el método definido en su "OnAjaxRequest"
ScriptManager  ==> acá una explicación


Explico el "__doPostBack" por su facilidad y efectividad, porque he visto las otras opciones fallar en algún momento.


__doPostBack es una función que genera un postback a nuestra página, el cual podemos capturar en el evento Load de la página.


La estructura del __doPostBack es la siguiente:  __doPostBack("target", "argument");
Usando los parámetros podemos controlar el evento "target" y usar los parametros enviados en el "Argument", de la siguiente manera:


protected void Page_Load(object sender, EventArgs e)
{
 if ((Request["__EVENTTARGET"]!= null) && (Request["__EVENTARGUMENT"]!= null))
     {
   if((Request["__EVENTTARGET"]=="Update")&&(Request["__EVENTARGUMENT"]=="1945"))
       {
          //Ejecutar nuestro código del lado del servidor;
       }
    }
 }

Dobleclick Server Event c# ASP

He venido trabajando en un proyecto web Asp .Net, y para redondear el problema, quería implementar el dobleclick en un listbox, y por otra parte ejecutar un evento del servidor llamado desde javaScript. Enseguida un paso a paso para comenzar a usar estas muy útiles funcionalidades.


La primera nos permite capturar el doble click para un control, para esto adicionamos el evento en el load de la página al control de la siguiente manera:

nuestroControl.Attributes.Add("ondblclick", Page.ClientScript.GetPostBackEventReference( nuestroControl, "EventDblclick"));

GetPostBackEventReference nos devuelve una cadena que se puede utilizar en un evento de cliente para que se produzca una devolución de datos al servidor. El control especificado ("nuestroControl") para controlar la devolución de datos y un argumento de cadena con información adicional sobre el evento definen la cadena de referencia ("EventDblclick").


Ahora al realizar la acción de doble click sobre el control que le hemos adicionado nuestro evento nos hará un postback que vamos a capturar con el siguiente método: 



if (Request["__EVENTARGUMENT"] != null && Request["__EVENTARGUMENT"] == " EventDblclick")
            {
                AddElement();
            }



En el mismo page_load capturamos el Request["__EVENTARGUMENT"], cual si corresponde a la acción de nuestro doble click, en el control que le especificamos, traerá como valor el nombre del evento que le hemos referenciado, para este caso "EventDblclick". Desde aquí podemos manejar el evento según sea necesario, para mi caso se trataba de adicionar lo seleccionado en un listbox para adicionarlo a una caja de texto. En fin hay muchas funcionalidades a mi parecer, por lo cual lo comparto.