foam-framework
Version:
MVC metaprogramming framework
145 lines (123 loc) • 5.35 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: 2000, height: 1200, 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 innoweek11 = box('gray', 20, 'Innovation Week 2011');
var innoweek12 = box('gray', 20, 'Innovation Week 2012');
var innoweek13 = box('gray', 20, 'Innovation Week 2013');
var dao = box('blue', 620, 'DAO');
var search = box('blue', 620, 'Search');
innoweek11.width *= 5;
innoweek11.height = 35;
innoweek12.height = 35;
innoweek12.width *= 2;
innoweek13.width *= 4;
innoweek13.height = 35;
innoweek13.y -= 150;
innoweek13.a = Math.PI/2;
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, innoweek11, innoweek12, innoweek13, 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 += 240; middle.x += 120; }, B],
[1000, function() { innoweek11.y = 535; innoweek11.x = 500; innoweek11.a = 0; }],
[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; innoweek11.width += 120; }],
[1000, function() { dao.y = 400; search.y = 300; }]
],
[500],
[1000, function() { model.y -= 700; }, B],
function() { model.text = 'EMail.model'; },
[1000, function() { model.y += 700; }, B],
function() { var a = space.children; for ( var i = 0 ; i < a.length ; i++ ) a[i].text = a[i].text.replace('Issue', 'EMail'); },
[1000, function() { innoweek12.y = 570; innoweek12.a = 0; innoweek12.x = model.x; }],
[0],
[3000, function() { middle.width += 480; middle.x -= 480; }, B],
[1000, function() { innoweek13.y = 535; innoweek13.a = 0; }],
[0],
addPlatform,
[0],
addPlatform,
[0],
addPlatform,
[0],
addPlatform,
[0],
addPlatform,
[0],
addPlatform,
[0],
addPlatform
])();
});
</script>
</body>
</html>