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
定製注意
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 ActionsThe 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>
RibbonThe 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.
<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 onclick="displayNotification()"
type="button" value="Add Notification" /></p>
<p>Click to remove Notification message</p>
<p><input id=bRemoveNotify onclick="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