Download - CSA - Web Parts en SharePoint 2010
Patricio Belardo
Web Parts en SharePoint 2010
Web Parts
Framework de Diálogos
Barra de estados y area de notificación
Modelo de objetos de cliente
Sumario
Características generales
Web Parts en SharePoint 2010
Nuevas características
Web Parts Visuales
Nuevas Plantillas en Visual Studio 2010
Web Parts en SharePoint 2010
Características
En las versiones anteriores de SharePoint, el desarrollo de webparts era todo un desafío.
No se podía trabajar “visualmente” en el resultado que se quería obtener.
Una de las nuevas plantillas de Visual Studio 2010 es la de “Web Part Visuales”, la cual permite a los desarrolladores diseñar visualmente el webpart y hacer el deploy de manera directa e intuitiva.
Web Parts
Nuevas Características
Web Part Visuales
Demo Web Part Visuales
Framework de Diálogos
Reducir la transición de páginas y mantener al usuario en contexto.
Los contenidos se mostrarán en un iframe que estará dentro de un div
Los diálogos son modales
Pueden ser maximizados como ventanas normales.
Framework de Diálogos
Objetivos de diseño
Framework de Diálogos
API de Javascript para el control de diálogos
Los contenidos pueden ser una página o un DOMElement
Tenemos otros parámetros opcionales, como ser título, ancho, alto, estado de ventana, etc.
Un diseño de página puede ser utilizado para mostrarse dentro de un diálogo o fuera de él.
Framework de Diálogos
Extensibilidad
function myCallback(dialogResult, returnValue)
{
alert(“Hello World!”);
}
var options = {
url: “/_layouts/somepage.aspx”,
width: 500,
dialogReturnValueCallback:myCallback};
SP.UI.ModalDialog.showModalDialog(options);
Framework de Diálogos
Ejemplo de utilización
Framework de Diálogos - Parámetros
Parameter Description
url (string) La URL de la página a ser incluida dentro del diáloo.
SharePoint automáticamente le va a agregar el “Source”
al querystring. Este parámetro especifica a qué página
debería retornar el browser cuando finalice.
html (DOMElement) Se puede especificar un DOMElement en vez de pasar una URL
title (string) Especifica el título. Si no se especifica se muestra el
título de la página.
x (int) Posición izquierda (píxeles)
y (int) Posición superior (píxeles)
width (int) Ancho (píxeles)
height (int) Alto (píxeles)
showMaximized (bool) { true | false }
Determina el tamaño inicial del diálogo
allowMaximize (maximizable
(bool) { true | false }
Habilita o no el botón de maximizado
dialogReturnValueCallback Una función de callback será invocada cuando el diálogo sea cerrado
Demo Framework de diálogos
Barra de Estados / Área de notificación
Entrega información al usuario sin que sea una distracción en sus operatorias normales
La barra de estado debería ser utilizada para mostrar información de persistencia
Barra de Estado / Área de Notificación
Diseño:
Se muestra debajo de la Ribbon
Se utilizarán colores predefinidos dependiendo de la importancia
Extensibilidad:
API de Javascript para agregar o eliminar mensajes y especificar el color
API de Server para definir el estado al momento del render de la página
El mensaje es un HTML y podría incluir links o íconos
Cuando se quieran mostrar múltiples colores, la barra seleccionará el más “importante”
Barra de Estado
String SP.UI.Status.addStatus(String Html)
Agrega un mensaje con el HTML dentro de la barra de estado. El mensaje va a ser siempre agregado a la derecha. Este método retorna el ID del mensaje.
String SP.UI.Status.appendStatus(sid, strTitle, strHtml)
Agrega un mensaje al mensaje existente especificado por el parámetro SID. Un nuevo mensaje se creará y el mismo será retornado.
Bool SP.UI.Status.removeStatus(String sid)
Quita el mensaje indicado en el SID.
Void SP.UI.Status.removeAllStatus()
Remueve todos los mensajes de la barra de estado.
Bool SP.UI.Status.updateStatus(String sid, String Html)
Actualiza el estado en base al SID indicado y el parámetro Html
Void SP.UI.Status.setStatusPriColor(sid, strColor)
Define el color del mensaje
API de Barra de Estado
Diseño:
Aparece a la derecha de la página, por debajo de la Ribbon
El mensaje por defecto se mostrará por 5 segundos.
Extensibilidad:
API de Javascript para agregar o eliminar mensajes
API de Server para definir el estado al momento del render de la página
El mensaje es un HTML y podría incluir links o íconos
Existe un parámetro opcional llamado “Sticky” que está definido para que el mensaje quede fijo. Luego el mensaje de debería quitar manualmente
Área de Notificación
String SP.UI.Notify addNotification(String Message, Bool Sticky)
Agrega el mensaje a la barra de notificación. Este método retorna el ID del mensaje.
Bool SP.UI.Notify.removeNotification(String ID)
Remueve el mensaje indicado en el ID.
API de Área de Notificación
Demo Barra de Estados / Área de
notificación
Modelo de objetos de Cliente
Modelo de objetos de cliente
Modelo de Objetos de Cliente
ECMAScript
Silverlight
Comparativa de Modelos de Objetos
Servidor
(namespace
Microsoft.SharePoint)
Código manejado de .NET y
Silverlight
(namespace
Microsoft.SharePoint.Client)
ECMAScript
(namespace SP)
SPContext ClientContext ClientContext
SPSite Site Site
SPWeb Web Web
SPList List List
SPListItem ListItem ListItem
SPField (including major
derived classes) Field Field
WebPartPages.SPLimitedWebPartManager
WebParts.LimitedWebPartManager
WebParts.LimitedWebPartManager
Obtención de Datos
El contexto de cliente es obtenido mediante el uso del constructor ClientContext().
Luego se debe utilizar el modelo de objetos para especificar qué objetos obtener.
Para cargar el objeto o colección se puede utilizar una de las siguientes opciones:
A través de un llamado al método “Load()” para obtener el dato específico,
Utilizando una carga queryable que utilice el método LoadQuery() y retorne una colección
de objetos enumerables
El query es ejecutado llamando al método ExecuteQuery().
Obtención de Datos
Ejemplo
ClientContext clientContext = new
ClientContext("http://MyServer/sites/MySiteCollection ");
Web oWebsite = clientContext.Web;
clientContext.Load(oWebsite);
clientContext.ExecuteQuery();
Console.WriteLine("Title: {0} Created: {1}", oWebsite.Title,
oWebsite.Created);
Obtención de Datos
Ejemplo – Query de estilo LINQ
var query = from list
in clientContext.Web.Lists
where list.Title != null
select list;
var result = clientContext.LoadQuery(query);
clientContext.ExecuteQuery();
Obtención de datos utilizando el modelo
de objetos de cliente
Algunas propiedades no están disponibles por fefecto cuando se obtienen
ciertos objetos.
Se deben especificar los objetos que se quieran cargar, en el método
“load”
Ejemplo:
clientContext.Load(oList,
list => list.Title,
list => list.Created,
list => list.OnQuickLaunch,
list => list.Items);
Propiedades que no están disponibles por
defecto.
Objeto Propiedades
Folder ContentTypeOrder, UniqueContentTypeOrder
List BrowserFileHandling, DataSource, EffectiveBasePermissions,
HasUniqueRoleAssignments, IsAttachmentLibrary(), OnQuickLaunch,
RoleAssignments, SchemaXml, ValidationFormula, ValidationMessage
ListItem DisplayName, EffectiveBasePermissions, HasUniqueRoleAssignments,
RoleAssignments
SecurableObject HasUniqueRoleAssignments, RoleAssignments
Site Usage
Web EffectiveBasePermissions, HasUniqueRoleAssignments,
RoleAssignments
Obtener datos de una lista
Utilizando un Query CAML
El método GetItems(CamlQuery) permite definir un query de formato CAML que especifique qué items
retornar.
Se puede llamar al método CamlQuery.CreateAllItemsQuery() para generar el query que retorne todos los
items.
Ejemplo:
ClientContext clientContext = new ClientContext(siteUrl);
SP.List oList = clientContext.Web.Lists.GetByTitle("Announcements");
CamlQuery camlQuery = new CamlQuery();
camlQuery.ViewXml =
"<View><Query><Where><Geq><FieldRef Name='ID'/>" + "<Value
Type='Number'>10</Value></Geq></Where></Query><RowLimit>100</RowLimit></View>";
ListItemCollection collListItem = oList.GetItems(camlQuery);
clientContext.Load(collListItem);
clientContext.ExecuteQuery();
Obtener datos de una lista
Utilizando un query LINQ
Ejemplo:
ClientContext clientContext = new ClientContext("http://spdev0220");
List list = clientContext.Web.Lists.GetByTitle("Announcements");
var query1 = from item in list.Items
where item.Id > 0
select item;
var result = clientContext.LoadQuery(query1);
clientContext.ExecuteQuery();
foreach (var item in result)
{
textBox1.Text += item["Title"].ToString() + "\r\n";
}
Actualización de objetos
Ejemplo
ClientContext clientContext = new ClientContext("http://MyServer/sites/MySiteCollection");
Web oWebsite = clientContext.Web;
ListCollection collList = oWebsite.Lists;
List oList = collList.GetByTitle("My List");
oList.Description = "Changed description...";
oList.Update();
clientContext.ExecuteQuery();
Creación de objetos desde el cliente
WebCreationInformation
ListCreationInformation
ListItemCreationInformation
Ejemplo
ClientContext clientContext = new
ClientContext("http://MyServer/sites/MySiteCollection/MyWebSite");
WebCollection collWeb = clientContext.Web.Webs;
WebCreationInformation webCreationInfo = new WebCreationInformation();
webCreationInfo.Title = "My New Web Site";
webCreationInfo.Description = "Description of new Web site...";
webCreationInfo.Language = 1033;
webCreationInfo.Url = "MyNewWebSite";
webCreationInfo.UseSamePermissionsAsParentSite = true;
webCreationInfo.WebTemplate = "STS#0";
Web oNewWebsite = collWeb.Add(webCreationInfo);
clientContext.ExecuteQuery();
Modelo de objetos de Silverlight
Silverlight incluye 2 assemblies:
Microsoft.SharePoint.Client.Silverlight.dll
Microsoft.SharePoint.Client.Silverlight.Runtime.dll
Silverlight comparte la mayoría de namespaces, objetos y métodos con el modelo
de objetos de cliente.
La excepción la hace el hecho de que los llamados que ejecutan los queries son
asincrónicos.
¿Preguntas?
Muchas gracias!!!