Dynamic page - performance problem - scroll not working - HWC/SMP 2.2

Hi Folks,

First of all I want to say a big thanks to the folks who developed this SMP 2.2 version, I've been developing SUP based apps since SUP 1.5.2 and I can say we are on a much better place now IMHO.

I'm developing an HWC(2.2.2.6718) based App on SUP 2.2 using the latest SP/EBF on an iPad.

Following my requirements I have to develop an app capable of changing the layout dynamically and cope with variable amount of data as well.

The app could contain an undefined number of nodes with at least six “children” per node: Buttons/radio (not supported by SMP yet), text, combo etc.

I have done it but I'm facing some problems (really slow/scroll) and I would like clarify some points:

1) Performance:

In my App the backend only sends data, any layout change is done via JS on the client side, in my tests I can see that the HWC really takes time to parse the dynamically created jQuery components.

What is the best approach?

Create components using HTML direct like

htmlOutput += '<li data-role="list-divider" data-theme="i">' (from Exp Tracking)

or

var elementDivEditClass = document.createElement('div');

Insert/append child via jQuery or via classic HTML aproach?

$('#TorontoForm').children().eq(1).after(htmlOutput); (from Exp Tracking)

or

document.getElementsByName('')[Z].appendChild(elementTopic);

2) Initialize dynamically newly created jQuery elements:

Is there any way or a better way rather than forcing the trigger to create or calling jQuery elements constructor for every element? (I know it can be done in a single line of code, but if is it the best approach?) How can I force the page to be displayed as if it were the first time?

3) Removing elements:

In order to display a new page with new results to the user I'm removing all components (checking if they are not the same of course), using jQuery then creating/appending all again.

Is there any better way of doing this?

4) Scroll stops working:

At the first time launching the app, my dynamic page works really well, but when going back to the main page and coming back again to the dynamic page, the scroll just stops working; you cannot navigate using your finger anymore. The page is displayed correctly

What happens in the transition?

a) I'm removing all elements from the dynamic page.

b) Populating the page with new elements

c) Initializing jQuery elements calling create or constructor or using $.mobile.z.prototype.enhanceWithin. I tested with all, the results are the same.

At the first launching step c is not needed and the dynamically created elements are displayed correctly.

5) What are the recommendations when creating dynamic elements?

1. I.e.: Do I need to always include a listener?

6) At last but not least, will this approach “client rendered layout via JavaScript” ever succeed?

I’m asking this taking the SMP generated code as an example, it does generate HTML but it could be done dynamic in JavaScript. I do believe HTML is faster but how to create a dynamic page? Hiding elements? Hum…

Many thanks,

Felipe