• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Share point 2010-uiimprovements
 

Share point 2010-uiimprovements

on

  • 950 views

 

Statistics

Views

Total Views
950
Views on SlideShare
950
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Share point 2010-uiimprovements Share point 2010-uiimprovements Presentation Transcript

    • User Interface Improvements and Extensibility in SharePoint 2010
      Name
      Title
      Company
    • Agenda
      Introducing the new User Experience
      Ribbon
      Status bar and notifications
      Dialog Framework
      Sites as Collections of Pages
      Themes
    • Introducing the new User Experience
      How does it work and what has been changed?
    • SharePoint 2007 Command Surface
      Commands EVERYWHERE
    • SharePoint 2007 user experience
      Page reloads and navigations
      Microsoft Confidential
    • SharePoint 2007 Web Part Interaction
      Web part interaction is a tradeoff between limited functionality and visual clutter (summary versus full toolbar).
    • SharePoint 2007 Page Editing
      “Page editing forces SharePoint complexities on contributors (e.g., web parts and web part zones) for even simple tasks like adding text or images to a page.”
    • The SharePoint 2010 User Interface
    • How is it implemented and how can be extend it?
      Ribbon
    • The Server Ribbon
    • Ribbon design
      Fixed position at top of page – doesn’t scroll out of view
      Contextual tab model
      Command preview (e.g., Font Size)
      Dynamic scaling/layout of commands
      Super tool tips
    • 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
    • Ribbon architecture
      Asynchronous JavaScript & XML
      Server or Client rendered
      On-demand JavaScript
      CSS layout, styling, and hover effects
      No tables
      Clustered images reduce round trips to server
    • Ribbon extensibility
      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
    • Adding a Ribbon Control
      CMDUI.XML
      Page with the Ribbon
      On Web Front End
      Contains OOB site wide Ribbon Implementation
      Page Component
      JavaScript
      Handles control
      Custom Action
      <CustomAction
      Location = (somewhere in Ribbon)
      Scope = (Farm to Web)
      <CommandUIExtension>
      <CommandUIDefinitions />
      <CommandUIHandlers />
      </CommandUIExtension>
      </CustomAction>
      Merged into CMDUI
      IF present, added to page to handle command
      ELSEPage Component must be added separately
    • Example Code to Add a Ribbon Button
      Where?
      What?
      Action
    • Adding button to oob group
      With out of the box ribbon groups
      OOB locations are in CMDUI.XML
      Ribbon.[Tab].[Group].Controls._children
      Defined in Location attribute
      Example location for add
      Ribbon.Documents.Manage.Controls._children
    • Multi-Level Targeting
      Web parts can provide functionalities to Ribbon
      For example out of the box list views
    • Adding a Button to the Ribbon
      demo
    • How to indicate actions for the end users?
      Status bar and notifications
    • Status Bar/Notification Area
      Gives the user information in context without distracting them
      Status bar should be used to display persistent information such as page status or version
      Notifications is used for transient or semi-transient messages
      Status Bar
      Notification
    • Status Bar
      Design:
      Shown below Ribbon
      Will display 1 of 4 pre-set background colors depending on importance
      Priority – Red, Yellow, Green, Blue
      Extensibility
      JavaScript API to add/remove messages and specify message color
      Server API for statuses set at page render time
      Message is HTML and can include links and images
      When multiple message colors are specified, bar will take the most “important” color
    • Status API code
      Different JavaScript API’s available for message manipulation
      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)
      SP.UI.Status.appendStatus(string StatusID, string Title, string Msg)
    • Example
      Adding and removing messages
    • Server side handling of status
      Status messages can be defined also from the code behind
      using Microsoft.SharePoint.WebControls.SPPageStatusSettercontrol
    • Notifications Area
      Design:
      Appears on the right side of the page underneath the Ribbon
      By default message will last 5 seconds
      Extensibility
      JavaScript API to add/remove messages
      Message is HTML and can include links/icons
      Optional “sticky” parameter can be set if caller wishes to manually remove the message
    • APIs and example
      Notification APIs:
      SP.UI.Notify.addNotification(strHtml, bSticky, tooltip, onclickHandler)
      SP.UI.Notify.removeNotification(id)
    • Status Bar and Notification Area
      demo
    • How to utilize the dialog framework?
      Dialog framework
    • Dialog PlatformKeep the User in Context
      Reloading page
      V3 UI
    • Dialog PlatformKeep the User in Context
      V4 UI
    • Dialog Framework design
      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
      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.
      “Autosizing” applied if height or width is not given
      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
    • Example Dialog Code
      We can start the dialog with different options and also get return values from the dialog:
    • Call back from client side
      We can transfer return values back to caller and indicate the user behavior
    • Call back from server side
      We can process code in the dialog and return the user back to primary window by adding following after code has been executed:
    • Dialog Framework
      demo
    • How the page model is evolving?
      Sites as Collections of Pages
    • sites are collections of pages
    • Pages Everywhere
      1
      Every team site has a pages library
      Create a new page with a single click
      Just enter a name
      Ready to go
      [[Wiki Linking]] to
      Pages
      Lists
      Items
      Documents
      2
      3
    • Edit Like in Word
      Single click editing experience
      Transition to edit is quick and seamless
      Type into page and format text like in Word
      Full set of rich text controls for formatting and layout
      Streamlined insert experience for images, links
      Asset library
    • Safe and simple editing
      EditStop Editing – no prompts
      Whoops Protection
      Rich Text Editor has undo stack
      Versioning turning on, in case you want to revert
    • Master Pages
    • Branded Application Pages
      Application pages are using system master page
      Uses new tags dynamically associate system master page (either custom or system)
      Applies also to custom application pages
    • Master page development
      SharePoint 2010 uses superset of place holders from 2007
      There’s few new place holders added
      Biggest change on markup is the existance of Ribbon
      No need for page editing tool bar etc.
    • Multi-Lingual Interface
      Display one site in multiple languages
      Language Pack based
      Default language set during provisioning
      Alternative language set by end-user
      OM Support
      Obviously does not translate the actual content
    • Standards Compliancy
      Standards-based rendering using XHTML
      No quirks mode
      Cross-Browser
      Tier 1 support: IE, Firefox
      Tier 2 support: Safari
      WCAG 2.0 AA
      New Rich Text Editor supporting XHTML.
    • Simple.master usage and application page branding
      demo
    • How to change the user interface look and feel using themes
      Themes
    • Theming engine
      Uses *.thmx file format – can be generated by client Office programs
      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
      Can be easily deployed also using feature
    • How The Theming Engine Works?
      ThemeWeb.aspx
      Style Library
      XML
      CSS
      PNG
      CSS
      PNG
      Automatically Populates
      THMX File
      • 12 Colors
      • 2 Fonts
      NEW
      NEW
      NEW
      User Clicks Apply
      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
    • Example Theming Markup
      /* [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");
    • Deployment and activation
      Feature xml and code to activate theme automatically
    • Theming
      demo
    • Summary
      Introducing the new User Experience
      Ribbon
      Status bar and notifications
      Dialog Framework
      Sites as Collections of Pages
      Themes
    • © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
      The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.