|
OSG is a Open Social application generator. It's use some html code (and some special makup too) and some JS code and gereneate a complex, compressed and optimized application. It's opensource :) Changelog0.4Alpha 0.3Alpha0.2Alpha- Changing self::method() to this.method() in hrref / onclick
- Bug: templates/.file.htm crash (files generated by eclipse)
Features- Information about application in .JS Annotations.
- Generate javascript DOM code from HTML files. var template = new osg.Template("bar.htm");
template.add("list", [{name:"Jorge", id:1}, {name:"Falcão", id:2}]);
template.add("mensagem", "Hello");
template.show();
- if/loop(or for) functionality in templates.
- Automatic IG_Images with absolute URL on
tags. - automatic self::action this.method app.method() bind on href / onclick.
- YUM Compressor (CSS / Javascript)
- new the class "ignore" will ignore the element in template. (testing layout)
- new ANT Task
- and more... :)
RequirementsKnow Issues- Don't use style="" in tags.
- Annotations works in anywhere on the jscode.
ExamplesAnnotationsYou can use annotations to define some application settings. Exemple: (application code) /**
* Some comments...
*
*
* @id YOU_APP_ID__MODULE_ID__
* @title OSG Sample application
* @height 500
* @description This is a OSG Generated application
* @singleton
* @thumbnail resources/thumbnail.jpg
* @require opensocial-0.5
* @require tabs
* @require flash
* @initFunction onInit
* @include lib/mylib.js
* @include resources/another_file.css
*
*/ - @id => The application instance name ($INSTANCE reference on js code)
- @initFunction => first function called on application object.
- @include > add css and javascript.
- @js => include a external javascript
- @css => set the css file. (resources/default.css is added if exists and @css don't exists)
Using if / loop in template.application code (javascript) ...
var template = new osg.Template("bar.htm");
template.add("list", ['item1', 'item2', 'item3']);
template.add("key", "fasd0f7asdfhasdfalsdf");
template.show();
...in template/foo.htm <osg:if test="test">
<ul>
<osg:forEach itens="this.list" var="name" key="id">
<li class="time">
<a href="app.method(name, id)">{name} - ID: {id}</a>
</li>
</osg:forEach>
</ul>
</osg:if>Using self::action() this.action() app.action()application code (javascript) ...
doSomething:function(id) {
// do something with id.
}
...in template/foo.htm <ul>
<osg:forEach itens="list" var="name" key="id">
<li class="time" >
<span> <a href="app.doSomething(id)">{name}</a> - ID: {id} </span>
</li>
</osg:forEach>
</ul>Complex examplesapplication code (javascript) ...
var template = new osg.Template("foo.htm");
template.add("object", {foo:function(p) { alert(p); }});
template.add("key", "fasdf0a8fash6a");
template.add("lista", [1,2,3,4]);
template.show();
...in template/foo.htm <ul if="{list}" >
<osg:forEach itens="list" var="value" key="key">
<li class="time">
<span> <a href="{object.foo(value, key)}">{value}</a></span>
<!-- value is the loop item, and key is a passed data -->
</li>
</osg:forEach>
</ul>Using includein template/bar.htm <div>
<osg:include template="foo" />
</div> Using $HOST and $INSTANCEapplication code (javascript) //$INSTANCE is the main application object.
var $INSTANCE = {
onInit:function() {
//$HOST is defined in --host
~~_IG_FetchXmlContent("$HOST/xml/something.xml", function(){});~~
}
}Quickstart1. Install JRE 2. Create a new project path like sample/tabs or sample/simple 3. Execute java -jar osg-0.2alpha.jar --charset=UTF8 --host http://YOURAPPHOST sample/simple/app.js If you like apache-ant use something like: <target name="build-sample">
<java jar="${file}.jar" fork="true" logerror="true">
<arg value="--charset" />
<arg value="UTF-8" />
<arg value="--host" />
<arg value="http://YOURAPPHOST" />
<arg value="sample/simple/app.js" />
</java>
</target>4. The app.xml generated in /sample/project1/ path.
|