Skip to content

Instantly share code, notes, and snippets.

@krawaller
Created July 16, 2010 13:05
Show Gist options
  • Save krawaller/478333 to your computer and use it in GitHub Desktop.
Save krawaller/478333 to your computer and use it in GitHub Desktop.
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;
},
Ti.UI["create"+type](K.merge(o, defopts[type], defopts.all ));
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"
}
}));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment