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 - VB

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.

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 .............................................................................................. 9
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. . 20
Tarea 3: implementar y probar el elemento web ............................................................................................. 26
Resumen del laboratorio ...................................................................................................................................... 31

Pgina 1

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_VB.docx

Este documento.

Cdigo fuente.

Completed\VB\Ex1
Completed\VB\Ex2

Cdigo fuente del laboratorio

completado en VB.

Recursos

Resources\VB

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 es C:\Content Packs\Packs\SharePoint 2010
Developer Labs 1.0\SUPPORTING FILES\SPCHOL308.
La carpeta de trabajo predeterminada para este laboratorio es \SPHOLS\SPCHOL308.
Pgina 2

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 hasta que se
complete la ejecucin del script de PowerShell y se cierre la ventana de PowerShell:

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 3

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 4

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 5

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 al Men 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 Basic | 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. Asigne al proyecto el nombre RibbonDemo.
5. Cambie la ubicacin a C:\SPHOLS\SPCHOL308\VB\Ex1
6. Haga clic en Aceptar.

Pgina 6

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. 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.

Pgina 7

11. Visual Studio agregar la solucin nueva.

Figura 7 - Explorador de soluciones de RibbonDemo

Pgina 8

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 elemente, expanda Plantillas instaladas en el men de la

izquierda para mostrar Elementos comunes | SharePoint | 2010 y elija el tipo de elemento
Elemento vaco que se encuentra en la parte central de la pantalla.

3. Deje el Nombre como EmptyElement1.

Figura 8 - Agregar nuevo elemento - RibbonDemo

Pgina 9

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

Figura 9 - Elementos XML

5. Elimine el contenido del archivo Elements.xml.

6. Agregue el siguiente cdigo al archivo Elements.xml. Puede encontrar una copia de este archivo
en la carpeta Supporting Files\SPCHOL308\Resources\VB.
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction
Id="DemoHelloWorldButton"
RegistrationId="101"
RegistrationType="List"
Location="CommandUI.Ribbon"
Sequence="5"
Title="Hello World">
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition
Location="Ribbon.Documents.Manage.Controls._children">
<Button
Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton"
Alt="Botn de cinta de Hello World"
Sequence="10"
Command="Demo_HelloWorld"
Pgina 10

Image32by32="/_layouts/images/ribbondemo/demobutton.png"
LabelText="Demostracin de Hello World"
TemplateAlias="o1"/>
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler
Command="Demo_HelloWorld"
CommandAction="javascript:alert('Hello World!');"
/>
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements>
Fragmento de cdigo: Mis fragmentos de cdigo | spchol308_ex1_ xml

Figura 10 - Elementos XML actualizados

7. Tome nota de la referencia de la imagen, es la imagen que aparecer en la cinta de opciones; a

continuacin, agregaremos esta imagen.
Pgina 11

8. 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.
9. 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 12

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

Figura 12 - Carpeta Images

11. Agregue el archivo DemoButton.png; para ello, haga clic con el botn derecho en la nueva
carpeta RibbonDemo y elija Agregar | Elemento existente....
12. 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 13

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 14

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 15

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

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

SharePoint.
Pgina 16

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 | 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 Basic | 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 17

4. Asigne al proyecto el nombre ScriptOMandDialog.

5. Cambie la ubicacin a C:\SPHOLS\SPCHOL308\VB\Ex2.

Figura 19 - Cuadro de dilogo Nuevo proyecto

6. Haga clic en Aceptar.

Pgina 18

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

8. En el cuadro Qu sitio local desea usar para la depuracin?, escriba
http://intranet.contoso.com.
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 20 - Asistente para personalizar SharePoint

10. Presione Finalizar para completar el asistente.

Pgina 19

11. Visual Studio crear la solucin ScriptOMandDialog.

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.

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.
<SharePoint:ScriptLink ID="ScriptLink1" runat="server" Name="sp.js"
Localizable="false" LoadAfterUI="true" />
<script language="ecmascript" type="text/ecmascript">
</script>

Fragmento de cdigo: Mis fragmentos de cdigo | spchol308_ex2_ScriptTags

Pgina 20

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 21

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('<View><Query/></View>');
projects = projectsList.getItems(camlQuery);
context.load(projects, 'Include(Ttulo, Descripcin)');
context.executeQueryAsync(onListsLoaded, OnError);
}

Pgina 22

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 23

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.executeQuery(onProjectAdded, OnError);
}

Pgina 24

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 (</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.
<div style="font-weight: bold">Project List</div>
<br />
<table id="tblProjectList" style="border: solid 1px silver">
</table>
<br />
<a href="javascript:ShowAddProject()">Agregar un proyecto</a>
<br />
<div id="divAddProject" style="display: none; padding: 5px">
<b>Informacin de proyecto</b><br /><br />
Nombre <br />
<input type="text" id="txtProjectName" /><br />
Descripcin<br />
<input type="text" id="txtDescription" /><br />
<span id="spnError" style="color: Red" /><br />
<input type="button" value="Agregar nuevo proyecto" onclick="AddProject()" />
</div>

Fragmento de cdigo: Mis fragmentos de cdigo HTML | spchol308_ex2_HTML

Pgina 25

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.

Pgina 26

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

Figura 24 - Icono Editar

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.

Pgina 27

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 el botn Detener edicin.

11. Es posible que deba actualizar la pgina para ver que el elemento web ScriptOMandDialog
muestra la lista Proyectos tal como aparece a continuacin.

Pgina 29

12. Haga clic en el vnculo Agregar un proyecto y complete los campos Nombre y Descripcin, a
continuacin, haga clic en Add New Project.

Figura 27 - Agregar un proyecto

13. 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 Elements.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.

Pgina 31