Since last time I've been trying
to sort out the general workflow of the app. It's fundamentally not hard, there is a list of transmitters, you select a transmitter and it shows the compass view. Having done quite a bit of ajax/asp.net/html in the past, I immediately started off by creating two divs within my 'page', one for the list, one for the compass. Then using the onClick event in the list, this will switch the display attribute on the divs. This seemed
to work, but did lead
to some dodgy transitional redrawing artefacts which I was not happy with. So after some Googling I realised I was doing it all wrong! JQuery mobile has the concept of giving an object in html a data-role. By giving a div the attribute data-role="page" it is then treated as a separate page on the mobile device. Within the code, this is referenced like a html anchor in the form #mypage. Using this system, page transitions such as fade or slide are automatically applied which adds
to the whole authenticity of the app! Here is a simple example: . <a href="#'compasspage">compass</a> . <div data-role="page" id="compasspage" data-add-back-btn="true"> But I don't want just a static link, I want
to dynamically create my list, and get each list elements
to switch
to the compass page with the right information. So here is the jquery that I used
to dynamically inject new <li> rows into the <ul> block. $('ul').append($('<li/>', { //here appendin `<li>` 'data-role': "list-divider" }).append($('<a/>', { //here appending `<a>` into `<li>` 'href': '#compasspage', 'data-transition': 'none', 'onclick': 'selectTx(' + i + ')', 'html': buttonHtml }))); $('ul').listview('refresh'); This is called within a for loop so the first 5 appropriate transmitters are used. There are several things of interest
to note here. Firstly, I could not find a more elegant way
to tell the target page which transmitter I've clicked on, so I have used the onclick event as well as the href attribute. The onclick event fires 'selectTx' which simply sets a global member variable
to the specific index number I've clicked on. Yes it's not nice, but it works. Secondly, the data-transition attribute is set
to 'none'. I wanted the transition between the pages
to be a whooshy slidey effect. However this worked going
to the compass page, but returning
to the list page gave some undesirable visual artefacts (flickering, redrawing etc.). So I decided
to remove the transitions all together, which was a shame. Thirdly, rather than embedding loads of html into the append command, I removed this out into a variable 'buttonHtml'. Doing this really tidied up my code. Until next time!
