Dynamic HTML Overview | Tutorials | Forum

Attention! You Can Only Post New Topics/Replies In The Forum If You're Have An Active AppstronautMe Membership!

Announcement! Due To New Member Sign Up Spam, We No Longer Accept New Registrations With Yahoo Email!

Need more help? Then submit a support ticket!

Please consider registering
guest

Log In Register Members

Register | Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 4 characters - maximum search word length is 84 characters

Topic RSS
Dynamic HTML Overview

Neil Appstrong
Admin
Forum Posts: 165
Member Since:
Offline
“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://appstronautme.com/getuserprofilexample.html
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.
 
<html>
<head>
<title>atitle</title>
</head>
<body>
<div>asubtitle</div>
<img src="http://dine.com/images/image123.png"><br>
Messages:<br>
<table>
<tr>
   <td>text1</td>
   <td>1/5/2011</td>
</tr>
<tr>
   <td>text2</td>
   <td>3/5/2011</td>
</tr>
<tr>
   <td>text3</td>
   <td>6/5/2011</td>
</tr>
</table>
</body>
</html>
 
 
 
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.

dreampubs
New Member
Forum Posts: 1
Member Since:
Offline

Hi,

This is interesting, but not quite what I'm looking for.  I need to use dynamic data from a database stored locally (on the phone). I know that Apple allows this, I also know that there is a local SQL (query language) available for loading data from the local phone so that the network does not have to be available when the variables are loaded.

There are many ways to load this data, and what I'm looking for is a way to save & load local data, so that for example, someone can save a 'Profile' of information and then load that data from their local device (without being connected to a network, or online service).

Can you please tell me how something like this would be done, or point me to a tutorial or help on that subject?

Thanks,

-Brett


Neil Appstrong
Admin
Forum Posts: 165
Member Since:
Offline

I responded to your support ticket regarding this but figured I'd leave a reply on the forum as well. 

The app builder doesn't store data locally out of the box without some help of some extra code. What you would need to do is to search for HTML 5 Local Storage or PhoneGap as you should find many examples of this on the web. PhoneGap can integrate with this system and just to help you with your search some you may want to search for on how to integrate PhoneGap with Seattle Clouds as its the same type of platform. This is something that's not touched on by most developers and eventually I can try and make a tutorial concerning this. But there are many tutorials already in line to be made for functions that are more commonly used/asked about. Hope this helps.
Forum Timezone: America/New_York

Most Users Ever Online: 17

Currently Online:
2 Guest(s)

Currently Browsing this Page:
1 Guest(s)

See All Online Activity

Top Posters:

dberry: 18

jettdigitals: 6

Tommyhall: 6

asnorth: 5

richardwing: 5

hmds2007: 4

razma: 4

Ivon: 4

DJ: 3

bushwood: 3

Member Stats:

Guest Posters: 0

Members: 521

Moderators: 0

Admins: 1

Forum Stats:

Groups: 1

Forums: 7

Topics: 144

Posts: 249

Newest Members: Melvinvon, permasbear, 4affbync, rosemariedz3, Aidi-inc, lako0, whzkid@comcast.net, Samisusami, daleji16, Abcegfeick

Administrators: Neil Appstrong: 165

support
Need Help?
Skype Chat
Skype Call
Support Ticket
Please Wait
Please Wait