\nLa segunda noticia es que a partir de este n\u00famero hay un articulo destacado en la publicaci\u00f3n. Y he tenido la fortuna que el articulo destacado a sido el art\u00edculo que escrib\u00ed para el pasado n\u00famero http:\/\/www.compartimoss.com\/revistas\/numero-16\/uso-de-frameworks-javascript-en-desarrollos-sharepoint-parte-i<\/a>.
\nPara mi es un orgullo, el solamente colaborar con la publicaci\u00f3n es un \u00e9xito, donde escriben las personas m\u00e1s importantes de la comunidad de SharePoint de habla hispana. As\u00ed que pensar que mi art\u00edculo sea el m\u00e1s destacado del n\u00famero anterior la verdad es que no me lo puedo creer. Lo \u00fanico que puedo es agradecer a los directores por dejarme colaborar con CompartiMOSS<\/a> y a los lectores por leerlo, ya que la finalidad de la publicaci\u00f3n es \u00abcompartir\u00bb el conocimiento entre todos los lectores.
\nAqu\u00ed os dejo el art\u00edculo que he escrito para este n\u00famero y espero que os guste igual que el anterior.<\/p>\n
ExtJS es uno de los Frameworks JavaScript m\u00e1s famosos del mercado cuya \u00faltima versi\u00f3n es la 4.2. Se caracteriza por simplificar la creaci\u00f3n de Apps.<\/p>\n Sus principales ventajas:<\/p>\n Prototipos y APPS de una forma muy sencilla y r\u00e1pida. El principal inconveniente que tiene es que su curva de aprendizaje no es tan r\u00e1pida, y para hacer cosas relativamente interesantes con \u00e9l, es necesario conocer bastante bien JavaScript, lo que en los primeros proyectos nos puede hacer tirar la toalla y ocasionar un poco de frustraci\u00f3n.<\/p>\n Al igual que en el anterior n\u00famero, en este art\u00edculo vamos a explicar c\u00f3mo desarrollar un APP en la que vamos a mostrar informaci\u00f3n de los Autores de CompartiMOSS. Vamos a poder realizar operaciones Create Read Update Delete contra una lista de SharePoint y visualizaremos la informaci\u00f3n obtenida en un GRID haciendo uso de la API REST para leer la informaci\u00f3n y tambi\u00e9n utilizaremos el modelo de objetos cliente de JavaScript para ver c\u00f3mo podemos integrar otras librer\u00edas con este Framework.<\/p>\n Requisitos Previos<\/strong><\/p>\n Antes de ponernos a trabajar hay que descargarse el Framework Sencha de la siguiente p\u00e1gina: http:\/\/www.sencha.com\/products\/extjs\/download\/. Su uso, siempre que no se implemente ninguna aplicaci\u00f3n \u00abcomercial\u00bb, es gratuito.<\/p>\n Creaci\u00f3n de la APP SharePoint-Hosted mediante Visual Studio<\/strong><\/p>\n Abrimos Visual Studio 2012 y seleccionamos un proyecto de este tipo:<\/p>\n En primer lugar, agregamos al proyecto una lista llamada Autores en la que a\u00f1adiremos los datos que queremos mostrar en el Grid. Esta lista contendr\u00e1 los campos mencionados anteriormente: (Autor, PuestoTrabajo, Twitter y Blog). A esta lista le a\u00f1adiremos datos de ejemplo para comprobar el correcto funcionamiento, para ello basta con editar el archivo \u00abelements.xml\u00bb que se encuentra ubicado dentro de la Instancia de la lista y a\u00f1adir los datos que creamos conveniente.<\/p>\n El siguiente paso es a\u00f1adir los ficheros JavaScript y CSS que vienen en el Frameworks de Sencha en nuestro proyecto. Los JavaScript los ubicaremos dentro de la carpeta de Scripts y los CSS dentro de la carpeta de Content. Estos ficheros son los siguientes: ext-all.js, include-ext.js, options-toolbar.js, ext-theme-classic-all.css y example.css<\/p>\n En la p\u00e1gina default.aspx a\u00f1adimos referencias a las librer\u00edas JavaScript y archivos .CSS de la siguiente forma:<\/p>\n En la misma p\u00e1gina default.aspx tambi\u00e9n vamos a incluir el siguiente div que es el lugar donde vamos desplegar el desarrollo realizado.<\/p>\n Finalmente creamos un fichero JavaScript en blanco que le vamos a llamar \u00abRow-editing.jg\u00bb que ser\u00e1 donde realizaremos la implementaci\u00f3n de la soluci\u00f3n. Con esta parte ya nos podemos poner manos a la obra con el desarrollo JavaScript.<\/p>\n Introducci\u00f3n al desarrollo con Sencha ExtjS<\/strong> En este ejemplo lo que vamos a realizar es a\u00f1adir un GRID en el que podemos realizar operaciones CRUD contra una lista de SharePoint, en nuestro ejemplo queremos consultar los Autores de la revista CompartiMOSS. Para ello el primer paso es crearnos un modelo en el que vamos a definir que valores va a tener, en nuestro caso: (Title, PuestoTrabajo, Blog, Twitter) para ello a\u00f1adimos este c\u00f3digo:<\/p>\n Dado que a\u00fan no vamos a realizar la llamada a la API REST de SharePoint, vamos a introducir una serie de valores aleatorios con la finalidad de comprobar el funcionamiento del grid:<\/p>\n El siguiente paso es a\u00f1adir un Store a nuestra APP. \u00bfQu\u00e9 es un Store? Un Store es un objeto que encapsula el modelo de datos en la parte del cliente, de tal forma que en \u00e9l sirva de \u201ccache de datos\u201d y sea el encargado de solicitar los datos a la API Rest de SharePoint, se encarga de mapear la informaci\u00f3n recibida con nuestro modelo de objetos que nos hemos creado anteriormente. Adem\u00e1s este objeto tendremos que configurarlo en los Grids, Combos y dem\u00e1s Widgets que queremos introducir en nuestros desarrollos.<\/p>\n Los datos que le hemos pasado al Store es que base en el modelo que hemos creado anteriormente, y que tenemos la informaci\u00f3n fija al seleccionar el tipo del proxy \u201cmemory\u201d para ello lo que hacemos es indicarle que los datos corresponden con la variable \u201cdata\u201d creado anteriormente. El siguiente paso es crearnos el Grid donde se van a mostrar todos estos datos para ello tenemos que a\u00f1adir el siguiente c\u00f3digo:<\/p>\n Este c\u00f3digo es muy semejante al que utilizamos en cualquier desarrollo en .NET es decir, indicamos el origen de datos (Store), indicamos las Columnas que va a tener el Grid y su nombre en el Store, en cada columna podemos indicar el tipo de campo que es (fecha, n\u00famero) del mismo modo que podemos indicar validaciones en los mismos. Como podemos observar ya tenemos los datos puestos en el Grid, y tambi\u00e9n observamos alguna de las caracter\u00edsticas de los mismos como son el orden de las columnas, seleccionar las columnas que queremos visualizar, adem\u00e1s de la posibilidad de a\u00f1adir, editar y eliminar datos desde el propio Grid.<\/p>\n Consumir datos de SharePoint<\/strong> La principal modificaci\u00f3n es que hemos cambiado el Proxy por una consulta Ajax que lo que hace es realizar una petici\u00f3n a la API y obtiene los resultados en formato Json. En la variable root, indicamos el lugar desde el que queremos obtener los datos, dependiendo de la llamada API Rest que realicemos los datos se encuentran en una ubicaci\u00f3n u otra. Una vez realizada esta modificaci\u00f3n tan solo nos queda definirnos las funciones correspondientes para hacer las operaciones contra SharePoint. Estas funciones quedar\u00edan de la siguiente forma:<\/p>\n Con estas modificaciones ya tenemos listo el GRID \ud83d\ude42 En estos o dos art\u00edculos hemos visto dos Frameworks JavaScript totalmente distintos, uno m\u00e1s estricto en cuanto a la forma de desarrollar como es ExtJS y otro un tanto m\u00e1s din\u00e1mico como es el de Kendo. Pero lo bueno es que ambos Frameworks los podemos utilizar dentro de SharePoint, ya que nuestro servidor favorito es una plataforma en la que podemos desarrollar haciendo uso de casi cualquier recurso existente, lo que hace cualquier desarrollador web pueda ser un desarrollador de SharePoint. Como cada tres meses acaba de salir la revista digital dedicada a nuestro servidor favorito SharePoint, viene cargada de articulos de gran calidad y con dos novedades interesantes que tienen que ver con nostros. Por un lado a partir de … Continue reading
\nUsar Framework JavaScript en nuestros desarrollos SharePoint Parte II<\/strong>
\nResumen:<\/strong>
\nEn el art\u00edculo de este n\u00famero vamos a continuar introduciendo Frameworks JavaScript en esta ocasi\u00f3n es el turno de ExtJS de Sencha. ExtJS es uno de los Frameworks m\u00e1s populares y m\u00e1s utilizados para el desarrollo web. Proporciona un rendimiento muy r\u00e1pido y veloz en las aplicaciones que lo utilizan debido a que el lenguaje generado es perfectamente interpretado por los navegadores modernos. Otra de las ventajas que tiene ExtJS es que tiene un IDE propio (Sencha Arquitect), que aunque no es Visual Studio, es una interfaz relativamente simple y nos ahorra bastante trabajo.<\/p>\n
\nResultado obtenido es HTML5 con lo cual obtienes una compatibilidad con todos los navegadores y dispositivos.
\nPosibilidad de crear aplicaciones m\u00f3viles con un c\u00f3digo muy semejante (ya lo veremos en otros art\u00edculos)
\nArquitectura MVC
\n![\"\"](\"http:\/\/www.compartimoss.com\/PublishingImages\/Numero17\/Usar-Framework-JavaScript-en-nuestros-desarrollos-SharePoint-Parte-II\/figura1.png\")
Imagen 1.- Arquitectura Proyecto ExtJs<\/p>\n![\"\"](\"http:\/\/www.compartimoss.com\/PublishingImages\/Numero17\/Usar-Framework-JavaScript-en-nuestros-desarrollos-SharePoint-Parte-II\/figura2.png\")
Imagen 2.- Creaci\u00f3n de la Aplicaci\u00f3n SharePoint-Hosted.<\/p>\n\r\n<script type="text\/javascript" src="..\/Scripts\/App.js"><\/script><script type="text\/javascript" src="..\/Scripts\/ext-all.js"><\/script>\r\n<script type="text\/javascript" src="..\/Scripts\/include-ext.js"><\/script><script type="text\/javascript" src="..\/Scripts\/options-toolbar.js"><\/script>\r\n\r\n \t<link href="..\/Content\/App.css" rel="Stylesheet" type="text\/css" \/> \t<link href="..\/Content\/ext-theme-classic-all.css" rel="Stylesheet" type="text\/css" \/> \t<link href="..\/Contentent\/example.css" rel="stylesheet" type="text\/css" \/> <\/pre>\n
<\/pre>\r\n<div id="editor-grid"><\/div>\r\n<pre>\r\n<\/pre>\n
\nPara introducirse en el desarrollo con ExtJS mi recomendaci\u00f3n es leer los tutoriales y ejemplos que hay en la Web del producto y una vez entendidos los casos bases, empezar a complicarlos. En los mismos ejemplos obtendremos y seremos conscientes de toda la potencia que tiene ExtJS. El consultar la ayuda nos indicar\u00e1 todos los eventos y valores que tienen los diversos artefactos que vamos a utilizar.<\/p>\n\r\n Ext.define('Autor', {\r\n extend: 'Ext.data.Model',\r\n fields: [\r\n 'Title',\r\n 'Trabajo',\r\n 'Blog',\r\n 'Twitter,\r\n ]\r\n });\r\n<\/pre>\n\r\n \/\/ Generate mock employee data\r\n var data = (function() {\r\n var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],\r\n firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],\r\n lastLen = lasts.length,\r\n firstLen = firsts.length,\r\n usedNames = {},\r\n data = [],\r\n s = new Date(2007, 0, 1),\r\n eDate = Ext.Date,\r\n now = new Date(),\r\n getRandomInt = Ext.Number.randomInt,\r\n\r\n generateName = function() {\r\n var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)];\r\n if (usedNames[name]) {\r\n return generateName();\r\n }\r\n usedNames[name] = true;\r\n return name;\r\n };\r\n\r\n while (s.getTime() < now.getTime()) {\r\n var ecount = getRandomInt(0, 3);\r\n for (var i = 0; i < ecount; i++) { var name = generateName(); data.push({ name : name, trabajo: name.toLowerCase().replace(' ', '.') + '@sencha-test.com', blog: 'http:\/\/compartimos.com\/blog\/'+name , twitter: '@' + name }); } s = eDate.add(s, eDate.MONTH, 1); } return data; })(); <\/pre>\n \/\/ create the Data Store var store = Ext.create('Ext.data.Store', { \/\/ destroy the store if the grid is destroyed autoDestroy: true, model: 'Autor', proxy: { type: 'memory' }, data: data, sorters: [{ property: 'name', direction: 'ASC' }] }); <\/pre>\n var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', { clicksToMoveEditor: 1, autoCancel: false }); \/\/ create the grid and specify what field you want \/\/ to use for the editor at each column. var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [{ header: 'Name', dataIndex: 'name', flex: 1, editor: { \/\/ defaults to textfield if no xtype is supplied allowBlank: true } }, { header: 'Trabajo', dataIndex: 'trabajo', width: 160, editor: { \/\/ defaults to textfield if no xtype is supplied allowBlank: true } }, { header: 'Twitter', dataIndex: 'twitter', width: 160, editor: { \/\/ defaults to textfield if no xtype is supplied allowBlank: true } }, { header: 'Blog', dataIndex: 'blog', width: 160, editor: { \/\/ defaults to textfield if no xtype is supplied allowBlank: true } }], renderTo: 'editor-grid', width: 600, height: 400, title: 'Autor CompartiMOSS', frame: true, tbar: [{ text: 'Add Autor', iconCls: 'employee-add', handler: function () { rowEditing.cancelEdit(); \/\/ Create a model instance var r = Ext.create('Autor', { }); store.insert(0, r); rowEditing.startEdit(0, 0); } }, { itemId: 'removeEmployee', text: 'Remove Autor', iconCls: 'employee-remove', handler: function () { var sm = grid.getSelectionModel(); rowEditing.cancelEdit(); store.remove(sm.getSelection()); if (store.getCount() > 0) {\r\n sm.select(0);\r\n }\r\n },\r\n disabled: true\r\n }],\r\n plugins: [rowEditing],\r\n listeners: {\r\n 'selectionchange': function (view, records) {\r\n grid.down('#removeEmployee').setDisabled(!records.length);\r\n }\r\n }\r\n });\r\n\r\n<\/pre>\n
\nTambi\u00e9n resulta bastante llamativo que hemos a\u00f1adido dos funciones para poder a\u00f1adir y eliminar registros sobre el propio Grid y que se queden reflejados en el Store.
\nFinalmente a\u00f1adimos un plugin que permite poder editar registros directamente en el Grid. Si realizamos estas modificaciones y ejecutamos la APP el resultado ser\u00eda el siguiente:<\/p>\n![\"\"](\"http:\/\/www.compartimoss.com\/PublishingImages\/Numero17\/Usar-Framework-JavaScript-en-nuestros-desarrollos-SharePoint-Parte-II\/figura3.png\")
<\/p>\n
\nUna vez ya tenemos la aplicaci\u00f3n funcionando con los datos de demostraci\u00f3n, viene la parte m\u00e1s divertida y es como hacer que la APP obtenga los datos de SharePoint. Para ello tenemos que realizar modificaciones en el Store definido previamente, en lugar de obtener los datos fijos, va a realizar una llamada a la API Rest para obtener los datos y mostrarlos en el GRID, para ello tenemos que hace\u00e7r las siguientes modificaciones en el Store:<\/p>\n\r\n var store = Ext.create('Ext.data.Store', {\r\n \/\/ destroy the store if the grid is destroyed\r\n autoLoad:true,\r\n autoDestroy: true,\r\n model: 'Autor',\r\n proxy: {\r\n type: 'ajax',\r\n url: ' \/_api\/web\/Lists\/getbytitle(\\'Autores\\')\/items()?$select=Title,Trabajo,Twitter,Blog',\r\n headers: { "Accept": "application\/json; odata=verbose" },\r\n reader: {\r\n type: 'json',\r\n root: 'd.results'\r\n }\r\n },\r\n sorters: [{\r\n property: 'name',\r\n direction: 'ASC'\r\n }]\r\n });\r\n<\/pre>\n
\nAhora observamos que se muestran los datos de nuestra lista de SharePoint.
\n![](\"http:\/\/www.compartimoss.com\/PublishingImages\/Numero17\/Usar-Framework-JavaScript-en-nuestros-desarrollos-SharePoint-Parte-II\/figura4.png\")
\nA\u00fan no hemos terminado con el desarrollo, si intentamos hacer cualquier operaci\u00f3n CRUD en el Grid, aunque no da error, el resultado no se refleja en nuestra lista. Esto es por dos motivos: el primero es el funcionamiento del Store, el Store es el \u201cencargado\u201d de almacenar los datos en local y posteriormente trasladar estos cambios a la lista. La primera parte lo hace correctamente, pero en el momento que se intenta sincronizar con la lista se produce este error:
\n![](\"http:\/\/www.compartimoss.com\/PublishingImages\/Numero17\/Usar-Framework-JavaScript-en-nuestros-desarrollos-SharePoint-Parte-II\/figura5.png\")
\nPorque se produce este error?, porque en el Store no hemos creado la estructura adecuada para la comunicaci\u00f3n por Rest. Para solucionarlo tenemos dos opciones, una modificar estas llamadas a la API Res de SharePoint o bien a\u00f1adir una funci\u00f3n dentro del grid que cada vez que se realice una operaci\u00f3n realice esta operaci\u00f3n en la lista de SharePoint.
\nPara este ejemplo he decidido a\u00f1adir una funci\u00f3n que se encargue de hacer las operaciones en SharePoint, el motivo es demostrar que dentro de Sencha tambi\u00e9n podemos hacer uso de otras librer\u00edas, en este ejemplo voy a llamar al modelo de objetos JavaScript.
\nPara ello en primer lugar tenemos que a\u00f1adir un Evento al listener al Store, de tal forma que cada vez que se a\u00f1ada\/modifique o elimine un elemento al Store este sea notificado de tal forma que quedar\u00eda de la siguiente forma:<\/p>\n\r\n listeners: {\r\n 'update': function (view, records) {\r\n if (records.data.Id == '') {\r\n AddRecord(records.data);\r\n \r\n }\r\n else\r\n {\r\n UpdateRecord(records.data);\r\n }\r\n debugger;\r\n store.reload();\r\n },\r\n 'remove': function (view, records) {\r\n RemoveRecord(records.data);\r\n store.reload();\r\n }\r\n\r\n<\/pre>\n\r\nvar context = SP.ClientContext.get_current();\r\n\r\nfunction AddRecord(data)\r\n{\r\n var oList = context.get_web().get_lists().getByTitle('Autores');\r\n \r\n var itemCreateInfo = new SP.ListItemCreationInformation();\r\n this.oListItem = oList.addItem(itemCreateInfo);\r\n oListItem.set_item('Title', data.name);\r\n oListItem.set_item('Trabajo', data.Trabajo);\r\n oListItem.set_item('Twitter', data.Twitter);\r\n oListItem.set_item('Blog', data.Blog);\r\n oListItem.update();\r\n\r\n context.load(oListItem);\r\n context.executeQueryAsync(\r\n Function.createDelegate(this, this.onQuerySucceeded), \r\n Function.createDelegate(this, this.onQueryFailed)\r\n );\r\n}\r\n\r\nfunction onQuerySucceeded() { \r\nalert(\u2018Acci\u00f3n Realizada\u2019); \r\n}\r\n\r\nfunction onQueryFailed(sender, args) { \r\nalert(\u2018Error\u2019);\r\n}\r\n\r\nfunction UpdateRecord(data)\r\n{\r\n var oList = context.get_web().get_lists().getByTitle('Autores');\r\n\r\n this.oListItem = oList.getItemById(data.Id);\r\n oListItem.set_item('Title', data.name);\r\n oListItem.set_item('Trabajo', data.Trabajo);\r\n oListItem.set_item('Twitter', data.Twitter);\r\n oListItem.set_item('Blog', data.Blog);\r\n oListItem.update();\r\n\r\n context.executeQueryAsync(\r\n Function.createDelegate(this, this.onQuerySucceeded),\r\n Function.createDelegate(this, this.onQueryFailed)\r\n );\r\n}\r\nfunction RemoveRecord(data)\r\n{\r\n var oList = context.get_web().get_lists().getByTitle('Autores');\r\n this.oListItem = oList.getItemById(data.Id);\r\n oListItem.deleteObject();\r\n\r\ncontext.executeQueryAsync( Function.createDelegate(this, this.onQuerySucceeded),\r\n Function.createDelegate(this, this.onQueryFailed)\r\n );\r\n}\r\n<\/pre>\n
\nRese\u00f1a de Sencha Arquitect<\/strong>
\nSencha tiene un IDE propio para desarrollar sus aplicaciones JavaScript utilizando su propio IDE, se puede obtener una versi\u00f3n de evaluaci\u00f3n desde el siguiente link http:\/\/www.sencha.com\/products\/architect\/<\/a>. Este IDE nos ahorra bastante trabajo ya que nos evita introducir gran cantidad de c\u00f3digo. Tambi\u00e9n tiene inconvenientes ya que es una interfaz muy poco intuitiva para introducir c\u00f3digo, est\u00e1 m\u00e1s pensado para hacer bocetos de Apps y una vez el boceto esta validado empezamos a introducirle funcionalidad desde otro entorno.
\n Mi experiencia personal es que el IDE es bueno para el tema del dise\u00f1o, y la arquitectura de la aplicaci\u00f3n pero cuando hay que empezar a a\u00f1adir funcionalidad a la aplicaci\u00f3n a\u00fan le falta mucho.
\nEste es el entorno de trabajo de Sencha Arquitect
\n![](\"http:\/\/www.compartimoss.com\/PublishingImages\/Numero17\/Usar-Framework-JavaScript-en-nuestros-desarrollos-SharePoint-Parte-II\/figura6.png\")
\nLa pantalla est\u00e1 dividida en tres partes:
\n\u2022\tA la izquierda las artefactos que podemos incluir en nuestra aplicaci\u00f3n.
\n\u2022\tEn el centro la visualizaci\u00f3n del desarrollo que estamos implementando (o el c\u00f3digo generado)
\n\u2022\tA la derecha visualizamos la arquitectura del proyecto generado, y en caso de tener alg\u00fan elemento seleccionado las propiedades, eventos y funciones que llevan asociados.
\nLa gran ventaja de utilizarlo es que tenemos el c\u00f3digo mucho mejor estructurado, cada artefacto introducido en nuestra APP lo tenemos en un fichero separado. \u00bfQu\u00e9 ventajas tiene? Pues de esta forma tenemos nuestro c\u00f3digo mucho m\u00e1s escalable y mantenible. \u00bfDesventaja? Que tenemos una aplicaci\u00f3n m\u00e1s pesada, ya que es necesario descargarse m\u00e1s ficheros para que empiece a funcionar.<\/p>\nConclusiones<\/h2>\n
\n Ahora bien si me pregunt\u00e1is cu\u00e1l de los dos Frameworks expuestos me gusta m\u00e1s, mi respuesta es que depende de lo que queramos hacer y depende del proyecto.
\n Ventajas de Kendo son:
\n–\tExige una curva de aprendizaje mucho menor por parte del desarrollador
\n–\tM\u00e1s sencillo de maquetar.
\n–\tMucho m\u00e1s soporte en foros al basarse en JQuery
\nVentajas de uso de ExtJS:
\n–\tAplicaciones mucho mejor estructuradas
\n–\tMejor funcionamiento en todos los navegadores
\n–\tPosibilidad de crear aplicaciones m\u00f3viles
\n–\tMucha m\u00e1s documentaci\u00f3n<\/p>\n<\/span>","protected":false},"excerpt":{"rendered":"