hol10 manual cs

Introduccin para el

programador de

SharePoint

Laboratorio prctico

Manual del laboratorio

SPCHOL308 - Desarrollar una cinta de opciones para la interfaz de usuario de SharePoint 2010 y personalizaciones del cuadro de dilogo C#

Este documento se proporciona "tal cual". Es posible que la informacin y los puntos de vista reflejados en este documento, incluidas la direccin URL y otras referencias a sitios web de Internet, cambien sin previo aviso. El usuario asume el riesgo de su uso. Este documento no proporciona derecho legal alguno sobre ninguna propiedad intelectual de ningn producto de Microsoft. Este documento puede copiarse y usarse para fines internos y de referencia. 2010 Microsoft. Todos los derechos reservados.

Pgina 1

Contenido

SPCHOL308 - DESARROLLAR UNA CINTA DE OPCIONES PARA LA INTERFAZ DE USUARIO DE

SHAREPOINT 2010 Y PERSONALIZACIONES DEL CUADRO DE DILOGO ...................................................... 2 Objetivo del laboratorio .......................................................................................................................................... 2 Recursos adicionales ............................................................................................................................................. 2 Introduccin ............................................................................................................................................................ 2

Iniciar sesin en la mquina virtual .................................................................................................................... 2 Ubicaciones........................................................................................................................................................ 2 Requisitos previos para el laboratorio ............................................................................................................... 3 Copiar las muestras de cdigo desde un documento de Word ......................................................................... 3 Fragmentos de cdigo ....................................................................................................................................... 4

Ejercicio 1: agregar un botn personalizado a la cinta de opciones ...................................................................... 5 Tarea 1: ver el sitio ............................................................................................................................................ 5 Tarea 2: crear un proyecto vaco de SharePoint 2010 ...................................................................................... 6 Tarea 3: agregar el cdigo del botn al proyecto .............................................................................................. 8 Tarea 4: implementar la solucin ..................................................................................................................... 14

Ejercicio 2: obtener acceso a datos de lista con el MO cliente de JavaScript y mostrar un cuadro de dilogo .. 17 Tarea 1: crear un proyecto nuevo y agregar un elemento web ....................................................................... 17 Tarea 2: agregar cdigo de scripting para obtener acceso y presentar los datos de la lista de SharePoint. . 21 Tarea 3: implementar y probar el elemento web ............................................................................................. 26

Resumen del laboratorio ...................................................................................................................................... 30

Pgina 2

SPCHOL308 - Desarrollar una cinta de opciones para la interfaz de usuario de SharePoint 2010 y personalizaciones del cuadro de dilogo

Tiempo estimado para completar este laboratorio: 30 minutos

Es obligatorio disponer de Visual Studio 2010 y SharePoint Foundation 2010 para realizar estos ejercicios. Se encuentran instalados en la mquina virtual que se usa en este laboratorio.

Objetivo del laboratorio

El objetivo de este laboratorio es aprender a modificar el nuevo men de la cinta de SharePoint y a interactuar con el MO cliente y el marco de trabajo de cuadro de dilogo.

Ampliar la cinta de SharePoint; para ello, se agregar un botn nuevo.

Crear un elemento web que use el cdigo del lado del cliente mediante el MO cliente y que

mostrar un cuadro de dilogo para que los usuarios especifiquen datos mediante el nuevo marco

de trabajo de cuadro de dilogo.

Recursos adicionales

Este laboratorio incluye los siguientes recursos adicionales:

Este manual del

laboratorio.

SPCHOL308_Manual_CS.docx Este documento.

Cdigo fuente. Completed\CS\Ex1

Completed\CS\Ex2

Cdigo fuente del

laboratorio completado

en C#.

Recursos Resource\CS

Recursos varios

usados a lo largo de

este laboratorio.

Introduccin

Iniciar sesin en la mquina virtual

Inicie sesin en la mquina virtual como el usuario siguiente:

Nombre de usuario: Administrator Contrasea: pass@word1

Ubicaciones

Este laboratorio prctico contiene diversos recursos adicionales en ubicaciones establecidas. De forma

predeterminada, se asume que el directorio HOL base es C:\Content Packs\Packs\SharePoint 2010

Pgina 3

Developer Labs 1.0\Supporting Files\SPCHOL308.

La carpeta de trabajo predeterminada para este laboratorio es \SPHOLS\SPCHOL308.

Requisitos previos para el laboratorio

Vaya al directorio HOL base Supporting Files\SPCHOL308\Resources y ejecute el script de PowerShell optimize.ps1: 1. Haga clic con el botn secundario en optimize.ps1 y seleccione Ejecutar con PowerShell:

Figura 1 - Ejecutar el script de PowerShell

2. De esta forma se abrir la ventana de PowerShell para ejecutar el script. Espere mientras PowerShell completa la ejecucin del script y cierra la ventana de PowerShell (esto puede tardar varios minutos):

Figura 2 - Ventana de PowerShell donde se ejecuta el script

Copiar las muestras de cdigo desde un documento de Word

Solo ser posible copiar y pegar cdigo desde este documento de Word en Visual Studio para las secciones que contengan cdigo con formato, por ejemplo: Console.WriteLine("Esto es cdigo seguro!");

Pgina 4

Es posible que el cdigo que no se encuentre en estas secciones contenga Unicode o caracteres invisibles que no sean cdigo XML o C#/VB vlido, por ejemplo:

Console.WriteLine(Esto NO es cdigo seguro!!);

Fragmentos de cdigo

Usar tambin fragmentos de cdigo para insertar cdigo durante el laboratorio. Para usar el fragmento de cdigo necesario:

Haga clic con el botn secundario en el archivo de cdigo donde desea insertar el fragmento de cdigo.

Seleccione Insertar fragmento de cdigo...:

Figura 3 - Insertar fragmento de cdigo

Seleccione un fragmento de cdigo en la galera Mis fragmentos de cdigo

Pgina 5

Ejercicio 1: agregar un botn personalizado a la cinta de opciones

En este ejercicio, ampliaremos la cinta de opciones; para ello, agregaremos un botn personalizado que ejecute cdigo del lado del servidor. Podemos utilizar este enfoque para agregar o reemplazar botones, grupos, pestaas o incluso la cinta de opciones en su totalidad. Usaremos una solucin de Visual Studio 2010 y la implementaremos en el servidor local de SharePoint.

El botn har que emerja un cuadro de dilogo de JavaScript con el mensaje "Hello World".

Tarea 1: ver el sitio

Antes de agregar el botn a la cinta de opciones, veremos el sitio de forma que sepamos lo que va a mostrar la cinta de opciones como OOTB. 1. Abra Internet Explorer y vaya a http://intranet.contoso.com.

2. Seleccione la biblioteca Documentos compartidos en el men Documentos en la seccin de la zona de navegacin izquierda (inicio rpido).

Figura 4 - Documentos compartidos

Pgina 6

3. En la pestaa Herramientas de bibliotecas de la cinta de opciones que aparece, seleccione la pestaa Documentos.

Figura 5 - Pestaa Documentos

3. Esta cinta de opciones es la ubicacin donde aparecer el botn nuevo que se va a crear en este ejercicio.

Tarea 2: crear un proyecto vaco de SharePoint 2010

En esta tarea, se crear una solucin y un proyecto. Contendr el resto del trabajo de desarrollo de este ejercicio. 1. Abra Visual Studio 2010; para ello, vaya alMen Inicio | Todos los programas | Microsoft Visual

Studio 2010 | Microsoft Visual Studio 2010.

2. En el men, seleccione Archivo | Nuevo | Proyecto.

3. En el cuadro de dilogo Nuevo proyecto, expanda el men a la izquierda Plantillas instaladas para mostrar Visual C# | SharePoint | 2010 y elija el tipo de proyecto Proyecto vaco en la lista de tipos de proyecto que aparece en la parte central de la pantalla.

4. Escriba RibbonDemo en el cuadro de texto Nombre.

5. Escriba C:\SPHOLS\SPCHOL308\CS\Ex1 en el cuadro de texto Ubicacin.

6. Haga clic en Aceptar.

7. Aparecer un cuadro de dilogo del Asistente para personalizar SharePoint.

8. En el cuadro de texto "Qu sitio local desea usar para la depuracin?", escriba http://intranet.contoso.com

Pgina 7

9. Para los botones de opcin de Cul es el nivel de confianza de esta solucin de SharePoint?, elija Implementar como solucin de granja de servidores.

Figura 6 - Asistente para personalizar SharePoint

10. Presione Finalizar para completar el asistente.

11. Visual Studio 2010 generar las carpetas y los archivos de proyecto necesarios.

Pgina 8

12. El Explorador de soluciones debera tener un aspecto similar al de la imagen siguiente.

Figura 7 - Explorador de soluciones - RibbonDemo

Tarea 3: agregar el cdigo del botn al proyecto

1. Haga clic con el botn secundario en el proyecto RibbonDemo en el Explorador de soluciones y seleccione Agregar | Nuevo elemento....

2. En el cuadro de dilogo Agregar nuevo elemento, expanda el men de la izquierda Plantillas instaladas para mostrar Visual C# | SharePoint | 2010 y elija el tipo de elemento Elemento vaco que se encuentra en la parte central de la pantalla.

Pgina 9

3. Deje el Nombre como EmptyElement1.

Figura 8 - Agregar nuevo elemento - RibbonDemo

Pgina 10

4. Haga clic en Agregar para agregar el elemento al proyecto.

Figura 9 - Elementos XML

Elimine el contenido del archivo Elements.xml. 5. Agregue el siguiente cdigo al archivo Elements.xml. Puede encontrar una copia de este archivo

en la carpeta Supporting Files\SPCHOL308\Resources\CS.

Pgina 11

Fragmento de cdigo: Mis fragmentos de cdigo | spchol308_ex1_ xml

Figura 10 - Elementos XML actualizados

6. Tome nota de la referencia de la imagen, es la imagen que aparecer en la cinta de opciones; a continuacin, agregaremos esta imagen.

7. Asimismo, tome nota del CommandScript, se trata del JavaScript que se ejecutar cuando presione el botn que se va a agregar a la cinta de opciones.

Pgina 12

8. Agregue una carpeta a la solucin que se asigne a la carpeta Images en el director de diseos de SharePoint donde se podr guardar la imagen del botn. Haga clic con el botn secundario en el nodo del proyecto RibbonDemo y elija Agregar | Carpeta asignada "Images" de SharePoint

Figura 11 - Agregar carpeta asignada

Pgina 13

9. La carpeta Images aparece con una carpeta secundaria para el botn.

Figura 12 - Carpeta Images

10. Agregue el archivo DemoButton.png; para ello, haga clic con el botn derecho en la nueva carpeta RibbonDemo y elija Agregar | Elemento existente....

11. Cuando aparezca en cuadro de dilogo, vaya a C:\Content Packs\Packs\SharePoint 2010 Developer Labs 1.0\SUPPORTING FILES\SPCHOL308\Resources\ y seleccione el archivo DemoButton.png.

Figura 13 - Imagen de DemoButton

Pgina 14

Tarea 4: implementar la solucin

1. En el Explorador de soluciones, haga clic con el botn secundario en RibbonDemo y seleccione Implementar.

Figura 14 - Implementar la solucin

2. La solucin se implementar en el sitio de SharePoint.

3. Abra un explorador web y vaya al sitio de SharePoint local:

http://intranet.contoso.com

4. Si se le pide autenticacin, escriba los siguientes detalles:

Nombre de usuario: administrator

Contrasea: pass@word1

Pgina 15

5. En la zona de navegacin izquierda, haga clic en el vnculo Documentos compartidos para abrir la biblioteca Documentos compartidos.

Figura 15 - Vnculo de Documentos compartidos

6. Haga clic en la pestaa Documentos en la cinta de opciones de SharePoint.

Figura 16 - Pestaa Documentos

Pgina 16

7. Debera ver que se ha agregado el botn nuevo Demostracin de Hello World a la cinta de SharePoint.

Figura 17 - Botn Hello World

8. Haga clic en el botn Demostracin de Hello World en la cinta de opciones para que aparezca un cuadro de dilogo de JavaScript con Hello World.

Figura 18 - Demostracin de Hello World

Pgina 17

Acaba de comprobar cmo se agrega un botn personalizado nuevo y se ampla la cinta de SharePoint.

Ejercicio 2: obtener acceso a datos de lista con el MO cliente de JavaScript y mostrar un cuadro de dilogo

En SharePoint 2010, hay una gran cantidad de modelos de objetos que los programadores pueden usar para obtener acceso al servidor. El MO cliente es un modelo unificado que usa los mismos conceptos o similares en el servidor, a travs de servicios web y servicios WCF, a travs de una API cliente (JavaScript) y a travs de REST. Esto prepara el terreno para aplicaciones ms completas al simplificar drsticamente el acceso a los datos de SharePoint desde equipos cliente y otros equipos de la infraestructura. En este ejercicio, usaremos el modelo de objetos del lado del cliente EcmaScript para actualizar y leer los datos de lista dinmicamente. Tambin se muestra la nueva API de dilogos desde un script del lado del cliente. El modelo de objetos del lado del cliente de JavaScript permite a los programadores de JavaScript obtener acceso a objetos de SharePoint como sitio, web y lista (y mucho ms) desde JavaScript del lado del cliente.

Tarea 1: crear un proyecto nuevo y agregar un elemento web

En esta tarea, se crear una solucin y un proyecto. Contendr el resto del trabajo de desarrollo de este ejercicio. 1. Abra Visual Studio 2010; para ello, vaya al Men Inicio | Programas | Microsoft Visual Studio

2010 | Microsoft Visual Studio 2010.

2. En el men, seleccione Archivo | Nuevo | Proyecto.

3. En el cuadro de dilogo Nuevo proyecto, expanda el men a la izquierda Plantillas instaladas para mostrar Visual C# | SharePoint | 2010 y elija el tipo de proyecto Elemento web visual en la lista de tipos de proyecto que aparece en la parte central de la pantalla.

Pgina 18

4. Escriba ScriptOMandDialog en el cuadro de texto Nombre.

5. Escriba C:\SPHOLS\SPCHOL308\CS\Ex2 en el cuadro de texto Ubicacin.

Figura 19 - Cuadro de dilogo Nuevo proyecto

6. Haga clic en Aceptar.

Pgina 19

7. Aparecer un cuadro de dilogo del Asistente para la personalizacin de SharePoint.

8. En el cuadro Qu sitio local desea usar para la depuracin?, escriba http://intranet.contoso.com.

9. En los botones de opcin Cul es el nivel de confianza de esta solucin de SharePoint?, elija Implementar como solucin de granja de servidores.

Figura 20 - Asistente para personalizar SharePoint

10. Presione Finalizar para completar el asistente.

Pgina 20

11. Visual Studio crear la solucin ScriptOMandDialog y agregar los archivos necesarios..

Figura 21 - Explorador de soluciones con el proyecto de elemento web visual

12. En el Explorador de soluciones, haga doble clic en el archivo VisualWebPart1.webpart.

13. Establezca la propiedad Ttulo en ScriptOMandDialog.

14. Establezca la propiedad Descripcin en ScriptOMandDialog description.

Figura 22 - Archivo del elemento web visual

15. Guarde y cierre el archivo.

Pgina 21

Tarea 2: agregar cdigo de scripting para obtener acceso y presentar los datos de la lista de SharePoint.

1. En el Explorador de soluciones, haga doble clic en VisualWebPart1UserControl.ascx.

2. Agregue el siguiente cdigo de marcado al final del archivo.

Fragmento de cdigo: Mis fragmentos de cdigo | spchol308_ex2_ScriptTags 3. Agregue el siguiente cdigo de JavaScript en el bloque de script. Puede copiar y pegar la totalidad

de los bloques de cdigo siguientes o usar un fragmento de cdigo. Este cdigo declara variables importantes que el cdigo usar ms adelante y agrega la funcin Initialize(), a la cual se llamar tras cargar todos los objetos del lado del cliente de SharePoint.

/* Nombres de lista de SharePoint */

var ProjectListName = "Proyectos";

/* Nombres de campos de lista de SharePoint */

var ProjectNameField = "Ttulo"; var ProjectDescriptionField = "Descripcin";

/* Objetos de lista */

var projectsList;

/* variable que contiene elementos de lista de la lista de proyectos */

var projects;

/* objeto de contexto de cliente - se usa para acceder a los datos de SharePoint

*/

var context;

/* web (SPWeb) en la que se ejecuta nuestra pgina */

var web;

/* variable que contiene modalDialog para cerrar posteriormente */

var modalDialog;

/* se utiliza al crear un nuevo ListItem de proyecto. */

var projectListItem;

var copyOfAddProjectForm;

/* nuestro mtodo de inicio cuando se carga la pgina */

_spBodyOnLoadFunctionNames.push("Initialize()");

Fragmento de cdigo: Mis fragmentos de cdigo JScripto | spchol308_ex2_Jscript

Pgina 22

4. La funcin Initialize() recupera el objeto ClientContext de SharePoint, carga la lista de proyectos e inicializa los proyectos (elementos de la lista de proyectos).

/* Inicializar variables tiles y recuperar ClientContext */

function Initialize() {

/* Recupera el objeto ClientContext actual */

context = SP.ClientContext.get_current();

web = context.get_web();

// Obtener referencias de las listas que utilizaremos

projectsList = web.get_lists().getByTitle(ProjectListName);

var camlQuery = new SP.CamlQuery();

camlQuery.set_viewXml('');

projects = projectsList.getItems(camlQuery);

context.load(projects, 'Include(Ttulo, Descripcin)');

context.executeQueryAsync(onListsLoaded, OnError);

}

Pgina 23

5. La funcin Initialize() llama de forma asincrnica al evento onListsLoaded().

/* Controlador de eventos al que se llama al cargar la lista de proyectos

Este mtodo representa dinmicamente una tabla HTML para mostrar los datos de la

lista */

function onListsLoaded() {

// Obtener los elementos de lista de la lista de contactos

var projectTable = document.getElementById("tblProjectList");

// borrar la tabla

while (projectTable.rows.length > 0)

projectTable.deleteRow(projectTable.rows.length - 1);

var content;

var cell;

var tbo = document.createElement('tbody');

// Bucle para cada proyecto

var listItemEnumerator = projects.getEnumerator();

while (listItemEnumerator.moveNext()) {

// Crear una fila en la tabla para cada proyecto

var newTR = document.createElement('tr');

var projectLI = listItemEnumerator.get_current();

// get_item() recupera el valor listitem

var projectName =

projectLI.get_item(ProjectNameField);

var projectDesc =

projectLI.get_item(ProjectDescriptionField);

// agregar las celdas para la fila

cell = document.createElement('td');

content = document.createTextNode(projectName);

cell.appendChild(content);

newTR.appendChild(cell);

cell = document.createElement('td');

content = document.createTextNode(projectDesc);

cell.appendChild(content);

newTR.appendChild(cell);

// Agregar la fila al cuerpo de la tabla

tbo.appendChild(newTR);

}

// agregar el cuerpo de la tabla a la tabla

projectTable.appendChild(tbo);

}

Pgina 24

6. La funcin ShowAddProject() encuentra el elemento divAddProjectElement (que se agregar ms tarde) y lo muestra mediante el mtodo ModalDialog.showModalDialog().

/* Ocultar el cuadro de dilogo modal y mostrar la interfaz de usuario

actualizada */

function onProjectAdded() {

HideAddProject();

}

/* Mostrar un elemento modalDialog con el contenido de divAddProject */

function ShowAddProject() {

var divAddProject = document.getElementById("divAddProject");

// showModalDialog quita el elemento que se le ha pasado desde el DOM

// por lo que guardamos una copia y la agregamos ms tarde

copyOfAddProjectForm = divAddProject.cloneNode(true);

divAddProject.style.display = "block";

var options = { html: divAddProject, width: 200, height: 350,

dialogReturnValueCallback: ReAddClonedForm };

modalDialog = SP.UI.ModalDialog.showModalDialog(options);

}

/* Cerrar el elemento modalDialog */

function HideAddProject() {

modalDialog.close();

Initialize();

}

function ReAddClonedForm() {

document.body.appendChild(copyOfAddProjectForm);

}

7. La funcin AddProject() crear un elemento de lista nueva en la lista de proyectos.

/* Llamado desde el cuadro de dilogo modal de Agregar proyecto

Crea un elemento de lista en la lista del proyecto */

function AddProject() {

var lici1 = new SP.ListItemCreationInformation();

projectListItem = projectsList.addItem(lici1);

projectListItem.set_item(ProjectNameField, getTBValue("txtProjectName"));

projectListItem.set_item(ProjectDescriptionField,

getTBValue("txtDescription"));

projectListItem.update();

context.load(projectListItem);

// Ejecutar la consulta para crear la lista del proyecto

// onProjectAdded es nuestro mtodo de devolucin de llamada al que se llama

cuando finaliza la llamada al servidor

context.executeQueryAysnc(onProjectAdded, OnError);

}

Pgina 25

8. Funciones auxiliares / Controlador de errores

/* Controlador de errores */

function OnError(sender, args) {

var spnError = document.getElementById("spnError");

spnError.innerHTML = args.get_message();

}

/* Funcin auxiliar: mtodo abreviado para la propiedad de valor de un cuadro de

texto */

function getTBValue(elID) {

var el = document.getElementById(elID);

return el.value;

}

9. Agregue el siguiente cdigo HTML debajo de la etiqueta del bloque de script ().

tblProjectList es una tabla vaca a la que el script agrega dinmicamente filas o columnas para cada proyecto. Tambin hay un vnculo para invocar a ShowAddProject() que lanzar un cuadro de dilogo modal. El marcado dentro de divAddProject se mostrar en un dilogo modal que permitir al usuario escribir datos para crear un proyecto nuevo.

Project List

Agregar un proyecto

Informacin de proyecto

Nombre

Descripcin

Fragmento de cdigo: Mis fragmentos de cdigo HTML | spchol308_ex2_HTML

Pgina 26

Tarea 3: implementar y probar el elemento web

1. Haga clic con el botn secundario en el nodo del proyecto ScriptOMandDialog y seleccione Implementar.

Figura 23 - Implementar

2. Cuando se completa la implementacin (puede ver el progreso en la ventana de resultados y comprobar el estado actualizado en la barra de estado), agregue el elemento web a la pgina de elementos web:

3. Abra Internet Explorer y vaya a http://intranet.contoso.com.

4. Haga clic en el icono Editar para ver la cinta de opciones de edicin.

Figura 24 Icono Editar

Pgina 27

5. Seleccione Insertar en la pestaa Herramientas de edicin en la cinta de opciones de edicin.

Figura 24 - Pestaa Formato de texto

6. Haga clic en el botn Elemento web en la cinta de opciones Insertar.

7. Elija Personalizar en la columna Categoras.

8. Elija ScriptOMandDialog en la columna Elementos web.

Figura 25 - Insertar elemento web

Pgina 28

9. Haga clic en el botn Agregar en la parte inferior derecha de la zona para agregar del elemento web.

Figura 26 - Elemento web ScriptOMandDialog

10. Haga clic en Pgina en la cinta de opciones.

11. Haga clic en la flecha hacia abajo que se encuentra debajo del botn Guardar y cerrar en la cinta y, a continuacin, seleccione Detener la edicin.

12. Haga clic en S cuando vea el cuadro de dilogo Guardar cambios. Ahora, debera ver el elemento web ScriptOMandDialog en la pgina.

Pgina 29

13. Haga clic en el vnculo Agregar un proyecto (directamente bajo el nuevo elemento web),complete los campos Nombre y Descripcin como quiera y, a continuacin, haga clic en el botn Add New Project.

Figura 27 - Agregar un proyecto

14. Debera aparecer el nuevo proyecto con los detalles especificados en la lista Proyectos.

Acaba de comprobar cmo se usa el modelo de objetos cliente de JavaScript y de generar e implementar un elemento web visual.

Pgina 30

Resumen del laboratorio

En este laboratorio, ha realizado los ejercicios siguientes:

Crear un proyecto de SharePoint 2010 de tipo Vaco.

Agregar un archivo Element.xml a un proyecto de SharePoint que contiene una accin

personalizada para ampliar el men de la cinta de opciones.

Agregar una carpeta Images de SharePoint asignada que est asociada a la carpeta Images en

el directorio de SharePoint 2010.

Implementar el tipo de proyecto Vaco con una caracterstica en el sitio de SharePoint.

Crear un tipo de proyecto de SharePoint 2010 nuevo de un elemento web visual.

Agregar script del lado del cliente al elemento web para presentar datos de lista.

Agregar script del lado del cliente y cdigo HTML al elemento web para utilizar el marco de

trabajo de cuadro de dilogo.

Implementar una solucin de elemento web visual de SharePoint.

hol10 manual cs

Documents