PhoneGap 99 slides of NIWEA Install PhoneGap - - PowerPoint PPT Presentation

▶
phonegap
SMART_READER_LITE
LIVE PREVIEW

PhoneGap 99 slides of NIWEA Install PhoneGap - - PowerPoint PPT Presentation

Jul 22, 2023 115 likes •1.12k views

PhoneGap 99 slides of NIWEA Install PhoneGap http://lmgtfy.com/?q=install+phonegap There are more important things to discuss NIWEA HTML, JavaScript and CSS NIWEA HTML, JavaScript and CSS JavaScript Double-click to edit JavaScript

slide-1
SLIDE 1

PhoneGap

99 slides of NIWEA

slide-2
SLIDE 2

Install PhoneGap

  • http://lmgtfy.com/?q=install+phonegap
  • There are more important things to discuss
slide-3
SLIDE 3

NIWEA

HTML, JavaScript and CSS

slide-4
SLIDE 4

NIWEA

HTML, JavaScript and CSS

slide-5
SLIDE 5

JavaScript

Double-click to edit

slide-6
SLIDE 6

JavaScript

Double-click to edit It’s all about events ;)

slide-7
SLIDE 7

JavaScript

ES3 and ES5

slide-8
SLIDE 8

JavaScript is a programing language.

slide-9
SLIDE 9

JavaScript is a functional programing language.

slide-10
SLIDE 10

JavaScript is a functional and object oriented programing language.

slide-11
SLIDE 11

JavaScript is a functional and object

  • riented programing language based
  • n Self.
slide-12
SLIDE 12

JavaScript is a functional and

  • bject oriented programing

language based on Self and Scheme.

slide-13
SLIDE 13

JavaScript is a functional and object oriented programing language based on Self and Scheme that was written in 10 days at Netscape.

slide-14
SLIDE 14

JavaScript is a functional and object oriented programing language based

  • n Self and Scheme that

was written in 10 days at Netscape and it's provably the most innovative language of the decade...

slide-15
SLIDE 15

So, how to learn it?

slide-16
SLIDE 16

Not by doing!

slide-17
SLIDE 17

Seriously...

slide-18
SLIDE 18

<script> true === $.inArray('Crockford', gods); </script>

  • Videos (5 x 1h30')

http://yuiblog.com/crockford/

  • JavaScript: The Good Parts

http://oreilly.com/catalog/9780596517748

slide-19
SLIDE 19

What about PhoneGap?

slide-20
SLIDE 20

Patience

slide-21
SLIDE 21

JSLint Stinks

http://jslint.com/

  • Global

Variables

  • Semicolon
  • Scope
  • Required Blocks
  • Expression Statements
  • ...
slide-22
SLIDE 22

JSLint Stinks

http://jslint.com/

  • Indenting
  • i++
  • for ... in
  • ...
slide-23
SLIDE 23

http://lmgtfy.com/?q=jslint+<xsl:variable select="/user/editor"/>

slide-24
SLIDE 24

What about PhoneGap?

slide-25
SLIDE 25

One more thing…

slide-26
SLIDE 26

JSON

slide-27
SLIDE 27

{ 'user': { "is_logged_in": "false", "favorites": "12", } }

slide-28
SLIDE 28

{ 'user': { "is_logged_in": "false", "favorites": "12", } }

slide-29
SLIDE 29

{ "user": { "is_logged_in": "false", "favorites": "12" } }

slide-30
SLIDE 30

{ "user": { "is_logged_in": false, "favorites": 12 } }

slide-31
SLIDE 31

never ever ever never ever never! really! never ever string concatenate json.

  • never. ok?
slide-32
SLIDE 32

<?php echo json_encode( array( 'user' => array( 'is_logged_in' => false, 'favorite' => 12 ) ) );

slide-33
SLIDE 33

What about PhoneGap?

slide-34
SLIDE 34

JS Libraries?

slide-35
SLIDE 35

XUI Stinks

A simple javascript framework for building mobile web applications.

slide-36
SLIDE 36

XUI Stinks

A simple javascript framework for building mobile web applications.

slide-37
SLIDE 37

jQuery smells like roses.

The Write Less, Do More, JavaScript Library

slide-38
SLIDE 38

jQuery smells like roses.

The Write Less, Do More, JavaScript Library

slide-39
SLIDE 39

jQuery.address()

Deep linking for the masses

slide-40
SLIDE 40

jQote2 [tʃəˈkoʊteɪ]

John Resig’s awesome JavaScript Micro-Templating ported to jQuery

slide-41
SLIDE 41

jQote2 [tʃəˈkoʊteɪ]

John Resig’s awesome JavaScript Micro-Templating ported to jQuery

slide-42
SLIDE 42
slide-43
SLIDE 43
slide-44
SLIDE 44

jQote2 [tʃəˈkoʊteɪ]

John Resig’s awesome JavaScript Micro-Templating ported to jQuery

slide-45
SLIDE 45

What about PhoneGap?

slide-46
SLIDE 46

Image Loading

var logo = 'http://www.liip.ch/files/images/team/chregu.png'; $('#somewhere').append('<img/>') .children(':last') .attr('src', logo) .css('display', 'none') .after('<img src="img/loader.gif"/>') .load( function () { var img = $(this); img.next('img').remove(); img.css('display', 'block'); } );

slide-47
SLIDE 47

Image Loading

var logo = 'http://www.liip.ch/files/images/team/chregu.png'; $('#somewhere').append('<img/>') .children(':last') .attr('src', logo) .css('display', 'none') .after('<img src="img/loader.gif"/>') .load( function () { var img = $(this); img.next('img').remove(); img.css('display', 'block'); } );

slide-48
SLIDE 48

Image Loading

var logo = 'http://www.liip.ch/files/images/team/chregu.png'; $('#somewhere').append('<img/>') .children(':last') .attr('src', logo) .css('display', 'none') .after('<img src="img/loader.gif"/>') .load( function () { var img = $(this); img.next('img').remove(); img.css('display', 'block'); } );

slide-49
SLIDE 49

Image Loading

var logo = 'http://www.liip.ch/files/images/team/chregu.png'; $('#somewhere').append('<img/>') .children(':last') .attr('src', logo) .css('display', 'none') .after('<img src="img/loader_pictures.gif"/>') .load( function () { var img = $(this); img.next('img').remove(); img.css('display', 'block'); } );

slide-50
SLIDE 50

What about PhoneGap?

slide-51
SLIDE 51

Dispatcher

slide-52
SLIDE 52

$(function () { // [...] basic setup of the layout, toolbar, ect... $.address.value('index'); $.address.init( function () { $.address.change(ksm.application.processURI); } ); });

slide-53
SLIDE 53

$(function () { // [...] basic setup of the layout, toolbar, ect... $.address.value('index'); // #index $.address.init( function () { $.address.change(ksm.application.processURI); } ); });

slide-54
SLIDE 54

$(function () { // [...] basic setup of the layout, toolbar, ect... $.address.value(localStorage.getItem('currentPage') || 'index'); $.address.init( function () { $.address.change(ksm.application.processURI); } ); });

slide-55
SLIDE 55

$(function () { // [...] basic setup of the layout, toolbar, ect... $.address.value(localStorage.getItem('currentPage') || 'index'); $.address.init( function () { $.address.change(ksm.application.processURI); } ); });

slide-56
SLIDE 56

$(function () { // [...] basic setup of the layout, toolbar, ect... $.address.value(localStorage.getItem('currentPage') || 'index'); $.address.init( function () { $.address.change(ksm.application.processURI); } ); });

slide-57
SLIDE 57

$(function () { // [...] basic setup of the layout, toolbar, ect... $.address.value(localStorage.getItem('currentPage') || 'index'); $.address.init( function () { $.address.change(ksm.application.processURI); } ); });

slide-58
SLIDE 58

ksm.application = { // [...] processURI: function (address) { var module, parameters; // click, click, click // module = 'search'; // parameters = {q: 'ice+cream'} if ('string' === ksm[module].stub) { $('#content').html($(ksm[module].stub)); } if ('function' === typeof ksm[module].init) { ksm[module].init(parameters); } } }

slide-59
SLIDE 59

ksm.application = { // [...] processURI: function (address) { var module, parameters; // click, click, click // module = 'search'; // parameters = {q: 'ice+cream'} if ('string' === ksm[module].stub) { $('#content').html($(ksm[module].stub)); } if ('function' === typeof ksm[module].init) { ksm[module].init(parameters); } } }

#search?q=ice+cream

slide-60
SLIDE 60

ksm.application = { // [...] processURI: function (address) { var module, parameters; // click, click, click // module = 'search'; // parameters = {q: 'ice+cream'} if ('string' === ksm[module].stub) { $('#content').html($(ksm[module].stub)); } if ('function' === typeof ksm[module].init) { ksm[module].init(parameters); } } }

slide-61
SLIDE 61

ksm.application = { // [...] processURI: function (address) { var module, parameters; // click, click, click // module = 'search'; // parameters = {q: 'ice+cream'} if ('string' === ksm[module].stub) { $('#content').html($(ksm[module].stub)); } if ('function' === typeof ksm[module].init) { ksm[module].init(parameters); } } }

slide-62
SLIDE 62

ksm.application = { // [...] processURI: function (address) { var module, parameters; // click, click, click // module = 'search'; // parameters = {q: 'ice+cream'} if ('string' === ksm[module].stub) { $('#content').html($(ksm[module].stub)); } if ('function' === typeof ksm[module].init) { ksm[module].init(parameters); } } }

slide-63
SLIDE 63

$.address.value('#search?q=ice+cream'); $.address.change(ksm.application.processURI); ksm.search.init({q: 'ice+cream'});

slide-64
SLIDE 64

ksm.search = (function () { var that, callback; callback = return function (result) { // do your thing... }; that = { init: function (parameters) { $.get( 'http://api.com/search.json', parameters, callback ); ); }; return that; }());

slide-65
SLIDE 65

ksm.search = (function () { var that, callback; callback = return function (result) { // do your thing... }; that = { init: function (parameters) { $.get( 'http://api.com/search.json', parameters, callback ); ); }; return that; }());

slide-66
SLIDE 66

ksm.search = (function () { var that, callback; callback = return function (result) { // do your thing... }; that = { init: function (parameters) { $.get( 'http://api.com/search.json', parameters, callback ); ); }; return that; }());

slide-67
SLIDE 67

ksm.search = (function () { var that, callback; callback = return function (result) { // do your thing... }; that = { init: function (parameters) { $.get( 'http://api.com/search.json', parameters, callback ); ); }; return that; }());

slide-68
SLIDE 68

ksm.search = (function () { var that, callback; callback = return function (result) { // do your thing... }; that = { init: function (parameters) { $.get( 'http://api.com/search.json', parameters, callback ); ); }; return that; }());

slide-69
SLIDE 69

ksm.search = (function () { var that, callback; callback = return function (result) { // do your thing... }; that = { init: function (parameters) { $.get( // parameters = {q: 'ice+cream'} 'http://api.com/search.json', parameters, callback ); ); }; return that; }());

slide-70
SLIDE 70

ksm.search = (function () { var that, callback; callback = return function (result) { // do your thing... }; that = { init: function (parameters) { $.get( 'http://api.com/search.json', parameters, callback ); ); }; return that; }());

slide-71
SLIDE 71

ksm.application = { // [...] setAddress: function (uri) { localStorage.setItem('currentPage', uri); $.address.value(uri); } };

slide-72
SLIDE 72
slide-73
SLIDE 73

// currentPage: #search?q=ice+cream $(function () { $.address.value(localStorage.getItem('currentPage'); $.address.change(ksm.application.processURI); }); ksm.search.init({q: 'ice+cream'}); ksm.application.setAddress = function (uri) { localStorage.setItem('currentPage', uri); $.address.value(uri); }

slide-74
SLIDE 74

Localization is asynchronous

Module dependent.

slide-75
SLIDE 75

Localization is asynchronous

Module dependent.

slide-76
SLIDE 76

Localization is asynchronous

Module dependent. We need it for Ajax Calls.

slide-77
SLIDE 77

ksm.search = (function () { var that, callback; callback = return function (result) {}; that = { init: function (parameters) { ksm.location.localizeCall( function (parameters) { $.get( 'http://api.ch/search.json', parameters, callback ); } parameters ); }; return that; }());

slide-78
SLIDE 78

ksm.search = (function () { var that, callback; callback = return function (result) {}; that = { init: function (parameters) { ksm.location.localizeCall( function (parameters) { $.get( 'http://api.ch/search.json', parameters, callback ); }, parameters ) }; return that; }());

slide-79
SLIDE 79

ksm.location = { localizeCall: function (callback, parameters) { navigator.geolocation.getCurrentPosition( function (position) { parameters.latitude = position.coords.latitude; parameters.longitude = position.coords.longitude; callback(parameters); }, function (error) { // error.code === 1 => denied that.localizeCall(callback, parameters); } ); } }

slide-80
SLIDE 80

ksm.location = { localizeCall: function (callback, parameters) { navigator.geolocation.getCurrentPosition( function (position) { parameters.latitude = position.coords.latitude; parameters.longitude = position.coords.longitude; callback(parameters); }, function (error) { // error.code === 1 => denied that.localizeCall(callback, parameters); } ); } }

slide-81
SLIDE 81

ksm.location = { localizeCall: function (callback, parameters) { navigator.geolocation.getCurrentPosition( function (position) { parameters.latitude = position.coords.latitude; parameters.longitude = position.coords.longitude; callback(parameters); }, function (error) { // error.code === 1 => denied that.localizeCall(callback, parameters); } ); } }

slide-82
SLIDE 82

ksm.location = { localizeCall: function (callback, parameters) { navigator.geolocation.getCurrentPosition( function (position) { parameters.latitude = position.coords.latitude; parameters.longitude = position.coords.longitude; callback(parameters); }, function (error) { // error.code === 1 => denied that.localizeCall(callback, parameters); } ); } }

slide-83
SLIDE 83

ksm.location = { localizeCall: function (callback, parameters) { navigator.geolocation.getCurrentPosition( function (position) { parameters.latitude = position.coords.latitude; parameters.longitude = position.coords.longitude; callback(parameters); }, function (error) { // error.code === 1 => denied that.localizeCall(callback, parameters); } ); } }

slide-84
SLIDE 84

Are you still with me?

slide-85
SLIDE 85

Pass the parameters to the callback function...

slide-86
SLIDE 86

ksm.search = (function () { var that, getCallback; callback = function (result) { // do your thing... }; that = { init: function (parameters) { ksm.location.localizeCall( function (parameters) { $.get( 'http://api.ch/search.json', parameters, callback ); }, parameters ); }; return that; }());

slide-87
SLIDE 87

ksm.search = (function () { var that, getCallback; getCallback = function (parameters) { return function (result) { // do your thing... }; }; that = { init: function (parameters) { ksm.location.localizeCall( function (parameters) { $.get( 'http://api.ch/search.json', parameters, getCallback(parameters) ); }, parameters ); }; return that; }());

slide-88
SLIDE 88

ksm.search = (function () { var that, getCallback; getCallback = function (parameters) { return function (result) { // do your thing... }; }; that = { init: function (parameters) { ksm.location.localizeCall( function (parameters) { $.get( 'http://api.ch/search.json', parameters, getCallback(parameters) ); }, parameters ); }; return that; }());

slide-89
SLIDE 89

There’s more...

  • Login
  • Back button
  • Actions
slide-90
SLIDE 90

There’s more...

  • Login
  • Back button
  • Actions
slide-91
SLIDE 91

Getting round the stateless nature of HTTP

slide-92
SLIDE 92

cookie

Getting round the stateless nature of HTTP

slide-93
SLIDE 93

cookie

Getting round the stateless nature of HTTP

slide-94
SLIDE 94

ksm.search = (function () { var that, getCallback; getCallback = function (parameters) { return function (result) { // do your thing... }; }; that = { init: function (parameters) { ksm.location.localizeCall( function (parameters) { $.get( 'http://api.ch/search.json', parameters, getCallback(parameters), 'json' ); }, parameters ); }; return that; }());

slide-95
SLIDE 95

ksm.search = (function () { var that, getCallback; getCallback = function (parameters) { return function (result) { // do your thing... }; }; that = { init: function (parameters) { ksm.location.localizeCall( function (parameters) { ksm.application.post( 'search.json', parameters, getCallback(parameters) ); }, parameters ); }; return that; }());

slide-96
SLIDE 96

ksm.application.post = function (url, parameters, callback) { var token, apiPath; apiPath = 'http://api.ch/'; token = localStorage.getItem("token"); if (token) { // inject the token parameters.token = token; } $.post( apiPath + url, parameters, callback, 'json' ); }

slide-97
SLIDE 97

ksm.application.post = function (url, parameters, callback) { var token, apiPath; apiPath = 'http://api.ch/'; token = localStorage.getItem("token"); if (token) { // inject the token parameters.token = token; } $.post( apiPath + url, parameters, callback, 'json' ); }

slide-98
SLIDE 98

ksm.application.post = function (url, parameters, callback) { var token, apiPath; apiPath = 'http://api.ch/'; token = localStorage.getItem("token"); if (token) { // inject the token parameters.token = token; } $.post( apiPath + url, parameters, callback, 'json' ); }

slide-99
SLIDE 99

This is the slide #99