moka: more css

css/moka.css

@@ -1,22 +1,69 @@
 @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);
+.no-select {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
 body {
   background: #d5d5d5;
 }
+.moka_view {
+  display: inline-block;
+}
 .moka_view .mk_default {
   font-size: 12px;
+  font-family: "Open Sans";
   color: #555;
   text-shadow: 0 1px 0 white;
 }
+.moka_view span {
+  font-size: 12px;
+  font-family: "Open Sans";
+  color: #555;
+  text-shadow: 0 1px 0 white;
+  color: #333;
+  padding: 4px;
+}
+.moka_view .mk_control,
+.moka_view .mk_control:active,
 .moka_view .mk_control:focus {
+  font-size: 12px;
+  font-family: "Open Sans";
+  color: #555;
+  text-shadow: 0 1px 0 white;
+  margin: 4px;
+  padding: 3px 10px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  border-top: solid 1px #999999;
+  border-left: solid 1px #999999;
+  border-right: solid 1px #999999;
+  border-bottom: solid 1px #999999;
+  -webkit-box-shadow: 0 0 3px 0 #cccccc;
+  -moz-box-shadow: 0 0 3px 0 #cccccc;
+  box-shadow: 0 0 3px 0 #cccccc;
+  background: white;
+}
+.moka_view .mk_control:focus,
+.moka_view .mk_control:active:focus,
+.moka_view .mk_control:focus:focus {
   outline: 0;
+  -webkit-box-shadow: 0 0 2px #0088cc;
+  -moz-box-shadow: 0 0 2px #0088cc;
+  box-shadow: 0 0 2px #0088cc;
 }
-.moka_view button,
-.moka_view button:active,
-.moka_view button:focus {
+.moka_view button {
   font-size: 12px;
+  font-family: "Open Sans";
   color: #555;
   text-shadow: 0 1px 0 white;
-  margin: 100px;
+  margin: 4px;
+  padding: 3px 10px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
@@ -24,32 +71,82 @@ body {
   border-left: solid 1px #999999;
   border-right: solid 1px #999999;
   border-bottom: solid 1px #999999;
+  -webkit-box-shadow: 0 0 3px 0 #cccccc;
+  -moz-box-shadow: 0 0 3px 0 #cccccc;
+  box-shadow: 0 0 3px 0 #cccccc;
+  background: white;
   background: #fafafa;
   background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dedede), color-stop(1, #ffffff));
   background: -ms-linear-gradient(bottom, #dedede, #ffffff);
   background: -moz-linear-gradient(center bottom, #dedede 0%, #ffffff 100%);
   background: -o-linear-gradient(#ffffff, #dedede);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dedede', GradientType=0);
-  -webkit-box-shadow: 0 1px 3px 0 #cccccc;
-  -moz-box-shadow: 0 1px 3px 0 #cccccc;
-  box-shadow: 0 1px 3px 0 #cccccc;
-  padding: 3px 10px;
 }
-.moka_view button:focus,
-.moka_view button:active:focus,
-.moka_view button:focus:focus {
+.moka_view button:focus {
   outline: 0;
+  -webkit-box-shadow: 0 0 2px #0088cc;
+  -moz-box-shadow: 0 0 2px #0088cc;
+  box-shadow: 0 0 2px #0088cc;
 }
-.moka_view button:active,
-.moka_view button:active:active,
-.moka_view button:focus:active {
+.moka_view button:active {
+  background: #dedede;
+  -webkit-box-shadow: inset 0 0 3px 0 #aaaaaa;
+  -moz-box-shadow: inset 0 0 3px 0 #aaaaaa;
+  box-shadow: inset 0 0 3px 0 #aaaaaa;
+}
+.moka_view input {
+  font-size: 12px;
+  font-family: "Open Sans";
+  color: #555;
+  text-shadow: 0 1px 0 white;
+  margin: 4px;
+  padding: 3px 10px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  border-top: solid 1px #999999;
+  border-left: solid 1px #999999;
+  border-right: solid 1px #999999;
+  border-bottom: solid 1px #999999;
   -webkit-box-shadow: 0 0 3px 0 #cccccc;
   -moz-box-shadow: 0 0 3px 0 #cccccc;
   box-shadow: 0 0 3px 0 #cccccc;
-  background: #dedede;
-  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fafafa), color-stop(1, #dedede));
-  background: -ms-linear-gradient(bottom, #fafafa, #dedede);
-  background: -moz-linear-gradient(center bottom, #fafafa 0%, #dedede 100%);
-  background: -o-linear-gradient(#dedede, #fafafa);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dedede', endColorstr='#fafafa', GradientType=0);
+  background: white;
+  text-shadow: 0 0 0;
+}
+.moka_view input:focus {
+  outline: 0;
+  -webkit-box-shadow: 0 0 2px #0088cc;
+  -moz-box-shadow: 0 0 2px #0088cc;
+  box-shadow: 0 0 2px #0088cc;
+}
+.moka_view input:focus {
+  -webkit-box-shadow: inset 0 0 3px 0 #0088cc;
+  -moz-box-shadow: inset 0 0 3px 0 #0088cc;
+  box-shadow: inset 0 0 3px 0 #0088cc;
+}
+.moka_view input[type="checkbox"] {
+  position: absolute;
+  left: -999999px;
+}
+.moka_view input[type="checkbox"] + label {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding: 0 6px;
+  background: url('../images/moka/check.png') 50% 50% no-repeat;
+  height: 16px;
+  width: 16px;
+}
+.moka_view input[type="checkbox"]:focus + label {
+  background-image: url('../images/moka/check-focus.png');
+  -webkit-box-shadow: 0 0 2px #0088cc;
+  -moz-box-shadow: 0 0 2px #0088cc;
+  box-shadow: 0 0 2px #0088cc;
+}
+.moka_view input[type="checkbox"]:checked + label {
+  background-image: url('../images/moka/check-active.png');
 }

css/moka.less

@@ -1,90 +1,144 @@
 @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);
 
 
-// Mixins
-.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
-    background: @color;
-    background: -webkit-gradient(linear,
-				 left bottom,
-				 left top,
-				 color-stop(0, @start),
-				 color-stop(1, @stop));
-    background: -ms-linear-gradient(bottom,
-                                    @start,
-                                    @stop);
-    background: -moz-linear-gradient(center bottom,
-                                     @start 0%,
-                                     @stop 100%);
-    background: -o-linear-gradient(@stop,
-                                   @start);
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
-}
-.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
-    border-top: solid 1px @top-color;
-    border-left: solid 1px @left-color;
-    border-right: solid 1px @right-color;
-    border-bottom: solid 1px @bottom-color;
-}
-.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
-    -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
-    -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
-    box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
-}
-.rounded(@radius: 3px) {
-    -webkit-border-radius: @radius;
-    -moz-border-radius: @radius;
-    border-radius: @radius;
-}
-.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
-    -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
-    -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
-    box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
-}
-.box-shadow(@arguments) {
-    -webkit-box-shadow: @arguments;
-    -moz-box-shadow: @arguments;
-    box-shadow: @arguments;
-}
-
-// Moka definitions
-
-// TEMP
-body {
-    background: #d5d5d5;
-}
-
-.moka_view {    
-
-    .mk_default {
-	// Generic fonts
-	font-size: 12px;
-	color: #555;
-	text-shadow: 0 1px 0 white;
-
-    }
-
-
-    // Controls
-    
-    .mk_control {
-	&:focus {
-	    outline: 0;
-	}
-    }
-
-    button, button:active, button:focus {
-	.mk_default;
-	.mk_control;
-	margin: 100px;
-	.rounded();
-	.bordered(#999, #999, #999, #999);
-	.gradient(#fafafa, #dedede, white);
-	.box-shadow(0 1px 3px 0 #ccc);
-	padding: 3px 10px;
-
-	&:active {
-	    .box-shadow(0 0 3px 0 #ccc);
-	    .gradient(#dedede, #fafafa, #dedede);
-	}
-    }
-}
+	    // Mixins
+	    .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
+		background: @color;
+		background: -webkit-gradient(linear,
+					     left bottom,
+					     left top,
+					     color-stop(0, @start),
+					     color-stop(1, @stop));
+		background: -ms-linear-gradient(bottom,
+						@start,
+						@stop);
+		background: -moz-linear-gradient(center bottom,
+						 @start 0%,
+						 @stop 100%);
+		background: -o-linear-gradient(@stop,
+					       @start);
+		filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
+	    }
+	    .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
+		border-top: solid 1px @top-color;
+		border-left: solid 1px @left-color;
+		border-right: solid 1px @right-color;
+		border-bottom: solid 1px @bottom-color;
+	    }
+	    .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
+		-webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+		-moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+		box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+	    }
+	    .rounded(@radius: 3px) {
+		-webkit-border-radius: @radius;
+		-moz-border-radius: @radius;
+		border-radius: @radius;
+	    }
+	    .inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
+		-webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+		-moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+		box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+	    }
+	    .box-shadow(@arguments) {
+		-webkit-box-shadow: @arguments;
+		-moz-box-shadow: @arguments;
+		box-shadow: @arguments;
+	    }
+	    .no-select {
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-khtml-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+	    }
+
+	    // Moka definitions
+
+	    // TEMP
+	    body {
+		background: #d5d5d5;
+	    }
+
+	    .moka_view {    
+
+		display: inline-block;
+
+		.mk_default {
+		    // Generic fonts
+		    font-size: 12px;
+		    font-family: "Open Sans";
+		    color: #555;
+		    text-shadow: 0 1px 0 white;
+
+		}
+
+		// Labels
+
+		span {
+		    .mk_default;
+		    color: #333;
+		    padding: 4px;
+		}
+
+		// Controls
+		
+		.mk_control, .mk_control:active, .mk_control:focus {
+		    .mk_default;
+
+		    margin: 4px;
+		    padding: 3px 10px;
+		    .rounded();
+		    .bordered(#999, #999, #999, #999);
+		    .box-shadow(0 0 3px 0 #ccc);
+		    background: white;
+
+		    &:focus {
+			outline: 0;
+			.box-shadow(0 0 2px #08c);
+		    }
+		}
+
+		button {
+		    .mk_control;
+		    .gradient(#fafafa, #dedede, white);
+
+		    &:active {
+			background: #dedede;
+			.box-shadow(inset 0 0 3px 0 #aaa);
+		    }
+		}
+		
+		input {
+		    .mk_control;
+		    text-shadow: 0 0 0;
+
+		    &:focus {
+			.box-shadow(inset 0 0 3px 0 #08c);
+		    }
+		}
+		
+		input[type="checkbox"] {
+		    position: absolute;
+		    left: -999999px;
+		}
+
+		input[type="checkbox"] + label {
+		    .no-select;
+		    padding: 0 6px;
+		    background: url('../images/moka/check.png') 50% 50% no-repeat;
+		    height: 16px;
+		    width: 16px;
+		}
+
+		input[type="checkbox"]:focus + label {
+		    background-image: url('../images/moka/check-focus.png');
+		    .box-shadow(0 0 2px #08c);
+		}
+
+		input[type="checkbox"]:checked + label {
+		    background-image: url('../images/moka/check-active.png');
+		}
+	    }

index.html

@@ -13,7 +13,7 @@
 <body>
 <script type='text/javascript'>
     require(
-        ["amber/devel", "amber_core/Moka-Core", "amber_core/Moka-Controllers", "amber_core/Moka-Views"],
+        ["amber/devel", "amber_core/Moka-Core", "amber_core/Moka-Controllers", "amber_core/Moka-Views", "amber_core/Moka-Examples"],
         function (smalltalk) {
             smalltalk.defaultAmdNamespace = "amber_core";
             smalltalk.initialize();

js/Moka-Examples.js

@@ -0,0 +1,249 @@
+define("amber_core/Moka-Examples", ["amber_vm/smalltalk", "amber_vm/nil", "amber_vm/_st", "amber_core/Kernel-Objects", "amber_core/Moka-Core"], function(smalltalk,nil,_st){
+smalltalk.addPackage('Moka-Examples');
+smalltalk.packages["Moka-Examples"].transport = {"type":"amd","amdNamespace":"amber_core"};
+
+smalltalk.addClass('MKCounterBuilder', smalltalk.Object, ['counter'], 'Moka-Examples');
+smalltalk.addMethod(
+smalltalk.method({
+selector: "build",
+category: 'accessing',
+fn: function (){
+var self=this;
+function $MKLabelView(){return smalltalk.MKLabelView||(typeof MKLabelView=="undefined"?nil:MKLabelView)}
+function $MKButtonView(){return smalltalk.MKButtonView||(typeof MKButtonView=="undefined"?nil:MKButtonView)}
+function $MKInputView(){return smalltalk.MKInputView||(typeof MKInputView=="undefined"?nil:MKInputView)}
+function $MKCheckboxView(){return smalltalk.MKCheckboxView||(typeof MKCheckboxView=="undefined"?nil:MKCheckboxView)}
+return smalltalk.withContext(function($ctx1) { 
+var $2,$1,$4,$3,$5,$7,$6,$9,$8,$10,$11;
+$2=self._counter();
+$ctx1.sendIdx["counter"]=1;
+$1=_st($MKLabelView())._model_aspect_($2,"count");
+$ctx1.sendIdx["model:aspect:"]=1;
+_st($1)._render();
+$ctx1.sendIdx["render"]=1;
+$4=self._counter();
+$ctx1.sendIdx["counter"]=2;
+$3=_st($MKButtonView())._model_aspect_($4,"increase");
+$ctx1.sendIdx["model:aspect:"]=2;
+_st($3)._label_("Increase");
+$ctx1.sendIdx["label:"]=1;
+$5=_st($3)._render();
+$ctx1.sendIdx["render"]=2;
+$7=self._counter();
+$ctx1.sendIdx["counter"]=3;
+$6=_st($MKInputView())._model_aspect_($7,"text");
+$ctx1.sendIdx["model:aspect:"]=3;
+_st($6)._render();
+$ctx1.sendIdx["render"]=3;
+$9=self._counter();
+$ctx1.sendIdx["counter"]=4;
+$8=_st($MKCheckboxView())._model_aspect_($9,"checked");
+$ctx1.sendIdx["model:aspect:"]=4;
+_st($8)._render();
+$ctx1.sendIdx["render"]=4;
+$10=_st($MKButtonView())._model_aspect_(self._counter(),"decrease");
+_st($10)._label_("Decrease");
+$11=_st($10)._render();
+return self}, function($ctx1) {$ctx1.fill(self,"build",{},smalltalk.MKCounterBuilder)})},
+args: [],
+source: "build\x0a\x09(MKLabelView model: self counter aspect: #count) render.\x0a\x09(MKButtonView model: self counter aspect: #increase) \x0a\x09\x09label: 'Increase';\x0a\x09\x09render.\x0a\x09(MKInputView model: self counter aspect: #text)\x0a\x09\x09render.\x0a\x09(MKCheckboxView model: self counter aspect: #checked)\x0a\x09\x09render.\x0a\x09(MKButtonView model: self counter aspect: #decrease) \x0a\x09\x09label: 'Decrease';\x0a\x09\x09render",
+messageSends: ["render", "model:aspect:", "counter", "label:"],
+referencedClasses: ["MKLabelView", "MKButtonView", "MKInputView", "MKCheckboxView"]
+}),
+smalltalk.MKCounterBuilder);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "counter",
+category: 'accessing',
+fn: function (){
+var self=this;
+function $MKCounterModel(){return smalltalk.MKCounterModel||(typeof MKCounterModel=="undefined"?nil:MKCounterModel)}
+return smalltalk.withContext(function($ctx1) { 
+var $2,$1;
+$2=self["@counter"];
+if(($receiver = $2) == nil || $receiver == null){
+self["@counter"]=_st($MKCounterModel())._new();
+$1=self["@counter"];
+} else {
+$1=$2;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"counter",{},smalltalk.MKCounterBuilder)})},
+args: [],
+source: "counter\x0a\x09^ counter ifNil: [ counter := MKCounterModel new ]",
+messageSends: ["ifNil:", "new"],
+referencedClasses: ["MKCounterModel"]
+}),
+smalltalk.MKCounterBuilder);
+
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "initialize",
+category: 'initialization',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+_st(self._new())._build();
+return self}, function($ctx1) {$ctx1.fill(self,"initialize",{},smalltalk.MKCounterBuilder.klass)})},
+args: [],
+source: "initialize\x0a\x09self new build",
+messageSends: ["build", "new"],
+referencedClasses: []
+}),
+smalltalk.MKCounterBuilder.klass);
+
+
+smalltalk.addClass('MKCounterModel', smalltalk.MKModel, ['count', 'text', 'checked'], 'Moka-Examples');
+smalltalk.addMethod(
+smalltalk.method({
+selector: "checked",
+category: 'actions',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $2,$1;
+$2=self["@checked"];
+if(($receiver = $2) == nil || $receiver == null){
+$1=false;
+} else {
+$1=$2;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"checked",{},smalltalk.MKCounterModel)})},
+args: [],
+source: "checked\x0a\x09^ checked ifNil: [ false ]",
+messageSends: ["ifNil:"],
+referencedClasses: []
+}),
+smalltalk.MKCounterModel);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "checked:",
+category: 'actions',
+fn: function (aBoolean){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+self["@checked"]=aBoolean;
+self._changed_("checked");
+return self}, function($ctx1) {$ctx1.fill(self,"checked:",{aBoolean:aBoolean},smalltalk.MKCounterModel)})},
+args: ["aBoolean"],
+source: "checked: aBoolean\x0a\x09checked := aBoolean.\x0a\x09self changed: 'checked'",
+messageSends: ["changed:"],
+referencedClasses: []
+}),
+smalltalk.MKCounterModel);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "count",
+category: 'actions',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $1;
+$1=_st(self["@count"])._asString();
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"count",{},smalltalk.MKCounterModel)})},
+args: [],
+source: "count\x0a\x09^ count asString",
+messageSends: ["asString"],
+referencedClasses: []
+}),
+smalltalk.MKCounterModel);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "decrease",
+category: 'actions',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+self["@count"]=_st(self["@count"]).__minus((1));
+self._changed_("count");
+return self}, function($ctx1) {$ctx1.fill(self,"decrease",{},smalltalk.MKCounterModel)})},
+args: [],
+source: "decrease\x0a\x09count := count - 1.\x0a\x09self changed: #count",
+messageSends: ["-", "changed:"],
+referencedClasses: []
+}),
+smalltalk.MKCounterModel);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "increase",
+category: 'actions',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+self["@count"]=_st(self["@count"]).__plus((1));
+self._changed_("count");
+return self}, function($ctx1) {$ctx1.fill(self,"increase",{},smalltalk.MKCounterModel)})},
+args: [],
+source: "increase\x0a\x09count := count + 1.\x0a\x09self changed: #count",
+messageSends: ["+", "changed:"],
+referencedClasses: []
+}),
+smalltalk.MKCounterModel);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "initialize",
+category: 'initialization',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+smalltalk.MKCounterModel.superclass.fn.prototype._initialize.apply(_st(self), []);
+self["@count"]=(0);
+return self}, function($ctx1) {$ctx1.fill(self,"initialize",{},smalltalk.MKCounterModel)})},
+args: [],
+source: "initialize\x0a\x09super initialize.\x0a\x09count := 0",
+messageSends: ["initialize"],
+referencedClasses: []
+}),
+smalltalk.MKCounterModel);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "text",
+category: 'actions',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $2,$1;
+$2=self["@text"];
+if(($receiver = $2) == nil || $receiver == null){
+$1="";
+} else {
+$1=$2;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"text",{},smalltalk.MKCounterModel)})},
+args: [],
+source: "text\x0a\x09^ text ifNil: [ '' ]",
+messageSends: ["ifNil:"],
+referencedClasses: []
+}),
+smalltalk.MKCounterModel);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "text:",
+category: 'actions',
+fn: function (aString){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+self["@text"]=aString;
+self._changed_("text");
+return self}, function($ctx1) {$ctx1.fill(self,"text:",{aString:aString},smalltalk.MKCounterModel)})},
+args: ["aString"],
+source: "text: aString\x0a\x09text := aString.\x0a\x09self changed: 'text'",
+messageSends: ["changed:"],
+referencedClasses: []
+}),
+smalltalk.MKCounterModel);
+
+
+});

js/Moka-Views.js

@@ -199,7 +199,7 @@ smalltalk.MKButtonView);
 
 
 
-smalltalk.addClass('MKCheckboxView', smalltalk.MKAspectView, ['label'], 'Moka-Views');
+smalltalk.addClass('MKCheckboxView', smalltalk.MKAspectView, [], 'Moka-Views');
 smalltalk.MKCheckboxView.comment="I am a checkbox view. My default controller is `MKCheckboxController`.\x0a\x0aMy controller must answer to `#onToggled:`.\x0a\x0a##API\x0a\x0a- If no `aspect` is provided, the ckeckbox state will always be off.\x0a- use `#label:` to set the label string.";
 smalltalk.addMethod(
 smalltalk.method({
@@ -241,45 +241,6 @@ referencedClasses: ["MKCheckboxController"]
 }),
 smalltalk.MKCheckboxView);
 
-smalltalk.addMethod(
-smalltalk.method({
-selector: "label",
-category: 'rendering',
-fn: function (){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-var $2,$1;
-$2=self["@label"];
-if(($receiver = $2) == nil || $receiver == null){
-$1="";
-} else {
-$1=$2;
-};
-return $1;
-}, function($ctx1) {$ctx1.fill(self,"label",{},smalltalk.MKCheckboxView)})},
-args: [],
-source: "label\x0a\x09^ label ifNil: [ '' ]",
-messageSends: ["ifNil:"],
-referencedClasses: []
-}),
-smalltalk.MKCheckboxView);
-
-smalltalk.addMethod(
-smalltalk.method({
-selector: "label:",
-category: 'rendering',
-fn: function (aString){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-self["@label"]=aString;
-return self}, function($ctx1) {$ctx1.fill(self,"label:",{aString:aString},smalltalk.MKCheckboxView)})},
-args: ["aString"],
-source: "label: aString\x0a\x09label := aString",
-messageSends: [],
-referencedClasses: []
-}),
-smalltalk.MKCheckboxView);
-
 smalltalk.addMethod(
 smalltalk.method({
 selector: "pressed",
@@ -302,12 +263,13 @@ selector: "renderContentOn:",
 category: 'rendering',
 fn: function (html){
 var self=this;
-var checkbox;
+var checkbox,id;
 return smalltalk.withContext(function($ctx1) { 
-var $1,$2,$3;
+var $1,$2,$3,$4,$5;
+id=_st((1000000)._atRandom())._asString();
 $1=_st(html)._input();
 _st($1)._type_("checkbox");
-_st($1)._value_(self._label());
+_st($1)._id_(id);
 $2=_st($1)._onClick_((function(){
 return smalltalk.withContext(function($ctx2) {
 return self._pressed();
@@ -317,10 +279,16 @@ $3=self._checked();
 if(smalltalk.assert($3)){
 _st(checkbox)._at_put_("checked","checked");
 };
-return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html,checkbox:checkbox},smalltalk.MKCheckboxView)})},
+$4=_st(html)._label();
+_st($4)._for_(id);
+$5=_st($4)._with_((function(){
+return smalltalk.withContext(function($ctx2) {
+return _st(html)._entity_("nbsp");
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1,3)})}));
+return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html,checkbox:checkbox,id:id},smalltalk.MKCheckboxView)})},
 args: ["html"],
-source: "renderContentOn: html\x0a\x09| checkbox |\x0a\x09\x0a\x09checkbox := html input\x0a\x09\x09type: 'checkbox';\x0a\x09\x09value: self label;\x0a\x09\x09onClick: [ self pressed ].\x0a\x09\x09\x0a\x09self checked ifTrue: [ \x0a\x09\x09checkbox at: 'checked' put: 'checked' ]",
-messageSends: ["type:", "input", "value:", "label", "onClick:", "pressed", "ifTrue:", "checked", "at:put:"],
+source: "renderContentOn: html\x0a\x09| checkbox id |\x0a\x09\x0a\x09 id := 1000000 atRandom asString.\x0a\x09\x0a\x09checkbox := html input\x0a\x09\x09type: 'checkbox';\x0a\x09\x09id: id;\x0a\x09\x09onClick: [ self pressed ].\x0a\x09\x09\x0a\x09self checked ifTrue: [ \x0a\x09\x09checkbox at: 'checked' put: 'checked' ].\x0a\x09\x09\x0a\x09html label\x0a\x09\x09for: id;\x0a\x09\x09with: [ html entity: 'nbsp' ]",
+messageSends: ["asString", "atRandom", "type:", "input", "id:", "onClick:", "pressed", "ifTrue:", "checked", "at:put:", "for:", "label", "with:", "entity:"],
 referencedClasses: []
 }),
 smalltalk.MKCheckboxView);
@@ -454,11 +422,11 @@ category: 'rendering',
 fn: function (html){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-_st(html)._with_(self._aspectValue());
+_st(_st(html)._span())._with_(self._aspectValue());
 return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},smalltalk.MKLabelView)})},
 args: ["html"],
-source: "renderContentOn: html\x0a\x09html with: self aspectValue",
-messageSends: ["with:", "aspectValue"],
+source: "renderContentOn: html\x0a\x09html span with: self aspectValue",
+messageSends: ["with:", "span", "aspectValue"],
 referencedClasses: []
 }),
 smalltalk.MKLabelView);

st/Moka-Examples.st

@@ -0,0 +1,76 @@
+Smalltalk current createPackage: 'Moka-Examples'!
+Object subclass: #MKCounterBuilder
+	instanceVariableNames: 'counter'
+	package: 'Moka-Examples'!
+
+!MKCounterBuilder methodsFor: 'accessing'!
+
+build
+	(MKLabelView model: self counter aspect: #count) render.
+	(MKButtonView model: self counter aspect: #increase) 
+		label: 'Increase';
+		render.
+	(MKInputView model: self counter aspect: #text)
+		render.
+	(MKCheckboxView model: self counter aspect: #checked)
+		render.
+	(MKButtonView model: self counter aspect: #decrease) 
+		label: 'Decrease';
+		render
+!
+
+counter
+	^ counter ifNil: [ counter := MKCounterModel new ]
+! !
+
+!MKCounterBuilder class methodsFor: 'initialization'!
+
+initialize
+	self new build
+! !
+
+MKModel subclass: #MKCounterModel
+	instanceVariableNames: 'count text checked'
+	package: 'Moka-Examples'!
+
+!MKCounterModel methodsFor: 'actions'!
+
+checked
+	^ checked ifNil: [ false ]
+!
+
+checked: aBoolean
+	checked := aBoolean.
+	self changed: 'checked'
+!
+
+count
+	^ count asString
+!
+
+decrease
+	count := count - 1.
+	self changed: #count
+!
+
+increase
+	count := count + 1.
+	self changed: #count
+!
+
+text
+	^ text ifNil: [ '' ]
+!
+
+text: aString
+	text := aString.
+	self changed: 'text'
+! !
+
+!MKCounterModel methodsFor: 'initialization'!
+
+initialize
+	super initialize.
+	count := 0
+! !
+

st/Moka-Views.st

@@ -68,7 +68,7 @@ isDefault
 ! !
 
 MKAspectView subclass: #MKCheckboxView
-	instanceVariableNames: 'label'
+	instanceVariableNames: ''
 	package: 'Moka-Views'!
 !MKCheckboxView commentStamp!
 I am a checkbox view. My default controller is `MKCheckboxController`.
@@ -100,24 +100,22 @@ pressed
 
 !MKCheckboxView methodsFor: 'rendering'!
 
-label
-	^ label ifNil: [ '' ]
-!
-
-label: aString
-	label := aString
-!
-
 renderContentOn: html
-	| checkbox |
+	| checkbox id |
+	
+	 id := 1000000 atRandom asString.
 	
 	checkbox := html input
 		type: 'checkbox';
-		value: self label;
+		id: id;
 		onClick: [ self pressed ].
 		
 	self checked ifTrue: [ 
-		checkbox at: 'checked' put: 'checked' ]
+		checkbox at: 'checked' put: 'checked' ].
+		
+	html label
+		for: id;
+		with: [ html entity: 'nbsp' ]
 ! !
 
 MKAspectView subclass: #MKInputView
@@ -176,6 +174,6 @@ defaultControllerClass
 !MKLabelView methodsFor: 'rendering'!
 
 renderContentOn: html
-	html with: self aspectValue
+	html span with: self aspectValue
 ! !