MOS2010的界面介绍和定制方法简介【资料汇集】

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.

<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