“Dynamic HTML” is a mechanism that allows mapping the values from some JSON data onto an HTML defined in a specific file. The result will be a nicely designed HTML with some custom data from JSON.
How it works
The required components for the dynamic HTML are:
- JSON data
- template HTML file.
The JSON data provides the content that will be displayed on the page. It is usually requested from a server. The request can be specific to a user or a place.
The HTML template will provide the structure and design for the content. This is usually a file that already exists on the device. The HTML contains specific blocks of text which act either as placeholders for some data (like “[%=first_name %]”) or introduce some processing logic for the data (like “[%for-each pics%]<img src="[%=.%]" />[%end for-each%]”)
Local HTML pages can also be updated using Sync Module. HTML pages are not static. They will be populated with server side data dynamically. It works very similar to XSLT transformations.
Example of an HTML file with our special tags:
<html>
<head>
<title>[%=profile.pagetitle%]</title>
</head>
<body>
<div>[%=profile.pagesubtitle%]</div>
<img src="[%=profile.imgsrc%]"><br>
Messages:<br>
<table>
[%for-each profile.messages%]
<tr>
<td>[%=messagetext%]</td>
<td>[%=messagedate%]</td>
</tr>
[%end for-each%]
</table>
</body>
</html>
In “app.xml” file for the appropriate page tag needs to be specified JSON datasource url, it’s the “jsonurl” attribute for the “page” tag and it can be any url like for example http://seattleclouds.com/getuserprofilexample.ashx
Expected response in the body should contain the following JSON:
{"profile":{
pagetitle : "atitle",
pagesubtitle : "asubtitle",
imgsrc : "http://dine.com/images/image123.png",
messages: [
{messagedate:"1/5/2011", messagetext:"text1"},
{messagedate:"3/5/2011", messagetext:"text2"},
{messagedate:"6/5/2011", messagetext:"text3"}
]
}}
Custom tags in the html above will be replaced with data from JSON response resulting in a temporary html which will be rendered on the device’s screen.
NOTE: This type of data representation allow users to populate dynamically content of HTML/native pages without any design changes. This feature offers a possibility to interconnect iPhone app with database from your own server and make it more interactive.
