foam-framework
Version:
MVC metaprogramming framework
69 lines (61 loc) • 2.51 kB
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="..//core/foam.css" />
<script language="javascript" src="../core/bootFOAM.js"></script>
<title>FOAM Diagram</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: '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 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');
middle.y = 500;
middle.width = 360;
middle.height = 0;
/*
var = box('', x+=50, 'Issue');
*/
space.addChildren(
sql, jdbc, java, skeleton, proto, stub, js, ui, html, css,
ui_tm, ui_table, ui_detail, ui_ctrl, ui_model, middle
);
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 = 500; ui_table.y = 600; ui_detail.y = 700; ui_ctrl.y = 800; ui_model.y = 900; }, B],
])();
});
</script>
</body>
</html>