masterkain/index.html

## index.html
<html>
<head>
	<title>Fetch Image</title>
	<script type="text/javascript" src="index.js"></script>
	<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<h3>Fetch Image From URL:</h3>
	<div style='font-weight:bold'>Title</div>
	<input id="imgTitle" type="text"></input>
	<div style='font-weight:bold'>URL</div>
	<input id="imgUrl" type="text"></input>
	<br/>
	<button id="fetch">FETCH</button>
	<h3>Your Images (<span id="count">0</span>):</h3>
	<div id="images">
		Loading...
	</div>
</body>
</html>

## index.js
//Persistence logic
function initialize() {
  var db = Titanium.Database.open('local');
	db.execute('CREATE TABLE IF NOT EXISTS IMAGES (TITLE TEXT, PATH TEXT)');
}

function loadImages() {
  var result = {
    count:0,
    images:[]
  };
  var db = Titanium.Database.open('local');

  var rows = db.execute('SELECT * FROM IMAGES');
  document.getElementById("count").innerHTML = rows.getRowCount();

	var html = "";
	if (rows.getRowCount() > 0) {
	  while (rows.isValidRow()){
	    Titanium.API.info(rows.fieldByName("path"));
  		html += "<div style='font-weight:bold'>"+rows.fieldByName("title")+"</div>"+"<img src='"+rows.fieldByName("path")+"'></img>";
  		rows.next();
  	}
	}
	// close database
	rows.close();
	document.getElementById("images").innerHTML = html;
	Titanium.UI.currentWindow.repaint();
}

function fetchImage(title,url) {
  var db = Titanium.Database.open('local');
  Titanium.API.info(title+":"+url);
  var fileUrl = "";
  var c = Titanium.Network.createHTTPClient();
	c.onload = function() {
		var f = Titanium.Filesystem.getFile(String((new Date()).getTime()).replace(/\D/gi,'')+".png");
		f.write(this.responseData);
		fileUrl = f.url;
		Titanium.API.info(fileUrl);
    db.execute('INSERT INTO IMAGES (TITLE, PATH) VALUES(?,?)',title,fileUrl);
		loadImages();
	};
	// open the client
	c.open('GET',url);
	// send the data
	c.send();
}

//Initialize UI
window.onload = function() {
  //Initialize db and load images
  initialize();
  loadImages();

  //Set up handler to fetch a new image
  document.getElementById("fetch").ontouchstart = function() {
    fetchImage(document.getElementById("imgTitle").value,document.getElementById("imgUrl").value);
  };

  //Frustration handler
	Titanium.Gesture.addEventListener('shake',function(){
		var alerty = Titanium.UI.createAlertDialog();
		alerty.setTitle("Hey, it's not my fault your app doesn't work!");
		alerty.show();
	},false);
};
	<html>
	<head>
	<title>Fetch Image</title>
	<script type="text/javascript" src="index.js"></script>
	<link href="index.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
	<h3>Fetch Image From URL:</h3>
	<div style='font-weight:bold'>Title</div>
	<input id="imgTitle" type="text"></input>
	<div style='font-weight:bold'>URL</div>
	<input id="imgUrl" type="text"></input>
	<br/>
	<button id="fetch">FETCH</button>
	<h3>Your Images (<span id="count">0</span>):</h3>
	<div id="images">
	Loading...
	</div>
	</body>
	</html>
	//Persistence logic
	function initialize() {
	var db = Titanium.Database.open('local');
	db.execute('CREATE TABLE IF NOT EXISTS IMAGES (TITLE TEXT, PATH TEXT)');
	}

	function loadImages() {
	var result = {
	count:0,
	images:[]
	};
	var db = Titanium.Database.open('local');

	var rows = db.execute('SELECT * FROM IMAGES');
	document.getElementById("count").innerHTML = rows.getRowCount();

	var html = "";
	if (rows.getRowCount() > 0) {
	while (rows.isValidRow()){
	Titanium.API.info(rows.fieldByName("path"));
	html += "<div style='font-weight:bold'>"+rows.fieldByName("title")+"</div>"+"<img src='"+rows.fieldByName("path")+"'></img>";
	rows.next();
	}
	}
	// close database
	rows.close();
	document.getElementById("images").innerHTML = html;
	Titanium.UI.currentWindow.repaint();
	}

	function fetchImage(title,url) {
	var db = Titanium.Database.open('local');
	Titanium.API.info(title+":"+url);
	var fileUrl = "";
	var c = Titanium.Network.createHTTPClient();
	c.onload = function() {
	var f = Titanium.Filesystem.getFile(String((new Date()).getTime()).replace(/\D/gi,'')+".png");
	f.write(this.responseData);
	fileUrl = f.url;
	Titanium.API.info(fileUrl);
	db.execute('INSERT INTO IMAGES (TITLE, PATH) VALUES(?,?)',title,fileUrl);
	loadImages();
	};
	// open the client
	c.open('GET',url);
	// send the data
	c.send();
	}

	//Initialize UI
	window.onload = function() {
	//Initialize db and load images
	initialize();
	loadImages();

	//Set up handler to fetch a new image
	document.getElementById("fetch").ontouchstart = function() {
	fetchImage(document.getElementById("imgTitle").value,document.getElementById("imgUrl").value);
	};

	//Frustration handler
	Titanium.Gesture.addEventListener('shake',function(){
	var alerty = Titanium.UI.createAlertDialog();
	alerty.setTitle("Hey, it's not my fault your app doesn't work!");
	alerty.show();
	},false);
	};