Software Archive
Read-only legacy content

How to force a listview repopulate with web service data in XDK?

Yonghong_R_
Beginner
1,078 Views

Hi.

I have listviews that are populated with data from a web service. When the app loads, it calls web services to populate the listviews. This is working fine until I enabled login verification.  With login verification, app gets empty data when it loads as the user hasn't logged in yet. The first screen of the app is to prompt for login. Once login is successful, I need to force those listviews that got empty data to be populated with real data. How should one accomplish that? 

"data-driving" feature clearly can trigger web service updates. Can one leverage this mechanism? 

Basically I am looking for a solution within the XDK's web service support framework. If XDK's web service doesn't support a simple way of doing this, then I guess I should directly call web service and update DOM nodes with data.

Appreciate any suggestions and advice. Thanks in advance.

 

0 Kudos
6 Replies
Brandon_K_Intel
Employee
1,078 Views

How did you build your application? Why can't you wait to load those list views until after the user logs in?

0 Kudos
Yonghong_R_
Beginner
1,078 Views

Hi Brandon,

Thanks for your reply.

The application is a single index.html file with a set of JS files etc. I am using Intel App Framework, with Angular (also used Backbone for a while) for web service. The app is developed and built in XDK. I hope I understood your question on building application correctly.

Your second question makes me to think that perhaps having a single HTML file is the problem. With a single HTML file, at initialization the app tries to resolve everything in the HTML and calls web services (with Angular it calls the ng-controllers, and with Backbone I am not sure how it's done but it's done).  So perhaps the right way is to have a login.html to process login only and then loadContent the main html file?  It sounds like I organized the app wrong. 

Would love to hear your further advice. In the meanwhile, I will try splitting index.html into login.html and main.html and load the second with something like:

af.ui.loadContent("main.html", FALSE, FALSE, "pop", TRUE);

Thanks

 

0 Kudos
Yonghong_R_
Beginner
1,078 Views

Hi Brandon,

I split my index.html into index.html and main.html, such that the new index.html has a single page for the login along with all the headers and footers, and main.html contains all other pages and their subpages. I also made 2 changes to main.html: (1) removed id="afui" on <body>; (2) removed the "content" <div> as it would hide pages when main.html is inserted.

When login is successful, I loadContent("main.html",...). This delays calling web services and renders the first page in main.html.  This would solve my original problem. 

However, navigating to other pages would fail, because it appears other pages except the first one in main.html are not inserted in DOM. 

Is there an example of using multiple html files somewhere? Appreciate if you could set me straight. Thanks!

 

0 Kudos
Brandon_K_Intel
Employee
1,078 Views

There is not an example of using multiple html files using both Angular and App Framework. I am assuming this is an issue with the delegation of the function callbacks between Angular and App Framework. I would suggest using our debugger with breakpoints to figure out where your app is failing.

0 Kudos
Chris_P_Intel
Employee
1,078 Views

The web service binding that you created makes a JS function. Just call it and everything will be repopulated.  

This function is the one you created when you make the binding.  So it's name is intel.xdk.services.your_binding_name

If you don't remember it, there are two places to find it:

js/index_init_services.js

Look for something like this:

data_support.ready(intel.xdk.services.rottentomatoessearch.bind(null, {}));

So, from the example above, I can see the function name is 

intel.xdk.services.rottentomatoessearch

 

And if you call that, the service request will b fired again:

intel.xdk.services.rottentomatoessearch()

 

The second place to find it is xdk/services/service-method.js

It'll be at the end of the file.  There is a block that looks like this:

intel.xdk.services.rottentomatoessearch=intel.xdk.services.iodocs_.bindCommon.bind(null,"intel.xdk.services.rottentomatoessearch",intel.xdk.services.iodocs_.rottentomatoes.search,{q:"toy",page_limit:"10",page:"1"});
/*xdk-auto-gen:service-methods:rottentomatoessearch:end*/

And, you can see pretty easily from that example, that the function name is intel.xdk.service.rottentomatoessearch

 

Hope this helps,

 

Chris

0 Kudos
Yonghong_R_
Beginner
1,078 Views

Brandon, Chris,

Sorry for taking so long to reply, but I  want to wrap up the discussion before it goes stale.

1. Chris, I confirm that calling intel.xdk.services.* works. I didn't know this, and I had moved on by using $http interface to initiate HTTP get/post etc. This way I can control when to call and whether to return data depending on login status.

2. I played around with dynamically loading html fragments that are in separate files. I couldn't get it to work right and went back to a single HTML file (index.html).

In conclusion I can move on with what I need, but whether I made right choices remain to be seen.

Thank you very much for your help.

 

0 Kudos
Reply