topic Hi Brandon, in Software Archive

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

Yonghong_R_ — Sun, 26 Jul 2015 22:48:21 GMT

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.

How did you build your

Brandon_K_Intel — Mon, 27 Jul 2015 21:16:48 GMT

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

Hi Brandon,

Yonghong_R_ — Mon, 27 Jul 2015 22:05:26 GMT

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

Hi Brandon,

Yonghong_R_ — Tue, 28 Jul 2015 03:17:07 GMT

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!

There is not an example of

Brandon_K_Intel — Mon, 03 Aug 2015 14:09:32 GMT

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.

The web service binding that

Chris_P_Intel — Mon, 03 Aug 2015 16:05:23 GMT

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

Brandon, Chris,

Yonghong_R_ — Tue, 18 Aug 2015 02:56:49 GMT

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.