Pinned Sites IE 9 Lightup
•Download as PPTX, PDF•
0 likes•957 views
With just a few lines of code, you can light up your Web application as a Windows 7 application. Pinned sites lets you brand your application. And the code doesn't change other browsers and older versions.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Pinned Sites IE 9 Lightup
Similar to Pinned Sites IE 9 Lightup (20)
More from Wes Yanaga
More from Wes Yanaga (11)
Recently uploaded
Recently uploaded (20)
Pinned Sites IE 9 Lightup
- 1. Pinned Sites, Jump Lists, NotificationsIE 9 Light-up Bruce Kyle ISV Advisor | Developer Platform Evangelist | West US Microsoft Corporation
- 2. Pinned Sites Seamless Integration with Windows 7 demo
- 3. Pinned Sites Features You Can Use
- 4. Agenda Seamless with Windows 7 Branding Adding a Website to the Start Menu (All Programs Menu) Jump List Tasks Overlay Icons Displaying Thumbnail Toolbar Buttons Detecting Features Add Site to All Programs Menu Resources
- 5. Branding
- 7. Branding
- 8. Customizing a website launched from a pinned site <meta name="application-name" content="Sample Site Mode Application"/> <meta name="msapplication-tooltip" content="Start the page in Site Mode"/> <meta name="msapplication-starturl" content="http://example.com/start.html"/> <meta name="msapplication-window" content="width=800;height=600"/> <meta name="msapplication-navbutton-color" content="red"/>
- 9. Customizing a website launched from a pinned Site <meta name="name" content="content"/>
- 10. Customizing a website launched from a pinned site <LINK rel="shortcut icon" type=image/x-icon href="http://host/favicon.ico"> <LINK rel=icon type=image/icohref="./favicon.ico">
- 11. Icon Sizes Recommended: 16x16, 32x32, 48x48 Optimal: 16x16, 24x24, 32x32, 64x64
- 12. Jump List Tasks
- 13. Defining Jump List Tasks
- 14. Jump List Tasks <META name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"/> <META name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"/>
- 15. Dynamic Jump Lists (1) // 1. Create the category window.external.msSiteModeCreateJumplist( 'List1'); // 2. Create the items window.external.msSiteModeAddJumpListItem( 'Item 1', 'http://host/Item1.html', 'http://host/images/item1.ico'); window.external.msSiteModeAddJumpListItem( 'Item 2', 'http://host/Item2.html', 'http://host/images/item2.ico');
- 16. Dynamic Jump Lists (2) // 3. Display the list window.external.msSiteModeShowJumplist(); // 4. Clear the list window.external.msSiteModeClearJumplist();
- 17. Overlay Icons
- 18. Overlay Icon Communicate notifications and status to users Use overlay icons to supply important, long-standing status or notifications such as network status, online status, or new mail. Draw attention to a website when the view to the pinned site’s window is blocked Displays overlay in right corner
- 19. Overlay an icon // Add Overlay icon window.external.msSiteModeSetIconOverlay( 'http://host/images/overlay1.ico', 'Overlay 1'); // Remove Overlay icon window.external.msSiteModeClearIconOverlay();
- 22. Thumbnail Button btn1 = window.external.msSiteModeAddThumbBarButton( 'http://host/images/button1.ico', 'button 1'); // Capture the event document.addEventListener('msthumbnailclick', handler1, false); function handler1 (btn) { alert ("addeventlist:thumbnailbtn id" + btn.buttonID); }
- 23. // Instantiate the button only once window.external.msSiteModeShowThumbBar(); // Set visibility window.external.msSiteModeUpdateThumbBarButton(btn1, false, true);
- 25. Feature detection if (window.external.msIsSiteMode) { // Check if the website was launched // from a pinned site. if (window.external.msIsSiteMode()) { // TRUE } else { // FALSE } }
- 26. All to All Programs Menu
- 27. Add to Start Menu <a onclick="window.external.msAddSiteMode();" href="#">Add Website</a><br />
- 28. Resources
- 29. Resources Pinned Sites: Windows 7 Desktop Integration with Internet Explorer 9 MSDEV Video: How Do I: Create an Internet Explorer 9 Pinned Site in Windows 7 Internet Explorer Developer Center: Pinned Sites Pinned Sites Developer Documentation
- 30. © 2007 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.
Editor's Notes
- http://msdn.microsoft.com/en-us/library/gg131029(VS.85).aspx
- Prep.. Start IE 9Go to http://www.beautyoftheweb.com/#/highlights/seamless-with-windows-7Drag and drop onto your taskbarHover over icon in taskbarRightclick on task barPoint out icon in upper left and branding colors
- http://msdn.microsoft.com/en-us/library/gg131029(VS.85).aspx
- There is no programmatic way to pin a site to the taskbar. All pinning actions require user intervention. Users must complete one of the following actions to pin a site to the taskbarTear off a tab, and drag it to the taskbar. Drag the favicon from the address bar in Internet Explorer to the taskbar. Figure 2: A user clicks and tears the tab to isolate it from any other tabs in the open browserFigure 3: A user drops the tab on the taskbar to pin the site to the taskbar
- After the site is pinned, notice that the site renders with custom enhancements. For instance, the Back and Forward buttons match the color of the website.We recommend that you encourage users to tear off tabs and use them as pinned sites. For instance, the following sample page from the Internet Explorer 9 Test Drive site includes a prompt (you can dynamically disable this notification later, testing for the msIsSiteMode method to know when it is appropriate to do so).
- The following code example uses meta elements to customize the pinned site shortcut with a tooltip, start URL, initial window size, and navigation button color.
- You can also specify the favicon to use by following existing webpage syntax.Windows attempts to retrieve a 32x32 version of the favicon from the specified file. If that size cannot be found, Windows frames the 16x16 version of the favicon inside a 32x32 document image. If no favicon is specified, Windows uses a framed version of the Internet Explorer icon. The favicon icon can also be overwritten by the user through the property settings dialog box.
- Pinned sites use icons in several places: Jump List destinations, the taskbar button, thumbnail preview buttons, and overlay icons. Icon files should contain the following size representations: Recommended: 16x16, 32x32, 48x48 Optimal: 16x16, 24x24, 32x32, 64x64 In a standard configuration, the taskbar icon will be 32x32, the Jump List destination icon will be 16x16, the thumbnail preview buttons will be 16x16, and the overlay icons will be 16x16. The image on the top left hand corner of the pinned site browser window holds a 24x24 version of the specified favicon. Using different .ico files, from the site favicon, to represent actions or destinations on the Jump List items and tasks will make it easier for your users to quickly identify the tasks they want to execute.
- All Jump List tasks are directly accessed by using a static URL path that is stored inside the .website file. Tasks are not expected to change frequently; however, they can be updated by modifying the meta elements on the webpage. Changes take effect the next time the user launches the pinned site, rather than when they are initially loaded by the browser. You define Jump List tasks by using HTML meta tags. When accessing a pinned website, Windows caches and applies these tags during installation. URLs defined in tasks are not restricted to a domain. The following code example defines two Jump List tasks on a webpage: Task 1 and Task 2. When the user clicks Task 1, the pinned site window launches Page1.html. Similarly, when the user clicks Task 2, the pinned site window launches Page2.html on the microsoft.com domain.
- Create the Category — First, call the msSiteModeCreateJumplist method to create a custom category with a label. The following code example creates a custom category named List1. You must call msSiteModeCreateJumplist at least once before using any of the other methods in these steps. window.external.msSiteModeCreateJumplist('List1');Note that the category label is not visible until the category is populated with at least one item. Creating a second category replaces an existing one. Create Items — Add items to the in-memory list (note that the items are not yet displayed). The following code example uses the msSiteModeAddJumpListItem method to create three list items: Item 1, Item 2, and Item 3. The first parameter specifies the item name. The second parameter specifies the URL to use when the item is selected. The third parameter specifies the icon that to use when displaying the item on the list. window.external.msSiteModeAddJumpListItem('Item 1', 'http://host/Item1.html', 'http://host/images/item1.ico'); window.external.msSiteModeAddJumpListItem('Item 2', 'http://host/Item2.html', 'http://host/images/item2.ico'); window.external.msSiteModeAddJumpListItem('Item 3', 'Item3.html', 'images/item3.ico');
- Display the List — Display the in-memory list for the Jump List. After you call the msSiteModeShowJumplist method, Windows immediately updates the in-memory list in the Jump List. window.external.msSiteModeShowJumplist(); Clear the List — Clear the items on the custom list. When you call the msSiteModeClearJumplist method, Windows immediately removes the items from the Jump List. window.external.msSiteModeClearJumplist();
- Windows applications can communicate notifications and status to users by displaying an overlay icon on top of the application’s taskbar button. The msSiteModeSetIconOverlay method adds an icon overlay to the pinned site’s taskbar button. Overlay icons help draw attention to a website when the view to the pinned site’s window is blocked, as when the browser window is minimized or blocked by another window. Use overlay icons to supply important, long-standing status or notifications such as network status, online status, or new mail. Remember that presenting users with constantly changing overlays or animations creates a negative user experience. Windows displays overlay icons in the lower-right corner of the taskbar button; however, the taskbar must be in the default large icon mode to display overlay icons. Overlay icons are not visible when the website is not running or when the website is not running as a pinned site. Overlay icons can be displayed from any webpage in the same domain. In addition, a website can apply multiple overlay icons without having to clear them first. However, when an overlay icon is cleared, Windows removes the icons starting from the most recently added. This implies that the clearing order is such that the last icon displayed is the first one removed.
- Windows applications can communicate notifications and status to users by displaying an overlay icon on top of the application’s taskbar button. The msSiteModeSetIconOverlay method adds an icon overlay to the pinned site’s taskbar button. Overlay icons help draw attention to a website when the view to the pinned site’s window is blocked, as when the browser window is minimized or blocked by another window. Use overlay icons to supply important, long-standing status or notifications such as network status, online status, or new mail. Remember that presenting users with constantly changing overlays or animations creates a negative user experience. Windows displays overlay icons in the lower-right corner of the taskbar button; however, the taskbar must be in the default large icon mode to display overlay icons. Overlay icons are not visible when the website is not running or when the website is not running as a pinned site. Overlay icons can be displayed from any webpage in the same domain. In addition, a website can apply multiple overlay icons without having to clear them first. However, when an overlay icon is cleared, Windows removes the icons starting from the most recently added. This implies that the clearing order is such that the last icon displayed is the first one removed.
- For native Windows applications, users interact with thumbnail toolbar buttons in the taskbar without having to restore or activate the site's window. A pinned site can make use of the same functionality for individual webpages. Each button represents a command that can be executed in the webpage, so users can interact with the webpage while in a minimized state or without activating it. The following screen shot shows how a webpage with multiple video clips uses thumbnail toolbar buttons to control the play, pause, and selection of videos without causing the user to access the page directly. You can display a maximum of seven buttons in a thumbnail toolbar. Because there is a limited amount of space in which to display thumbnails, as well as a constantly changing number of thumbnails to display, applications are not guaranteed a specific toolbar size. If display space is low, buttons in the toolbar are truncated from right to left as needed. Therefore, an application should prioritize the commands associated with its buttons to ensure that those of highest priority are to the left and are therefore least likely to be truncated. When a user clicks a thumbnail toolbar button, an event with a specific ID is returned to the webpage for processing. These events are scoped to the domain that created the events. Buttons can be created, displayed, hidden, enabled, or disabled, or their image can be replaced.
- Thumbnail toolbar buttons are defined in memory before they are displayed. The following code example uses the msSiteModeAddThumbBarButton method to create three thumbnail toolbar buttons, passing in the URL of an icon resource file in the first parameter and the (optional) tooltip in the second parameter. The method returns an ID that is used by the system when a thumbnail toolbar button click event is generated.
- Use the msSiteModeUpdateThumbBarButton method to set the state and visibility of a button after the button has been instantiated. The following code example makes button1 disabled and visible, button2 enabled and visible, and button3 enabled but not visible. window.external.msSiteModeUpdateThumbBarButton(btn1, false, true); window.external.msSiteModeUpdateThumbBarButton(btn2, true, true); window.external.msSiteModeUpdateThumbBarButton(btn3, true, false);
- With Internet Explorer 9, users can add any website to the Windows Start menu by using menu commands (click the Tools menu and then click Add site to Start menu). The website is then listed in the All Programs folder of the Start menu. In addition to user interaction, your website can promote this functionality programmatically by using the pinned site APIs. After adding a site through your website or the browser, users can then access the website through the Start menu, just as they access a native application running on Windows. As with those webpages pinned to the taskbar, webpages launched from the Start menu provide the fully branded experience once you provide markup to customize the start URL, icon, name, tooltip, and navigation button colors associated with the Start menu entry. All of the mechanisms designed to add an entry into the Start menu generate a dialog box that asks users to confirm or cancel the operation, as the following screen shot shows. Use the window.external.msAddSiteMode() method to add a site to the Start menu. The API can be triggered from any HTML element by using JavaScript, as in the following code example: <a onclick="window.external.msAddSiteMode();" href="#">Add Website</a><br /> You can identify if a website has been launched as a pinned site by calling the window.external.msIsSiteMode method. The msIsSiteMode method returns a Boolean value that returns true if the window was launched as a pinned site; otherwise, false.