MOS2010的界面相比以前的版本进行了大幅度的修改，充分借鉴了Office07引入的Ribbon等成功元素。下面把使用和学习中整理的相关资料总结一下。

MOS2010主要的界面元素和图示

Server ribbon

Status bar

Notification area

List item menu (LIM)

Modal dialogs

CSS控制

Microsoft split Cascading Style Sheet (CSS) files into multiple files that are only downloaded when necessary, thereby reducing the time needed to render pages. Similarly, Microsoft introduced script on demand, which allows delaying JavaScript downloads until they’re needed.

工具

http://code.msdn.microsoft.com/vsixforsp

http://blogs.msdn.com/b/pstubbs/archive/2010/04/26/sharepoint-2010-extensibility-projects-server-ribbon.aspx

定制注意
The ribbon is aggressively cached  developing your custom actions, to test your modifications you will need to clear your browser cache InPrivate Browsing

Microsoft SharePoint Foundation 中的自定义操作的 CustomAction 元素和 CustomActionGroup 元素使用的位置、自定义操作组 ID 和自定义操作 ID

http://msdn.microsoft.com/en-us/library/bb802730.aspx

http://msdn.microsoft.com/zh-cn/library/bb802730.aspx

Custom Actions

The creation of new controls to the ribbon together with the commands that should execute when the control is clicked is often referred to as custom actions.

In SharePoint Designer, the addition of ribbon server controls is known as adding custom actions. These custom actions can only be added to the ribbon of list views, list forms; and to the LIM. List forms are pages that display and edit a single list item, whereas views are pages that display a number of list items. In lists, the list and form pages are stored in the root of the list; for libraries they are stored in the Forms folder, which by default is hidden when a library is displayed in the browser, but is visible in Explorer view and in SharePoint Designer. There are three types of list forms: Display New Edit

SharePoint Designer cannot be used to:

● Add tabs or tab sets.

● Add groups.

● Add controls, such as check boxes, drop-down menus, text boxes, fly-out anchors or the color picker.

● Add controls to groups that do not exist.

● Remove the actions/controls that were not added by SharePoint Designer.

The Rights Mask uses SPBasePermission member names, which you can find at http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spbasepermissions.aspx

TEMPLATE\IMAGES subfolder

<img style="left: -80px; top: -176px; " alt="" src="/_layouts/1033/format16x16.png" unselectable="on" />

Server-Side Custom Actions

<CustomAction

Location="Microsoft.SharePoint.StandardMenu"

GroupId="SiteActions"

ControlAssembly="DevLeap.SP2010.UIExtensions, Version=1.0.0.0,

Culture=neutral, PublicKeyToken=3b7c6076bf78362f"

ControlClass="DevLeap.SP2010.UIExtensions.SwitchToMobileMode"

Id="DevLeap.CustomActions.SwitchToMobileMode">

</CustomAction>

</CustomAction>

Ribbon

The Internet contains many examples if you wish to learn more about extending the ribbon. Here are just some of the websites that you might find useful:

● User Interface Enhancements: Channel 9 Videos: http://channel9.msdn.com/

learn/courses/SharePoint2010Developer/UiEnhancements/

● Microsoft SharePoint Team Blog: Enabling a Button on the Ribbon Based on

Selection: http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?pID=436

How to Create a Web Part with a Contextual Tab: http://blogs.msdn.com/b/

sharepointdeveloperdocs/archive/2010/01/28/how-to-create-a-web-partwith-

a-contextual-tab.aspx

● How to Add a Tab to the Ribbon in SharePoint Foundation: http://blogs.msdn.

com/b/sharepointdeveloperdocs/archive/2009/12/07/sharepointfoundationhowtoaddtabtoribbon.

aspx

● SharePoint 2010 Ribbon Customization series: http://makarandrkulkarni.blogspot.

com/2010/01/architecture-of-sharepoint-2010-ribbon.html

● Code to Hide the Ribbon and Site Actions Menu for Anonymous Users:

www.elumenotion.com/Blog/Lists/Posts/Post.aspx?ID=106

Command locations

http://msdn.microsoft.com/en-us/library/ee537543.aspx

具体的ID编号在文件：

%ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\GLOBAL\XML\CMDUI.xml

CommandAction

n {ItemId} ID (GUID) taken from the list view

n {ItemUrl} Web-relative URL of the list item (Url)

n {RecurrenceId} ID of a recurrent item (RecurrenceID)

n {SiteUrl} The fully qualified URL to the site (Url)

n {ListId} ID (GUID) of the list (ID)

n {ListUrlDir} Server-relative URL of the site plus the list’s folder

n {Source} Fully qualified request URL

n {SelectedListId} ID (GUID) of the list that is currently selected from a list view

n {SelectedItemId} ID of the item that is currently selected from the list view

不显示按钮

<CustomAction Id="SPFIO_RemoveControl" Location="CommandUI.Ribbon" >
     <CommandUIExtension>
       <CommandUIDefinitions>
         <CommandUIDefinition  Location="Ribbon.EditingTools.CPEditTab.Markup.Html.Menu.Html.EditSource" />
       </CommandUIDefinitions>
     </CommandUIExtension>
   </CustomAction>

<!-- 隐藏编辑和Ribbon区 和 显示条目对话框中的“编辑项目"-->
  <CustomAction Id="cust4" Location="CommandUI.Ribbon" >
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition Location="Ribbon.ListItem.Manage.EditProperties" />
      </CommandUIDefinitions>
    </CommandUIExtension>
  </CustomAction>
  <CustomAction Id="cust20" Location="CommandUI.Ribbon" >
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition Location="Ribbon.ListItem.New.NewListItem" />
      </CommandUIDefinitions>
    </CommandUIExtension>
  </CustomAction

窗口

“How to: Display a Page as a Modal Dialog box” which

you can read at http://msdn.microsoft.com/en-us/library/ff798390.aspx.

&lt;script language="ecmascript" type="text\ecmascript">

var statusId = '';

function displayStatusBar() {

statusId = SP.UI.Status.addStatus("SPFIO Status Bar Title",

"SPFIO message text", true)

SP.UI.Status.setStatusPriColor(statusId, 'red');

}

function removeStatusBar() {

SP.UI.Status.removeStatus(statusId);

statusId = '';

}

</script>

<script language="ecmascript" type="text\ecmascript">

var notifyId = '';

function displayNotification() {

notifyId = SP.UI.Notify.addNotification(

"<span style=\'background-color: yellow\'>SPFIO notify message</span>",

true);

}

function removeNotification() {

SP.UI.Notify.removeNotification(notifyId);

notifiyId = '';

}

</script>

<p>Click to display Notification message</p>

<p><input id=bAddNotify οnclick="displayNotification()"

type="button" value="Add Notification" /></p>

<p>Click to remove Notification message</p>

<p><input id=bRemoveNotify οnclick="removeNotification()"

type="button" value="Remove Notification" /></p>

The signatures for all the versions of the JavaScript COM application programming interfaces (APIs) can be found in the SP*.debug.js files in the SharePoint root in the Template\LAYOUTS subfolder. These are the equivalent of the minified SP*.js files. Therefore, you can look at the source code for all the client-side code provided by Microsoft.

深入的定制

如果对界面进行深入的定制，那可以自己设计界面或修改默认的CSS等，这个有专门Branding方面的资料参考，如下

Professional SharePoint? 2010 Branding and User Interface Design
www.wiley.com
ISBN: 978-0-470-58464-4