Using Flame.VerticalSplitView with recent Ember
HTML
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://github.com/downloads/pjmorse/flame.js/flame.js"></script>
<link rel="stylesheet" href="https://github.com/downloads/pjmorse/flame.js/flame.css">
<script type="text/x-handlebars">
{{view App.RootView}}
</script>
CSS
.flame-vertical-split-view .flame-split-view-divider {
border-style: none solid none solid;
background: #d8d8d8;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF7F7F7', endColorstr='#FFD8D8D8', GradientType=1);
background: -webkit-linear-gradient(left, #f7f7f7, #d8d8d8);
background: -moz-linear-gradient(left, #f7f7f7, #d8d8d8);
cursor: col-resize; }
.flame-horizontal-split-view .flame-split-view-divider {
border-style: solid none solid none;
background: #d8d8d8;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF7F7F7', endColorstr='#FFD8D8D8', GradientType=0);
background: -webkit-linear-gradient(top, #f7f7f7, #d8d8d8);
background: -moz-linear-gradient(top, #f7f7f7, #d8d8d8);
cursor: row-resize; }
JavaScript
// Testing Flame SplitViews using ember-latest
// Flame.js built from my own fork, which differs very little from master
App = Ember.Application.create();
App.RootView = Flame.RootView.extend({
childViews: "splitview".w(),
splitview: Flame.HorizontalSplitView.extend({
topHeight: 100, // arbitrary
topView: Flame.LabelView.extend({
value: "Top View!",
layout: {
height: 20,
width: 400,
centerX: 0,
centerY: 0
},
textAlign: Flame.ALIGN_CENTER
}),
bottomView: Flame.View.extend({
classNames: "desktop-workspace".w(),
childViews: "version".w(),
version: Flame.LabelView.extend({
value: 'Hey, content!',
layout: {
height: 20,
width: 400,
centerX: 0,
centerY: 0
},
textAlign: Flame.ALIGN_CENTER
})
})
})
});