Mobile Applications With JQuery Mobile and VDF 17.1

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 Presenter name | Presentation title2

JQuery Mobile samples Presenter name | Presentation title3

How will JQuery Mobile help you? Styling Transition Binding Ajax Presenter name | Presentation title4

Styling Styling is about how JQuery Mobile adds a mobile look and feel to your app Presenter name | Presentation title5

Plain HTML Text Input: Hello Link Presenter name | Presentation title6

Including JQuery Mobile Text Input: Hello Link Presenter name | Presentation title7

Complete Page Header Text Input: Hello Link Footer Presenter name | Presentation title8

Transition Transition is about how you can use JQuery Mobile to navigate between the various pages in your app Presenter name | Presentation title9

Transition Header Text Input: Hello Link Footer Header Page 2 Footer Presenter name | Presentation title10

Binding Binding is about how you can make things happen when you interact with the object in your app Presenter name | Presentation title11

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

Ajax Ajax is about you get data from your VDF backend into your app Presenter name | Presentation title13

Ajax Ajax Page 2 Footer function get_News(ItemNumber) { $.ajax( { type:'Post', url: ' 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); }); Presenter name | Presentation title14

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

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 Presenter name | Presentation title16

Alternatives Going Native Other JS frameworks Presenter name | Presentation title17

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

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

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