PhoneGap, jQueryMobile e servizio Web

Question

Ho creato un'applicazione Android nativa utilizzando i pacchetti Android SDK e java, utilizzando un servizio Web ASP.Net creato da me e funziona perfettamente. Ma ora voglio fare questo multipiattaforma. Ho sentito che Phonegap e jQuery Mobile ti aiuteranno, ma sono ancora un po 'confuso.

1. È necessario ospitare il file HTML che utilizza Javascript per funzionare correttamente? O
2. Posso includere il file HTML e js nella mia applicazione e chiamare i metodi del servizio web?

Qualcuno può guidarmi per favore?

mio codice Demo è

JAVA SCRIPT

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
<script src="jquery-1.7.2.min"></script> 
<script src="jquery.mobile-1.1.1.min.js"></script> 
<script type="text/javascript" charset="utf-8"/></script> 

<link rel="stylesheet" src="jquery.mobile-1.1.1.min.css"/> 
    <script type="text/javascript"> 


function onDeviceReady() {} 
document.addEventListener("deviceready", onDeviceReady, false); 

function LoginButton_onclick() { 
    $.ajax({ 
type: "POST", 
contentType: "application/json; charset=utf-8", 
dataType: "json", 
    url: "http://182.72.192.18/webservicedemo/service.asmx/HelloWorld", 
    data: '{}', 
    success: function(msg) { 
    jsonArray = $.parseJSON(msg.d); 
    var $ul = $('<ul id="details">'); 
    for(i=0; i < jsonArray.length; i++) 
    { 
    $("#details").append('<li id="'+i+'" name="head" >'+jsonArray[i].name+'</li>'); 
} $('#details').listview('refresh'); 
    }, 
    error: function(msg) { 
     alert("Error"); 
    } 
}); 

</script> 

HTML

<div data-role="page" id="Page1"> 
<h1>DEMO PAGE</h1> 

<div id="DEMO"> 
<input id="LoginButton" type="button" value="GET DATA" onclick="LoginButton_onclick()" /></div> 

<div id="divList" data-role="content"> 
<ul id="details" data-role="listview" data-inset="true"></ul> 
</div> 

</div>  
</body> 

e la mia ASP.NET Web Service è

[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
[System.Web.Script.Services.ScriptService] 
public class Service : System.Web.Services.WebService{ 
JavaScriptSerializer serializer = new JavaScriptSerializer(); 
public Service() {} 

[WebMethod] 
[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
public string HelloWorld() { 

    List<clsDetails> deailsList = new List<clsDetails>{ 
    new clsDetails(1,"BOY","SCHOOL"), 
    new clsDetails(2,"GIRL","COLLEGE"), 
    new clsDetails(3,"MAN","OFFICE")}; 

    string detail = serializer.Serialize(deailsList); 
    return detail; 
} 
} 

se ospito il file html insieme al mio servizio web mi fornisce risultato. ma quando provo a chiamare usando un file html locale dall'app per Android fallisce. Non riesco a capire cosa è andato storto.

Qualcuno può dirmi cosa è andato storto qui? Guardate qui è la risposta che ricevo da web-service e il parsing che a JSON

phonegap.xml

<phonegap> 
<access origin="http://182.72.192.18" /> 
</phonegap> 

Answer 1

Devi usare un HTML locale e ottenere i dati del server utilizzando XHR chiama il tuo webservice, quindi mostra i dati del tuo webservice nel tuo html.

Modifica dopo aver visto il codice:

Il problema è l'url. Non puoi usare localhost, perché se esegui il test su un dispositivo, localhost è il dispositivo e il dispositivo non ha il webservice, devi usare l'iP locale del tuo computer. http://192.168.1.XXX:1000/WebSite2/Service.asmx/HelloWorld

Modifica 2: Ho appena testato il codice e ho funzionato per me, basta cambiare questo. jsonArray [i] .Result non ha funzionato per me, restituisce undefined, ma è possibile accedere a tutti gli attributi dell'oggetto json, nell'esempio in cui ho usato il nome. E aggiungi l'aggiornamento al di fuori, devi solo aggiornare quando finisci, non tutte le volte, e inserisci il ; alla fine.

for(i=0; i < jsonArray.length; i++) 
    { 
    $("#details").append('<li id="'+i+'" name="head" >'+jsonArray[i].name+'</li>'); 

} 
$('#details').listview('refresh'); 

Se ancora non funziona, verificare se il dominio lista bianca phonegap whitelist guide

codice di lavoro completa

<!DOCTYPE html> 
<html> 
    <head> 
     <title>DEMO</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
     <title>DEMO</title> 
     <script type="text/javascript" charset="utf-8"> 

      function LoginButton_onclick() { 
       $.ajax({ 
         type: "POST", 
         contentType: "application/json; charset=utf-8", 
         dataType: "json", 
         url: "http://182.72.192.18/webservicedemo/service.asmx/HelloWorld", 
         data: '{}', 
         success: function(msg) { 
         jsonArray = $.parseJSON(msg.d); 
         var $ul = $('<ul id="details">'); 
         for(i=0; i < jsonArray.length; i++) 
         { 
         $("#details").append('<li id="'+i+'" name="head" >'+jsonArray[i].name+'</li>'); 
         } 
         $('#details').listview('refresh'); 
         }, 
         error: function(msg) { 
         alert("Error"); 
         } 
         }); 

      } 


      </script> 
     </head> 
     <body> 
      <div data-role="page" id="Page1"> 
       <h1>DEMO PAGE</h1> 

       <div id="DEMO"> 
        <input id="LoginButton" type="button" value="GET DATA" onclick="LoginButton_onclick()" /></div> 

       <div id="divList" data-role="content"> 
        <ul id="details" data-role="listview" data-inset="true"></ul> 
       </div> 

      </div> 
     </body> 
</html> 

Answer 2

È necessario includere il file HTML che mostra i dati + JS chiamando il servizio web con la tua app. Tramite l'iniezione di dati (ad es. JSON o XML tramite chiamate XHR), è possibile estrarre i dati dal proprio servizio Web. Ciò significa che il tuo servizio web dovrebbe generare i dati richiesti in JSON o XML in modo che il tuo HTML + JS sia in grado di elaborare e mostrare i dati dal tuo servizio web. Puoi farlo con PhoneGap SDK o anche con PhoneGap Build.

Un semplice esempio che personalmente mi piace può essere trovato qui: http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/. Invece di ASP.NET, funziona con PHP/MySQL, ma il concetto è fondamentalmente lo stesso, penserei.

Answer 3

Il problema che si ha è che non è possibile accedere al proprio servizio web dal proprio dispositivo mobile, solo quando si esegue il programma con l'emulatore del computer. È necessario farlo:

• avere il vostro webservice in un server, non in localhost.

• Modifica res/xml/cordova.xml per problemi di crossdominio.

  <!-- <access origin="https://example.com" /> allow any secure requests to example.com --> 
  <!-- <access origin="https://example.com" subdomains="true" /> such as above, but including subdomains, such as www --> 
  <!-- <access origin=".*"/> Allow all domains, suggested development use only --> 
  

Con questi passaggi, il programma funzionerà perfettamente.

Modifica

ho visto che il tipo si sta tornando nel vostro WS non è nello stile JSON. La tua risposta è qualcosa tra XML e JSON. Quando si ottiene il valore di ritorno corretto di WebMethod, tutto andrà a posto.

È necessario utilizzare l'ultima versione di Cordova e jQM. Vedi che il tuo jQM CSS e JS non corrispondono nelle versioni.

Answer 4

Questo è un buon esempio che ho trovato http://www.idesigncity.co.uk/how-to-fetch-json-data-from-phonegap Solitamente la chiamata JSON o XML sarà la vostra risposta. Scarica il file zip qui