Mes: junio 2010

Mostrar pestaña programador en Office 2010

Para poder crear aplicaciones de tipo Office Business Application (OBA) con Office 2010, una de las opciones que se emplea es la personalización de nuestros documentos desde el propio Office gracias a la ayuda de la pestaña Programador. Esta nos permite crear documentos inteligentes basados en smart tags, que no son otra cosa que controles de formulario. Pero ¿que ocurre cuando esta pestaña no esta visible?(que por defecto no lo está), lo primero que piensas es ¿como lo hacía en 2007?, ya que a nivel de interfaz de usuario Office 2007 y 2010 no son tan diferentes.

En Office 2007 el proceso era el siguiente:

1. Hacíamos clic en el botón de Office ubicado en el extremo superior izquierdo

2. Hacíamos clic en el botón "Opciones de Excel"

3. En la opción "Más frecuentes", activábamos la opción "Mostrar ficha Programador en la cinta de opciones"

 tabprogrammostrarprog

Sin embargo cuando vamos a seguir los mismos pasos “more or less”, en 2010, no encontramos lo mismo.

1. Hacemos clic en el botón de Archivo ubicado en el extremo superior izquierdo, que es lo más parecido que tenemos al botón de Office en 2007

2. Hacemos clic en la sección "Opciones”, que también es lo más parecido a lo que teníamos en la versión anterior. Pero una vez se nos abre la ventana de opciones, vemos que en esta versión no existe la sección "Más frecuentes", y si miramos en la sección general no aparecen nada similar…ni en opciones avanzadas.

3. Tenemos que acceder a la sección Personalizar cinta de opciones para poder activar dicha funcionalidad, ya que si nos fijamos por defecto esta está sin activar.

image image

Una tontería..pero que muchas veces nos hace perder el tiempo innecesariamente (a mi me lo ha hecho perder!!!).

Además os dejo un link bastante interesante que estoy siguiendo para la personalización del backstage de Office 2010 ya que de momento no se está desarrollando mucho en esta línea.

Material evento “SharePoint 2010: Evolución vs Revolución”

Desde aquí me gustaría agradecer su asistencia a todas aquellas personas que se animaron a participar en la Jornada “SharePoint 2010: Evolución vs Revolución” que tuvo lugar ayer en los Centros de Excelencia Software de Navarra. En ella se pudieron ver las principales novedades y características que introduce la plataforma SharePoint 2010 con respecto a versiones anteriores , y algunos de los aspectos que contribuyen a dicha Evolución.

Como sería difícil resumir todo lo que se vio en esta charla en un post, me quedo con una frase que dijo Juan Carlos González: “SharePoint 2010 no se trata de un producto, sino de una plataforma que nos permite combinar diversas soluciones”.  Por lo tanto, debemos ser conscientes de que SharePoint se trata de un “mundo por explorar” con el que podemos trabajar para personalizar nuestras aplicaciones de forma que estas sean todo lo potentes y eficientes que estamos buscando.

Aquí os dejo la parte de la presentación que realizamos mi compañero Raúl y yo, referente al modelo de objeto en cliente, una de las principales mejoras a nivel de desarrollo de SharePoint 2010, y las demos que realizamos para cada uno de los clientes que se pueden implementar mediante este modelo de objeto : . NETThank-you-2, Silverlight, ECMAScript

Mostrar elementos de una lista en SharePoint 2010 mediante el modelo de objetos cliente Silverlight

Como ya vimos en el articulo anterior, el modelo de objetos cliente de SharePoint 2010 nos permite trabajar con tres tipos de clientes diferentes.

– Aplicaciones .NET

– Aplicaciones Silverlight

– Aplicaciones ECMAScript

Tras ver el ejemplo de un cliente .NET, en el artículo de hoy vamos a ver el siguiente tipo de aplicaciones con las que se puede trabajar, más en concreto vamos a ver como crear un elemento web de tipo Silverlight que nos permita navegar por los elementos de nuestra lista de Contactos mostrándonos toda la información de los mismos, ya que hasta ahora lo que se ve en la mayoría de Posts es como acceder a las distintas listas y sus propiedades pero no a sus elementos. Para ello vamos a ver los pasos que hemos seguido para la creación de nuestra Web Part y para la integración de la misma en SharePoint. De forma que el resultado que hemos obtenido es el siguiente:

image

Para ello lo que hacemos es crear una solución que integre por un lado un proyecto de tipo Aplicación de Silverlight donde definiremos los controles que vamos a utilizar para mostrar los datos de nuestros contactos y que van a ser :

– Un listbox donde mostraremos el apellido del contacto, y que nos permitirá ir navegando por los distintos contactos

– Un conjunto de labels, donde cargaremos todos los valores correspondientes a cada contacto (Nombre, Apellido, Compañía, Email…)

– Un elemento de tipo Imagen, donde cargaremos la imagen de cada uno de los contactos.

Y por otro lado un tipo de proyecto SharePoint>2010>Empty SharePoint Project, que será el que se encargue de cargar nuestra aplicación Silverlight en SharePoint. Pero para que ambas aplicaciones se integren es necesario añadir también un proyecto de tipo SharePoint> 2010> Modulo que se encargará de incluir el archivo .xap de Silverlight en SharePoint 2010.

image 

Una vez creado este modulo, eliminamos el archivo Sample.txt que se genera por defecto. Hacemos clic con el botón derecho sobre el Modulo y establecemos la propiedad Project Output References, tal y como se observa en la siguiente imagen:

image image

Y modificamos el archivo Elements.xml, de forma que indicamos al módulo de carga cual es la url de nuestro archivo .xap  y donde se tiene que guarda este dentro de nuestro sitio SharePoint.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  3.   <Module Name="ModuloCarga" Url="StoreSilverlight">
  4.   <File Path="ModuloCarga\ContactosCein.xap" Url="ContactosCein.xap" Type="GhostableInLibrary" />
  5. </Module>
  6. </Elements>

Por último vamos a comprobar que nuestra solución se carga correctamente en nuestro sitio. Para ello añadimos dentro de una página (la que queramos) un elemento web de tipo Silverlight, en el que indicaremos cual es el archivo .xap que queremos cargar. Para ello abrimos el panel de herramientas, y en la opción Configurar indicamos la url relativa a nuestro archivo:

image image

Una vez comprobado que nuestra solución Silverlight se ha implementado correctamente en nuestro sitio, pasamos a implementar la lógica de la misma.

1. Para poder trabajar con el modelo de objeto cliente de Silverlight es necesario añadir las siguientes bibliotecas a nuestro proyecto:

Microsoft.SharePoint.Client.Silverlight.dll, Microsoft.SharePoint.Client.Silverlight.Runtime.dll

*Estas se encuentran dentro de la carpeta C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATELAYOUTSClientBin.

2. Añadimos las referencias necesarias en nuestra clase MainApp

  1. using Microsoft.SharePoint.Client;
  2. using System.Windows.Media.Imaging;

3. Sincronizamos la aplicación Silverlight con el sitio SharePoint, para ello es  necesario añadir el siguiente código dentro del evento de arranque Application_Startup de la aplicación(App.xaml.cs)

  1. ApplicationContext.Init(e.InitParams, SynchronizationContext.Current);

3. Inicializamos las variables y objetos que vamos a utilizar:

  1.       private delegate void UpdateUI();
  2.       ListItemCollection collListItem;
  3.       List<Contacto> miscontactos = new List<Contacto>();
  4.  
  5.       Contacto contacto;

4. Llamamos a nuestro método de carga Cargarelementos() desde el constructor MainPage() . Este se encarga de crear el contexto cliente para inicializar los objetos con los que vamos a trabajar

  1. public void Cargarelementos()
  2.         {
  3.  
  4.             ClientContext clientContext = new ClientContext(http://sharepoint2010:200);
  5.             Web web = clientContext.Web;
  6.             List oList = web.Lists.GetByTitle("Contactos");
  7.  
  8.             CamlQuery Query = new CamlQuery();
  9.             collListItem = oList.GetItems(Query);
  10.             clientContext.Load(collListItem);
  11.             clientContext.ExecuteQueryAsync(OnSucceeded, OnFailure);
  12.  
  13.         }

Una de las principales diferencias que vemos con respecto al ejemplo del artículo anterior, es que en este caso la llamada al contexto se hace de forma asíncrona, teniendo en cuenta que para ello hay que especificar cuales son los eventos hay que ejecutar en caso de éxito o fracaso.

5. Definimos el método que se encarga de crear nuestros objetos de tipo Contacto a partir de los elementos de nuestra lista de Contactos (LoadListItems), y al que llamaremos en caso de éxito, desde nuestro evento OnSucceeded.

  1. private void LoadListItems()
  2.         {
  3.             listacontactos.Items.Clear();
  4.             foreach (ListItem oListItem in collListItem)
  5.             {
  6.                 FieldUrlValue pictureUrl = oListItem["Foto"] as FieldUrlValue;
  7.                 Uri uri = new Uri(pictureUrl.Url, UriKind.Absolute);
  8.                 contacto = new Contacto(oListItem["FirstName"].ToString(), oListItem["Title"].ToString(), oListItem["WorkCity"].ToString(), oListItem["WorkZip"].ToString(), oListItem["WorkCountry"].ToString(), oListItem["Email"].ToString(), oListItem["CellPhone"].ToString(), oListItem["Company"].ToString(), uri);
  9.                 miscontactos.Add(contacto);
  10.                 Item elemento = new Item(oListItem["Title"].ToString());
  11.                 listacontactos.Items.Add(elemento);
  12.  
  13.             }
  14.  
  15.         }

*Para ello hemos definido previamente dos clases que nos permitan:

-  Crear objetos de tipo Contacto con unas propiedades especificas.

  1. public class Contacto
  2.     {
  3.         public string Name;
  4.         public string LastName;
  5.         public string City;
  6.         public string ZipCode;
  7.         public string Country;
  8.         public string Email;
  9.         public string Telefono;
  10.         public string Compañia;
  11.         public Uri urifoto;
  12.         public Contacto(string name, string lastname, string city, string zipcode, string country, string email, string telefono, string compañia, Uri foto)
  13.         {
  14.             Name = name;
  15.             LastName = lastname;
  16.             City = city;
  17.             ZipCode = zipcode;
  18.             Country = country;
  19.             Email = email;
  20.             Telefono = telefono;
  21.             Compañia = compañia;
  22.             urifoto = foto;
  23.         }
  24.     }

– Crear Items, para añadir elementos a nuestro ListBox

  1. public class Item
  2.     {
  3.         public string Name;
  4.  
  5.         public Item(string name)
  6.         {
  7.             Name = name;
  8.  
  9.         }
  10.         public override string ToString()
  11.         {
  12.             // Genera el texto mostrado en el ComboBox
  13.             return Name;
  14.         }
  15.     }

6. Configuramos los eventos de éxito o fracaso (en nuestro caso sólo se ejecuta código en el primero de ellos). Plena confianza 😉

  1. private void OnSucceeded(object sender, ClientRequestSucceededEventArgs e)
  2.         {
  3.             UpdateUI updateUI = LoadListItems;
  4.             this.Dispatcher.BeginInvoke(updateUI);
  5.         
  6.         }

7. Y por último configuramos el evento _SelectionChanged de nuestro ListBox, para que al seleccionar en los distintos contactos se carguen las propiedades especificas en cada caso.

  1. private void listacontactos_SelectionChanged(object sender, SelectionChangedEventArgs e)
  2.         {
  3.  
  4.             int Indice = listacontactos.SelectedIndex;
  5.  
  6.             NombreCont.Content = "Nombre: " + miscontactos[Indice].Name;
  7.             ApellidoCont.Content = "Apellido: " + miscontactos[Indice].LastName;
  8.             COmpañiaCont.Content = "Compañia: " + miscontactos[Indice].Compañia;
  9.             EmailCont.Content = "Email: " + miscontactos[Indice].Email;
  10.             telefonoCont.Content = "Teléfono:" + miscontactos[Indice].Telefono;
  11.             BitmapImage bi = new BitmapImage(miscontactos[Indice].urifoto);
  12.             ImagenContacto.Source = bi;
  13.  
  14.         }

De forma que ya tenemos nuestra aplicación implementada y corriendo en nuestro sitio SharePoint, tal y como podemos ver en la imagen inicial.

Recordar que esto es sólo una pequeña parte de todo lo que se puede hacer combinando estas dos potentes plataformas, por lo que os animo a que creéis  vuestras propias aplicaciones y exploréis toda la potencia que estas ofrecen

Aquí os dejo todo el código completo, por si alguien lo quiere utilizar como referencia.

*(Habría que implementar los proyectos ContactosCein y ImplementarSilver en una solución única)