1. Mobile Applications With JQuery Mobile and VDF 17.1

2. Presentation outline What can you do on a mobile device (examples) Examples of how to do it A littlebit about alternatives Focus will be on client-side programming and not webservices 07-06-2016Presenter name | Presentation title2

3. JQuery Mobile samples 07-06-2016Presenter name | Presentation title3

4. How will JQuery Mobile help you? Styling Transition Binding Ajax 07-06-2016Presenter name | Presentation title4

5. Styling Styling is about how JQuery Mobile adds a mobile look and feel to your app. 07-06-2016Presenter name | Presentation title5

6. Plain HTML Text Input: Hello Link 07-06-2016Presenter name | Presentation title6

7. Including JQuery Mobile Text Input: Hello Link 07-06-2016Presenter name | Presentation title7

8. Complete Page Header Text Input: Hello Link Footer 07-06-2016Presenter name | Presentation title8

9. Transition Transition is about how you can use JQuery Mobile to navigate between the various pages in your app. 07-06-2016Presenter name | Presentation title9

10. Transition Header Text Input: Hello Link Footer Header Page 2 Footer 07-06-2016Presenter name | Presentation title10

11. Binding Binding is about how you can make things happen when you interact with the object in your app. 07-06-2016Presenter name | Presentation title11

12. Binding Header Text Input: Hello Link Footer $('#hello').click(function(){ $('#textinput-s').val('Hello World'); }); 07-06-2016Presenter name | Presentation title12

13. Ajax Ajax is about you get data from your VDF backend into your app. 07-06-2016Presenter name | Presentation title13

14. Ajax Ajax Page 2 Footer function get_News(ItemNumber) { $.ajax( { type:'Post', url: 'http://2.107.26.23/scanduck/tempService.wso/Get_News/JSON’, data: {iNewsItem : ItemNumber}, success:function(data) { $('#News_List').html(''); var i = 0; var liste = ''; while(i < data.length) { liste = liste + ' ' + data[i].sTitle + ' ' + data[i].sDate + ' ' + data[i].sTime + ' ’; I++; } $('#News_List').prepend(liste); $('#News_List').listview('refresh'); } }); } $('#link').click(function(){ get_News(0); }); 07-06-2016Presenter name | Presentation title14

15. Code outline (import JQery, css etc.) …. (The divs does normally not hold data). function_1 function_2. binding_a binding_b 07-06-2016Presenter name | Presentation title15

16. Why JQuery Mobile Our Objective: – To make a mobile interface with server based business rules. What we don’t want: – To make an app with any client-side business rules. JQM as front-end and VDF as middleware fits the bill with very little client-side JS to manipulate the HTML controls. 07-06-2016Presenter name | Presentation title16

17. Alternatives Going Native Other JS frameworks 07-06-2016Presenter name | Presentation title17

18. Native Native: + Betterlooking controls ? + Acces to hardware ? (Phonegap) - One App for each platform IPhone: Objective C. Android: Java, C++. 07-06-2016Presenter name | Presentation title18

19. Other frameworks Less JavaScript + HTML Perfect for user interface only Looks ok. Easy 07-06-2016Presenter name | Presentation title19 More JavaScript – No HTML VMC Architecture Looks cool Steep learning curve

20. Resources jquerymobile.com m.scanduc.com keys.front-it.com 2.107.26.23/scanducsamples/transition.html 2.107.26.23/scanducsamples/binding.html 2.107.26.23/scanducsamples/ajax.html 2.107.26.23/timer/index.html 07-06-2016Presenter name | Presentation title20