moka: new scrollbars

css/moka.css

@@ -577,12 +577,12 @@
   z-index: 10;
 }
 .moka_view.mk_split_view.horizontal .mk_splitter {
+  height: 100%;
   width: 5px;
+  cursor: ew-resize;
+  float: left;
   margin-left: -1px;
   border-left: 1px solid #aaaaaa;
-  height: 100%;
-  float: left;
-  cursor: ew-resize;
 }
 .moka_view.mk_split_view.vertical .mk_splitter {
   height: 5px;

css/moka.less

@@ -1,3 +1,4 @@
+
 @import "reset.css";
 @import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,latin-ext");
 
@@ -10,15 +11,15 @@
 				 color-stop(0, @start),
 				 color-stop(1, @stop));
     background: -ms-linear-gradient(bottom,
-					 @start,
-					 @stop);
+				    @start,
+				    @stop);
     background: -moz-linear-gradient(center bottom,
 				     @start 0%,
 				     @stop 100%);
     background: -o-linear-gradient(@stop,
 				   @start);
     background: linear-gradient(@stop,
-				   @start);
+				@start);
 }
 .vertical-gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
     background: @color;
@@ -34,11 +35,11 @@
 				     @start 0%,
 				     @stop 100%);
     background: -o-linear-gradient(right,
-				     @start 0%,
-				     @stop 100%);
+				   @start 0%,
+				   @stop 100%);
     background: linear-gradient(right,
-				     @start 0%,
-				     @stop 100%);
+				@start 0%,
+				@stop 100%);
 }
 .linear-gradient(@arguments) {
     background: -webkit-linear-gradient(@arguments);
@@ -447,12 +448,14 @@
 	}
 
 	&.horizontal .mk_splitter {
+	    height: 100%;
 	    width: 5px;
+	    cursor: ew-resize;
+
+	    float: left;
 	    margin-left: -1px;
 	    border-left: 1px solid @grey;
-	    height: 100%;
-	    float: left;
-	    cursor: ew-resize;
+
 	}
 
 	&.vertical .mk_splitter {

js/Moka-Controllers.js

@@ -927,4 +927,139 @@ referencedClasses: []
 smalltalk.MKScrollController);
 
 
+
+smalltalk.addClass('MKSplitController', smalltalk.MKController, [], 'Moka-Controllers');
+smalltalk.MKSplitController.comment="I am the abstract controller for `MKSplitView`.";
+smalltalk.addMethod(
+smalltalk.method({
+selector: "onResize:helper:",
+category: 'actions',
+fn: function (anEvent,aJQuery){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+self._subclassResponsibility();
+return self}, function($ctx1) {$ctx1.fill(self,"onResize:helper:",{anEvent:anEvent,aJQuery:aJQuery},smalltalk.MKSplitController)})},
+args: ["anEvent", "aJQuery"],
+source: "onResize: anEvent helper: aJQuery\x0a\x09self subclassResponsibility",
+messageSends: ["subclassResponsibility"],
+referencedClasses: []
+}),
+smalltalk.MKSplitController);
+
+
+
+smalltalk.addClass('MKLeftFixedHorizontalSplitController', smalltalk.MKSplitController, [], 'Moka-Controllers');
+smalltalk.MKLeftFixedHorizontalSplitController.comment="I am the controller for `MKHorizontalSplitView`.\x0a\x0aWhen the splitter is moved, the left view is set a fixed size, thus resizing will preserve the width of the first view, while the second view will be resized.";
+smalltalk.addMethod(
+smalltalk.method({
+selector: "onResize:helper:",
+category: 'actions',
+fn: function (anEvent,aJQuery){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+self._placeSplitter_(_st(_st(aJQuery)._offset())._left());
+return self}, function($ctx1) {$ctx1.fill(self,"onResize:helper:",{anEvent:anEvent,aJQuery:aJQuery},smalltalk.MKLeftFixedHorizontalSplitController)})},
+args: ["anEvent", "aJQuery"],
+source: "onResize: anEvent helper: aJQuery\x0a\x09self placeSplitter: aJQuery offset left",
+messageSends: ["placeSplitter:", "left", "offset"],
+referencedClasses: []
+}),
+smalltalk.MKLeftFixedHorizontalSplitController);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "placeSplitter:",
+category: 'actions',
+fn: function (aNumber){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $3,$2,$1,$4,$7,$6,$5,$8;
+$3=self._view();
+$ctx1.sendIdx["view"]=1;
+$2=_st($3)._firstView();
+$1=_st($2)._asJQuery();
+$ctx1.sendIdx["asJQuery"]=1;
+$4=_st(aNumber)._asMokaCssString();
+$ctx1.sendIdx["asMokaCssString"]=1;
+_st($1)._css_put_("width",$4);
+$ctx1.sendIdx["css:put:"]=1;
+$7=self._view();
+$ctx1.sendIdx["view"]=2;
+$6=_st($7)._splitter();
+$5=_st($6)._asJQuery();
+$ctx1.sendIdx["asJQuery"]=2;
+$8=_st(aNumber)._asMokaCssString();
+$ctx1.sendIdx["asMokaCssString"]=2;
+_st($5)._css_put_("left",$8);
+$ctx1.sendIdx["css:put:"]=2;
+_st(_st(_st(self._view())._secondView())._asJQuery())._css_put_("left",_st(aNumber)._asMokaCssString());
+return self}, function($ctx1) {$ctx1.fill(self,"placeSplitter:",{aNumber:aNumber},smalltalk.MKLeftFixedHorizontalSplitController)})},
+args: ["aNumber"],
+source: "placeSplitter: aNumber\x0a\x09self view firstView asJQuery css: 'width' put: aNumber asMokaCssString.\x0a\x09self view splitter asJQuery css: 'left' put: aNumber asMokaCssString.\x0a\x09self view secondView asJQuery css: 'left' put: aNumber asMokaCssString",
+messageSends: ["css:put:", "asJQuery", "firstView", "view", "asMokaCssString", "splitter", "secondView"],
+referencedClasses: []
+}),
+smalltalk.MKLeftFixedHorizontalSplitController);
+
+
+
+smalltalk.addClass('MKRightFixedHorizontalSplitController', smalltalk.MKSplitController, [], 'Moka-Controllers');
+smalltalk.MKRightFixedHorizontalSplitController.comment="I am an alternative controller for `MKHorizontalSplitView`.\x0a\x0aWhen the splitter is moved, the second view is set a fixed size, thus resizing will preserve the width of the second view, while the first view will be resized.";
+smalltalk.addMethod(
+smalltalk.method({
+selector: "onResize:helper:",
+category: 'actions',
+fn: function (anEvent,aJQuery){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+self._placeSplitter_(_st(_st(_st(self._view())._domSize())._x()).__minus(_st(_st(aJQuery)._offset())._left()));
+return self}, function($ctx1) {$ctx1.fill(self,"onResize:helper:",{anEvent:anEvent,aJQuery:aJQuery},smalltalk.MKRightFixedHorizontalSplitController)})},
+args: ["anEvent", "aJQuery"],
+source: "onResize: anEvent helper: aJQuery\x0a\x09self placeSplitter: self view domSize x - aJQuery offset left",
+messageSends: ["placeSplitter:", "-", "x", "domSize", "view", "left", "offset"],
+referencedClasses: []
+}),
+smalltalk.MKRightFixedHorizontalSplitController);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "placeSplitter:",
+category: 'actions',
+fn: function (aNumber){
+var self=this;
+var splitter;
+return smalltalk.withContext(function($ctx1) { 
+var $2,$1,$5,$4,$3,$6,$7,$8,$9,$10;
+$2=self._view();
+$ctx1.sendIdx["view"]=1;
+$1=_st($2)._splitter();
+splitter=_st($1)._asJQuery();
+$ctx1.sendIdx["asJQuery"]=1;
+$5=self._view();
+$ctx1.sendIdx["view"]=2;
+$4=_st($5)._secondView();
+$3=_st($4)._asJQuery();
+$ctx1.sendIdx["asJQuery"]=2;
+$6=$3;
+$7=_st(aNumber)._asMokaCssString();
+$ctx1.sendIdx["asMokaCssString"]=1;
+_st($6)._css_put_("width",$7);
+$ctx1.sendIdx["css:put:"]=1;
+$8=_st($3)._css_put_("right",(0));
+$ctx1.sendIdx["css:put:"]=2;
+$9=splitter;
+$10=_st(_st(aNumber).__minus(_st(splitter)._width()))._asMokaCssString();
+$ctx1.sendIdx["asMokaCssString"]=2;
+_st($9)._css_put_("right",$10);
+$ctx1.sendIdx["css:put:"]=3;
+_st(_st(_st(self._view())._firstView())._asJQuery())._css_put_("right",_st(aNumber)._asMokaCssString());
+return self}, function($ctx1) {$ctx1.fill(self,"placeSplitter:",{aNumber:aNumber,splitter:splitter},smalltalk.MKRightFixedHorizontalSplitController)})},
+args: ["aNumber"],
+source: "placeSplitter: aNumber\x0a\x09| splitter |\x0a\x09splitter := self view splitter asJQuery.\x0a\x09self view secondView asJQuery \x0a\x09\x09css: 'width' put: aNumber asMokaCssString;\x0a\x09\x09css: 'right' put: 0.\x0a\x09splitter css: 'right' put: (aNumber - splitter width) asMokaCssString.\x0a\x09self view firstView asJQuery css: 'right' put: aNumber asMokaCssString",
+messageSends: ["asJQuery", "splitter", "view", "css:put:", "secondView", "asMokaCssString", "-", "width", "firstView"],
+referencedClasses: []
+}),
+smalltalk.MKRightFixedHorizontalSplitController);
+
+
 });

js/Moka-Views.js

@@ -431,100 +431,6 @@ smalltalk.MKSwitchView);
 
 
 
-smalltalk.addClass('MKContainerView', smalltalk.MKLayoutView, ['childView'], 'Moka-Views');
-smalltalk.MKContainerView.comment="I display my single `childView`. \x0a\x0aI am used to switch between views.";
-smalltalk.addMethod(
-smalltalk.method({
-selector: "childView",
-category: 'accessing',
-fn: function (){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-var $1;
-$1=self["@childView"];
-return $1;
-}, function($ctx1) {$ctx1.fill(self,"childView",{},smalltalk.MKContainerView)})},
-args: [],
-source: "childView\x0a\x09^ childView",
-messageSends: [],
-referencedClasses: []
-}),
-smalltalk.MKContainerView);
-
-smalltalk.addMethod(
-smalltalk.method({
-selector: "childView:",
-category: 'accessing',
-fn: function (aView){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-self["@childView"]=aView;
-self._update();
-return self}, function($ctx1) {$ctx1.fill(self,"childView:",{aView:aView},smalltalk.MKContainerView)})},
-args: ["aView"],
-source: "childView: aView\x0a\x09childView := aView.\x0a\x09self update",
-messageSends: ["update"],
-referencedClasses: []
-}),
-smalltalk.MKContainerView);
-
-smalltalk.addMethod(
-smalltalk.method({
-selector: "children",
-category: 'accessing',
-fn: function (){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-var $1;
-$1=[self._childView()];
-return $1;
-}, function($ctx1) {$ctx1.fill(self,"children",{},smalltalk.MKContainerView)})},
-args: [],
-source: "children\x0a\x09^ { self childView }",
-messageSends: ["childView"],
-referencedClasses: []
-}),
-smalltalk.MKContainerView);
-
-smalltalk.addMethod(
-smalltalk.method({
-selector: "renderContentOn:",
-category: 'rendering',
-fn: function (html){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-_st(html)._with_(self._childView());
-return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},smalltalk.MKContainerView)})},
-args: ["html"],
-source: "renderContentOn: html\x0a\x09html with: self childView",
-messageSends: ["with:", "childView"],
-referencedClasses: []
-}),
-smalltalk.MKContainerView);
-
-
-smalltalk.addMethod(
-smalltalk.method({
-selector: "childView:",
-category: 'instance creation',
-fn: function (aView){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-var $2,$3,$1;
-$2=self._new();
-_st($2)._childView_(aView);
-$3=_st($2)._yourself();
-$1=$3;
-return $1;
-}, function($ctx1) {$ctx1.fill(self,"childView:",{aView:aView},smalltalk.MKContainerView.klass)})},
-args: ["aView"],
-source: "childView: aView\x0a\x09^ self new \x0a\x09\x09childView: aView;\x0a\x09\x09yourself",
-messageSends: ["childView:", "new", "yourself"],
-referencedClasses: []
-}),
-smalltalk.MKContainerView.klass);
-
-
 smalltalk.addClass('MKLabelView', smalltalk.MKSingleAspectView, [], 'Moka-Views');
 smalltalk.MKLabelView.comment="I am an label view. I display a `String`.";
 smalltalk.addMethod(
@@ -1065,7 +971,7 @@ smalltalk.MKPanelView);
 
 
 
-smalltalk.addClass('MKSelectionView', smalltalk.MKAspectsView, ['selectionAspect', 'collectionAspect'], 'Moka-Views');
+smalltalk.addClass('MKSelectionView', smalltalk.MKAspectsView, ['selectionAspect', 'collectionAspect', 'displayBlock'], 'Moka-Views');
 smalltalk.MKSelectionView.comment="I an abstract selection view of a list of elements.";
 smalltalk.addMethod(
 smalltalk.method({
@@ -1140,6 +1046,45 @@ referencedClasses: []
 }),
 smalltalk.MKSelectionView);
 
+smalltalk.addMethod(
+smalltalk.method({
+selector: "displayBlock",
+category: 'accessing',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $2,$1;
+$2=self["@displayBlock"];
+if(($receiver = $2) == nil || $receiver == null){
+$1=self._defaultDisplayBlock();
+} else {
+$1=$2;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"displayBlock",{},smalltalk.MKSelectionView)})},
+args: [],
+source: "displayBlock\x0a\x09^ displayBlock ifNil: [ self defaultDisplayBlock ]",
+messageSends: ["ifNil:", "defaultDisplayBlock"],
+referencedClasses: []
+}),
+smalltalk.MKSelectionView);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "displayBlock:",
+category: 'accessing',
+fn: function (aBlock){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+self["@displayBlock"]=aBlock;
+return self}, function($ctx1) {$ctx1.fill(self,"displayBlock:",{aBlock:aBlock},smalltalk.MKSelectionView)})},
+args: ["aBlock"],
+source: "displayBlock: aBlock\x0a\x09displayBlock := aBlock",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.MKSelectionView);
+
 smalltalk.addMethod(
 smalltalk.method({
 selector: "selectedItem",
@@ -1370,11 +1315,11 @@ fn: function (html){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
 _st(_st(html)._div())._class_("mk_dropdown_arrows");
-_st(html)._with_(self._selectedItem());
+_st(html)._with_(_st(self._displayBlock())._value_(self._selectedItem()));
 return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},smalltalk.MKDropdownView)})},
 args: ["html"],
-source: "renderContentOn: html\x0a\x09html div class: 'mk_dropdown_arrows'.\x0a\x09html with: self selectedItem",
-messageSends: ["class:", "div", "with:", "selectedItem"],
+source: "renderContentOn: html\x0a\x09html div class: 'mk_dropdown_arrows'.\x0a\x09html with: (self displayBlock value: self selectedItem)",
+messageSends: ["class:", "div", "with:", "value:", "displayBlock", "selectedItem"],
 referencedClasses: []
 }),
 smalltalk.MKDropdownView);
@@ -1435,7 +1380,7 @@ smalltalk.MKDropdownView);
 
 
 
-smalltalk.addClass('MKListView', smalltalk.MKSelectionView, ['displayBlock'], 'Moka-Views');
+smalltalk.addClass('MKListView', smalltalk.MKSelectionView, [], 'Moka-Views');
 smalltalk.MKListView.comment="I display a list of elements in a list control field.";
 smalltalk.addMethod(
 smalltalk.method({
@@ -1535,66 +1480,6 @@ referencedClasses: ["MKListController"]
 }),
 smalltalk.MKListView);
 
-smalltalk.addMethod(
-smalltalk.method({
-selector: "defaultDisplayBlock",
-category: 'defaults',
-fn: function (){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-var $1;
-$1=(function(item){
-return smalltalk.withContext(function($ctx2) {
-return _st(item)._asString();
-}, function($ctx2) {$ctx2.fillBlock({item:item},$ctx1,1)})});
-return $1;
-}, function($ctx1) {$ctx1.fill(self,"defaultDisplayBlock",{},smalltalk.MKListView)})},
-args: [],
-source: "defaultDisplayBlock\x0a\x09^ [ :item | item asString ]",
-messageSends: ["asString"],
-referencedClasses: []
-}),
-smalltalk.MKListView);
-
-smalltalk.addMethod(
-smalltalk.method({
-selector: "displayBlock",
-category: 'accessing',
-fn: function (){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-var $2,$1;
-$2=self["@displayBlock"];
-if(($receiver = $2) == nil || $receiver == null){
-$1=self._defaultDisplayBlock();
-} else {
-$1=$2;
-};
-return $1;
-}, function($ctx1) {$ctx1.fill(self,"displayBlock",{},smalltalk.MKListView)})},
-args: [],
-source: "displayBlock\x0a\x09^ displayBlock ifNil: [ self defaultDisplayBlock ]",
-messageSends: ["ifNil:", "defaultDisplayBlock"],
-referencedClasses: []
-}),
-smalltalk.MKListView);
-
-smalltalk.addMethod(
-smalltalk.method({
-selector: "displayBlock:",
-category: 'accessing',
-fn: function (aBlock){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-self["@displayBlock"]=aBlock;
-return self}, function($ctx1) {$ctx1.fill(self,"displayBlock:",{aBlock:aBlock},smalltalk.MKListView)})},
-args: ["aBlock"],
-source: "displayBlock: aBlock\x0a\x09displayBlock := aBlock",
-messageSends: [],
-referencedClasses: []
-}),
-smalltalk.MKListView);
-
 smalltalk.addMethod(
 smalltalk.method({
 selector: "ensureVisible:",
@@ -1933,7 +1818,7 @@ smalltalk.MKSourceListView);
 
 
 
-smalltalk.addClass('MKSplitView', smalltalk.MKLayoutView, ['firstView', 'secondView', 'splitter'], 'Moka-Views');
+smalltalk.addClass('MKSplitView', smalltalk.MKLayoutView, ['firstView', 'secondView', 'splitter', 'thickness'], 'Moka-Views');
 smalltalk.MKSplitView.comment="I am the superclass of all split views. I arrange two child view with a splitter between them.\x0a\x0a## API\x0a\x0aCreate instances using the class-side method `firstView:secondView:`.";
 smalltalk.addMethod(
 smalltalk.method({
@@ -2011,13 +1896,14 @@ selector: "firstView:",
 category: 'accessing',
 fn: function (aView){
 var self=this;
+function $MKDecorator(){return smalltalk.MKDecorator||(typeof MKDecorator=="undefined"?nil:MKDecorator)}
 return smalltalk.withContext(function($ctx1) { 
-self["@firstView"]=aView;
+self["@firstView"]=_st($MKDecorator())._decorate_(aView);
 return self}, function($ctx1) {$ctx1.fill(self,"firstView:",{aView:aView},smalltalk.MKSplitView)})},
 args: ["aView"],
-source: "firstView: aView\x0a\x09firstView := aView",
-messageSends: [],
-referencedClasses: []
+source: "firstView: aView\x0a\x09firstView := MKDecorator decorate: aView",
+messageSends: ["decorate:"],
+referencedClasses: ["MKDecorator"]
 }),
 smalltalk.MKSplitView);
 
@@ -2032,11 +1918,10 @@ _st(html)._with_(self._firstView());
 $ctx1.sendIdx["with:"]=1;
 self["@splitter"]=_st(_st(html)._div())._class_(self._splitterCssClass());
 _st(html)._with_(self._secondView());
-self._setupSplitter();
 return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},smalltalk.MKSplitView)})},
 args: ["html"],
-source: "renderContentOn: html\x0a\x09html with: self firstView.\x0a\x09splitter := html div class: self splitterCssClass.\x0a\x09html with: self secondView.\x0a        \x0a\x09self setupSplitter",
-messageSends: ["with:", "firstView", "class:", "div", "splitterCssClass", "secondView", "setupSplitter"],
+source: "renderContentOn: html\x0a\x09html with: self firstView.\x0a\x09splitter := html div class: self splitterCssClass.\x0a\x09html with: self secondView",
+messageSends: ["with:", "firstView", "class:", "div", "splitterCssClass", "secondView"],
 referencedClasses: []
 }),
 smalltalk.MKSplitView);
@@ -2065,28 +1950,31 @@ selector: "secondView:",
 category: 'accessing',
 fn: function (aView){
 var self=this;
+function $MKDecorator(){return smalltalk.MKDecorator||(typeof MKDecorator=="undefined"?nil:MKDecorator)}
 return smalltalk.withContext(function($ctx1) { 
-self["@secondView"]=aView;
+self["@secondView"]=_st($MKDecorator())._decorate_(aView);
 return self}, function($ctx1) {$ctx1.fill(self,"secondView:",{aView:aView},smalltalk.MKSplitView)})},
 args: ["aView"],
-source: "secondView: aView\x0a\x09secondView := aView",
-messageSends: [],
-referencedClasses: []
+source: "secondView: aView\x0a\x09secondView := MKDecorator decorate: aView",
+messageSends: ["decorate:"],
+referencedClasses: ["MKDecorator"]
 }),
 smalltalk.MKSplitView);
 
 smalltalk.addMethod(
 smalltalk.method({
-selector: "setupSplitter",
-category: 'private',
+selector: "splitter",
+category: 'accessing',
 fn: function (){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-self._subclassResponsibility();
-return self}, function($ctx1) {$ctx1.fill(self,"setupSplitter",{},smalltalk.MKSplitView)})},
+var $1;
+$1=self["@splitter"];
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"splitter",{},smalltalk.MKSplitView)})},
 args: [],
-source: "setupSplitter\x0a\x09self subclassResponsibility",
-messageSends: ["subclassResponsibility"],
+source: "splitter\x0a\x09\x22Answer the `splitter` TagBrush\x22\x0a\x09\x0a\x09^ splitter",
+messageSends: [],
 referencedClasses: []
 }),
 smalltalk.MKSplitView);
@@ -2107,6 +1995,45 @@ referencedClasses: []
 }),
 smalltalk.MKSplitView);
 
+smalltalk.addMethod(
+smalltalk.method({
+selector: "thickness",
+category: 'accessing',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $2,$1;
+$2=self["@thickness"];
+if(($receiver = $2) == nil || $receiver == null){
+$1=self._defaultThickness();
+} else {
+$1=$2;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"thickness",{},smalltalk.MKSplitView)})},
+args: [],
+source: "thickness\x0a\x09^ thickness ifNil: [ self defaultThickness ]",
+messageSends: ["ifNil:", "defaultThickness"],
+referencedClasses: []
+}),
+smalltalk.MKSplitView);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "thickness:",
+category: 'accessing',
+fn: function (aNumber){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+self["@thickness"]=aNumber;
+return self}, function($ctx1) {$ctx1.fill(self,"thickness:",{aNumber:aNumber},smalltalk.MKSplitView)})},
+args: ["aNumber"],
+source: "thickness: aNumber\x0a\x09thickness := aNumber",
+messageSends: [],
+referencedClasses: []
+}),
+smalltalk.MKSplitView);
+
 
 smalltalk.addMethod(
 smalltalk.method({
@@ -2131,7 +2058,7 @@ referencedClasses: []
 smalltalk.MKSplitView.klass);
 
 
-smalltalk.addClass('MKHorizontalSplitView', smalltalk.MKSplitView, ['leftThickness', 'rightThickness'], 'Moka-Views');
+smalltalk.addClass('MKHorizontalSplitView', smalltalk.MKSplitView, [], 'Moka-Views');
 smalltalk.MKHorizontalSplitView.comment="I split my child views vertically.";
 smalltalk.addMethod(
 smalltalk.method({
@@ -2153,24 +2080,18 @@ smalltalk.MKHorizontalSplitView);
 
 smalltalk.addMethod(
 smalltalk.method({
-selector: "leftThickness",
-category: 'accessing',
+selector: "defaultControllerClass",
+category: 'defaults',
 fn: function (){
 var self=this;
+function $MKLeftFixedHorizontalSplitController(){return smalltalk.MKLeftFixedHorizontalSplitController||(typeof MKLeftFixedHorizontalSplitController=="undefined"?nil:MKLeftFixedHorizontalSplitController)}
 return smalltalk.withContext(function($ctx1) { 
-var $2,$1;
-$2=self["@leftThickness"];
-if(($receiver = $2) == nil || $receiver == null){
-$1=self._defaultThickness();
-} else {
-$1=$2;
-};
-return $1;
-}, function($ctx1) {$ctx1.fill(self,"leftThickness",{},smalltalk.MKHorizontalSplitView)})},
+return $MKLeftFixedHorizontalSplitController();
+}, function($ctx1) {$ctx1.fill(self,"defaultControllerClass",{},smalltalk.MKHorizontalSplitView)})},
 args: [],
-source: "leftThickness\x0a\x09^ leftThickness ifNil: [ self defaultThickness ]",
-messageSends: ["ifNil:", "defaultThickness"],
-referencedClasses: []
+source: "defaultControllerClass\x0a\x09^ MKLeftFixedHorizontalSplitController",
+messageSends: [],
+referencedClasses: ["MKLeftFixedHorizontalSplitController"]
 }),
 smalltalk.MKHorizontalSplitView);
 
@@ -2180,14 +2101,15 @@ selector: "leftThickness:",
 category: 'accessing',
 fn: function (aNumber){
 var self=this;
+function $MKLeftFixedHorizontalSplitController(){return smalltalk.MKLeftFixedHorizontalSplitController||(typeof MKLeftFixedHorizontalSplitController=="undefined"?nil:MKLeftFixedHorizontalSplitController)}
 return smalltalk.withContext(function($ctx1) { 
-self["@rightThickness"]=nil;
-self["@leftThickness"]=aNumber;
+self._thickness_(aNumber);
+self._controller_(_st($MKLeftFixedHorizontalSplitController())._new());
 return self}, function($ctx1) {$ctx1.fill(self,"leftThickness:",{aNumber:aNumber},smalltalk.MKHorizontalSplitView)})},
 args: ["aNumber"],
-source: "leftThickness: aNumber\x0a\x09rightThickness := nil.\x0a\x09leftThickness := aNumber",
-messageSends: [],
-referencedClasses: []
+source: "leftThickness: aNumber\x0a\x09self thickness: aNumber.\x0a\x09self controller: MKLeftFixedHorizontalSplitController new",
+messageSends: ["thickness:", "controller:", "new"],
+referencedClasses: ["MKLeftFixedHorizontalSplitController"]
 }),
 smalltalk.MKHorizontalSplitView);
 
@@ -2198,123 +2120,84 @@ category: 'rendering',
 fn: function (html){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-var $1;
-$1=self._leftThickness();
-$ctx1.sendIdx["leftThickness"]=1;
-if(($receiver = $1) == nil || $receiver == null){
-$1;
-} else {
-var thickness;
-thickness=$receiver;
-_st(self._firstView())._width_(thickness);
-_st(self._secondView())._left_(thickness);
-};
 smalltalk.MKHorizontalSplitView.superclass.fn.prototype._renderContentOn_.apply(_st(self), [html]);
-_st(_st(self["@splitter"])._asJQuery())._css_put_("left",self._leftThickness());
+_st(self._controller())._placeSplitter_(self._defaultThickness());
 return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},smalltalk.MKHorizontalSplitView)})},
 args: ["html"],
-source: "renderContentOn: html\x0a\x09self leftThickness ifNotNil: [ :thickness |\x0a\x09\x09self firstView width: thickness.\x0a\x09\x09self secondView left: thickness ].\x0a\x09\x09\x0a\x09super renderContentOn: html.\x0a\x09splitter asJQuery css: 'left' put: self leftThickness",
-messageSends: ["ifNotNil:", "leftThickness", "width:", "firstView", "left:", "secondView", "renderContentOn:", "css:put:", "asJQuery"],
+source: "renderContentOn: html\x0a\x09super renderContentOn: html.\x0a\x09self controller placeSplitter: self defaultThickness",
+messageSends: ["renderContentOn:", "placeSplitter:", "controller", "defaultThickness"],
 referencedClasses: []
 }),
 smalltalk.MKHorizontalSplitView);
 
 smalltalk.addMethod(
 smalltalk.method({
-selector: "resize:",
-category: 'actions',
+selector: "rightThickness:",
+category: 'accessing',
 fn: function (aNumber){
 var self=this;
+function $MKRightFixedHorizontalSplitController(){return smalltalk.MKRightFixedHorizontalSplitController||(typeof MKRightFixedHorizontalSplitController=="undefined"?nil:MKRightFixedHorizontalSplitController)}
 return smalltalk.withContext(function($ctx1) { 
-var $1,$2,$3,$4;
-$1=_st(self._firstView())._asJQuery();
-$ctx1.sendIdx["asJQuery"]=1;
-$2=_st(aNumber)._asMokaCssString();
-$ctx1.sendIdx["asMokaCssString"]=1;
-_st($1)._css_put_("width",$2);
-$ctx1.sendIdx["css:put:"]=1;
-$3=_st(self["@splitter"])._asJQuery();
-$ctx1.sendIdx["asJQuery"]=2;
-$4=_st(aNumber)._asMokaCssString();
-$ctx1.sendIdx["asMokaCssString"]=2;
-_st($3)._css_put_("left",$4);
-$ctx1.sendIdx["css:put:"]=2;
-_st(_st(self._secondView())._asJQuery())._css_put_("left",_st(aNumber)._asMokaCssString());
-return self}, function($ctx1) {$ctx1.fill(self,"resize:",{aNumber:aNumber},smalltalk.MKHorizontalSplitView)})},
+self._thickness_(aNumber);
+self._controller_(_st($MKRightFixedHorizontalSplitController())._new());
+return self}, function($ctx1) {$ctx1.fill(self,"rightThickness:",{aNumber:aNumber},smalltalk.MKHorizontalSplitView)})},
 args: ["aNumber"],
-source: "resize: aNumber\x0a    self firstView asJQuery css: 'width' put: aNumber asMokaCssString.\x0a\x09splitter asJQuery css: 'left' put: aNumber asMokaCssString.\x0a\x09self secondView asJQuery css: 'left' put: aNumber asMokaCssString",
-messageSends: ["css:put:", "asJQuery", "firstView", "asMokaCssString", "secondView"],
-referencedClasses: []
+source: "rightThickness: aNumber\x0a\x09self thickness: aNumber.\x0a\x09self controller: MKRightFixedHorizontalSplitController new",
+messageSends: ["thickness:", "controller:", "new"],
+referencedClasses: ["MKRightFixedHorizontalSplitController"]
 }),
 smalltalk.MKHorizontalSplitView);
 
 smalltalk.addMethod(
 smalltalk.method({
-selector: "rightThickness",
-category: 'accessing',
-fn: function (){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-var $1;
-$1=self["@rightThickness"];
-return $1;
-}, function($ctx1) {$ctx1.fill(self,"rightThickness",{},smalltalk.MKHorizontalSplitView)})},
-args: [],
-source: "rightThickness\x0a\x09^ rightThickness",
-messageSends: [],
-referencedClasses: []
-}),
-smalltalk.MKHorizontalSplitView);
-
-smalltalk.addMethod(
-smalltalk.method({
-selector: "rightThickness:",
+selector: "secondView:",
 category: 'accessing',
-fn: function (aNumber){
+fn: function (aView){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-self["@leftThickness"]=nil;
-self["@rightThickness"]=aNumber;
-return self}, function($ctx1) {$ctx1.fill(self,"rightThickness:",{aNumber:aNumber},smalltalk.MKHorizontalSplitView)})},
-args: ["aNumber"],
-source: "rightThickness: aNumber\x0a\x09leftThickness := nil.\x0a\x09rightThickness := aNumber",
-messageSends: [],
+var $1,$2;
+smalltalk.MKHorizontalSplitView.superclass.fn.prototype._secondView_.apply(_st(self), [aView]);
+$1=self._secondView();
+_st($1)._right_((0));
+$2=_st($1)._left_("auto");
+return self}, function($ctx1) {$ctx1.fill(self,"secondView:",{aView:aView},smalltalk.MKHorizontalSplitView)})},
+args: ["aView"],
+source: "secondView: aView\x0a\x09super secondView: aView.\x0a\x09self secondView \x0a\x09\x09right: 0;\x0a\x09\x09left: 'auto'",
+messageSends: ["secondView:", "right:", "secondView", "left:"],
 referencedClasses: []
 }),
 smalltalk.MKHorizontalSplitView);
 
 smalltalk.addMethod(
 smalltalk.method({
-selector: "setupSplitter",
+selector: "setupEventHandlers",
 category: 'private',
 fn: function (){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-var $1,$3,$4,$5,$6,$7,$2;
+var $1,$3,$4,$5,$6,$2;
 $1=_st(self["@splitter"])._asJQuery();
 $ctx1.sendIdx["asJQuery"]=1;
 $3="axis".__minus_gt("x");
 $ctx1.sendIdx["->"]=1;
 $4="containment".__minus_gt(_st(_st(self["@splitter"])._asJQuery())._parent());
 $ctx1.sendIdx["->"]=2;
-$5="helper".__minus_gt("clone");
+$5="cursor".__minus_gt("ew-resize");
 $ctx1.sendIdx["->"]=3;
-$6="cursor".__minus_gt("ew-resize");
-$ctx1.sendIdx["->"]=4;
-$7="stop".__minus_gt((function(){
+$6="stop".__minus_gt((function(){
 return smalltalk.withContext(function($ctx2) {
 return self._resized();
 }, function($ctx2) {$ctx2.fillBlock({},$ctx1,1)})}));
-$ctx1.sendIdx["->"]=5;
-$2=smalltalk.HashedCollection._from_([$3,$4,$5,$6,$7,"drag".__minus_gt((function(e,ui){
+$ctx1.sendIdx["->"]=4;
+$2=smalltalk.HashedCollection._from_([$3,$4,$5,$6,"drag".__minus_gt((function(e,ui){
 return smalltalk.withContext(function($ctx2) {
-return self._resize_(_st(_st(ui)._offset())._left());
+return _st(self._controller())._onResize_helper_(e,ui);
 }, function($ctx2) {$ctx2.fillBlock({e:e,ui:ui},$ctx1,2)})}))]);
 _st($1)._draggable_($2);
-return self}, function($ctx1) {$ctx1.fill(self,"setupSplitter",{},smalltalk.MKHorizontalSplitView)})},
+return self}, function($ctx1) {$ctx1.fill(self,"setupEventHandlers",{},smalltalk.MKHorizontalSplitView)})},
 args: [],
-source: "setupSplitter\x0a\x09splitter asJQuery draggable: #{ \x0a    \x09'axis' -> 'x'. \x0a        'containment' -> splitter asJQuery parent.\x0a        'helper' -> 'clone'.\x0a\x09\x09'cursor' -> 'ew-resize'.\x0a\x09\x09'stop' -> [ self resized ].\x0a        'drag' -> [ :e :ui | self resize: ui offset left ] }",
-messageSends: ["draggable:", "asJQuery", "->", "parent", "resized", "resize:", "left", "offset"],
+source: "setupEventHandlers\x0a\x09splitter asJQuery draggable: #{ \x0a    \x09'axis' -> 'x'. \x0a        'containment' -> splitter asJQuery parent.\x0a\x09\x09'cursor' -> 'ew-resize'.\x0a\x09\x09'stop' -> [ self resized ].\x0a        'drag' -> [ :e :ui | self controller onResize: e helper: ui ] }",
+messageSends: ["draggable:", "asJQuery", "->", "parent", "resized", "onResize:helper:", "controller"],
 referencedClasses: []
 }),
 smalltalk.MKHorizontalSplitView);
@@ -2377,30 +2260,28 @@ category: 'private',
 fn: function (){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-var $1,$3,$4,$5,$6,$7,$2;
+var $1,$3,$4,$5,$6,$2;
 $1=_st(self["@splitter"])._asJQuery();
 $ctx1.sendIdx["asJQuery"]=1;
 $3="axis".__minus_gt("x");
 $ctx1.sendIdx["->"]=1;
 $4="containment".__minus_gt(_st(_st(self["@splitter"])._asJQuery())._parent());
 $ctx1.sendIdx["->"]=2;
-$5="helper".__minus_gt("clone");
+$5="cursor".__minus_gt("ns-resize");
 $ctx1.sendIdx["->"]=3;
-$6="cursor".__minus_gt("ns-resize");
-$ctx1.sendIdx["->"]=4;
-$7="stop".__minus_gt((function(){
+$6="stop".__minus_gt((function(){
 return smalltalk.withContext(function($ctx2) {
 return self._resized();
 }, function($ctx2) {$ctx2.fillBlock({},$ctx1,1)})}));
-$ctx1.sendIdx["->"]=5;
-$2=smalltalk.HashedCollection._from_([$3,$4,$5,$6,$7,"drag".__minus_gt((function(e,ui){
+$ctx1.sendIdx["->"]=4;
+$2=smalltalk.HashedCollection._from_([$3,$4,$5,$6,"drag".__minus_gt((function(e,ui){
 return smalltalk.withContext(function($ctx2) {
 return self._resize_(_st(_st(ui)._offset())._left());
 }, function($ctx2) {$ctx2.fillBlock({e:e,ui:ui},$ctx1,2)})}))]);
 _st($1)._draggable_($2);
 return self}, function($ctx1) {$ctx1.fill(self,"setupSplitter",{},smalltalk.MKVerticalSplitView)})},
 args: [],
-source: "setupSplitter\x0a\x09splitter asJQuery draggable: #{ \x0a    \x09'axis' -> 'x'. \x0a        'containment' -> splitter asJQuery parent.\x0a        'helper' -> 'clone'.\x0a\x09\x09'cursor' -> 'ns-resize'.\x0a\x09\x09'stop' -> [ self resized ].\x0a        'drag' -> [ :e :ui | self resize: (ui offset left) ] }",
+source: "setupSplitter\x0a\x09splitter asJQuery draggable: #{ \x0a    \x09'axis' -> 'x'. \x0a        'containment' -> splitter asJQuery parent.\x0a\x09\x09'cursor' -> 'ns-resize'.\x0a\x09\x09'stop' -> [ self resized ].\x0a        'drag' -> [ :e :ui | self resize: (ui offset left) ] }",
 messageSends: ["draggable:", "asJQuery", "->", "parent", "resized", "resize:", "left", "offset"],
 referencedClasses: []
 }),

st/Moka-Controllers.st

@@ -322,3 +322,59 @@ onVerticalDrag: anEvent
 	(self view decorated asJQuery get: 0) at: 'scrollTop' put: self view domScrollPosition y
 ! !
 
+MKController subclass: #MKSplitController
+	instanceVariableNames: ''
+	package: 'Moka-Controllers'!
+!MKSplitController commentStamp!
+I am the abstract controller for `MKSplitView`.!
+
+!MKSplitController methodsFor: 'actions'!
+
+onResize: anEvent helper: aJQuery
+	self subclassResponsibility
+! !
+
+MKSplitController subclass: #MKLeftFixedHorizontalSplitController
+	instanceVariableNames: ''
+	package: 'Moka-Controllers'!
+!MKLeftFixedHorizontalSplitController commentStamp!
+I am the controller for `MKHorizontalSplitView`.
+
+When the splitter is moved, the left view is set a fixed size, thus resizing will preserve the width of the first view, while the second view will be resized.!
+
+!MKLeftFixedHorizontalSplitController methodsFor: 'actions'!
+
+onResize: anEvent helper: aJQuery
+	self placeSplitter: aJQuery offset left
+!
+
+placeSplitter: aNumber
+	self view firstView asJQuery css: 'width' put: aNumber asMokaCssString.
+	self view splitter asJQuery css: 'left' put: aNumber asMokaCssString.
+	self view secondView asJQuery css: 'left' put: aNumber asMokaCssString
+! !
+
+MKSplitController subclass: #MKRightFixedHorizontalSplitController
+	instanceVariableNames: ''
+	package: 'Moka-Controllers'!
+!MKRightFixedHorizontalSplitController commentStamp!
+I am an alternative controller for `MKHorizontalSplitView`.
+
+When the splitter is moved, the second view is set a fixed size, thus resizing will preserve the width of the second view, while the first view will be resized.!
+
+!MKRightFixedHorizontalSplitController methodsFor: 'actions'!
+
+onResize: anEvent helper: aJQuery
+	self placeSplitter: self view domSize x - aJQuery offset left
+!
+
+placeSplitter: aNumber
+	| splitter |
+	splitter := self view splitter asJQuery.
+	self view secondView asJQuery 
+		css: 'width' put: aNumber asMokaCssString;
+		css: 'right' put: 0.
+	splitter css: 'right' put: (aNumber - splitter width) asMokaCssString.
+	self view firstView asJQuery css: 'right' put: aNumber asMokaCssString
+! !
+

st/Moka-Examples.st

@@ -142,7 +142,8 @@ build
 	
 	(MKHorizontalSplitView 
 		firstView: (MKScrollDecorator decorate: pane)
-		secondView: MKLayoutView new) 
+		secondView: MKLayoutView new)
+			leftThickness: 300;
 			top: 200;
 			bottom: 0;
 			render

st/Moka-Views.st

@@ -153,43 +153,6 @@ defaultLayout
 		yourself
 ! !
 
-MKLayoutView subclass: #MKContainerView
-	instanceVariableNames: 'childView'
-	package: 'Moka-Views'!
-!MKContainerView commentStamp!
-I display my single `childView`. 
-
-I am used to switch between views.!
-
-!MKContainerView methodsFor: 'accessing'!
-
-childView
-	^ childView
-!
-
-childView: aView
-	childView := aView.
-	self update
-!
-
-children
-	^ { self childView }
-! !
-
-!MKContainerView methodsFor: 'rendering'!
-
-renderContentOn: html
-	html with: self childView
-! !
-
-!MKContainerView class methodsFor: 'instance creation'!
-
-childView: aView
-	^ self new 
-		childView: aView;
-		yourself
-! !
-
 MKSingleAspectView subclass: #MKLabelView
 	instanceVariableNames: ''
 	package: 'Moka-Views'!
@@ -391,7 +354,7 @@ cssClass
 ! !
 
 MKAspectsView subclass: #MKSelectionView
-	instanceVariableNames: 'selectionAspect collectionAspect'
+	instanceVariableNames: 'selectionAspect collectionAspect displayBlock'
 	package: 'Moka-Views'!
 !MKSelectionView commentStamp!
 I an abstract selection view of a list of elements.!
@@ -410,6 +373,14 @@ collectionAspect: aSelector
 	collectionAspect := aSelector
 !
 
+displayBlock
+	^ displayBlock ifNil: [ self defaultDisplayBlock ]
+!
+
+displayBlock: aBlock
+	displayBlock := aBlock
+!
+
 selectedItem
 	^ self valueForAspect: self selectionAspect
 !
@@ -498,7 +469,7 @@ defaultLayout
 
 renderContentOn: html
 	html div class: 'mk_dropdown_arrows'.
-	html with: self selectedItem
+	html with: (self displayBlock value: self selectedItem)
 ! !
 
 !MKDropdownView methodsFor: 'views'!
@@ -529,7 +500,7 @@ modalPaneView
 ! !
 
 MKSelectionView subclass: #MKListView
-	instanceVariableNames: 'displayBlock'
+	instanceVariableNames: ''
 	package: 'Moka-Views'!
 !MKListView commentStamp!
 I display a list of elements in a list control field.!
@@ -544,14 +515,6 @@ cssClass
 	^ super cssClass, ' mk_list'
 !
 
-displayBlock
-	^ displayBlock ifNil: [ self defaultDisplayBlock ]
-!
-
-displayBlock: aBlock
-	displayBlock := aBlock
-!
-
 findItemFor: aListItem
 	^ aListItem asJQuery data at: 'item'
 !
@@ -589,10 +552,6 @@ activateListItem: aListItem
 
 defaultControllerClass
 	^ MKListController
-!
-
-defaultDisplayBlock
-	^ [ :item | item asString ]
 ! !
 
 !MKListView methodsFor: 'private'!
@@ -691,7 +650,7 @@ cssClass
 ! !
 
 MKLayoutView subclass: #MKSplitView
-	instanceVariableNames: 'firstView secondView splitter'
+	instanceVariableNames: 'firstView secondView splitter thickness'
 	package: 'Moka-Views'!
 !MKSplitView commentStamp!
 I am the superclass of all split views. I arrange two child view with a splitter between them.
@@ -715,7 +674,7 @@ firstView
 !
 
 firstView: aView
-	firstView := aView
+	firstView := MKDecorator decorate: aView
 !
 
 secondView
@@ -723,11 +682,25 @@ secondView
 !
 
 secondView: aView
-	secondView := aView
+	secondView := MKDecorator decorate: aView
+!
+
+splitter
+	"Answer the `splitter` TagBrush"
+	
+	^ splitter
 !
 
 splitterCssClass
 	^ 'mk_splitter'
+!
+
+thickness
+	^ thickness ifNil: [ self defaultThickness ]
+!
+
+thickness: aNumber
+	thickness := aNumber
 ! !
 
 !MKSplitView methodsFor: 'defaults'!
@@ -736,20 +709,12 @@ defaultThickness
 	^ 300
 ! !
 
-!MKSplitView methodsFor: 'private'!
-
-setupSplitter
-	self subclassResponsibility
-! !
-
 !MKSplitView methodsFor: 'rendering'!
 
 renderContentOn: html
 	html with: self firstView.
 	splitter := html div class: self splitterCssClass.
-	html with: self secondView.
-        
-	self setupSplitter
+	html with: self secondView
 ! !
 
 !MKSplitView class methodsFor: 'instance creation'!
@@ -762,7 +727,7 @@ firstView: aView secondView: anotherView
 ! !
 
 MKSplitView subclass: #MKHorizontalSplitView
-	instanceVariableNames: 'leftThickness rightThickness'
+	instanceVariableNames: ''
 	package: 'Moka-Views'!
 !MKHorizontalSplitView commentStamp!
 I split my child views vertically.!
@@ -773,53 +738,45 @@ cssClass
 	^ super cssClass, ' horizontal'
 !
 
-leftThickness
-	^ leftThickness ifNil: [ self defaultThickness ]
-!
-
 leftThickness: aNumber
-	rightThickness := nil.
-	leftThickness := aNumber
+	self thickness: aNumber.
+	self controller: MKLeftFixedHorizontalSplitController new
 !
 
-rightThickness
-	^ rightThickness
+rightThickness: aNumber
+	self thickness: aNumber.
+	self controller: MKRightFixedHorizontalSplitController new
 !
 
-rightThickness: aNumber
-	leftThickness := nil.
-	rightThickness := aNumber
+secondView: aView
+	super secondView: aView.
+	self secondView 
+		right: 0;
+		left: 'auto'
 ! !
 
-!MKHorizontalSplitView methodsFor: 'actions'!
+!MKHorizontalSplitView methodsFor: 'defaults'!
 
-resize: aNumber
-    self firstView asJQuery css: 'width' put: aNumber asMokaCssString.
-	splitter asJQuery css: 'left' put: aNumber asMokaCssString.
-	self secondView asJQuery css: 'left' put: aNumber asMokaCssString
+defaultControllerClass
+	^ MKLeftFixedHorizontalSplitController
 ! !
 
 !MKHorizontalSplitView methodsFor: 'private'!
 
-setupSplitter
+setupEventHandlers
 	splitter asJQuery draggable: #{ 
     	'axis' -> 'x'. 
         'containment' -> splitter asJQuery parent.
-        'helper' -> 'clone'.
 		'cursor' -> 'ew-resize'.
 		'stop' -> [ self resized ].
-        'drag' -> [ :e :ui | self resize: ui offset left ] }
+        'drag' -> [ :e :ui | self controller onResize: e helper: ui ] }
 ! !
 
 !MKHorizontalSplitView methodsFor: 'rendering'!
 
 renderContentOn: html
-	self leftThickness ifNotNil: [ :thickness |
-		self firstView width: thickness.
-		self secondView left: thickness ].
-		
 	super renderContentOn: html.
-	splitter asJQuery css: 'left' put: self leftThickness
+	self controller placeSplitter: self defaultThickness
 ! !
 
 MKSplitView subclass: #MKVerticalSplitView
@@ -848,7 +805,6 @@ setupSplitter
 	splitter asJQuery draggable: #{ 
     	'axis' -> 'x'. 
         'containment' -> splitter asJQuery parent.
-        'helper' -> 'clone'.
 		'cursor' -> 'ns-resize'.
 		'stop' -> [ self resized ].
         'drag' -> [ :e :ui | self resize: (ui offset left) ] }