krawaller/framework_createwebview.js

## framework_createwebview.js
K.createKraWebView = function(o){
    var webview = K.create(K.merge({url: "../views/"+ (o.masterPageFile || "_masterpage.html")} o),
        template = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory+"/views/"+o.templateFile).read().text,
        opts = { template: template, data: {data: o.data} };
    webview.addEventListener("load",function(){ webview.evalJS("render("+JSON.stringify(opts)+")"); });
    return webview;
},

## framework_createwin.js
Ti.UI["create"+type](K.merge(o, defopts[type], defopts.all ));

## framework_defopts.js
var defopts = {
 // ******************* All ******************
    "all": { },
 // ****************** Types *****************
    "Win": {
        barColor: "#AAA",
        backgroundColor: "#222"
    },
    "Label": {
        color: "#321"
    },
    "TabbedBar": {
        backgroundColor: "#40C"
    },
 // ***************** Wins *******************
    "main_windows/gallery.js": {},
    "main_windows/photoalbum.js": {
        backgroundColor: "#AAA"
    },
    "main_windows/albumlist.js": {}
};

## framework_masterpage.html
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <title>MasterPage</title>
        <script type="text/javascript" src="../assets/html.utils.js"></script>
        <link rel="stylesheet" type="text/css" href="all.css" />
        <style type="text/css">
.beforeload { opacity: 0; }

@-webkit-keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fadein {
  -webkit-animation-name: fadein;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
}
        </style>
    </head>
    <body class="beforeload">
        <div id="wrapper" class=""><div class="loading">Loading...</div></div>
        <script type="text/javascript">
function render(o){
    var w = $('wrapper');
    w.innerHTML = tmpl(o.template, o.data);
    document.body.className = "fadein";
}
        </script>
    </body>
</html>

## framework_tableview.js
K.create({
    type: "TableView",
    children: [{
        type: "TableViewSection",
        title: "Current members",
        children: [{
            text: "Mariangela Demurtas",
            subLabel: "Vocals",
            id: 1
        },{
            text: "Ole Vistnes",
            subLabel: "Bass",
            id: 2
        }]
    },{
        type: "TableViewSection",
        title: "Former members",
        children: [{
            text: "Vibeke Stene",
            backgroundColor: "#444",
            subLabel: {
                text: "Vocals",
                color: "#CCC"
            }
        }]
    }]
});

## framework_template.html
<style type="text/css">
    .def: { color: red; }
</style>
<h2>Biography</h2>
<# if (data.pic) { #>
  <img src='../<#= pics/"+data.pic #>' />
<# } #>
<span class='def'>Name: </span><span><#= data.name #></span>
<span class='def'>Role: </span><span><#= data.role #></span>

## framework_webview.js
win.add(K.create({
    type: "KraWebView",
    template: "biography.tmpl",
    data: {
        name: "Ole",
        role: "bass",
        pic: "olebass02.png"
    }
}));
	K.createKraWebView = function(o){
	var webview = K.create(K.merge({url: "../views/"+ (o.masterPageFile \|\| "_masterpage.html")} o),
	template = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory+"/views/"+o.templateFile).read().text,
	opts = { template: template, data: {data: o.data} };
	webview.addEventListener("load",function(){ webview.evalJS("render("+JSON.stringify(opts)+")"); });
	return webview;
	},
	var defopts = {
	// ***************** All ****************
	"all": { },
	// **************** Types ***************
	"Win": {
	barColor: "#AAA",
	backgroundColor: "#222"
	},
	"Label": {
	color: "#321"
	},
	"TabbedBar": {
	backgroundColor: "#40C"
	},
	// *************** Wins *****************
	"main_windows/gallery.js": {},
	"main_windows/photoalbum.js": {
	backgroundColor: "#AAA"
	},
	"main_windows/albumlist.js": {}
	};
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<title>MasterPage</title>
	<script type="text/javascript" src="../assets/html.utils.js"></script>
	<link rel="stylesheet" type="text/css" href="all.css" />
	<style type="text/css">
	.beforeload { opacity: 0; }

	@-webkit-keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
	}

	.fadein {
	-webkit-animation-name: fadein;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in;
	}
	</style>
	</head>
	<body class="beforeload">
	<div id="wrapper" class=""><div class="loading">Loading...</div></div>
	<script type="text/javascript">
	function render(o){
	var w = $('wrapper');
	w.innerHTML = tmpl(o.template, o.data);
	document.body.className = "fadein";
	}
	</script>
	</body>
	</html>
	K.create({
	type: "TableView",
	children: [{
	type: "TableViewSection",
	title: "Current members",
	children: [{
	text: "Mariangela Demurtas",
	subLabel: "Vocals",
	id: 1
	},{
	text: "Ole Vistnes",
	subLabel: "Bass",
	id: 2
	}]
	},{
	type: "TableViewSection",
	title: "Former members",
	children: [{
	text: "Vibeke Stene",
	backgroundColor: "#444",
	subLabel: {
	text: "Vocals",
	color: "#CCC"
	}
	}]
	}]
	});
	<style type="text/css">
	.def: { color: red; }
	</style>
	<h2>Biography</h2>
	<# if (data.pic) { #>
	<img src='../<#= pics/"+data.pic #>' />
	<# } #>
	<span class='def'>Name: </span><span><#= data.name #></span>
	<span class='def'>Role: </span><span><#= data.role #></span>
	win.add(K.create({
	type: "KraWebView",
	template: "biography.tmpl",
	data: {
	name: "Ole",
	role: "bass",
	pic: "olebass02.png"
	}
	}));