Exercises

hushedsnailInternet and Web Development

Nov 12, 2013 (3 years and 11 months ago)

81 views





Hands
-
On Lab

Enhancing Client
-
side Capabilities



Lab version:



1.0.0

Last updated:


11/13/2013










CONTENTS


OVERVIEW

................................
................................
................................
................................
...................

3

EXERCISE 1: INTERACT
ING WITH THE RIBBON

................................
................................
....................

4

Task 1


Preparing

................................
................................
................................
................................
.

4

Task 2


Interacting With the Ribbon

................................
................................
................................
...

6

Exercise 1 Verification

................................
................................
................................
...........................

8

EXERCISE 2: USING TH
E DIALOG FRAMEWORK

................................
................................
...................

8

Task 1


Opening a Page in a Modal Dialog

................................
................................
..........................

8

Exercise 2 Verification

................................
................................
................................
...........................

9

EXERCISE 3: WRITING
TO THE STATUS BAR
................................
................................
.........................

9

Task 1


Writing to the Status Bar
................................
................................
................................
.......

10

Exercise 3 Verification

................................
................................
................................
.........................

10

EXERCISE 4: NOTIFY T
HE USER

................................
................................
................................
............

11

Task 1


Showing a Notification Message

................................
................................
...........................

11

Exercise 4 Verification

................................
................................
................................
.........................

12

SUMM
ARY

................................
................................
................................
................................
..................

12



Overview

SharePoint 2010 includes many new features

to en
hance the experience of end users.
This lab will
explore some of these and how Silverlight

can play an integral role in making SharePoint

more accessible
and user
-
friendly.

Objectives

This lab will demonstrate how to
integrate

SharePoint
with:



the Ribbon



the Dialog framework



the Status Bar



the Notification Area


System Requirements

You must
have the following items to complete this lab:



2010 Information Worker Demonstration and Evaluation Virtual Machine



Microsoft Visual Studio 2010



Silverlight web part extension for Visual Studio



Silverlight 4 Toolkit


Setup

You must perform the following
steps to prepare your computer for this lab
..
.

1.

Download the
2010 Information Worker Demonstration and Evaluation Virtual Machine

from
http://tinyurl.com/2avoc4b

and create the Hyper
-
V image.

2.

Install the
Visual
Studio 2010 Silverlight Web Part
. The Silverlight Web Part is an add
-
on to
Visual Studio 2010 and can be downloaded from
http://code.msdn.microsoft.com/vsixforsp

3.

Ensure that the latest version of Sil
verlight 4 is installed by visiting
http://www.silverlight.net


4.

Install the
Silverlight 4 Toolkit

from here:
http://silverlight.codeplex.com/

5.

Run the
SetupLab.cmd

file from
the
<INSTALL>
\
Labs
\
EnhancingClientsideCapabilities
\
Source
\
Begin

folder to establish the
SharePoint environment necessary for this lab
.


Exercises

This Hands
-
On Lab
encompasses

the following exercises:

1.

Interacting with t
he Ribbon

2.

The Dialog
framework

3.

The Status Bar

4.

The Notification Area



Estimated time to complete this lab:
45

minutes
.

Starting Materials

This
Hands
-
On Lab

includes the following starting materials.



Visual Studio solutions.
The
lab

provides the following Visual Studio solutions that you can use
as starting point for the exercise
s
.



\
Labs
\
EnhancingClientsideCapabilities
\
Source
\
Begin
\
Ribbon
\
EnhancingClientSide
.
sln
:

This solution
contains the initial starting point for all of the exerci
ses in this lab.

Note:

Inside
each
exercise

folder
,

you will find an

end

folder
containing a
solution
with the
completed lab exercise
.


Exercise 1:

Interacting with the Ribbon

This exercise introduces the

new Ribbon control in SP 2010 and walks through the process of integrating
it with Silverlight.

The starter solution is set up only to contain the basic project structure required for
this exercise as well as the non
-
coding elements necessary to jump ri
ght in and get started.

Task 1


Prepari
n
g

In this task, you will open the starter solution in VS 2010 and explore the environment to understand
what has been done to get things set up for the rest of the exercise.

1.

Using Visual Studio 2010, open the star
ter solution named
EnhancingClientSide

from the
<Install>
\
Labs
\
EnhancingClientsideCapabilities
\
source
\
begin
\

folder. Solution Explorer
should look like this:


Figure 1

Solution Explorer


2.

Notice that there are two projects in this solution:

a.

EnhancingClientSide



this is the actual project that will be deployed to SharePoint. It is
an
Empty SharePoint Project

with a new project item added to it
-

the
Ribbon

item just
above
key.snk

in the picture. The
Ribbon project item contains the XML nece
ssary to
add our custom extensions into the Ribbon
.

b.

SilverlightApplication1



this is the Silverlight project in which we will build
our
Silverlight application. The output of this project is packaged with the output of the
Ribbon

project and deployed to
SharePoint.

3.

Double
-
click on the
Properties

node in Solution Explorer underneath the
EnhancingClientSide

project and then open the
SharePoint

tab. Notice that the checkbox
next to
Enable Silverlight debugging

is

selected. This is necessary
if we need

to s
tep through
our code later on. Close the properties pane.

4.

[Optional] If desired, explore the d
ifferent files in both projects
. Some of these files and/or
the content in the files are used in later Exercises.

5.

To finish exploring and see the results of wha
t has been set up for you, hit the
F5

key to
deploy and activate the starter solution. After Visual Studio launches the browser, navigate
to
http://intranet.contoso.com/sites/EnhancingClient/SitePages/SilverlightApplication1WebPar
tPage.aspx
.
Your page should look like this:




Figu
re 2

Silverlight application


6.

All of the

Silverlight
UI elements are shown on the page, but they are not yet functional. You
will add the functionality throughout the rest of this lab.


Task 2



Interacting
W
ith the Ribbon

In this task you will
add the co
de necessary to call into Silverlight when a button is clicked on the Ribbon.

1.

In Solution Explorer,

open the Ribbon SPI and then double
-
click on the file
Elements.xml

to
edit it.

2.

Find the empty CommandAction on
line 33

and add the following code

inside the

quotation
marks

after the equals sign:

JavaScript

javascript:
var SLId = 'g_c24198d9_d504_4132_b56c_585e456d8855'; var SLPlugin
= document.getElementById('SilverlightObjectTag_WebPartctl00_m_' + SLId);
var retVal = SLPlugin.Content.Page.CallFromRibbon
();


(Enter this code all as one line)

This is the code that will be called when the Ribbon button defined in this file is clicked.
It finds
the Silverlight Plugin by ID and then calls the method that we will be exposing as a scriptable
member.

3.

Take a few

moments to explore the XML here

-
it is u
sed to define a new group and button in
the Ribbon.

4.

Open the file
MainPage.xaml.cs

from Solution Explorer and locate the method
CallFr
o
mRibbon

on
line 28
.

5.

Add the following attribute directly above the method signa
ture (on line 27):

C#

[ScriptableMember]


6.

This attribute is what makes this managed code method available to be called from
JavaScript.

7.

Position your cursor on
line 23

inside the MainPage constructor, just after the
InitializeComponent call and add the fol
lowing code:

C#

HtmlPage
.RegisterScriptableObject(
"Page"
,
this
);


8.

This code registers our class with the HTMLBridge so that it is exposed to JavaScript to call
any exposed methods.

9.

This

finishe
s

the coding for this exercise so go ahead and hit
F5

to test out the code. When
the browser launches, navigate to
http://intranet.contoso.com/sites/EnhancingClient/SitePages/SilverlightApplic
ation1WebPar
tPage.aspx
.

10.

After the page loads, click on the
Page tab

in the Ribbon, and then click the
Call Silverlight

button in the SPOTW group:



Figure 3

Call Silverlight button


11.

The JavaScript used by the custom Ribbon button calls through the
HTMLBridge into
Silverlight and runs the managed code that writes a text message into the Silverlight frame:



Figure 4

Silverlight frame



Exercise 1 Verification

In order to verify that you have correctly performed all steps of exercise

1
, proceed as fo
llows:

Verification 1

In this verification
, you can compare the anticipated output shown in step
11

with the actual output
shown on your screen.


If the two match, you have completed the exercise
successfully.

Exercise 2: Using the Dialog Framework

This exercise introduces the new
dialog framework in SP 2010 and demonstrates using it from Silverlight


Task 1


Open
ing

a Page in a Modal Dialog

In this task, you will
ad
d a line of code to the SL code
behind to
open a page in a dialog box.

1.

From
Solution

Explorer,

open the file

MainPage.xaml.cs

and locate the method
buttonDialog_Click
.

2.

Add the following code:

C#

HtmlPage
.Window.Eval(JS);


This code uses the HTMLBridge to run
the JavaScript code that is stored in the JavaScript
variable declared in the method already. Rather than having you type all of the JavaScript code,
simply take a minute and review it. Notice the DialogOptions object and the options used to
define the d
ialog box. Notice also the declaration for the callback method
modalDialogClosedCallback

3.

This finishe
s

the coding for this exercise so go ahead and hit
F5

to test out the code. When
the browser launches, navigate to
http://intranet.contoso.com/sites/EnhancingClient/SitePages/SilverlightApplication1WebPar
tPage.aspx

4.

After the page loads, click on the
Dialog

button inside the Silverlight contro
l (the yellow area
of the page). You should see the Site Settings page loaded inside a dialog box:



Figure 5

Site Settings dialog box


5.

Close the dialog box by clicking the
X

in the top right corner. You will now see the dialog box
from the
modalDialogClosedCallback

method defined in JavaScript:


Figure 6

Message from webpage




Exercise 2 Verification

In order to verify that you have correctly performed all steps of exercise

2
, proceed as follows:

Verification 1

In this verification, you ca
n compare the anticipated output shown in step
s 4 and
5

with the actual
output shown on your screen. If the two match, you have completed the exercise successfully.

Exercise 3: Writing to the Status Bar

This exercise introduces the new status bar in SP 2010 and demonstrates using it from Silverlight

Task 1


Writing

to the Status B
ar

In this task, you will add a line of code to the SL codebehind to write to the status bar.

1.

From Solution Explorer, open t
he file
MainPage.xaml.cs

and locate the method
buttonStatus_Click
.

2.

Add the following code:

C#

HtmlPage
.Window.Eval(JS);


This code uses the HTMLBridge

to run the JavaScript code that is stored in the JavaScript
variable declared in the method already. Rather than having you type all of the JavaScript code,
simpl
y take a minute and review it.

3.

This finishe
s

the coding for this exercise so go ahead and hi
t
F5

to test out the code. When
the browser launches, navigate to
http://intranet.contoso.com/sites/EnhancingClient/SitePages/SilverlightAp
plication1WebPar
tPage.aspx

4.

After the page loads, click on the
Update Status

button inside the Silverlight control (the
yellow area of the page). You should see the status bar show up under the page header:



Figure 7

Status messages

There are two message
s written to the status bar and one of them sets the color of the status
bar to red. Both messages include a link to acknowledge the message and remove it from the
status bar.

5.

Close the status messages by clicking the
Close

link next to each, starting wit
h message #2.
Notice that the status bar goes back to its normal grey
-
blue color after closing the high
priority message.


Exercise 3 Verification

In order to verify that you have correctly performed all steps of exercise

3
, proceed as follows:

Verification 1

In this verification, you can compare the anticipated output shown in step 4 with the actual output
shown on your screen. If the two match, you have completed the exercise successfully.

Exercise 4: Notify the User

This exercise introduces the new notification capabilities in SP 2010 and demonstrates using it from
Silverlight

Task 1


Showing a Notification Message

In this task, you will add a line of code to the SL codebehind to show a transient message.

1.

From Solu
tion Explorer, open the file
MainPage.xaml.cs

and locate the method
buttonNotify
_Click
.

2.

Add the following code:

C#

string JS = @"SP.UI.Notify.addNotification('A notification from


Silverlight');";

HtmlPage
.Window.Eval(JS);


3.

This code uses the HTMLBri
dge to run the JavaScript code that is stored in the
JS

variable
.

4.

This finishe
s

the coding for this exercise so go ahead and hit
F5

to test out the code. When
the browser launches, navigate to
http://intranet.contoso.com/sites/EnhancingClient/SitePages/SilverlightApplication1WebPar
tPage.aspx

5.

After the page loads, click on the
Update Status

button inside the Silverlight control (the
yellow a
rea of the page). You should see the status bar show up under the page header:



Figure 8

Silverlight notification


6.

U
nlike the status bar, these do no
t need to be dismissed manually. Messages shown in the
Notification Area

will remain on screen for fi
ve

seconds and then fade away.


Exercise 4 Verification

In order to verify that you have correctly performed all steps of exercise

4
, proceed as follows:

Verification 1

In this verification, you can compare the anticipated output shown in step 4 with the
actual output
shown on your screen. If the two match, you have completed the exercise successfully.

Summary

In this lab you have seen how to:



Call into Silverlight from the Ribbon



Open pages in a modal dialog from Silverlight



Write status messages from
Silverlight



Write Notification messages from SL

The functionality demonstrated in this lab can be used to increase the usefulness a SharePoint site or
application by making it possible
to use the new capabilities of SharePoint from a custom Silverlight
app
lication.