1. Developing Windows 8 Style Application With HTML and JavaScript Lino Tadros | Falafel Software

2. The big picture www.devreach.com

3. The tools are there! www.devreach.com Code Editor WYSIGYG designer Interactive mode Animation Smarter Properties Window Simulator Platform window Expression Blend Code editor w/ Intellisense UI Designer Debuggers DOM Explorer Javascript Console Simulator Platform window Visual Studio

4. Windows Library for JavaScript www.devreach.com Web technologies you’re already familiar with Modern patterns for responsive, reliable apps Use interactive design tools Build your apps fast and with high quality Matches the Windows 8 design style Controls for common user experiences Designed for touch as well as traditional input Scales across form factors Make your apps look and feel great

5. WinJS www.devreach.com Helpers for Namespaces, Constructor Definition Promises App Model Navigation Page & User controls Animations Templates Utilities Default CSS Styles Data binding Controls

6. Promises handle Async www.devreach.com

7. Promise Code www.devreach.com

8. Host Enforcement www.devreach.com  Prevents potentially “bad” HTML from getting inserted  Script blocks, iframes, event handlers, etc.  Kicks in when setting strings  innerHTML  outerHTML  setAdjacentHTML  “data-” attributes in general not on the allowed list  WinJS specific ones are ok

9. Host Enforcement Escape Hatches www.devreach.com  Can work around when needed:  toStaticHTML method  Use DOM creation APIs  Use WinJS.Utilities.setInnerHTMLUnsafe  Use msWWA.execUnsafeLocalFunction

10. Everyday Widgets www.devreach.com

11. Presenting Data www.devreach.com List View (ListLayout) ListView (with GridLayout) Flip View

12. Controls www.devreach.com

13. DataBinding www.devreach.com

14. Commanding Surfaces www.devreach.com

15. Windows 8 Animation Library www.devreach.com Contains key Metro style app animations Has the same storyboard values, curves, and even the same API that Windows uses Aligns your app to the Windows 8 personality

16. Animation Library Scenarios www.devreach.com Content enterContent/exitContent Expand/collapse Peek Reveal/Hide UI showEdgeUI/hideEdgeUI showPanel/hidePanel showPopup/hidePopup Navigation enterPage/exitPage Selection Pointer animations Swipe select/swipe deselect Swipe reveal Collections AddItemToList Delete item from list

17. Basic Tiles www.devreach.com Overlays status on top of tile Supports square and wide tiles Number up to 99 or pre-defined glyph: Always legible on top of images Badge

18. www.devreach.com

19. Toast Notifications www.devreach.com Toast notifications deliver transient messages outside the context of the app Use toast notifications to get user’s attention immediately User is in control and can permanently turn off toast notifications from your app Allows quick navigation to a contextually relevant location in your app Toast notifications are easy to invoke from your app or from the cloud

20. Toast Templates www.devreach.com Toast notifications use the same template architecture as Live Tiles Rich set of rendering options available

21. Contracts www.devreach.com ShareSettingsSearch App to App PickingPlay To

22. Search Anatomy www.devreach.com 1. Search box is scoped to the main app on screen 2. Query suggestions provided by the main app on screen Autocompletes to terms for which the app has search results 3. List of installed Metro style apps that have implemented the search contract

23. Search Anatomy www.devreach.com 4. Result suggestions provided by the main app on screen Must include a thumbnail and title Indicates a strong or exact match result Takes users directly to the details of the result

24. Implementing Search www.devreach.com

25. Thank you! @linotadros, @falafelsoftware www.linotadros.com www.falafel.com www.linkedin.com/in/linotadros Lino Tadros | Falafel Software