We promised you expanded blogs or themes. Our first theme is Microsite. AirTracer uses microsites to provide a common User Experience across all platforms. Andriod, Iphone and browsers that support webkit, while still providing a basic web page for unsupported browsers such as internet explorer. This is used for the remote console logs and trace reports.
In this theme we are going to build a little application called Smart Photos. Some of you may recognize Smart Photos as similar to a project we started back in 2010 but never completed. Photostream. (I believe we coined that term long before Apple. We started referring to Photostream as far back as 2007).
We recently decided to resurrect some of photostream as a way of sharing ICloud content between Facebook, Apple Devices and Android .
A very Quick Overview of this theme, the images are from StreamShare, the new incarnation of PhotoStream but the flow with the exception of the tabbar is similar.
Images are imported to a sqllite data base from the photoAlbum and put into the documents folder, you could (and StreamShare does) use the Asset Library, but for simplicity we will just store photos in the documents folder and a thumbnail in the database. These are displayed in a simple tableview as shown in the first image above. The second screen is the sharing viewcontroller which starts a small http server and publishes its socket address using bonjour. JMDMS would be used for the equivelant Android version.
This series of images is the Microsite broswer. The same browser would be included in all mobile platform versions of the application.
The Actual code creates a webpage with the documents directory as its root. On a desktop web browser a Simple image list is shown. But on the microsite broswer the div with the id json is used.
Json code for the images is embedded in the webpage but only seen by the special Microsite browser.
<html><head><title>Files from </title><style>html {background-color:#eeeeee} body { background-color:#FFFFFF; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:18x; margin-left:15%; margin-right:15%; border:3px groove #006600; padding:15px; } </style></head><body><a href="..">..</a><br />
<a href="IMAGE_0001.jpg">IMAGE_0001.jpg</a> ( 59.9 Kb, 2012-01-04 00:33:13 +0000)<br />
<a href="IMAGE_0002.jpg">IMAGE_0002.jpg</a> ( 45.6 Kb, 2012-01-04 00:33:32 +0000)<br />
<a href="IMAGE_0003.jpg">IMAGE_0003.jpg</a> ( 49.0 Kb, 2012-01-04 00:33:49 +0000)<br />
<a href="IMAGE_0004.jpg">IMAGE_0004.jpg</a> ( 78.5 Kb, 2012-01-04 00:33:57 +0000)<br />
<div id='json' style='display:none'>{{"results":[{"name": "IMAGE_0001.jpg"} ,{"name": "IMAGE_0002.jpg"} ,{"name": "IMAGE_0003.jpg"} ,{"name": "IMAGE_0004.jpg"} , {"name":"test1"} ]}}</div></body></html>
Below is the javascript code embedded in the browser that does the json parsing and displays the table view in the webpage.
/*
This file was generated by Dashcode.
You may edit this file to customize your widget or web page
according to the license.txt file included in the project.
*/
var url="";
var listController = {
// This object acts as a controller for the list UI.
// It implements the dataSource methods for the list.
numberOfRows: function() {
// The List calls this dataSource method to find out how many rows should be in the list.
return items.length-1;
},
prepareRow: function(rowElement, rowIndex, templateElements) {
// The List calls this dataSource method for every row. templateElements contains references to all elements inside the template that have an id. We use it to fill in the text of the rowTitle element.
if (templateElements.rowTitle) {
var displayName = items[rowIndex].name.split(".")[0];
var ext = items[rowIndex].name.split(".")[1];
templateElements.rowTitle.innerText = displayName;
if (ext!="jpg") {
templateElements.rowArrow.innerHTML
= "<img src='video.png' width='50' height='50' ></img>";
}else {
templateElements.rowArrow.innerHTML
= "<img src='"+url+displayName+"-Small.png' width='50' height='50' ></img>";
}
}
// We also assign an onclick handler that will cause the browser to go to the detail page.
var self = this;
var handler = function() {
var item = items[rowIndex];
detailController.setitem(item);
var browser = document.getElementById('browser').object;
// The Browser's goForward method is used to make the browser push down to a new level. Going back to previous levels is handled automatically.
browser.goForward(document.getElementById('detailLevel'), item.name);
};
rowElement.onclick = handler;
}
};
var detailController = {
// This object acts as a controller for the detail UI.
setitem: function(item) {
this._item = item;
this._representedObject = item.name;
// When the item is set, this controller also updates the DOM for the detail page appropriately. As you customize the design for the detail page, you will want to extend this code to make sure that the correct information is populated into the detail UI.
var detailTitle = document.getElementById('detailTitle');
detailTitle.innerHTML = "";
var detailLocation = "";
detailLocation.innerHTML = "";
var detailDescription = document.getElementById('detailDescription');
var ext = this._item.name.split(".")[1];
if (ext!="jpg") {
detailDescription.innerHTML = "<div><img src='video.png' width='80px' height='80px' /><embed src ='"+url+this._item.name+"'></></div>";
// embed src=”http://www.mypage.com/test.wav”>
}else {
detailDescription.innerHTML = "<img src="+url+this._item.name+" width='320px' height='480px' />";
}
}
};
//
// Function: load()
// Called by HTML body element's onload event when the web application is ready to start
//
function load(urlvar)
{
url=urlvar;
dashcode.setupParts();
var onloadHandler = function() { xmlLoaded(xmlRequest); };
// XMLHttpRequest setup code
var xmlRequest = new XMLHttpRequest();
xmlRequest.onload = onloadHandler;
xmlRequest.open("GET", url);
xmlRequest.setRequestHeader("Cache-Control", "no-cache");
xmlRequest.send(null);
function xmlLoaded(xmlRequest) {
if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
// call the function to handle the response data
var result = xmlRequest.responseText.split(":[")[1];
result = result.split("]")[0];
result = "[" + result + "]";
var itemobj = eval(result);
items=itemobj;
document.getElementById("list").object.reloadData();
}
};
}
// Sample data. Some applications may have static data like this, but most will want to use information fetched remotely via XMLHttpRequest.
var items = [
];
<insert link to theme >
Comments