HTML5 for All

2,962 views
Skip to first unread message

Gary

unread,
Aug 16, 2012, 1:33:24 PM8/16/12
to ai...@googlegroups.com
I am glad that several of us are getting into what we can do with embedded html in App Inventor. I like HTML5. I think it is a very important technology that we will use more and more as we all learn how to take advantage of it.

I want to pass on this article from the HTML5 Rocks site

It's a very well written article and anyone that is interested in web apps that can work "offline" should read it. It gets into various technologies, file storage, local storage and Web SQL Database are three. I have worked with file storage and with local storage. 

File storage is not quite there. Good stuff but you are on the bleeding edge if you work with it. 

Local storage is in all the browsers, works and works well. It is a lot like App Inventor's TinyDB. It's on my list to see if we can replace tinyDB with local storage. It should give us everything TinyDB does, save some code in apps and should get better and better as local storage is improved. 

The article is good. Worth reading - perhaps more than once. ;-)


Scott Ferguson

unread,
Aug 18, 2012, 11:06:19 PM8/18/12
to ai...@googlegroups.com
Thanks, Gary. No luck with localStorage in WebViewer yet, tho. :(

Gary

unread,
Aug 19, 2012, 7:00:37 AM8/19/12
to ai...@googlegroups.com

On Saturday, August 18, 2012 10:06:19 PM UTC-5, Scott Ferguson wrote:
Thanks, Gary. No luck with localStorage in WebViewer yet, tho. :(

:-)

My app that used local storage was a web app and used the browser not the WebView component so there is hope. 

Scott Ferguson

unread,
Aug 22, 2012, 7:48:39 AM8/22/12
to ai...@googlegroups.com
I need to rephrase my last comment as it was misleading.

Taifun was able to read a local text file with XMLHttpRequest() http://puravidaapps.com/read.php
and I was hoping to do the same for saving a local text file but have not found a solution that works with the WebViewer component yet that does not require a server.
---



On Saturday, August 18, 2012 10:06:19 PM UTC-5, Scott Ferguson wrote:

Gary

unread,
Aug 22, 2012, 9:27:43 AM8/22/12
to ai...@googlegroups.com

On Wednesday, August 22, 2012 6:48:39 AM UTC-5, Scott Ferguson wrote:
I need to rephrase my last comment as it was misleading.

You were clear.
 

Taifun was able to read a local text file with XMLHttpRequest() http://puravidaapps.com/read.php
and I was hoping to do the same for saving a local text file but have not found a solution that works with the WebViewer component yet that does not require a server.

I poked a bit but did not come up with something that worked. I even looked into putting a web server on my phone but decided that was not a direction that would give us a general solution.

I would be interested in chatting in the Wednesday chat about saving a local text file. It's pretty quiet currently.

James Hancock

unread,
Aug 26, 2012, 7:34:56 PM8/26/12
to ai...@googlegroups.com
Ive been playing with the new adobe edge demo, it's free for a few months from adobe labs, its easy to use and a bit like a timeline, it animates html5 objects. I have just fiddled around and made this
It took me the best part of 10 minutes.
the exciting part is the animations can be controlled with variables :) 
I got scotts html5 animation app, the one with the w3 css script that animates a square around the screen and changes the colour/color. Thats works even inside our AI webviewer.
Edge produces it's own css and html5 files.
I'm going to have a try at importing them, will let you know what happens. 
I'm excited, this can animate graphs and all sorts

Scott Ferguson

unread,
Aug 27, 2012, 7:49:35 PM8/27/12
to ai...@googlegroups.com
That is very impressive! We certainly could use such a tool or tools to simplify access to the features of HTML5, CSS3, the DOM, Javascript and AJAX (jQuery, jQuery UI, jQuery Mobile?).
Taifun did a nice demo project with the jQuery calendar control.
---
Message has been deleted

Scott Ferguson

unread,
Aug 29, 2012, 9:13:27 AM8/29/12
to ai...@googlegroups.com
I have just posted an example To-Do list app which just links App Inventor with a a jQTouch html demo app. The html doc and support files are stored with the AI app, it does not require internet access and runs in the WebViewer.
More here.
---

James Hancock

unread,
Aug 31, 2012, 12:57:55 AM8/31/12
to ai...@googlegroups.com
nice , and fast too !

Taifun

unread,
Aug 31, 2012, 10:46:55 AM8/31/12
to ai...@googlegroups.com
very nice Scott!
probably saving the state in a cookie could be an option?
Taifun

Scott Ferguson

unread,
Aug 31, 2012, 3:54:57 PM8/31/12
to ai...@googlegroups.com
I was leaning toward local storage with HTML5, but it does not seem to be supported by the WebViewer component. I understand that 5k bytes is the limit for cookies which would probably be just fine for the small amount of text that would have to be stored with such an app, and the expiration could be set to 0 or whatever is the longest storage time before deleting the cookie. I need to find a javascript example for cookies and test it with the WebViewer.
---

Taifun

unread,
Aug 31, 2012, 4:34:50 PM8/31/12
to ai...@googlegroups.com
here is a Cookie example http://www.quirksmode.org/js/cookies.html
Taifun

Scott Ferguson

unread,
Sep 1, 2012, 11:17:16 AM9/1/12
to ai...@googlegroups.com
Thanks.
---

James Hancock

unread,
Sep 7, 2012, 8:50:07 PM9/7/12
to ai...@googlegroups.com
Sorry, slightly off topic but "can java script parse xml into lists ?, if so , could it do it faster than appinventor ? 
appinventor seems to slow down a lot when parsing xml of an irregular layout (as you need to test for whether a tag is present in the response, then to parse that tag)
I see web browsers do it in a tenth of the time, could that happen without local storage ?

Scott Ferguson

unread,
Sep 7, 2012, 11:40:53 PM9/7/12
to ai...@googlegroups.com
Taifun has shown that math in javascript is much faster than App Inventor, so I would think that XML parsing would likely be faster as well. It should not matter where your document is located. Javascript works on a server or local ly, but it is actually executing on the client machine, not the server.

Gary

unread,
Sep 9, 2012, 7:37:55 AM9/9/12
to ai...@googlegroups.com

On Friday, September 7, 2012 7:50:07 PM UTC-5, James Hancock wrote:
Sorry, slightly off topic but "can java script parse xml into lists ?, if so , could it do it faster than appinventor ? 
appinventor seems to slow down a lot when parsing xml of an irregular layout (as you need to test for whether a tag is present in the response, then to parse that tag)
I see web browsers do it in a tenth of the time, could that happen without local storage ?

I think you are on topic.

Javascript can do much of what Java or other languages can do. Parsing XML would be doable.

Faster? Probably. Do a test.

It should not need local storage. 

Gary

unread,
Sep 9, 2012, 7:44:15 AM9/9/12
to ai...@googlegroups.com

On Friday, September 7, 2012 10:40:53 PM UTC-5, Scott Ferguson wrote:
Taifun has shown that math in javascript is much faster than App Inventor, so I would think that XML parsing would likely be faster as well. It should not matter where your document is located. Javascript works on a server or local ly, but it is actually executing on the client machine, not the server.

Parsing is going to involve strings, searching and getting the xml elements. I think it will be faster. 

App Inventor does canvas faster than HTML5. I have not found anything else App Inventor does faster
  other that build apps :-)

Server side javascript runs on the server. Look at https://developers.google.com/apps-script/
you can run your program on a server from a PC or a mobile device => you can run on iPhones and Android.
When I get my ever growing stack of things I need to do done, I plan on showing more about using apps script.

phantomfoot

unread,
Oct 10, 2012, 7:06:34 PM10/10/12
to ai...@googlegroups.com
Here is a simple example of parsing an xml file and loading the data into the app's TinyDB (based on Taifun's examples):


HTML file and XML file uploaded to assets. Here is the XML file (can be whatever):

<planets>
<planetname>Ligo,Xiavolux,Caladan,Mamuut,Ensilore,Nausdor</planetname>
<population>3 billon,15 billion,28 billion,9.5 billion,21.2 billion,7 billion</population>
<government>Corporate State,Democracy,Dictatorship,Feudal,Anarchy,Confederacy</government>
<techlevel>5,10,3,8,4,9</techlevel>
<economy>Poor agricultural,Rich industrial,Meduim industrial,Rich agricultural,Poor industrial,Medium agricultural</economy>
</planets>

Here is the HTML file:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <title>Read File</title>

  <script type="text/javascript">
  function run() {
    
    xmlhttp=new XMLHttpRequest();
   xmlhttp.open("GET","datafortinydb.xml",false);
   xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;

    // get the items inside each xml tag and put it in a variable
    var planetname=xmlDoc.getElementsByTagName("planetname")[0].childNodes[0].nodeValue;
    var population=xmlDoc.getElementsByTagName("population")[0].childNodes[0].nodeValue;
    var government=xmlDoc.getElementsByTagName("government")[0].childNodes[0].nodeValue;
    var techlevel=xmlDoc.getElementsByTagName("techlevel")[0].childNodes[0].nodeValue;
    var economy=xmlDoc.getElementsByTagName("economy")[0].childNodes[0].nodeValue;
// add lines here for any extra variables you want to bring in
// print all variables to the document title, separated by |
     window.document.title = planetname+"|"+population+"|"+government+"|"+techlevel+"|"+economy; // add variables here for additonal tags
}
  </script>
 </head>

<body onLoad="run();">

</body>
</html>


And here's the result:


I thought it might be easier to put all app variables in an xml file rather than type them all out in the blocks editor, which can be rather tedious when you are dealing with hundreds of long strings and lists. And hey it works! Pretty quick too.

Zip and apk attached.

Off topic, the only thing I don't like about this method are all the permissions required - modify/delete SD storage, read phone state, full internet access.. for just a few blocks of code.

Keep up the good work!
read.zip
read.apk

Taifun

unread,
Oct 10, 2012, 9:35:09 PM10/10/12
to ai...@googlegroups.com
very nice! thank you for the example!


Off topic, the only thing I don't like about this method are all the permissions required - modify/delete SD storage, read phone state, full internet access.. for just a few blocks of code.
I don't think you need these permissions... you could try to remove them in the Manifest e.g. with AppToMarket and see if it works without them...

Taifun
puravidaapps.com

Gary

unread,
Oct 11, 2012, 7:11:22 AM10/11/12
to ai...@googlegroups.com
very nice! thank you for the example!

If you are using V1.2 you can modify the manifest.
  or use another tool.

I am still... out of time. We have source. One of the things we can look at is permissions. 

Gary

phantomfoot

unread,
Oct 11, 2012, 9:13:12 AM10/11/12
to ai...@googlegroups.com
Ah I didn't think of that. Yes I will investigate.

phantomfoot

unread,
Oct 11, 2012, 9:28:57 AM10/11/12
to ai...@googlegroups.com
One thing I would like to improve in the javascript above is to get it to parse the tags even when you don't know what the tag names are, so it could then parse any xml file you throw at it. Any javascript experts out there want to try, or point me in the right direction?

Steve

Taifun

unread,
Oct 11, 2012, 10:29:07 AM10/11/12
to ai...@googlegroups.com
probably one of these threads might help http://stackoverflow.com/search?q=[javascript]+xml+parse
Taifun
Message has been deleted

phantomfoot

unread,
Oct 11, 2012, 11:46:18 AM10/11/12
to ai...@googlegroups.com
Never mind I've done it :)

This will parse an xml file regardless of what the tag names are. A much better way of doing the parse too.

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title>Read File</title>
  <script type="text/javascript">
  function run() {
    
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","datafortinydb.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML;
 

// work out tagNames and grab data from inside each tag
var x=xmlDoc.documentElement;
var realChilds=0;
var parent=x;
var child=parent.childNodes.length;
var i = 0;
var nameofNode="";
var itemsinNode;
while(i < child){
if(parent.childNodes[i].nodeType != 3){
realChilds++;
nameofNode=parent.childNodes[i].nodeName;
itemsinNode=itemsinNode+"|"+xmlDoc.getElementsByTagName(nameofNode)[0].childNodes[0].nodeValue;

}
i++;
}

// print all variables to the document title
     window.document.title = itemsinNode;
xmlread.zip
xmlread.apk

Sebastiano T.

unread,
Oct 12, 2012, 10:17:15 AM10/12/12
to ai...@googlegroups.com
Phantomfoot!!! wow amazing piece of code, it helped me a lot with a project i've on my mind thank you very much
if possible could you please briefly explain in the javascript what you're doing step by step, i'm trying to learn a bit and search for some documentation but your JS with comment would be great to have!
Taifun, i think this is excellent material for one of your next tutorials :)

phantomfoot

unread,
Oct 12, 2012, 12:14:48 PM10/12/12
to ai...@googlegroups.com

Gary

unread,
Oct 15, 2012, 12:12:52 PM10/15/12
to ai...@googlegroups.com
Good pointer. Thanks

Gary (who's true love is javascript and parsing doms but finds other things interesting :-))

Gabriele Cozzolino

unread,
Nov 27, 2013, 4:39:30 AM11/27/13
to ai...@googlegroups.com
Very nice, it works great! Just one question: how do I get it working with letters with accents and other characters?
I tried using &ugrave format or save xml file with utf encoding but it doesn't works, any ideas? Thanks

Gabriele Cozzolino

unread,
Nov 27, 2013, 6:45:25 AM11/27/13
to ai...@googlegroups.com
Nevermind, I've done it.
Just removed the meta tags in the html file and replaced with <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> and in the xml file use the numeric special entity codes, so didn't use &egrave; for è but &#232; and it works just fine!

phantomfoot

unread,
Nov 28, 2013, 9:45:44 AM11/28/13
to ai...@googlegroups.com
Good to know!

Scott Ferguson

unread,
Nov 28, 2013, 7:47:41 PM11/28/13
to ai...@googlegroups.com

Does anyone know how to get data back and forth between an html document in the Media list and an AI app like we used to be able to do it through the Title of the html document? I really don't want to have to install any other apps, write Java or access the internet. Thanks.
---
Scott

Taifun

unread,
Nov 28, 2013, 7:55:18 PM11/28/13
to ai...@googlegroups.com
to pass data from AI to html, you use parameters, see here http://puravidaapps.com/tutorials.php#input
to pass data from html to AI, you use the title of the html http://puravidaapps.com/tutorials.php#html
Taifun

Scott Ferguson

unread,
Dec 2, 2013, 12:37:28 AM12/2/13
to ai...@googlegroups.com
to pass data from AI to html, you use parameters, see here http://puravidaapps.com/tutorials.php#input
to pass data from html to AI, you use the title of the html http://puravidaapps.com/tutorials.php#html
Taifun
Thanks, Taifun, but I don't want to have to use the Internet to download an html document on first run.
---
Scott

Taifun

unread,
Dec 2, 2013, 9:52:08 AM12/2/13
to ai...@googlegroups.com
Thanks, Taifun, but I don't want to have to use the Internet to download an html document on first run.
you also can put your html file onto a web server and call it there
well, I see you do not like to access the internet at all...
in this case you only can do it with an Android 2.x device to add your html document as asset and call the html file with parameters there
Taifun
PS: Challenge: have a html file as asset and store it somehow on your device.without accessing the internet 

Reply all
Reply to author
Forward
0 new messages