1. Walkthrough example including SAS output How to create a mobile WebApp? PhUSE / 12. October 2015 / Katja Glaß BHC 4:3 Template 2010 June 2014Page 1

2. WebApps Katja Glaß 12. October 2015Page 2 AgendaIntroduction Getting Started WebApp Creation Further Options Summary

3. Introduction Apps are everywhere and pretty useful! WebApps Katja Glaß 12. October 2015Page 3 Mails Chat Weather News Why not to create an app on our own?

4. Getting Started WebApps Katja Glaß 12. October 2015Page 4 Different App Types? Native Apps Web Apps (HTML5)

5. Getting Started How can users access the App? Hosting WebApps Katja Glaß 12. October 2015Page 5 app.phuse.eu/ 2015_ac.html PhUSE2015 Store

6. Getting Started What do I need for programming? Editor / SDE (Software Development Environment) Text Editor Eclipse HTML-Editors WebApps Katja Glaß 12. October 2015Page 6

7. Getting Started What do I need for programming? Editor / SDE (Software Development Environment) Text Editor Eclipse HTML-Editors XAMPP (optional), provide „web-services“ locally WebApps Katja Glaß 12. October 2015Page 7

8. Getting Started What do I need for programming? Editor / SDE (Software Development Environment) Text Editor Eclipse HTML-Editors XAMPP (optional), provide „web-services“ locally Code Repositories (optional, collaboration) WebApps Katja Glaß 12. October 2015Page 8

9. WebApp Creation Let‘s start! Hello World!!! WebApps Katja Glaß 12. October 2015Page 9 Web App Example Hello World Hello World

10. WebApp Creation JQuery Mobile „Easy“ way to create WebApps Search for tutorial WebApps Katja Glaß 12. October 2015Page 10 Welcome To My Homepage An example of a navigation bar inside the footer. More Less Delete Like Information

11. WebApp Creation – JQuery Mobile WebApps Katja Glaß 12. October 2015Page 11... JQuery Mobile Style Sheet (CSS) JQuery Java Script (JS) JQuery Mobile Java Script (JS)

12. WebApp Creation – JQuery Mobile WebApps Katja Glaß 12. October 2015Page 12 Welcome To My Homepage An example of a navigation bar inside the footer....

13. WebApp Creation – JQuery Mobile WebApps Katja Glaß 12. October 2015Page 13 More Less Delete Like Information

14. WebApp Creation What should our app be about and look like? WebApps Katja Glaß 12. October 2015Page 14 SAS Tables Graphics

15. WebApp Creation What should our app be about and look like? „Sketch“ the app! WebApps Katja Glaß 12. October 2015Page 15

16. WebApp Creation - Sketch 1) Introduction WebApps Katja Glaß 12. October 2015Page 16

17. WebApp Creation - Sketch 1) Introduction 2) Graphics Overview 3) Graphic WebApps Katja Glaß 12. October 2015Page 17

18. WebApp Creation - Sketch 1) Introduction 2) Graphics Overview 3) Graphic 4) Tables Overview 5) Tables WebApps Katja Glaß 12. October 2015Page 18

19. WebApp Creation Starting the „Introduction“ page Adapt JQuery Mobile example Update Title Update Footer (texts & icons) Content includes an image and a paragraph WebApps Katja Glaß 12. October 2015Page 19

20. WebApp Creation Search for details to make it nice: Fixed footer at the bottom Mark „Home“ navigation Floating text around the image WebApps Katja Glaß 12. October 2015Page 20

21. WebApp Creation Graphics-List Scrolling through JQuery Mobile examples, „List View“ might be a nice option! WebApps Katja Glaß 12. October 2015Page 21 SAS Example Graphics Survey Results Height of Students Centered Subgroup Labels Default Graph of Sales Totals Annotate standard error bars Overlay a line on top of GCHART …

22. WebApp Creation List View WebApps Katja Glaß 12. October 2015Page 22

23. WebApp Creation Graphic Image HTML Tag width = 100% WebApps Katja Glaß 12. October 2015Page 23

24. WebApp Creation Table Overview Page use List View as for graphics WebApps Katja Glaß 12. October 2015Page 24 Table Display SAS output format? Listing (text output) PDF RTF HTML Embedding HTML in HTML?

25. WebApp Creation IFRAME WebApps Katja Glaß 12. October 2015Page 25

26. WebApp Creation IFRAME <iframe id="iframe_1" src="../sas_output/example1.html" width="100%" frameborder="0"> $('#t_example1').on("pageshow", function () { document.getElementById("iframe_1").height = ($(window).height()) - 140; }); WebApps Katja Glaß 12. October 2015Page 26

27. WebApp Creation WebApps Katja Glaß 12. October 2015Page 27 Wow! Our WebApp is done!!!

28. Further Options So what is next? Getting dynamic - one page per graphic required? No, use JavaScript! Change the HTML to use variables or Use external configuration file, e.g. JSON (similar to XML) Use this also to fill the tables and to create the lists dynamically WebApps Katja Glaß 12. October 2015Page 28

29. Further Options Give it a style! Non-standard style is much better CSS can be used to modify the default style CSS is quite complex Use tools! ThemeRoller!!! WebApps Katja Glaß 12. October 2015Page 29

30. Further Options Media Queries Different Layout for smartphones and tablets WebApps Katja Glaß 12. October 2015Page 30

31. Further Options Getting Interaction LocalStorage Database connection SAS Connect / SAS Stored Processes WebApps Katja Glaß 12. October 2015Page 31 Internet

32. Further Options Extension JQuery Mobile Gallery Extension Star Rating Progress Bars WebApps Katja Glaß 12. October 2015Page 32

33. Summary Create a WebApp? Easy! 1) Investigate what you want 2) Search for the right examples 3) Adapt example to your needs That‘s it! Unfortunately some installation and process background knowledge is required, especially when the WebApp should be migrated to native apps for stores. WebApps Katja Glaß 12. October 2015Page 33

34. Summary This presentation provides you an overview of how to get started and what you can search for. Become a WebApp developer! Join the PhUSE Script Repository and enhance our app! WebApps Katja Glaß 12. October 2015Page 34

35. Thank you! PhUSE / 12. October 2015 / Katja Glaß BHC 4:3 Template 2010 June 2014Page 35