Sparked goes SharePoint 2010 for developers<br />
Who are we?<br />2<br /><ul><li> 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</li></li></ul><li>SharePoint 2010 Developer Overview<br />
Challenges<br />4<br /><ul><li> What’s new?
 UX Platform
 The Ribbon
 The Toolbar
 Dialog Framework
 Tools
 Web Part Development</li></li></ul><li>What’s new?<br />5<br />
Microsoft SharePoint 2010<br /><ul><li>  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)</li></ul>What’s new?<br />
UX Platform<br />7<br />
Changes to the UX Platform<br />8<br /><ul><li> General platform improvements
Masterpages (dynamic) + _layouts
 The Ribbon
 Status Bar/Notification Area
 Dialog Framework
 New Theming Infrastructure
 Silverlight Web Part
 Client OM</li></ul>UX Platform<br />Philosophy: Allow users to complete tasks quickly in context with a simple interface ...
Key Platform Investments<br />9<br /><ul><li> 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
Upcoming SlideShare
Loading in...5
×

SharePoint 2010 For Developers

14,702

Published on

This presentation is aimed at developers that want to work with SharePoint 2010.

Published in: Technology
1 Comment
32 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,702
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
1
Likes
32
Embeds 0
No embeds

No notes for slide
  • IE 6 wordtnietmeerondersteund
  • Note: Currently with Beta1 there is no built-in UI component that allows a user to enable and disable the developer dashboard. However, you can create a simple Console application that does the trick.
  • Transcript of "SharePoint 2010 For Developers"

    1. 1. Sparked goes SharePoint 2010 for developers<br />
    2. 2. Who are we?<br />2<br /><ul><li> Roel Hans Bethelehem
    3. 3. SharePoint Solution Architect
    4. 4. Work experience: WUR, Sara Lee, Flora Holland
    5. 5. @rbethleh
    6. 6. E-Mail: roelhans.bethlehem@sparked.nl
    7. 7. Alexander Meijers
    8. 8. SharePoint Solution Architect
    9. 9. Work experience: Facilicom, Logica Intranet
    10. 10. Twitter: @ameijers
    11. 11. E-Mail: alexander.meijers@sparked.nl</li></li></ul><li>SharePoint 2010 Developer Overview<br />
    12. 12. Challenges<br />4<br /><ul><li> What’s new?
    13. 13. UX Platform
    14. 14. The Ribbon
    15. 15. The Toolbar
    16. 16. Dialog Framework
    17. 17. Tools
    18. 18. Web Part Development</li></li></ul><li>What’s new?<br />5<br />
    19. 19. Microsoft SharePoint 2010<br /><ul><li> Improvements to UI and accessibility features
    20. 20. Better tools for developers and designers
    21. 21. End-to-end integration with PowerShell
    22. 22. Improvements to lists and events
    23. 23. New client-side object model and runtime
    24. 24. Enhanced support for developing workflow applications
    25. 25. Development can now be done on client OS
    26. 26. New connector framework enhances Search infrastructure
    27. 27. User solutions and partially trusted code (sandboxing)</li></ul>What’s new?<br />
    28. 28. UX Platform<br />7<br />
    29. 29. Changes to the UX Platform<br />8<br /><ul><li> General platform improvements
    30. 30. Masterpages (dynamic) + _layouts
    31. 31. The Ribbon
    32. 32. Status Bar/Notification Area
    33. 33. Dialog Framework
    34. 34. New Theming Infrastructure
    35. 35. Silverlight Web Part
    36. 36. Client OM</li></ul>UX Platform<br />Philosophy: Allow users to complete tasks quickly in context with a simple interface and reusable controls<br />
    37. 37. Key Platform Investments<br />9<br /><ul><li> Standards and Refactoring
    38. 38. Targeting WCAG 2.0 AA standards
    39. 39. Reduced use of tables
    40. 40. Cross-browser support: IE 7+, Firefox, Safari
    41. 41. Visual upgrade
    42. 42. UI upgrade separated from database upgrade (can keep V12 UI while running on V14)
    43. 43. Enhanced vs2010 project templates
    44. 44. Client OM
    45. 45. JavaScript and Silverlight wrappers for SharePoint OM</li></ul>UX Platform<br />
    46. 46. Refactoring<br />10<br /><ul><li> CSS
    47. 47. Split into multiple files, only download what’s necessary for the page
    48. 48. Existing sites based on SharePoint CSS will need to be redesigned
    49. 49. JavaScript
    50. 50. Script On Demand allows delaying JavaScript download until it’s needed
    51. 51. Debug versions of files show clear JavaScript before optimizing
    52. 52. SP.* “namespace” an effort to draw a line between “public” and “internal” JavaScript</li></ul>UX Platform<br />
    53. 53. Masterpages + _layouts<br />11<br /><ul><li> Application pages (_layouts) use a dynamic masterpage based on what site they’re accessed from
    54. 54. Can use “~masterurl/default.master” or “~masterurl/custom.master” tokens to reference System or Site masterpage
    55. 55. Page must derive from Microsoft.SharePoint.WebControls.LayoutsPageBase
    56. 56. Exceptions: Pages which reference simple.master
    57. 57. accessdenied, confirmation, error, login, reqacc, signout, webdeleted
    58. 58. These seven pages can be replaced using OM or PowerShell</li></ul>UX Platform<br />
    59. 59. Silverlight Web Part & Client OM<br />12<br /><ul><li> Allows users to quickly add Silverlight apps to SharePoint
    60. 60. Client OM allows Silverlight or JavaScript to access SharePoint data
    61. 61. Fluid Application Model
    62. 62. App can be hosted outside of SharePoint
    63. 63. Still access SharePoint data if given permission</li></ul>UX Platform<br />
    64. 64. The Ribbon<br />13<br />
    65. 65. Design<br />14<br /><ul><li> Fixed position at top of page – doesn’t scroll out of view
    66. 66. Contextual tab model
    67. 67. Controls: near parity with Client Ribbon
    68. 68. Super tool tips</li></ul>The Ribbon<br />
    69. 69. Controls<br />Out of the Box<br />Not in the Box, but…<br /><ul><li> Button
    70. 70. Split button menu
    71. 71. Static
    72. 72. Stated
    73. 73. Drop down & Flyout menus
    74. 74. Customizable
    75. 75. Hierarchical
    76. 76. Checkbox
    77. 77. ToggleButton
    78. 78. Label
    79. 79. Textbox
    80. 80. Combo box
    81. 81. Spinner
    82. 82. Table control
    83. 83. Color picker
    84. 84. In-Ribbon gallery control
    85. 85. Drop down grids can give same functionality
    86. 86. Can also “fake” it with buttons in the Ribbon</li></ul>15<br />The Ribbon<br />
    87. 87. Extensibility<br />16<br /><ul><li>Fully extensible
    88. 88. Remove any of the OOB controls
    89. 89. Add new controls anywhere in the Ribbon
    90. 90. Potential to replace the Ribbon entirely
    91. 91. Backwards compatible
    92. 92. Custom Actions added to Toolbars in v3 will automatically show up in the “Custom Commands” tab in the Ribbon
    93. 93. Adding a control to the Ribbon:
    94. 94. Ribbon XML defines the UI of the control
    95. 95. Simple behavior can be defined declaratively alongside Ribbon XML, more complicated behavior requires a JavaScript Page Component</li></ul>The Ribbon<br />
    96. 96. The Toolbar<br />17<br />
    97. 97. Status Bar/Notification Area<br /><ul><li> Give the user information in context without distracting them
    98. 98. Status bar should be used to display persistent information such as page status or version
    99. 99. Notifications should be used for transient or semi-transient messages</li></ul>The Toolbar<br />
    100. 100. Persistent / Transient Information<br />19<br /><ul><li> Persistent information
    101. 101. Show below Ribbon
    102. 102. Will display 1 of 5 pre-set background colors depending on importance
    103. 103. Add / Remove messages with Javascript API
    104. 104. Messsage is HTML and can include links / icons
    105. 105. Transient information
    106. 106. Appears on the right side of the page underneath the Ribbon
    107. 107. Default message will last 5 seconds
    108. 108. Add / Remove messages with Javascript API
    109. 109. Messsage is HTML and can include links / icons
    110. 110. Sticky parameter available</li></ul>The Toolbar<br />
    111. 111. Toolbar code examples<br />20<br />Status APIs:<br />SP.UI.Status.addStatus(strTitle, strHtml, atBeginning)<br />SP.UI.Status.updateStatus(sid, strHtml)<br />SP.UI.Status.removeStatus(sid)<br />SP.UI.Status.removeAllStatus(hide)<br />SP.UI.Status.setStatusPriColor(sid, strColor)<br />Notification APIs:<br />SP.UI.Notify.addNotification(strHtml, bSticky, tooltip, onclickHandler)<br />SP.UI.Notify.removeNotification(id)<br />The Toolbar<br />
    112. 112. Dialog Framework<br />21<br />
    113. 113. Keeping the user in the context<br />Dialog Platform<br />V4 UI<br />
    114. 114. Design<br />23<br /><ul><li> Reduce page transitions/keep user in context
    115. 115. Contents load in an iframe inside a floating div
    116. 116. Dialogs are modal
    117. 117. Allow dragging within browser window
    118. 118. Can be maximized to size of browser window</li></ul>Dialog Framework<br />
    119. 119. Extensibility<br />24<br /><ul><li> JavaScript API to control dialogs
    120. 120. Contents can be a page (URL) or DOMElement
    121. 121. Optional parameters to set title, width, height, whether or not to launch maximized, etc
    122. 122. Design a page once to display both inside a dialog and as a full page
    123. 123. CSS class “s4-notdlg” can be used to hide UI when a page is shown within a dialog</li></ul>Dialog Framework<br />
    124. 124. Dialog code example<br />25<br />function myCallback(dialogResult, returnValue) <br />{<br /> alert(“Hello World!”);<br />}<br />var options = <br />{<br />url: “/_layouts/somepage.aspx”, width: 500, dialogReturnValueCallback:myCallback<br />};<br />SP.UI.ModalDialog.showModalDialog(options);<br />Dialog Framework<br />
    125. 125. Theming Engine<br />26<br />
    126. 126. Easy to use<br /><ul><li> Uses *.thmx file format – can be generated by client Office programs (PowerPoint)
    127. 127. Parses CSS for comment-style markup, replaces colors/fonts and recolors images as directed
    128. 128. Automatically generates new CSS for each theme when it is applied
    129. 129. Automatically populates theme list from Theme Gallery files</li></ul>Theming Engine<br />
    130. 130. How does it work?<br />28<br />Theming Engine<br />ThemeWeb.aspx<br />XML<br />CSS<br />PNG<br />CSS<br />PNG<br />Automatically Populates<br />THMX File<br /><ul><li> 12 Colors
    131. 131. 2 Fonts</li></ul>User Clicks Apply<br />NEW<br />NEW<br />NEW<br />Style Library<br />Located on file system or in database in themable locations – includes 3rd party CSS in same locations<br />Colors and fonts in originals are replaced by those specified in the THMX per annotation in CSS files<br />Annotated CSS File<br />NEWCSS File<br />
    132. 132. Theming engine example<br />29<br />/* [ReplaceColor(themeColor:&quot;Light1&quot;)] */<br />background-color:#fff;<br />/* [ReplaceColor(themeColor:&quot;Light2&quot;,themeShade:&quot;0.02&quot;)] */ border:1px solid #f1f1f2;<br />/* [RecolorImage(themeColor:&quot;Accent6&quot;,method:&quot;Tinting&quot;)] */ background-image:url(&quot;/_layouts/images/selectednav.gif&quot;);<br />/* [RecolorImage(themeColor:&quot;Accent6-Darker&quot;,method:&quot;Tinting&quot;, includeRectangle:{x:0,y:322,width:1,height:22})] */ background:url(&quot;/_layouts/images/bgximg.png&quot;);<br />Theming engine<br />
    133. 133. Tools<br />30<br />
    134. 134. Developer Dashboard<br />SharePoint 2010 delivers a developer dashboard which provides the developer useful information<br /><ul><li> How long did the request take to run?
    135. 135. What event handlers were fired?
    136. 136. In what sequence did these events handlers fire?
    137. 137. Alpha release needs PowerShell to enable this dashboard
    138. 138. Set –SPFarm –DeveloperDashboardEnabled
    139. 139. Set –SPFarm –DeveloperDashboardEnabled $false</li></ul>Tools<br />
    140. 140. PowerShell<br />32<br />This tool is a modern replacement for the CMD (command) shell.<br /><ul><li>PowerShell support effectively replaces STSADM.EXE
    141. 141. SharePoint admins/devs must learn PowerShell basics
    142. 142. You can write powerful scripts against WSS OM
    143. 143. You can develop custom PowerShell snap-ins</li></ul>Tools<br />
    144. 144. SharePoint Designer<br />33<br />SharePoint Designer has gone through many significant changes.<br /><ul><li> SharePoint objects such as lists and workflow associations are seen as first class objects in the new UI
    145. 145. Each SharePoint object has a summary page
    146. 146. More powerful workflow Designer
    147. 147. Reusable workflows
    148. 148. Prototypes created in SharePoint Designer can be migrated into Visual Studio 2010 (import / Export)
    149. 149. Workflow design in Visio 2010 possible
    150. 150. SharePoint Designer work exported to .WSP files (possible to import into Visual Studio 2010)</li></ul>Tools<br />
    151. 151. VS2010 SharePoint Tools<br />34<br /><ul><li> End-to-end SharePoint 2010 developer story
    152. 152. SharePoint Explorer for site exploration
    153. 153. SharePoint 2010 project and item templates
    154. 154. Visual designers for core scenarios
    155. 155. Migration path for Visual Studio 2008 & WSS 3.0
    156. 156. Extensible by 3rd party developers (e.g. STSDEV)
    157. 157. Benefits to SharePoint Developers
    158. 158. Abstracts away details of RootFiles directory
    159. 159. Abstracts ways details of building .WSP file
    160. 160. Lessens / eliminates need for external utilities</li></ul>Tools<br />
    161. 161. SharePoint Explorer<br />35<br /><ul><li> Add-in for Server Explorer Window
    162. 162. Easy way to examine site artifacts
    163. 163. Quick way to launch browser into site
    164. 164. SharePoint Explorer Extensibility
    165. 165. Developer can write add-ins to populate nodes and provide contextual menu commands</li></ul>Tools<br />
    166. 166. SharePoint 2010 Project Templates & Structure<br />36<br />Tools<br /><ul><li> All projects built using standard structure
    167. 167. Common Project Properties
    168. 168. Project file, Project Folder, Assembly Deployment Target, Sandboxed solution, Site URL, Startup Item
    169. 169. Standard Project Nodes
    170. 170. Properties, References, Features, Package, SharePoint Project Items (SPIs)</li></li></ul><li>SharePoint Project Items<br />37<br />Projects are built with SharePoint Items (SPIs)<br /><ul><li>SPI is a logical collection of project files (e.g. Web Parts, List definitions, Workflows, etc)
    171. 171. Each SPI has folder with SPI files
    172. 172. Compilation & deployment details abstracted away through SPI file properties</li></ul>Tools<br />
    173. 173. Mapped Folders<br />38<br /><ul><li> Mapped Folders used to deploy to RootFiles
    174. 174. Layouts folder maps to virtual path /_layouts
    175. 175. Images folder maps to virtual path /_layouts
    176. 176. Layouts folder key to creating application pages
    177. 177. Best practice to create solution-specific folders inside Layouts folder</li></ul>Tools<br />
    178. 178. Feature node and Feature Designer<br />39<br /><ul><li> Feature node contains one or more features
    179. 179. Feature designer provides design mode and XML text mode
    180. 180. Customize feature properties in designer and/or property grid
    181. 181. Use Context menu of feature node to add feature event receiver
    182. 182. Feature designer allows adding/removing SPIs
    183. 183. Customize feature activation dependencies</li></ul>Tools<br />
    184. 184. Project Packaging<br />40<br /><ul><li> Project packaging based on Package.wspdef
    185. 185. Modify package properties with designer or XML text
    186. 186. Modify package properties using property grid
    187. 187. Designer allows you to add / remove features and SPIs</li></ul>Tools<br />
    188. 188. Web Part Development<br />41<br />
    189. 189. The past and the future<br /><ul><li> What is the same?
    190. 190. ASP.NET Web Parts are preferred
    191. 191. WSS Web Parts are being phased out
    192. 192. Code Access Security
    193. 193. What is changed?
    194. 194. Emphasis on feature deployed .webparts
    195. 195. More functionality offered to ASP.NET Web Parts
    196. 196. what is new?
    197. 197. Versioning
    198. 198. AJAX
    199. 199. Client Object Model
    200. 200. Cross-site scripting safeguards
    201. 201. Sandboxed solutions
    202. 202. Built on User Controls
    203. 203. Designed for Farm solution deployment
    204. 204. Great for leveraging the designer</li></ul>Web Part Development<br />
    205. 205. Source of content<br />43<br />This presentation is based on presentations and demos provided by the Microsoft SharePoint Conference 2009.<br />Our gratitude goes out to Microsoft and the SharePoint Experts who made this happen.<br />

    ×