Skip to content

Instantly share code, notes, and snippets.

@ivargrimstad
Forked from jtulach/HelloViaKO.java
Last active October 4, 2016 06:36
Show Gist options
  • Save ivargrimstad/7211752 to your computer and use it in GitHub Desktop.
Save ivargrimstad/7211752 to your computer and use it in GitHub Desktop.
Hello World via Knockout4Java
package dew.demo.duke2brwsr;
import net.java.html.json.*;
@Model(className = "Data", properties = {
@Property(name = "image", type = String.class),
@Property(name = "buttonText", type =String.class),
@Property(name = "on", type = boolean.class)
})
class Duke2Brwsr {
static {
Data model = new Data();
model.setButtonText("Krakow Duke");
model.setImage("http://www.agilejava.eu/duke2brwser/Juggler.gif");
model.applyBindings();
}
@Function
static void switchDuke(Data model) {
if(model.getImage().equals("http://www.agilejava.eu/duke2brwser/Juggler.gif")) {
model.setImage("http://www.agilejava.eu/wp-content/uploads/2016/10/2016-10-04-06.51.44.jpg");
model.setButtonText("Normal Duke");
} else {
model.setImage("http://www.agilejava.eu/duke2brwser/Juggler.gif");
model.setButtonText("Krakow Duke");
}
}
@Function
static void turnOn(Data model) {
model.setOn(true);
}
@Function
static void turnOff(Data model) {
model.setOn(false);
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
.rotate {
-webkit-animation-name: spin;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
#scene {
position: relative;
top: 60px;
text-align: center;
}
#words span {
border: 1px solid #ccc;
background: rgba(255,255,155,0.8);
text-align: center;
font-size: 30px;
-webkit-box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
position: absolute;
}
#words span:nth-child(1) { left: 45%; top: 0px; }
#words span:nth-child(2) { left: 25%; top: 100px; }
#words span:nth-child(3) { left: 65%; top: 100px; }
#words span:nth-child(4) { left: 10%; top: 200px; }
#words span:nth-child(5) { left: 45%; top: 200px; }
#words span:nth-child(6) { left: 80%; top: 200px; }
</style>
</head>
<body>
<h1>Spinning Duke</h1>
<br>
<button data-bind="enable: !on(), click: $root.turnOn">Start</button>
<button data-bind="enable: on, click: $root.turnOff">Stop</button>
<button data-bind="enable: true, click: $root.switchDuke, text: $root.buttonText" ></button>
<div id="scene">
<img data-bind="attr: {'src' : $root.image, 'alt': '', 'height':200, 'width': 200}, css: {'rotate' : $root.on }"/>
</div>
<script type="text/javascript" src="bck2brwsr.js"></script>
<script>
var vm = bck2brwsr('${project.build.finalName}.jar');
vm.loadClass('eu.agilejava.duke2brwsr.MainBrwsr');
</script>
</body>
</html>
package dew.demo.duke2brwsr;
import net.java.html.json.*;
@Model(className = "Data", properties = {
@Property(name = "image", type = String.class),
@Property(name = "buttonText", type =String.class),
@Property(name = "on", type = boolean.class)
})
class Duke2Brwsr {
static {
Data model = new Data();
model.setButtonText("Krakow Duke");
model.setImage("http://www.agilejava.eu/duke2brwser/Juggler.gif");
model.applyBindings();
}
@Function
static void switchDuke(Data model) {
if(model.getImage().equals("http://www.agilejava.eu/duke2brwser/Juggler.gif")) {
model.setImage("http://www.agilejava.eu/duke2brwser/krakowduke.jpg");
model.setButtonText("Normal Duke");
} else {
model.setImage("http://www.agilejava.eu/duke2brwser/Juggler.gif");
model.setButtonText("Krakow Duke");
}
}
@Function
static void turnOn(Data model) {
model.setOn(true);
}
@Function
static void turnOff(Data model) {
model.setOn(false);
}
}
@jtulach
Copy link

jtulach commented Nov 20, 2013

One can see this code snippet in action at http://dew.apidesign.org/dew/#7211752

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment