WebAlloy
µ-web-framework to write Alloy apps using only web technologies (HTML/CSS/JS) but interfacing in real time with native features. Could you re-create a mini PhoneGap framework in Titanium; the answer is yes - Documentation
The unique method WebAlloy.createView create a WebView with static html inside.
To work with WebAlloy, you have to replicate the exact structure of an Alloy MVC pattern (views/controllers/styles) in the /app/assets/web directory.
Global CSS included in each view.
Global JS included in each view.
Put your jslocal files here, they are automatically appended at the end of the HTML.
HTML/TPL (underscore templating system) file that is parsed and written in the static HTML.
Javascript file included in the specific controller.
CSS file included in the specific controller.
Once you have replicated this structure, you can just call:
WebAlloy.createView({
name: 'foo', // necessary
webdata: { ... }, // optional
webapi: { ... } // optional
...
});name, webdata and webapi are WebAlloy properties, all the other arguments are Ti-UI specific for the classic WebView.
Required option is to specify the files to load.
Object passed to the TPL file and rendered with the Underscore template system; for example:
WebAlloy.createView({
name: 'foo',
webdata: {
girls: [ 'Julie', 'Sarah', 'Valentine' ],
team: 'Caffeina'
}
});<h1><%= team %> girls</h1>
<ul>
<% _.each(girls, function(name) { %>
<li><%= name %></li>
<% }); %>
</ul>Is an object containing a series of API that are automatically exposed in the WebView.
You can easily interface from the WebView to Titanium with the webapi object passed to the constructor.
In the WebView, you've got an helper WebAlloy to run the API exposed.
For example:
WebAlloy.createView({
name: 'foo',
webapi: {
close: function() { this.close(); }
}
});In the controller /app/assets/web/controllers/foo.js file, you have the WebAlloy object with the run method:
WebAlloy.run('close');If you use WebAPI, remember to call .webapiUnbind() to remove the listeners!!!
So, the final result is an HTML string passed to the WebView, like this:
<!DOCTYPE html>
<html>
<head>
... metas ...
<style>{{ app.css }}</style>
<style>{{ foo.css }}</style>
</head>
<body>
<div id="main">
{{ foo.tpl (rendered in undescore with webdata argument) }}
</div>
<script>{{ lib/**.jslocal }}</script>
<script>{{ app.jslocal }}</script>
<script>{{ foo.jslocal }}</script>
</body>
</html>Basically, you can interact with DOM elements with evalJS.
There are some proxy methods designed to interact directly:
Re-render the template with new data passed.
Call a function in the WebView.
For example, $.wv.call('foo', 1, 2, {x:1}) will be converted to js in foo(1, 2, {x:1}).
Call a function in a DOM-RAW object.
Get a property of a DOM-RAW object.
Set a property of a DOM-RAW object.