PDA

View Full Version : Example reading the XML Response from REST webservice



kathir
15 Jan 2011, 11:13 PM
Hello Everyone,
I am new to sencha touch. I am trying to implement a list which is populated based on the response received from a REST webservice. The webservice provides XML content.
Is there any example how to construct the request and read the xml data. I have searched the whole forum with no luck.

Thanks,
Kathir.

kathir
17 Jan 2011, 3:01 PM
I have tried the following code, all i see is the busy loading icon in the middle of the screen, Can anyone point me whats wrong with this.



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,

onReady: function(){

Ext.regModel('customer',{idProperty: 'id', fields: [{name:'customerPk',type:'string'},{name:'id',type:'string'}]});

var xmlStore = new Ext.data.Store({
model: 'customer',
method: 'GET',
proxy: {
url: 'http://localhost:8080/restservices/findAllCustomers',
type: 'ajax',
reader: {
type: 'xml',
record: 'customer',
root: 'list'
}
}
});
xmlStore.load();

var xmlList = new Ext.List({
title: 'xmlList',
fullscreen: true,
itemTpl: '<tpl for=".">{customerPk} - {id}</tpl>',
store: xmlStore
});
var p = new Ext.TabPanel({
fullscreen: 'true',
items: [xmlList]
})

}
});

jep
17 Jan 2011, 10:39 PM
Can you also post the xml that http://localhost:8080/restservices/findAllCustomers should be returning? If so, I can copy it locally so I can have my own local webserver serve it up to me in order to try your code.

Other than that, I'm suspicious that you don't really want to have the &lt;tpl for="."> loop around the itemTpl in your list. That could possibly be right, but it looks like it might be an issue. Though I'm not sure about getting a busy loading icon.

kathir
18 Jan 2011, 10:59 AM
This is the XML data.


<list>
<customer>
<customerPk>5000874</customerPk>
<id>RHD</id>
</customer>
<customer>
<customerPk>5000957</customerPk>
<id>ttttt</id>
</customer>
</list>

jep
18 Jan 2011, 12:04 PM
I saved this to a file so my webserver could serve it up and your code works fine for me. All I changed was the url. I now get a display showing:

xmlList
5000874 - RHD
5000957 - ttttt

It seems like maybe your webserver isn't returning the data properly. I'd focus on that aspect.

kathir
18 Jan 2011, 2:05 PM
Thanks for looking into this, jep. Its still not working for me. I see the following on the javascript console on chrome browser.


XMLHttpRequest cannot load http://localhost:8080/restservices/findAllCustomers.xml?_dc=1295388125332&limit=25. Origin null is not allowed by Access-Control-Allow-Origin.
sencha-touch-debug.js:7209Uncaught TypeError: Cannot read property 'length' of undefined

If i point the browser to the url http://localhost:8080/restservices/findAllCustomers.xml, it displays the data correctly. So i am not sure where the problem is.

jep
18 Jan 2011, 2:07 PM
How are you loading your sencha application? Is it http://localhost:8080/index.html or what?

kathir
18 Jan 2011, 2:13 PM
No.. I have the .html and .js files in local disk and i run the server for the webservices in the same computer.

jep
18 Jan 2011, 2:18 PM
Ah, that's what I thought. You're running into the browsers cross-site security. By default, you can't use XMLHttpRequest to request XML from a different domain than the page was loaded from. Loading it off your disk counts as a different domain than localhost. You need to drop your app somewhere it can be loaded off localhost.

kathir
18 Jan 2011, 2:29 PM
oh..Now i understand. Thanks for the help. I was running my tomcat on my local computer and wanted quickly test the javascript. Now if i run my apache webserver and my tomcat. Will it still treat as cross-site ( thats what is happening ). I am completely new to these things. What is the best way to configure the server side.

jep
18 Jan 2011, 2:34 PM
Probably not if they're running on different ports (which they will be). This is something that is implemented by the browser, so I'm not 100% sure if all of them Here is firefox's:

https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript

Of course, if you're doing Sencha Touch stuff, you're not using firefox (unless it's 4.0 beta). You could probably google around and find out what safari's policy is. The key word you'll want to look for is "same origin policy". Also, many browsers have a way of disabling the policy. This isn't something you can rely on users to do for your app, but it is something you could do for development testing. You'll have to google around for that as I don't know any of the specifics.

Good luck!

kathir
18 Jan 2011, 2:38 PM
Thanks jep. I will do the reading.

kathir
18 Jan 2011, 4:39 PM
jep, finally i got the whole thing working. I configured apache webserver with mod_jk, tomcat. Now all the request are happening on the same domain.

Thanks for the help.

jep
18 Jan 2011, 4:40 PM
Ah, tomcat runs UNDER apache. Forgot about that (never really used it, only seen it referenced). Glad you got some success.

kathir
18 Jan 2011, 5:19 PM
jep,

do you have any idea on this http://www.sencha.com/forum/showthread.php?121651-NestedList-with-JSON-service-for-each-list

soubhagya ranjan
9 Nov 2011, 2:31 AM
I have the similar problem.I m trying to read the xml out put from rest web services.I m getting the same error in the chrome console as folows

XMLHttpRequest cannot load http://172.19.72.11:8050/CiscoServices/rest/hello/Example?_dc=1320832707759&limit=25. Origin http://localhost:8050 is not allowed by Access-Control-Allow-Origin.sencha-touch.js:6Uncaught TypeError: Cannot read property 'length' of undefined

My code is follows

Ext.regModel('Properties', {
fields: [
{name: 'name', type: 'string'},
{name: 'id', type: 'string'}
]
});


store = new Ext.data.Store({
model : 'Properties',
method:'get',
proxy: {
type: 'ajax',
url : 'http://172.19.72.11:8050/CiscoServices/rest/hello/Example',
reader: {
type: 'xml',
root : 'exampleBeans',
record: 'ExampleBean'
}
}

});
store.load();


var t=new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen: true,
items: [{
xtype:'button',
ui:'confirm-round',
text:'DATA STORE',
handler:function(){
v.setDataView();
}

}]

});
}
});

var v=new Ext.Application({
setDataView: function(){
new Ext.Panel({
fullscreen: true,
items:[listPanel]
});

}
});


var listPanel = {
dockedItems: [
{
title: 'Results',
xtype: 'toolbar',
ui: 'light',
dock: 'top'
}
],
layout: 'fit',
scroll: 'vertical',
items: [
{
xtype: 'list',
itemTpl : '{name},{id}',
store: store,
singleSelect: true,
onItemDisclosure: function(record, btn, index){


}
}
],
flex:1


};





I am trying to read the data from the following xml file

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
- (http://localhost:8050/CiscoServices/rest/hello/Example#) <exampleBeans>
- (http://localhost:8050/CiscoServices/rest/hello/Example#) <ExampleBean>
<id>1</id>

<name>a</name>

</ExampleBean>


</exampleBeans>




can you please help me?. Thanks in advance.