SharePoint 2010 For Developers

Sparked goes SharePoint 2010 for developers

Who are we?
2
Roel Hans Bethelehem
SharePoint Solution Architect
Work experience: WUR, Sara Lee, Flora Holland
@rbethleh
E-Mail: roelhans.bethlehem@sparked.nl
Alexander Meijers
SharePoint Solution Architect
Work experience: Facilicom, Logica Intranet
Twitter: @ameijers
E-Mail: alexander.meijers@sparked.nl

SharePoint 2010 Developer Overview

Challenges
4
What’s new?
UX Platform
The Ribbon
The Toolbar
Dialog Framework
Tools
Web Part Development

What’s new?
5

Microsoft SharePoint 2010
Improvements to UI and accessibility features
Better tools for developers and designers
End-to-end integration with PowerShell
Improvements to lists and events
New client-side object model and runtime
Enhanced support for developing workflow applications
Development can now be done on client OS
New connector framework enhances Search infrastructure
User solutions and partially trusted code (sandboxing)
What’s new?

UX Platform
7

Changes to the UX Platform
8
General platform improvements
Masterpages (dynamic) + _layouts
The Ribbon
Status Bar/Notification Area
Dialog Framework
New Theming Infrastructure
Silverlight Web Part
Client OM
UX Platform
Philosophy: Allow users to complete tasks quickly in context with a simple interface and reusable controls

Key Platform Investments
9
Standards and Refactoring
Targeting WCAG 2.0 AA standards
Reduced use of tables
Cross-browser support: IE 7+, Firefox, Safari
Visual upgrade
UI upgrade separated from database upgrade (can keep V12 UI while running on V14)
Enhanced vs2010 project templates
Client OM
JavaScript and Silverlight wrappers for SharePoint OM
UX Platform

Refactoring
10
CSS
Split into multiple files, only download what’s necessary for the page
Existing sites based on SharePoint CSS will need to be redesigned
JavaScript
Script On Demand allows delaying JavaScript download until it’s needed
Debug versions of files show clear JavaScript before optimizing
SP.* “namespace” an effort to draw a line between “public” and “internal” JavaScript
UX Platform

Masterpages + _layouts
11
Application pages (_layouts) use a dynamic masterpage based on what site they’re accessed from
Can use “~masterurl/default.master” or “~masterurl/custom.master” tokens to reference System or Site masterpage
Page must derive from Microsoft.SharePoint.WebControls.LayoutsPageBase
Exceptions: Pages which reference simple.master
accessdenied, confirmation, error, login, reqacc, signout, webdeleted
These seven pages can be replaced using OM or PowerShell
UX Platform

Silverlight Web Part & Client OM
12
Allows users to quickly add Silverlight apps to SharePoint
Client OM allows Silverlight or JavaScript to access SharePoint data
Fluid Application Model
App can be hosted outside of SharePoint
Still access SharePoint data if given permission
UX Platform

The Ribbon
13

Design
14
Fixed position at top of page – doesn’t scroll out of view
Contextual tab model
Controls: near parity with Client Ribbon
Super tool tips
The Ribbon

Controls
Out of the Box
Not in the Box, but…
Button
Split button menu
Static
Stated
Drop down & Flyout menus
Customizable
Hierarchical
Checkbox
ToggleButton
Label
Textbox
Combo box
Spinner
Table control
Color picker
In-Ribbon gallery control
Drop down grids can give same functionality
Can also “fake” it with buttons in the Ribbon
15
The Ribbon

Extensibility
16
Fully extensible
Remove any of the OOB controls
Add new controls anywhere in the Ribbon
Potential to replace the Ribbon entirely
Backwards compatible
Custom Actions added to Toolbars in v3 will automatically show up in the “Custom Commands” tab in the Ribbon
Adding a control to the Ribbon:
Ribbon XML defines the UI of the control
Simple behavior can be defined declaratively alongside Ribbon XML, more complicated behavior requires a JavaScript Page Component
The Ribbon

The Toolbar
17

Status Bar/Notification Area
Give the user information in context without distracting them
Status bar should be used to display persistent information such as page status or version
Notifications should be used for transient or semi-transient messages
The Toolbar

Persistent / Transient Information
19
Persistent information
Show below Ribbon
Will display 1 of 5 pre-set background colors depending on importance
Add / Remove messages with Javascript API
Messsage is HTML and can include links / icons
Transient information
Appears on the right side of the page underneath the Ribbon
Default message will last 5 seconds
Add / Remove messages with Javascript API
Messsage is HTML and can include links / icons
Sticky parameter available
The Toolbar

Toolbar code examples
20
Status APIs:
SP.UI.Status.addStatus(strTitle, strHtml, atBeginning)
SP.UI.Status.updateStatus(sid, strHtml)
SP.UI.Status.removeStatus(sid)
SP.UI.Status.removeAllStatus(hide)
SP.UI.Status.setStatusPriColor(sid, strColor)
Notification APIs:
SP.UI.Notify.addNotification(strHtml, bSticky, tooltip, onclickHandler)
SP.UI.Notify.removeNotification(id)
The Toolbar

Dialog Framework
21

Keeping the user in the context
Dialog Platform
V4 UI

Design
23
Reduce page transitions/keep user in context
Contents load in an iframe inside a floating div
Dialogs are modal
Allow dragging within browser window
Can be maximized to size of browser window
Dialog Framework

Extensibility
24
JavaScript API to control dialogs
Contents can be a page (URL) or DOMElement
Optional parameters to set title, width, height, whether or not to launch maximized, etc
Design a page once to display both inside a dialog and as a full page
CSS class “s4-notdlg” can be used to hide UI when a page is shown within a dialog
Dialog Framework

Dialog code example
25
function myCallback(dialogResult, returnValue)
{
alert(“Hello World!”);
}
var options =
{
url: “/_layouts/somepage.aspx”, width: 500, dialogReturnValueCallback:myCallback
};
SP.UI.ModalDialog.showModalDialog(options);
Dialog Framework

Theming Engine
26

Easy to use
Uses *.thmx file format – can be generated by client Office programs (PowerPoint)
Parses CSS for comment-style markup, replaces colors/fonts and recolors images as directed
Automatically generates new CSS for each theme when it is applied
Automatically populates theme list from Theme Gallery files
Theming Engine

How does it work?
28
Theming Engine
ThemeWeb.aspx
XML
CSS
PNG
CSS
PNG
Automatically Populates
THMX File
12 Colors
2 Fonts
User Clicks Apply
NEW
NEW
NEW
Style Library
Located on file system or in database in themable locations – includes 3rd party CSS in same locations
Colors and fonts in originals are replaced by those specified in the THMX per annotation in CSS files
Annotated CSS File
NEWCSS File

Theming engine example
29
/* [ReplaceColor(themeColor:"Light1")] */
background-color:#fff;
/* [ReplaceColor(themeColor:"Light2",themeShade:"0.02")] */ border:1px solid #f1f1f2;
/* [RecolorImage(themeColor:"Accent6",method:"Tinting")] */ background-image:url("/_layouts/images/selectednav.gif");
/* [RecolorImage(themeColor:"Accent6-Darker",method:"Tinting", includeRectangle:{x:0,y:322,width:1,height:22})] */ background:url("/_layouts/images/bgximg.png");
Theming engine

Tools
30

Developer Dashboard
SharePoint 2010 delivers a developer dashboard which provides the developer useful information
How long did the request take to run?
What event handlers were fired?
In what sequence did these events handlers fire?
Alpha release needs PowerShell to enable this dashboard
Set –SPFarm –DeveloperDashboardEnabled
Set –SPFarm –DeveloperDashboardEnabled $false
Tools

PowerShell
32
This tool is a modern replacement for the CMD (command) shell.
PowerShell support effectively replaces STSADM.EXE
SharePoint admins/devs must learn PowerShell basics
You can write powerful scripts against WSS OM
You can develop custom PowerShell snap-ins
Tools

SharePoint Designer
33
SharePoint Designer has gone through many significant changes.
SharePoint objects such as lists and workflow associations are seen as first class objects in the new UI
Each SharePoint object has a summary page
More powerful workflow Designer
Reusable workflows
Prototypes created in SharePoint Designer can be migrated into Visual Studio 2010 (import / Export)
Workflow design in Visio 2010 possible
SharePoint Designer work exported to .WSP files (possible to import into Visual Studio 2010)
Tools

VS2010 SharePoint Tools
34
End-to-end SharePoint 2010 developer story
SharePoint Explorer for site exploration
SharePoint 2010 project and item templates
Visual designers for core scenarios
Migration path for Visual Studio 2008 & WSS 3.0
Extensible by 3rd party developers (e.g. STSDEV)
Benefits to SharePoint Developers
Abstracts away details of RootFiles directory
Abstracts ways details of building .WSP file
Lessens / eliminates need for external utilities
Tools

SharePoint Explorer
35
Add-in for Server Explorer Window
Easy way to examine site artifacts
Quick way to launch browser into site
SharePoint Explorer Extensibility
Developer can write add-ins to populate nodes and provide contextual menu commands
Tools

SharePoint 2010 Project Templates & Structure
36
Tools
All projects built using standard structure
Common Project Properties
Project file, Project Folder, Assembly Deployment Target, Sandboxed solution, Site URL, Startup Item
Standard Project Nodes
Properties, References, Features, Package, SharePoint Project Items (SPIs)

SharePoint Project Items
37
Projects are built with SharePoint Items (SPIs)
SPI is a logical collection of project files (e.g. Web Parts, List definitions, Workflows, etc)
Each SPI has folder with SPI files
Compilation & deployment details abstracted away through SPI file properties
Tools

Mapped Folders
38
Mapped Folders used to deploy to RootFiles
Layouts folder maps to virtual path /_layouts
Images folder maps to virtual path /_layouts
Layouts folder key to creating application pages
Best practice to create solution-specific folders inside Layouts folder
Tools

Feature node and Feature Designer
39
Feature node contains one or more features
Feature designer provides design mode and XML text mode
Customize feature properties in designer and/or property grid
Use Context menu of feature node to add feature event receiver
Feature designer allows adding/removing SPIs
Customize feature activation dependencies
Tools

Project Packaging
40
Project packaging based on Package.wspdef
Modify package properties with designer or XML text
Modify package properties using property grid
Designer allows you to add / remove features and SPIs
Tools

41

The past and the future
What is the same?
ASP.NET Web Parts are preferred
WSS Web Parts are being phased out
Code Access Security
What is changed?
Emphasis on feature deployed .webparts
More functionality offered to ASP.NET Web Parts
what is new?
Versioning
AJAX
Client Object Model
Cross-site scripting safeguards
Sandboxed solutions
Built on User Controls
Designed for Farm solution deployment
Great for leveraging the designer

Source of content
43
This presentation is based on presentations and demos provided by the Microsoft SharePoint Conference 2009.
Our gratitude goes out to Microsoft and the SharePoint Experts who made this happen.

http://www.slideshare.net	193
http://blog.sparked.nl	20
http://lightweb.zumtobelgroup.com	12
http://server2	5
http://lv55.wikispaces.com	5
http://sharepointbliss.blogspot.com	2
http://mosskaboss.blogspot.com	1
http://webcache.googleusercontent.com	1
http://mosskaboss.blogspot.in	1

SharePoint 2010 For Developers

by Sparked

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 240

Statistics

SharePoint 2010 For Developers Presentation Transcript