Building your first windows store app in html5 js phonegap

2,083 views
1,905 views

Published on

Building your first windows 8 application using HTML 5 and JavaScript and how to convert your windows 8 app to PhoneGap and use the same code base across different platform such as Android, iOS and more.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,083
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building your first windows store app in html5 js phonegap

  1. 1. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel www.sela.co.il
  2. 2. Windows 8.1 Echosystem Architecture Personality, Pattern, Principles, Platform PhoneGap and Windows Store Questions Summary © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 2
  3. 3. Products Editions • Xbox • Microsoft SkyDrive )OneDrive ) • Windows Store • Windows 8.1 • Windows 8.1 Pro • Windows 8.1 Enterprise Windows RT • © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 3
  4. 4. Windows 8.1 Platform Architecture Desktop Apps HTML C/C++ Internet Explorer Windows Store apps C# / VB.NET C++/ CX C# / VB.NET Javascript WinRT APIs .Net CLR/ Silverlight Win32 HTML CSS XAML Comm. & Data Graphics & Media Devices & Others Windows Kernel Services © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 4
  5. 5. Start screen Charms Task Manager © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 5
  6. 6. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 6
  7. 7. • • • • Purposeful animations Predefined Animation Library Touch-ready apps Binding instead of events © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 7
  8. 8. Screen modes: • Full-screen, both landscape and portrait • Side-by-side Design and implementation tips: • Accommodate any screen mode and size • Maintain state • Plan for ergonomics © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 8
  9. 9. Your Contract Windows Store app Contract Contracts © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 9
  10. 10. • Tiles are the front door of the app • Secondary tiles link to specific pages and information • Live tiles are used for dynamically updated information • Secondary and live tiles can be pinned to the Start screen © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 10
  11. 11. Live tile • Live tiles for dynamic information on tiles • Toast messages for dynamic pop-ups • App feels alive and updated even when dormant • User is drawn to your app all the time Toast Message © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 11
  12. 12. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 12
  13. 13. Choose the most comfortable language JavaScript C#/VB.NET C++ Knowledge Preservation Web, HTML, JavaScript XAML, WPF, Silverlight XAML, C++ Code Reuse Web apps WPF or Silverlight, C++ codebase or .NET codebase Execution Environment Internet Explorer JavaScript engine .NET CLR with access to WinRT Runs directly on top of WinRT Language Style Dynamic Static Static Memory Management Managed by the JavaScript engine Managed by the .NET CLR Unmanaged, uses reference counting Create WinRT Components No Yes Yes © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 13
  14. 14. WinRT Language Features Metadata Metadata C++/CX Code Metadata WinRT C# 5.0 Code JavaScript Code © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 14
  15. 15. • Helpers for: • Namespaces • Classes • Mixins • Promises • App Models • Navigation • Data binding • Controls • Animations • Templates • Utilities • Default CSS styles • Page & user controls © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 15
  16. 16. WinJS includes APIs for • Creating logical namespaces through the WinJS.Namespace object • Defining classes and mixins by using the WinJS.Class object Making use of both these objects • Helps to reuse code • Helps to create an object model in an app © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 16
  17. 17. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 17
  18. 18. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 18 © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel www.sela.co.il
  19. 19. • Mobile Web Apps – Limited functionality w/ HTML – Flash is problematic • Mobile Applications – Native or cross-compile? – Both provide much more functionality than “Web” – Native is platform-specific – Cross-compile casts a wider netbut performance and experience could* suffer © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 19
  20. 20. • Web – HTML with JavaScript/CSS • Cross-compile – – – – – Adobe AIR (AS3, MXML) PhoneGap (JS, HTML) Titanium (JS, HTML) Xamarin (C#, XAML) Unity • Native (only choose one) – Objective-C (iOS) – Java (Android / BlackBerry) – C#/Silverlight/XAML (Windows) © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 20
  21. 21. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 21
  22. 22. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 22
  23. 23. • PhoneGap is open source mobile development framework. - Developed by Nitobi Software - Bought by Adobe • Renamed to Cordova after the shift to Adobe • Enables building mobile device applications using the Web technology stack – HTML, CSS, and JavaScript.
  24. 24. • A PhoneGap application is considered Hybrid. - They are neither truly native, nor purely web based. - All layout rendering is done via the Web View • Supports 7 platforms
  25. 25. http://docs.phonegap.com/en/3.1.0/index.html
  26. 26. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 28 © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel www.sela.co.il
  27. 27. • Set up your development environment - PC, Mac - XCode, Eclipse, Visual Studio - SDKs, JDKs, Plug-Ins Same as for Native Development • Adobe® PhoneGap™ Build- Simply upload your HTML5, CSS, and JavaScript assets to the Adobe® PhoneGap™ Build cloud service and we do the work of compiling for you.
  28. 28. 1. 2. 3. 4. Create New Project Add reference to Cordova.js Register “deviceready” event Done
  29. 29. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 31
  30. 30. function includeJS(jsFile) { $('head').append($('<script>').attr('type', 'text/javascript').attr('src', j sFile)); } // Pick a JS to load switch(device.platform) { case “Android”: includeJS(‘android.js'); break; case “BlackBerry 10”: includeJS(‘bb.js'); break; case “Win32NT”: includeJS(‘win8.js'); break; } © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 32
  31. 31. © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 33
  32. 32. Platform-specific native applications seem to be slowly fading away into a niche or need-basis. HTML/JavaScript applications, done right, can be a good alternative, and can save you time an money. If you’re not sure, validate.
  33. 33. Shai Raiten • shair@sela.co.il • http://blogs.Microsoft.co.il/blogs/shair © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel 35

×