...PVO+H Uge´s Worlds...

Cookies with ExtJS

2015-10-29T23:18:00.001+01:00

In this case we are going to use a cookie to store the username logged into de system in case the checkbox “Recordar usario” is checked.

To set the cookie we are going to use this function called when clicked the button “Entrar”, and after success to log :

In this function the cookie is created with the id 'accessCookie' and with the username 'user', and also with an expiration delay of 30 days. In case the user select not to remember the username then the delay is set for one milisec which causes to delete the cookie.

To load the user stored in the cookie we use the afterrender event for the login view, which tries to read the cookie and if it exists then the username is loaded into the user name field, and the “Recordar usuario” check box is checked.

Instalación de Sencha Cmd 6 en MacOS(Yosemite)

2015-09-28T20:02:00.003+02:00

1- Ver si java está presente con:

java –versión

Si no lo está se necesitará un java JDK (Java Development Kit), descargarlo de la web de Oracle e instalar.

Al instalarlo se guarda en :

Library/Java/JavaVirtualMachines

Library/Internet Plug-Ins en el fichero JavaApplePlugin.plugin

2- Ruby solo se usará si usamos ExtJS 5 y Sencha Cmd 5. De todas formas en macOS viene instalado ya (Yosemite). Para ver que está :

ruby –version

3- Instalamos sencha. Ántes podemos ver si ya existe con:

sencha which (debe devolver la versión instalada y el path)

Descargamos Sencha Cmd y lanzamos el ejecutable. Hay dos versiones en la web, con y sin Java JRE. Yo he usado la versión con JRE.

Se instala en /Users/ugeHidalgo/bin/Sencha/Cmd/6.0.1.76 y a la misma vez se añade esto al path.

Para ver si se añadió el path correctamente podemos usar el comando:

echo $PATH

Si no aparece entonces podemos añadir el path con el comando:

export ~/bin/Sencha/Cmd/6.0.1.76/:$PATH

Para generar la aplicación, descargamos la versión GPL de ExtJS 6 de la web de Sencha, la descomprimimos y ponemos en alguna carpeta, y generamos la aplicación con Sencha Cmd con el comando :

sudo sencha –sdk /path/a/extjs generate app NombreApp /path/a/donde/poner/app

Con el comando sudo evitamos problemas de permisos.

Una vez generada la aplicación y compilada obtendremos esto:

Para ver la aplicación no necesitamos instalar ningún servidor web, podemos usar el propio de Sencha, y para ello vamos a la carpeta de la aplicación generada y ejecutaremos el comando:

sencha app watch

La aplicación se compila y se puede acceder a ella a través de http://localhost:1841

A veces podemos encontrar algún fallo del tipo:

Esto es debido a problemas de permisos al acceder a la carpeta donde se ha instalado Sencha Cmd, en concreto la carpeta repo. Podemos dar permisos de acceso total al grupo Users, o bien ejecutar:

sudo sencha app watch

El servidor se queda esperando cualquier cambio. En este punto podemos hacer modificaciones en los ficheros javascript del código, salvarlos, vaciar el buffer del navegador, recargarlo, y los cambios se verán al momento.

Para terminar el servidor basta con hacer Ctrl+C

Alpe d'Huez Triathlon

2015-08-18T23:04:00.000+02:00

Bueno, bonito y barato, creo que esta frase resume en sí al triatlón de Alpe d’Huez.

Bueno porque está muy bien organizado, tanto como cualquiera de los mejores de la franquicia Ironman, de hecho he corrido alguno que otro que no le llega a la altura de las suelas a este.

Bonito, porque el sitio es impresionante, majestuoso, limpio, etc, etc...

Y barato, porque el coste tanto de inscripción como de hospedajes, alimentación, etc., es bastante asumible y nada caro.

Las distancias son extrañas, siendo algo mayores a las de un medio: 2,2km de nado, 115km de carretera con tres “puertecillos” y 21km de carrera a pie con alguna que otra cuesta y en altitud.

Natación: “Dios, que frío hace aquí”.

La natación se hace en un lago artificial (Lac de Verney), que se usa para generar corriente por la empresa patrocinadora de la carrera, EDF. Este lago está a unos 770m de altitud, lo cual no es mucho, pero que al servir para recoger el deshielo de los glaciares que en verano quedan en todas las cumbres de alrededor, hace que la temperatura del agua, aún siendo el 1 de agosto sea bastante baja, (13 graditos) nada que ver con nuestro Canales, o Quentar.

La natación es cómoda a pesar de que los 1200 participantes salen a la vez. La salida es desde el agua, lo cual con la temperatura de esta es un inconveniente por el tiempo de espera flotando mientras te dan la salida. En el manual de carrera aconsejaban el uso de gorro doble, y cremas calentadoras. Una vez empiezas a nadar el circuito es fácil, solo dos bollas que dejas a la izquierda, y dos vueltas, pero sin salir del agua (como se hace en los IM).

Un detalle que me llamó la atención, es la calidad del agua. ¡Es como nadar en agua mineral! , de hecho llegué a dar el típico trago por los empujones iniciales en la salida y no sabía a nada.

Durante el nado traté de concentrarme en deslizar, deslizar, y deslizar, para no pensar en el frío y evitar el ataque de ansiedad, al final no fue para tanto y me adapté mas o menos para terminar con un tiempo de 40:39 en los 2,2, es decir un ritmo de 1:51, mas mal que bien, pero al menos sobreviví al frío inicial. Puesto 195 de la general y 35 de mi categoría.

Transición rápida y fácil al estilo Bolton, ya que las bicis estaban en un campo de césped, lo cual siempre es un inconveniente para las calas de las zapatillas, o para los calcetines si lo haces descalzo. Fuera como fuera y después de sortear el frio en las manos para ponerme el mallot, casco calcetines, etc.. tardo 3:52 y ya estamos sobre la bici.

Bicicleta: Bonita, pero dura, muy dura.

La salida del lago se hace en cuesta, unos 500m de repecho en el que ves los típicos salvajes intentando subir con el desarrollo de bajar, o el típico que pretende adelantar en esos 500m a todo el pelotón para ponerse el primero… me recordó a Elche en su rampilla inicial.

Después viene un larguísimo y peligrosísimo tramo de bajada y falso llano hacia abajo hasta llegar al pie del primer puerto. Unos 25km hasta el pueblo de Séchillienne. Digo peligroso no por el asfalto o por la bajada en sí, sino mas bien porque la gente iba como loca, acoplada y a ritmos de infarto, y lo que es peor en pelotones gigantescos de 20-30 ciclistas chupando todos rueda.

Una vez llegamos a Séchillienne, giramos a izquierda, y voilá!, el primer puerto, Col de L’Alpe du grand Serre. Este puerto lo hicieron en el tour de este año pero al revés, y se llamaba Col de La Morte.

13,1km al 7% de media. Este puerto es muy parecido a La Cabra, no tiene grandes desniveles, pero la pendiente es constante y sin apenas descansos. La organización lo anunció como de 14km, pero justo al pasar por el cartel de 1km Sommet (Cima) se acaba la cuesta y se convierte en un llano hasta pasar por la pancarta de Cima. Mi problema aquí fue cebarme demasiado en este puerto con ayuda de un “simpático” francés con el que compartí toda la subida en pleno pique yo te paso, tu me pasas, etc…

Después viene la bajada, cuyos tres primeros km son de infarto, y el resto son un falso llano que fastidia bastante, ya que obliga a exprimirse ya que todos van muy rápido.

Después viene el siguiente puerto “el tapado”, el Col d’Ornon, 14,4 km al 4% de los cuales los últimos cinco algo mas duros. El problema de este puerto no son las rampas, sino mas bien el viento frontal que me dejó las patas tostadas. Una vez coronado empieza el descenso más peligroso del día, 10kms muy revirados y con pendientes considerables. Algún que otro tarado me pasa muy rápido, pero decido pasar de jugármela, nos queda el plato fuerte y es largo. Una vez terminado el descenso estamos cerca de Bourg d’Oisans, desde donde empezará la subida a Alpe d’Huez.

Los tramos por el pueblo todo engalanado como si del tour se tratara, y llenos de gente gritando son espectaculares, pero lo que mas me puso la piel de gallina fue reconocer los tramos inmediatamente anteriores a empezar la subida que tantas y tantas veces he podido ver por la tele y en los que ahora estaba yo. Mucha gente a ambos lados de la carretera y cartel de inicio de puerto. Ritmo rápido de aproximación y zas!.... toda la artillería desplegada para empezar a subir, en mi caso llevaba un 36x28 que es más que suficiente.

La subida es una pasada, curvas amplias y planas seguidas de rampas del 11%, 12% mantenido. Hasta la curva 17 esta el tramo más duro, luego tiene algunas zonas mas suaves, aunque el porcentaje medio del 10% es muy constante.

Es entretenido el pasar las curva e ir descontando a la vez que puedes ver por el cartel correspondiente a que ganador de etapa en Alpe está dedicada. La primera la 21, está dedicada a Lance Armstrong, imagino que han olvidado retirarle la curva.

Van pasando las curvas y la sensación inicial de piernas pesadas empieza a desaparecer, empiezo a ir más ligero y empiezo a subir con menos desarrollo, 36x25. A lo largo de la subida hay dos avituallamientos y son perfectos, todo ordenado y con voluntarios que saben hacer las cosas. Son grandes con lo que me da lugar a cambiar los dos bidones y coger algún gel o alguna barrita, todo marca Powerbar.

Paso el pueblo de Huez y la sensaciones ahora son geniales, voy ligero y con ganas, de todas formas quedan unos 5 km y no quiero cebarme, queda la carrera a pie.

Sigo subiendo y entro en las primeras casa de Alpe d’Huez, ya esta esto casi listo unos 3km y a correr, empiezo a subir el ritmo que ya es bastante alto, me encuentro genial, llevo 12km subiendo y ya me dejo ir a todo lo que doy hasta la transición. Paso por las calles de la estación camino de los boxes como un tiro. En estos últimos km he debido adelantar a 10-12 participantes.

En la subida, hay un tramo cronometrado que coincide con el oficial del tour, he tardado 1:11:27, el 23 de mi categoría y el 158 de la general. El tiempo total de la bici ha sido de 4:53:05, 182 de la general y 22 de mi categoría.

LA T2 es fácil y rápida 1:36, me quito el maillot, y me pongo las zapatillas y gorra y a correr.

Carrera a pié: Surprise, surprise.

La carrera consiste en un circuito de 7km con dos cuestas y dos bajadas, la primera de 1.800 metros y la segunda de otros 1000 metros aunque algo más empinada que la anterior, una vez bajadas ambas cuestas el resto es sube y baja pero sin castigar mucho. Hace una temperatura ideal para correr, unos 23 graditos, con sol y algunas nubes.

El piso en su mayor parte es de asfalto, salvo un tramo por los alrededores de un campo de golf que es un pequeño sendero que nos lleva a la primera cuesta, que es el inicio del col de La Sarenne. ( La puerta trasera de Alpe d’Huez).

Una vez empiezo a correr me vuelve a ocurrir lo mismo de Elche, se me empieza a subir el cuádriceps derecho. Es una sensación extraña, empieza como a temblar y cada vez va a mas hasta que se sube, y duele tela. Así que a unos 500m de salir a correr me paro y hago un par de sentadillas para estirar los cuádriceps, vuelvo a correr y en principio parece que deja de doler poco a poco. En un par de kilómetros vuelvo a correr como siempre.

La primera vuelta es de tanteo para ver si recupero de los amagos de calambre en el cuádriceps, la segunda es de tirar fuerte, y la tercera es la de la sorpresa, me encuentro tan bien y tan suelto que empiezo a forzar todo lo que puedo para ir recuperando puestos, de hecho el km19 de la carrera lo hago a una media de 3:59 el km.

Al final hago la media maratón en 1:47:07 siendo el 166 de la general y el 22 de mi categoría.

El tiempo final del tri completo es de 7:26:21, puesto 153 de la general y 21 de mi categoría. Bastante satisfecho con el tiempo, y quizás la dudilla de haber podido apretar algo más en la bici. Para lo próxima. Este es un tri que hay que repetir, y a ser posible en compañía.

Ekoï Monstro

2015-06-26T22:14:00.002+02:00

Después de unos meses de uso os dejo aquí mis apreciaciones sobre las gafas ekoï, en concreto el modelo Monstro Revo.

Quizás no sea una marca muy conocida en nuestro país, pero si lo son en otros países como Italia o Francia, donde han esponsorizado algún Ironman como el de Niza, y últimamente lo son algo más, ya que algunos equipos profesionales como AG2R y Astana las están usando.

Su diseño es bastante envolvente y protector y se adhieren bastante bien a la cara. Durante la carrera a pie no se mueven nada, pero también las hemos probado sobre un bicicleta de montaña en recorridos bastante movidos, con igual resultado.

La montura esta fabricada en Grilamid, que es un tipo de termoplástico usado en aviación, automoción, etc… es ligero flexible y resistente.

El puente de la nariz es cómodo, y al igual que el extremo de las patillas son de goma blanda y adherente.

Las lentes, son de policarbonato y tipo iridium, lo que les da un cierto color dorado. Proporcionan protección contra impactos, y 100% contra rayos UVA, UVB y UVC, y llevan un tratamiento antivaho que tratan de evitarlo incluso en las condiciones mas complicadas de sudoración. Igualmente poseen unos orificios en los cristales para favorecer la ventilación de los estos, al igual que hace Oakley con algunos de sus modelos

El nivel de protección que declara el fabricante es CAT3.

Este modelo viene junto con su estuche y su funda de transporte a un precio bastante bueno y competitivo, pudiendo adquirirlas directamente al fabricante a través de su página web: www.ekoi.pro

· Lente iridium.

· Diseño protector y envolvente.

· Lente con tratamiento anti-vaho.

· Montura en gliramide 3D.

· 100% protección anti UVA, UVB, UVC.

· Nivel de protección CAT3.

· Gamuza para limpieza y funda rígida.

· Peso: 35g.

En resumen, unas gafas muy vistosas, de altísima calidad a un precio que deja atrás a competidores muy superiores.

Elche 2015

2015-06-06T07:53:00.001+02:00

Alpe.... see you next summer !!

2015-01-29T23:05:00.000+01:00

DuCross de Motril

2014-12-01T22:41:00.004+01:00

Fotos del duatlon cross de Motril (posicion 25 general / 4 categoría)

Team Work ... #theClub Rules !!!

2014-10-10T22:04:00.000+02:00

Ruta realizada en Strava

Derrapando / skidding...

2014-09-12T22:05:00.001+02:00

La vida no debería ser un viaje hacia la tumba con la intención de llegar a salvo con un cuerpo bonito y bién conservado, sino más bién llegar derrapando de lado, entre una nube de humo, completamente desgastado y destrozado, y proclamar en voz alta: ¡Uf!, ¡Vaya viajecito!

Life should not be a journey to your grave with the aim to arrive with a beautiful and well conserved body, but rather arrive skidding in a cloud of dust, completely worn and destroyed, and screaming loud: Wow!, What a trip!

Hunter S. Thompson

Waiting...

2014-09-07T22:32:00.001+02:00

Place/Lugar: Granada, Spain.

Bike: Cervelo S5

Waiting mates for a morning ride to La Peza

Cumbres Verdes y La Vuelta

2014-08-27T22:04:00.000+02:00

Los Pericopuertos 2014: Alto de las Cumbres Verdes

Testing javascript with jasmine/sinon

2014-08-05T21:26:00.000+02:00

Spy

Un spy es un objeto usado para registrar toda interacción con otros objetos, es una función usada para registrar si se ha llamado y cuantas veces, con qué argumentos, los valores devueltos, el valor de this, y cualquier excepción si la hay para cada una de las llamadas a esa función.

Puede ser una función anónima, o envolver a otra función existente controlando así lo anteriormente descrito. En este último caso la función a la que envuelve sigue funcionando igual.

Los datos guardados por el spy se guardan en un array args[][] de manera que args[0] serán los argumentos recibidos en la primera llamada, args[1] en la segunda y así consecutivamente.

Los valores devueltos se guardan también en un array returnValues[], donde returnValues[0] sería el valor devuelto en la primera llamada Si no devuelve valor alguno será undefined.

El valor de this se devuelve igual que los valores devueltos pero con el array thisValues[].

Igual con las excepciones que irán en el array exceptions[].

Los spies son útiles para controlar llamadas a una función, que se llame con los argumentos adecuados, que devuelva el valor correcto, etc…

Ejemplo de definición de un spy que registrará todas las operaciones de Extjs.ajax sin interferir en su normal funcionamiento:

sinon.spy (jQuery,’ajax’);

jQuery.getJSON(‘/some/data’);

El spy no interferirá en el normal funcionamiento de jQuery.ajax, pero registrará los datos asociados.

Los métodos más ususales para spy suelen ser:

calledOnce: si se ha llamado una sola vez.
called: al menos una.
calledTwice: dos veces.
calledThrice: tres veces
callCount: el nº de veces llamado
calledWith(arg1, arg2,…): llamado con los argumentos indicados(puede incluir otros distintos).
calledWithExactly(arg1, arg2,..): llamado con los argumentos indicados y ninguno más.
Threw(): devolvió excepción.

Algunos ejemplos de spies:

Así se define un spy para que actúe cobre el objeto controller.behaviourStore cuando se llame al método load:

storeLoadSpy = U4.testframework.spy(controller.behaviourStore, 'load');

Una vez definido llamaremos a cualquier otro método que queramos saber si hace una llamada a load, y controlaremos por ejemplo que se ha llamado y con los argumentos correctos

expect(storeLoadSpy.called).toBeTruthy();

expect(storeLoadSpy.args[0][0].listNodes).toBe(nodesList.toString());

Stub

Es un sustituto de la función a la que envuelve, o un sustituto de una función que no existe. Permite definir un comportamiento dado al llamar a esa función stub, es decir fijar unos parámetros y que devuelva un valor fijo determinado. Stub implementa la interface spy, por lo que también puede ser usado un stub a modo de spy.

Las dos principales razones para usar stubs es enmascarar comportamientos, por ejemplo evitar la necesidad de tener que hacer peticiones a un servidor, o evitar que una pantalla de confirmación aparezca, etc.. y por otro lado proveer a los test de datos que normalmente son suministrados por otras funciones sin tener que usarlas. Con esto aislamos el test para evitar que otros aspectos externos al test puedan influir.

Los stubs se crean de las siguientes formas:

· sinon.stub() crea stub function anónima.

· sinon.stub(object,”method”) crea un stub para el método object.method

· sinon.stub(object,”method”,func) crea un stub para el método object.method sustituyéndolo por la función func

Los métodos más usuales para stub son:

returns(value) hace que el stub devuelva siempre ese valor.
throws(exception) lanza una excepción, si exception es un string puede ser el tipo de excepción
withArgs (arg1, arg2,…)

Algunos ejemplos de stubs

Crea stub de función anónima, y lo define de manera que si se llama con el parámetro 42 devuelve 1, si se llama con el 1 devuelve un error, y si no se usa argumento alguno entonces no devuelve nada.

var callback = sinon.stub();

callback.withArgs(42).returns(1);

callback.withArgs(1).throws("TypeError");

callback(); // No return value, no exception

callback(42); // Returns 1

callback(1); // Throws TypeError

En el siguiente ejemplo de crea un stub para el método getSelection del objeto behaviourView.grid.getSelectionModel(), que devolverá siempre un array con un record, es decir cada vez que se haga una selección del grid se devuelve el mismo objeto

U4.testframework.stub(behaviourView.grid.getSelectionModel(), 'getSelection').returns([record]);

expect(behaviourView.fireEvent.calledWithExactly('inheritbehaviourmodified',record, behaviourSelected.originalValue)).toBeFalsy();

En este otro ejemplo usaremos un stub para evitar que se haga la llamada al servidor, y como si fuera un spy controlaremos que se ha hecho un POST sobre la url correcta, y con los datos correctos:

saveChanges: function (config) {

var me = this,

client,

jsonData = me.fillJSONData(config.treeStore, config.behaviourStore, config.evidenceStore),

competenceGroupsPath = 'hrms/competence/competencegroups/';

U4.Ajax.setAccessId(me.accessId);

client = U4.util.Path.encodeSegment(me.client);

return U4.Ajax.promise({

url: U4.util.Path.getApiPath(competenceGroupsPath + client),

method: 'POST',

jsonData: Ext.JSON.encode(jsonData)

});

promiseStub = U4.testframework.stub(U4.Ajax, 'promise');

saveProxy.saveChanges(config);

expect(promiseStub.calledOnce).toBeTruthy();

expect(promiseStub.args[0][0].method).toBe('POST');

expect(promiseStub.args[0][0].url).toBe('hrms/competence/competencegroups/XX');

expect(promiseStub.args[0][0].jsonData).toBe(jsonDataExpected);

Ejemplo de crear un FakeServer que simule un servidor que devuelva los datos a una petición de un store.load (response debe ser un array con los elementos a devolver), igualmente se usa un spy asociado a Ext.Ajax sobre el método ‘request’ para controlar si se hizo una llamada

fakeServer = U4.testframework.createFakeServer();

fakeServer.respondWith('GET', new RegExp('.*hrms/competence/competencegroups/.*'),

[200, { 'Content-Type': 'application/json' },

response]);

spyAjaxRequest = U4.testframework.spy(Ext.Ajax, 'request');

store.load({ listNodes: '' });

fakeServer.respond();

expect(spyAjaxRequest.calledOnce).toBeTruthy();

Otro ejemplo de stub para evitar que se muestre un mensaje de confirmación y comprobar que se ha llamado a dicho mensaje.

stubOnShow = U4.testframework.stub(U4.Msg, 'show').yieldsTo('fn', 'ok');

expect(stubOnShow.called).toBeTruthy();

Subida a Lentegí desde Almuñecar

2014-06-12T09:48:00.001+02:00

Lugar: Costa Tropical, Almuñecar, Granada, España.

Tipo de Ruta: Carretera. Montaña.

Ruta de montaña de poco kilometraje, 42km pero exigente. La salida se hace desde la localidad de Almuñecar, a la que retornaremos una vez alcanzada la locaidad de Lentegí. El punto mínimo de altura es el nivel del mar mientras que el punto mas alto alcanzado es de 694m. El acumulado de desnivel es de 780m.

Esta ruta tiene tres zonas claramente diferenciadas, la primera de ella desde la salida hasta el km 8 es practicamente llana, con algún repecho poco reseñable mientras transitamos por el valle del rio guadalfeo entre campos de aguacates.

Una vez alcanzado el km 8 comienza la segunda parte con una suave ascensión hasta el cruce de Lentegí en el Km 15, atravesando las localidades de Jete primero y Otivar después.

De vez en cuando encontramos alguna rampa mas pronunciada, pero la subida es sencilla. A medida que discurran los kilómetros el porcentaje de las ascensión irá incrementando hasta alcanzar el cruce mencionado.

Comienza aquí la tercera parte de la subida girando a la derecha para comenzar la ascensión a Lentegí. Mientras subimos entre pinos podremos contemplar enfrente la subida al mirador de la cabra.

Sobre Lentegí y la Cabra y la Sierra de Almijara y Tejeda al fondo

En el km 18 encontraremos un cruce tomando el desvio hacia la derecha en dirección a la piscina, vienen ahora las últimas rampas que nos dejan en la parte superior del pueblo.

Una vez alcanzado este bajaremos en dirección al centro del pueblo para retornar por la misma carretera que subimos. Cuidado con el primer km de bajada que es bastante pronunciado.

Ext.JS and Visual Studio: HTTP Error 404 file not found when loading json file

2014-05-19T17:22:00.003+02:00

I have the following store defined, loading data from a json file:

Ext.define('Uge.store.Articles', {
    extend: 'Ext.data.Store',
    model: 'Uge.model.Article',
    proxy: {
        type: 'ajax',
        url: 'data/articles.json',
        reader: {
            type: 'json',
            root: 'articles',
            successProperty: 'success'
        }
    },
    autoLoad: true
});

Data to load is inside the file data/articles.json, but when trying to load data we get an error pointing that file could not be found.

To avoid this error you need to set your project to accept json file types. You can do this setting the following configuration into web.config file:

Googlemaps javaScript API with Ext.NET and Web Forms

2014-04-20T20:30:00.000+02:00

Googlemaps API is a desktop and mobile web mapping service application and technology provided by Google, offering satellite imagery, street maps, and Street View perspectives, as well as functions such as a route planner for traveling by foot, car, bicycle (beta test), or with public transportation.

You can use it embed in your web pages. Here you can find some documentation on how-to register for use and some examples: https://developers.google.com/maps/documentation/javascript/tutorial

This is an example showing a map with the localization for a given shop:

The first step to use is to obtain a key.

Next you need to add a script in web page in order to allow access to googlemap, using the key previously obtained:

Next step is to add a script to the page used to load the map with the position needed. in my case I use a marker to mark the desired position:

In the aps.net page we need to include an element, could be a div, or a panel, with the name map_canvas to draw the map on it.

In my page I am using a TabPanel, and I use the Panel map_canvas to draw the map. To access this element inside the DOM is important to take care about the real name used. For this a launch the pagem and then using Inspect Element a obtain the real name. In my case was 'cpMainContent_map_canvas-body'. This is becacuse I am using Masterpages, and then the panel is nested with another panels, and ContentPlaceHolder.

To load the correct map a use a Listener associated to the loading of the tab page having the map. This listener use initializeMap taking the longitude, latitude and name parameter from text fields inside the page.

Also I have added a few functionalities to the map, allowing to reposition the marker doing click over the map and reloading latitude and longitude data to web fields. And finally you could also make click over the marker to make zoom and center the position to this marker.

Ext.NET ComboBox samples

2014-04-16T14:22:00.000+02:00

Combobox loading data from store which uses an SqldataSource. It shows Name field, and returns SportID field value:

The method in code behind could be as follows:

protected void Store2_ReadData(object sender, StoreReadDataEventArgs e)
{
using (var db = new ClubSiteContext())
{
     Store store = this.cbxDeportes.GetStore();
     store.DataSource = from s in db.Sports select new { s.SportID, s.Name };
     store.DataBind();
}
}

In this case is important to perform an initial load for the data when the page is loaded.

Other way to load data is using a SqlDataSource like this:

Once we have data loaded into the combobox, we could select an item, or select the empty item described using the tag EmptyText as follows:

if (aRaceType.SportID == 0)
                cbxDeportes.Value = "";
            else
            {
                object SportID = aRaceType.SportID;
                cbxDeportes.Select(SportID);
            }

If we want to perform some kind of action when user selects a value from combobox we could use Direct Events an a method in code behind like this:

And this is the method implemented in code behind:

protected void cbRaceTypesChangeValue(object sender, DirectEventArgs e)
{
txbxPoints.Text = "Escribe algo";
}

More combobox samples here http://examples.ext.net/#/Form/ComboBox/Overview/

Y ahora ya sí.... por fin el buen tiempo

2014-04-12T17:25:00.001+02:00

Entity Framework, Code First and Inheritance

2014-04-03T19:51:00.002+02:00

We have the following classes structure:

These are the classes code:

We are going to use the TPH (Table Per Hierarchy) way, which means we are going to have only one table for an Hierarchy. In this case we are going to have one table for both Customers and Employees.

In the Data Base Context I need to add all the classes that represent an entity, but when I´m using inheritance and TPH, I do not need to add the classes which inherits from a main class. I´m going to add only the base class. So the Data Base Context would be as follows:

So, when EF creates the data base from the model this is the table that I´m going to have including Customer and Employees. Note that EF adds a field called Discrimator, which is a string field used by EF to discriminate to which entity does the data belong. In our case this field could contains values like "Customer" or "Employe".

But, what happen when I need to query data from this table?, well I could made queries for the parent object, person, or queries to child objects, customer or employee.

This is an example of ASP.NET Web Forms GridView component using EF and LINQ to access data for Employees:

The GridView in a browser showing data for employees

The aspx code for the GridView

The code for the GridView´s SelecMethod

Note that we can query for a child object, but in this case we need to use OfType to indicate EF to retrieve only the data from the People table belonging to the Employee Entity.

jQuery Date Picker en español en ASP.NET MVC

2014-03-30T19:58:00.003+02:00

Esta seria la configuración del componente datePicker para que aparezca en Español, permita escoger mes y año y con animación de scroll hacia abajo.

Esta sería la forma de usarlo en ASP.NET MVC asociando el resultado a un campo de una tabla, y asignando dicho campo para que al editar muestre la fecha guardada.

Ojo que el dato devuelto por el datePicker es DateTime2, y no olvidar incluir en el view referencia al fichero del script definido anteriormente. A modo de ejemplo, esto sería el código de un view que usa el datePicker

ASP:NET MVC More than one model in the same view

2014-03-27T14:13:00.000+01:00

In this case I have two models that I need to pass to the view because I need data from both classes. The first one is associated to the class UserProfile which manages the userName, userID, email, and all the data for a given user:

The second model manages the passwords for the user name. These data are stored encrypted into a different file in order to prevent access to see the password. Both classes have Data Annotations to describe label fields,keys, required data, etc. In this link you could find info about regular expressions to validate data entered in data fields.

In my example I need to use data from both classes(models) when a new user is being registered, that is, enter username, password and all the other data, so I need to pass both models to the same view, in which data could be entered. This is the code for the view, using data from both models:

An this is how this view is showed in the browser:

MVC allows you to pass only one model to a View, but you can use different ways to pass more than one. The way I do it, is using an auxiliary class in which you can put all the models you want to pass to the view. So this is the additional class including the two classes mentioned above:

And this is the method associated with the view, saving data for both models:

ASP.NET Setting and reading a cookie

2014-03-03T23:14:00.005+01:00

The first method creates an instance of a Cookie for the user "agivenuser", for this example, we want to store the name, second name, and date of creation. Also we need to set the expiration date for the cookie, in this case only three days. This means that after three days without the user entering the system the cookie will be deleted.

protected void btnSetcookie_Click(object sender, EventArgs e)
        {
            //Create an instance of a cookie.
            HttpCookie userCookie = new HttpCookie("agivenuser");

            //Store data
            userCookie["Name"] = txbxName.Text;
            userCookie["SecondName"]= txbxApellidos.Text;
            userCookie["Date"]=DateTime.Now.ToShortDateString();

            //Set expiration dates.
            userCookie.Expires = DateTime.Now.AddDays(3);

            //Store the cookie in the user machine.
            Response.Cookies.Add(userCookie);
        }

And this method is used to read the cookie for the user

protected void btnGetCookieData_Click(object sender, EventArgs e)
        {
            if (Request.Cookies["USER"] == null)
            {
                Response.Write("USER has no cookies");
            }
            else
            {
                HttpCookie aCookie=Request.Cookies["USER"];
                Response.Write("Cookie stored :" + aCookie["Name"] + " " + aCookie["SecondName"]
+   " " + aCookie["Date"] + " Expires :" + aCookie.Expires.ToString() );
            }
        }

Triatlón Elche 2014

2014-03-02T09:52:00.001+01:00

C# Reflection: How to obtain fields, properties, etc.. from a Class

2014-03-01T19:37:00.000+01:00

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Clases
{
    class AClassExample
    {
        private int _Id;
        private string _Name;
        private DateTime _Date;

        public int Id
        {
            get { return _Id; }
            set { _Id = value; }
        }

        public string Name
        {
            get { return _Name; }
            set { _Name = value; }
        }

        public DateTime Date
        {
            get { return _Date; }
            set { _Date = value; }
        }

        public AClassExample(int anId, string aName, DateTime aDate)
        {
            _Id = anId;
            _Name = aName;
            _Date = aDate;
        }
    }

    class Program
    {
        public static void printObject(AClassExample aClass)
        {
            Type myObjectType = typeof(AClassExample);

            //Get Fields from object
            System.Reflection.FieldInfo[] fieldInfo =              myObjectType.GetFields(System.Reflection.BindingFlags.Instance |
                System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Public );
           //The Binding flags allows to show the private fields

            foreach (System.Reflection.FieldInfo field in fieldInfo)
                Console.WriteLine(field.Name + ':' + field.GetValue(aClass));

            //Getting Properties from object
            System.Reflection.PropertyInfo[] propInfo = myObjectType.GetProperties();

            foreach (System.Reflection.PropertyInfo prop in propInfo)
                Console.WriteLine(prop.Name + ':' + prop.GetValue(aClass));

        }

        static void Main(string[] args)
        {
            AClassExample example = new AClassExample(2,"Un nombre",DateTime.Now);
            printObject(example);
            Console.ReadLine();
        }
    }
}

ASP.NET: Populating DropdownList with data from two tables using Entity Framework

2014-02-27T22:53:00.000+01:00

This time we are going to populate a DropdownList with data from two differents tables. The tables were implemented using Entity Framework code first. Those are the tables from which we are going to extract the data. We need the Id and the Name from the RaceTypes table, and the name from the Sports Tables.

This is the DropdownList showing the Name from the Sports, and the Name from the RaceTypes. Once you select a value from the DropDownList it would return the correspondet Id from the RaceTypes.

This is the code for the DropDownList. We use the field SelectMethod to indicate wich method are we going to use to populate data, DataTextField to indicate which data are we going to show, and DataValueField to indicate wich value return.

And this is the code behind with the method used to retrieve data.

WPF Grid Rounded Corners, shadows, and button gradient effect

2014-02-21T20:54:00.000+01:00

A few effect examples in Windows Presentation Foundation Applications:

Grid with Rounded corners and a shadow effect.
Data Grid with rounded corners.
Buttons with a gradient color.

This is the code for the XAML.