0

I am making a phonegap/jQuery-Mobile application. I am population a list dynamically from Google books API, deepening on user input e.g. authors name, or book title. If the user click in one of the list items, then a new page should come up, with book details, and some more options about the book.

The listview is a listview containing thumbnails and a link (to the detailed page). My question is, should I generate a dynamic page, and appending to the container as it said here.

or should I make a page template, and every time a user clicks on one of the items, should use that page?

Any code or concept ideas are welcome...

Lali Pali
  • 627
  • 2
  • 12
  • 25

2 Answers2

1

I think you shoul create a template page, and load the content on it. You use ajax request to get all the information you need and put it in your template.

Every time you touch a link, you will go on, for exemple, template.html. You will have template.js too. On template.js, you make an ajax request, and then parse the response to put for exemple the title on the right place. Here is an exemple with the responseXML

if (xmlHttpRequest.responseXML)
    {
        var title = $(xmlHttpRequest.responseXML).find("title");
        $(title).html(title);
    }

Hope this help you ;)

dpfauwadel
  • 3,866
  • 3
  • 23
  • 40
  • Why do you think is better to add a template page, and not create dynamic page, and add the name of the item to the end of the URL to the list page, as said on the article? – Lali Pali May 31 '13 at 09:36
  • I build a similar application, and it was for me much easier to do with a template. When i want to modify it, I just play beetween css, js and html of template. – dpfauwadel May 31 '13 at 09:48
1

This is a complex question and it depends on a more the one factor. Usually I would advise you to create everything dynamically but Phonegap is something different.

jQuery Mobile is created to work on many different HTML5 platforms, it doesn't matter is it a desktop or a mobile phone browser. Article you have read is written on this basis. Unfortunately jQuery Mobile is not optimized for mobile phone execution and this comes our first problem. While full page creating / recreating will work just fine on a desktop browsers, on a mobile browsers situation is completely different. Mobile phones are 10-20 x slower in jQuery execution then desktop browsers, not to mention Phonegap will slower it even more.

When page is dynamically created it it a process of around 650 ms, and even then this is a benchmark based on a light page. What you want is to create is a dynamically created listview inside a new page every time user wants to search something. It will take time to do that and your app will lose a usability, not to mention that user will have far from native experience with this app.

That is why you always need to use a template when working with jQuery Mobile and Phonegap or just jQuery Mobile in mobile browser.

I have an article what is needed to crate a dynamical content in jQuery Mobile app so take a look here.

Lets go even further then your question, id you decide to use templates you will need to limit page content. When data is acquired from Google service I would advise displaying only first 50 results. More then this and user will need to wait more then 1-2 sec for data to be displayed. I would even go step further and implement pagination system.

Basically now everything depends on are you going to use some template engine or do it by yourself. I would advise you to test this. As I told you Phonegap and jQuery Mobile is a slow combination and you will need to find a solution that is best optimized for your application, so don't be surprised if manual page creating is faster then some template engine.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • If I have a list of books, in page `bookList.hmtl` and within this list, there is a link to the page template, e.g `bookDetails.html` using jQuery Mobile always. In one example I saw, what they did is they added an id to every book item on the list, and so when a user clicked an item (book), in a `pagebeforeshow` event they run a script that took that id and appended at the end of the page template url e.g `boodDetails.html?id=3`. Is that a good way to do it, or I don't have to do this at all. – Lali Pali May 31 '13 at 10:30
  • Sorry I did not understand you last paragraph..by template engine you mean JQueryMobile ? – Lali Pali May 31 '13 at 10:31
  • @Daiman: Regarding your first question, yest this is a correct way. But you will need to know how to do it because it is a bit tricky with jQM. In a link I provide you in my answer: http://stackoverflow.com/a/14469041/1848600 there's a chapter: Data/Parameters manipulation between page transitions, you want to use Solution 1 but also take a look at other solutions. Regarding your other question I was referring to a real templateing engines like underscore. – Gajotres May 31 '13 at 10:43