More Related Content More from Microsoft Mobile Developer (20) Apps de consumo de APIs de Internet para mobile phones2. Interação
Nokia Developer
http://www.developer.nokia.com
Twitter: @nokiadev_brasil
Grupo Devs S40 no Nokia Developer
http://www.developer.nokia.com/Co
mmunity/Discussion/group.php?grou
pid=114
2
3. Apps de consumo de
APIs de Internet para
mobile phones
Raymundo Junior
Desenvolvedor – INdT
Evangelista Nokia de Tecnologia
3
4. Conteúdo
• Device S40
• Estrutura do Projeto
• Main
• Template
• Lib
• Service
• JSON Viewer
• View1
• View2
• View3
• Estudo de Caso
4
8. Template
var template = {
'item_view1' : '<div class="item-view1"
onclick="mwl.switchClass('#content','view*','view2');
view2.init('{ID}');">{TEXT}</div>',
'item_view2' : '<div
onclick="mwl.switchClass('#content','view*','view3');
view3.init('{ID}');">{TEXT}</div>',
'item_view3' : '<div>{TEXT}</div>'
};
8
9. Lib
var lib = {
call: function(url, successCallback, errorCallback){
var request = new XMLHttpRequest();
try {
request.open("GET", url, true);
request.onreadystatechange = function(){
if (request.readyState == 4) {
if (request.status == 200) {
successCallback(eval('(' + request.responseText + ')'));
} else {
errorCallback("error status: " + request.status);
}
}
};
request.send(null);
} catch (e) {
errorCallback("error try: " + e);
}
}
};
9
11. Service
var URLS = {
'plataformas' : 'index.php?opcao=plataformas',
'devices' : 'index.php?opcao=devices&id={ID}',
'device' : 'index.php?opcao=device&id={ID}'
};
11
12. Service
getView2 : function(id, success, error) {
var url = service.getUrl('devices').replace("{ID}",
id);
lib.call(url, success, error);
},
getView3 : function(id, success, error) {
var url = service.getUrl('device').replace("{ID}", id);
lib.call(url, success, error);
}
12
13. Service
var BASE_URL = 'http://justkaws.com/json/';
var URLS = {
'plataformas' : 'index.php?opcao=plataformas',
'devices' : 'index.php?opcao=devices&id={ID}',
'device' : 'index.php?opcao=device&id={ID}'
};
var service = {
getUrl: function(id) {
return BASE_URL + URLS[id];
},
getView1 : function(success, error) {
var url = service.getUrl('plataformas');
lib.call(url, success, error);
},
getView2 : function(id, success, error) {
var url = service.getUrl('devices').replace("{ID}", id);
lib.call(url, success, error);
},
getView3 : function(id, success, error) {
var url = service.getUrl('device').replace("{ID}", id);
lib.call(url, success, error);
}
};
13
17. View1
render : function(data){
var dados = data.json;
var limit = dados.length;
var itemTemplate = template.item_view1;
var itens = "";
for (var x = 0; x< limit; x++){
var params = dados[x].platform + '[!{#?#?#}!]' + dados[x].id;
itens += itemTemplate.replace("{TEXT}",
dados[x].platform).replace("{ID}", params);
}
document.getElementById('view-content1').innerHTML = itens;
}
17
18. View1
var view1 = {
init : function(){
document.getElementById('title-view1').innerHTML = "Plataformas NOKIA";
service.getView1(
function(data){
view1.render(data);
},function(data){
document.getElementById('view-content1').innerHTML = data;
}
);
},
render : function(data){
var dados = data.json;
var limit = dados.length;
var itemTemplate = template.item_view1;
var itens = "";
for (var x = 0; x< limit; x++){
var params = dados[x].platform + '[!{#?#?#}!]' + dados[x].id;
itens += itemTemplate.replace("{TEXT}", dados[x].platform).replace("{ID}", params);
}
document.getElementById('view-content1').innerHTML = itens;
}
};
18
19. View2
init : function(args){
var vetor = args.split('[!{#?#?#}!]');
document.getElementById('title-view2').innerHTML = vetor[0];
service.getView2( vetor[1],
function(data){
view2.render(data);
},function(data){
document.getElementById('view-content2').innerHTML = data;
}
);
},
19
20. View2
render : function(data){
var dados = data.json;
var limit = dados.length;
var itemTemplate = template.item_view2;
var itens = "";
for (var x = 0; x< limit; x++){
var params = dados[x].name + '[!{#?#?#}!]' + dados[x].id;
itens += itemTemplate.replace("{TEXT}",
dados[x].name).replace("{ID}", params);
}
document.getElementById('view-content2').innerHTML = itens;
}
20
21. View2
var view2 = {
init : function(args){
var vetor = args.split('[!{#?#?#}!]');
document.getElementById('title-view2').innerHTML = vetor[0];
service.getView2( vetor[1],
function(data){
view2.render(data);
},function(data){
document.getElementById('view-content2').innerHTML = data;
}
);
},
render : function(data){
var dados = data.json;
var limit = dados.length;
var itemTemplate = template.item_view2;
var itens = "";
for (var x = 0; x< limit; x++){
var params = dados[x].name + '[!{#?#?#}!]' + dados[x].id;
itens += itemTemplate.replace("{TEXT}", dados[x].name).replace("{ID}", params);
}
document.getElementById('view-content2').innerHTML = itens;
}
};
21
22. View3
init : function(args){
var vetor = args.split('[!{#?#?#}!]');
document.getElementById('title-view3').innerHTML = vetor[0];
service.getView3( vetor[1],
function(data){
view3.render(data);
},function(data){
document.getElementById('view-content3').innerHTML = data;
}
);
},
22
23. View3
render : function(data){
var dados = data.json;
var limit = dados.length;
var itemTemplate = template.item_view3;
var itens = "";
for (var x = 0; x< limit; x++){
itens += itemTemplate.replace("{TEXT}", dados[x].label + ": "
+ dados[x].value);
}
document.getElementById('view-content3').innerHTML =
itens;
}
23
24. View3
var view3 = {
init : function(args){
var vetor = args.split('[!{#?#?#}!]');
document.getElementById('title-view3').innerHTML = vetor[0];
service.getView3( vetor[1],
function(data){
view3.render(data);
},function(data){
document.getElementById('view-content3').innerHTML = data;
}
);
},
render : function(data){
var dados = data.json;
var limit = dados.length;
var itemTemplate = template.item_view3;
var itens = "";
for (var x = 0; x< limit; x++){
itens += itemTemplate.replace("{TEXT}", dados[x].label + ": " + dados[x].value);
}
document.getElementById('view-content3').innerHTML = itens;
}
};
24