Custom application pages
Custom Application pages now use the DynamicMasterPageFile attribute. This enables application pages to use the master page of the site from which they are accessed.
<@Page language="C#" DynamicMasterPageFile="~masterurl/default.master"
title="Demo Page" inherits="Microsoft.SharePoint.WebControls.LayoutsPageBase" />
The ribbon
The ribbon is now used everywhere in SharePoint replacing the CustomActions.

It has a fixed position at the top of the page. It is based on the Contextual tab model.
CustomActions are backward compatible and will show up in the ribbon.
The super tooltip

Extending the ribbon
You can extend the ribbon with buttons, drop downs, flyout menus, toggle buttons, etc.
Button, groups and tabs are defined in XML and execute asynchronous JavaScript. Buttons having simple behavior can defined declaratively, buttons having a more complex behavior require a JavaScript Page Component.
The OOB ribbons are defined in the CMDUI.XML stored in the 14\TEMPLATE\GLOBAL\XML directory. You can declare your own buttons using a CustomAction.
<CustomAction
Location=(somewhere in ribbon)
Scope = (Farm to Web)>
<CommandUIExtension>
<CommandUIDefinitions />
<CommandUIHandlers />
</CommandUIExtension>
</CustomAction>
Define your buttons in the CommandUIDefinitions section.
<CommandUIDefinition
Location="Ribbon.WikiPageTab.Groups._children">
<Group
Id="Ribbon.WikiPageTab.CustomGroup"
Sequence="55"
Description="Custom Group"
Title="Custom Group"
Command="EnableCustomGroup"
Template="Ribbon.Templates.Flexible2">
<Controls Id="Ribbon.WikiPageTab.CustomGroup.Controls">
<Button
Id="Ribbon.WikiPageTab.CustomGroup.Controls.CustomButton1"
Command="CustomButtonCommand1"
Image16by16="/_layouts/images/FILMSTRP.GIF"
Image32by32="/_layouts/images/PPEOPLE.GIF"
LabelText=""
TemplateAlias="o2"
Sequence="15" />
</Controls>
</Group>
</CommandUIDefinition>
The Javascript that needs to be executed by the button click needs to be added to the CommandUIHandlers.
<CommandUIHandler Command="CustomButtonCommand1" CommandAction="javascript:alert('Hello, world!');" />
The Status Bar and the Notification Area
The status bar is meant to give the user information in context without distracting hem/her. The Status bar should be used to display persistent information such as page status or version. The notification area can be used for messages. By default a message shows up during 3 seconds.

Extending the Status Bar
There is a JavaScript API to add/remove messages and specify the message color. The message itself consists of HTML and can include links and icons. A status can have 1 to 4 different colors depending on the importance of the message.
SP.UI.Status.addStatus
SP.UI.Status.updateStatus
SP.UI.setStatusPriColor
Extending the Notifications Area
There is a JavaScript API to add/remove messages. The message itself consists of HTML and can include links and icons.
SP.UI.Notify.addNotification
The Dialog Framework
Reduces page transitions and keeps the user in context. The content of the dialog loads in a IFRAME inside a floating div. Dialogs are modal and can be maximized to size of the browser window.
There is a JavaScript API to control dialogs. The contents can be a page (URL) or DOMElement. Optional parameters can be specified to set title, width, height, and whether or not to launch maximized.
You can design a page that can both be used as page or displayed inside a dialog. You can set the CSS class to “s4-notdlg” to hide the UI behind the dialog.
There is also a JavaScript API to handle dialogs:
SP.UI.ModalDialog.showModalDialog (options)
New Theming Engine
The New Theming Engine is designed to let you easily create your own themes. It uses the *.thmx file format that can be generated by client Office programs. For example, if you like the theming of a powerpoint presentation, you can easily save that theme as a .thmx file and upload it in the Theme Gallery.
The engine automatically generates new CSS for each theme when it is applied.
You can have your controls on application pages themed.
- create a SharePoint project in Visual Studio 2010
- add a mapped folder Themable
- place styles in .css
- Add attributes this way
/* [ReplaceColor(themeColor: "Light1")] */
background-color:#ffff
to make it possible for the theming engine to apply the style of the theme
Remark: changes will only apply be reselecting the theme.
Thank you Elizabeth Olson for this clear and inspiring presentation!