Pinned Sites IE 9 Lightup

1,936 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Pinned Sites IE 9 Lightup

  1. 1. Pinned Sites, Jump Lists, NotificationsIE 9 Light-up<br />Bruce Kyle<br />ISV Advisor | Developer Platform Evangelist | West US<br />Microsoft Corporation<br />
  2. 2. Pinned Sites<br />Seamless Integration with Windows 7<br />demo<br />
  3. 3. Pinned Sites Features You Can Use<br />
  4. 4. Agenda<br />Seamless with Windows 7<br />Branding<br />Adding a Website to the Start Menu (All Programs Menu) <br />Jump List Tasks<br />Overlay Icons <br />Displaying Thumbnail Toolbar Buttons<br />Detecting Features <br />Add Site to All Programs Menu <br />Resources<br />
  5. 5. Branding<br />
  6. 6. Branding Your site<br />
  7. 7. Branding<br />
  8. 8. Customizing a website launched from a pinned site<br /><meta name="application-name" content="Sample Site Mode Application"/><br /><meta name="msapplication-tooltip" content="Start the page in Site Mode"/><br /><meta name="msapplication-starturl" content="http://example.com/start.html"/><br /><meta name="msapplication-window" content="width=800;height=600"/><br /><meta name="msapplication-navbutton-color" content="red"/><br />
  9. 9. Customizing a website launched from a pinned Site<br /><meta name="name" content="content"/><br />
  10. 10. Customizing a website launched from a pinned site<br /><LINK rel="shortcut icon" type=image/x-icon href="http://host/favicon.ico"><br /><LINK rel=icon type=image/icohref="./favicon.ico"> <br />
  11. 11. Icon Sizes<br />Recommended: 16x16, 32x32, 48x48 <br />Optimal: 16x16, 24x24, 32x32, 64x64<br />
  12. 12. Jump List Tasks<br />
  13. 13. Defining Jump List Tasks<br />
  14. 14. Jump List Tasks<br /><META name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"/><br /><META name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"/> <br />
  15. 15. Dynamic Jump Lists (1)<br />// 1. Create the category<br />window.external.msSiteModeCreateJumplist(<br />'List1');<br />// 2. Create the items<br />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'); <br />
  16. 16. Dynamic Jump Lists (2)<br />// 3. Display the list<br />window.external.msSiteModeShowJumplist();<br />// 4. Clear the list<br />window.external.msSiteModeClearJumplist();<br />
  17. 17. Overlay Icons<br />
  18. 18. Overlay Icon<br />Communicate notifications and status to users<br />Use overlay icons to supply important, long-standing status or notifications such as network status, online status, or new mail. <br />Draw attention to a website when the view to the pinned site’s window is blocked<br />Displays overlay in right corner<br />
  19. 19. Overlay an icon<br />// Add Overlay icon<br />window.external.msSiteModeSetIconOverlay( 'http://host/images/overlay1.ico', 'Overlay 1');<br />// Remove Overlay icon<br />window.external.msSiteModeClearIconOverlay();<br />
  20. 20. Thumbnail Preview<br />
  21. 21. Thumbnail Preview<br />
  22. 22. Thumbnail Button<br />btn1 = window.external.msSiteModeAddThumbBarButton( 'http://host/images/button1.ico', 'button 1');<br />// Capture the event<br />document.addEventListener('msthumbnailclick', handler1, false);<br />function handler1 (btn) { alert ("addeventlist:thumbnailbtn id" + btn.buttonID); } <br />
  23. 23. // Instantiate the button only once<br />window.external.msSiteModeShowThumbBar();<br />// Set visibility<br />window.external.msSiteModeUpdateThumbBarButton(btn1, false, true);<br />
  24. 24. Feature Detection<br />
  25. 25. Feature detection<br />if (window.external.msIsSiteMode) { <br /> // Check if the website was launched <br />// from a pinned site.<br /> if (window.external.msIsSiteMode()) { <br /> // TRUE <br /> } else { <br /> // FALSE <br /> } <br />}<br />
  26. 26. All to All Programs<br />Menu<br />
  27. 27. Add to Start Menu<br /><a onclick="window.external.msAddSiteMode();" href="#">Add Website</a><br /><br />
  28. 28. Resources<br />
  29. 29. Resources<br />Pinned Sites: Windows 7 Desktop Integration with Internet Explorer 9<br />MSDEV Video: How Do I: Create an Internet Explorer 9 Pinned Site in Windows 7<br />Internet Explorer Developer Center: Pinned Sites<br />Pinned Sites Developer Documentation<br />
  30. 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.<br />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.<br />

×