foam-framework
Version:
MVC metaprogramming framework
124 lines (104 loc) • 4.23 kB
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="..//core/foam.css" />
<script language="javascript" src="../core/bootFOAM.js"></script>
<title>FOAM Innovation Week</title>
</head>
<body>
<script language="javascript">
apar(
arequire('foam.ui.View'),
arequire('foam.util.Timer'))(function() {
var timer = foam.util.Timer.create({});
var space = Canvas.create({width: 1400, height: 600, background: 'white'});
space.write();
function box(color, x, text) {
return Box.create({color: 'white', width: 120, height:100, font: 'bold 10pt Arial', y: -200, background: color, x: x, text: text});
}
var x = -100;
var sql = box('green', x+=120, 'Issue.sql');
var jdbc = box('red', x+=120, 'IssueDB.java');
var java = box('red', x+=120, 'Issue.java');
var skeleton = box('red', x+=120, 'IssueSkeleton.java');
var proto = box('black', x+=120, 'Issue.proto');
var model = box('black', x, 'Issue.model');
var stub = box('blue', x+=120, 'IssueStub.js');
var js = box('blue', x+=120, 'Issue.js');
var ui = box('blue', x+=120, 'Issue_UI.js');
var ui_tm = box('blue', x, 'IssueColumns.js');
var ui_table = box('blue', x, 'IssueTable.js');
var ui_detail = box('blue', x, 'IssueDetail.js');
var ui_ctrl = box('blue', x, 'IssueController.js');
var ui_model = box('blue', x, 'IssueModel.js');
var html = box('orange', x+=120, 'Issue.html');
var css = box('pink', x+=120, 'Issue.css');
var middle = box('black', 380, 'Middleware');
var dao = box('blue', 620, 'DAO');
var search = box('blue', 620, 'Search');
model.height *= 2;
model.y -= 10;
middle.y = 500;
middle.width = 360;
middle.height = 0;
ui_tm.height = ui_table.height = ui_detail.height = ui_ctrl.height = ui_model.height = 80;
var d = 10;
function addPlatform() {
var a = [sql, jdbc, java, skeleton, stub, js, ui, html, css, ui_tm, ui_table, ui_detail, ui_ctrl, ui_model, dao, search ];
var b = [];
for ( var i = 0 ; i < a.length ; i++ ) {
var c = a[i].clone();
space.addChild(c);
space.children.unshift(space.children.pop());
c.x += d;
c.y -= d;
}
d += 10;
}
space.addChildren(
sql, jdbc, java, skeleton, proto, stub, js, ui, html, css, ui_tm, ui_table, ui_detail, ui_ctrl, ui_model, middle, model, dao, search
);
var M = Movement;
var B = M.bounce(0.2, 0.08, 3);
M.compile([
[1000, function() { sql.y = 400; }, B],
[1000, function() { jdbc.y = java.y = skeleton.y = 400; }, B],
[1000, function() { proto.y = 400; }, B],
[1000, function() { stub.y = js.y = ui.y = 400; }, B],
[1000, function() { middle.height = 35; }, B],
[1000, function() { html.y = 400; }, B],
[1000, function() { css.y = 400; }, B],
[1000, function() { ui_tm.y = 0; ui_table.y = 80; ui_detail.y = 160; ui_ctrl.y = 240; ui_model.y = 320; }, B],
[0],
[1000, function() { proto.y -= 100; }],
[
[1500, function() { proto.y = -200; }, M.easeOut(0.5)],
[1500, function() { proto.x = -200; proto.a = -Math.PI*6; }, M.easeIn(0.5)]
],
[500],
[1000, function() { model.y = 300; }, B],
function() { middle.text = 'FOAM'; },
[3000, function() { middle.width += 720; middle.x -= 360; }, B],
[0],
[
[1000, function() { stub.x += 120; ui.x += 120; js.x += 120; ui_tm.x += 120; ui_table.x += 120; ui_detail.x += 120; ui_ctrl.x += 120; ui_model.x += 120; html.x += 120; css.x += 120; middle.width += 120; }],
[1000, function() { dao.y = 400; search.y = 300; }]
],
[0],
addPlatform,
[0],
addPlatform,
[0],
addPlatform,
[0],
addPlatform,
[0],
addPlatform,
[0],
addPlatform,
[0],
addPlatform
])();
});
</script>
</body>
</html>