From 949d1db7a76b72dfebfd4380072473d10078f057 Mon Sep 17 00:00:00 2001 From: Michael Olbrich Date: Thu, 3 Jun 2010 12:49:44 +0200 Subject: [web-gui] implement calculator Signed-off-by: Michael Olbrich --- .../source/class/calculator/Application.js | 123 +++++++++++++++++++-- .../source/class/calculator/theme/Appearance.js | 11 +- .../source/class/calculator/theme/Font.js | 11 +- 3 files changed, 132 insertions(+), 13 deletions(-) (limited to 'web-gui') diff --git a/web-gui/calculator/source/class/calculator/Application.js b/web-gui/calculator/source/class/calculator/Application.js index b0dfb02..c6e8c85 100644 --- a/web-gui/calculator/source/class/calculator/Application.js +++ b/web-gui/calculator/source/class/calculator/Application.js @@ -31,6 +31,13 @@ qx.Class.define("calculator.Application", members : { + __edit: null, + __win: null, + __last: null, + __lastCmd: null, + __clear: false, + __rpc: null, + /** * This method contains the initial application code and gets called * during startup of the application @@ -57,19 +64,113 @@ qx.Class.define("calculator.Application", ------------------------------------------------------------------------- */ - // Create a button - var button1 = new qx.ui.form.Button("First Button", "calculator/test.png"); - // Document is the application root var doc = this.getRoot(); - - // Add button to document at fixed coordinates - doc.add(button1, {left: 100, top: 50}); - - // Add an event listener - button1.addListener("execute", function(e) { - alert("Hello World!"); - }); + + var win = new qx.ui.window.Window("Calculator"); + this.__win = win; + doc.add(win, {left: 100, top: 50}); + + var winLayout = new qx.ui.layout.Grid(); + winLayout.setSpacing(10); + win.setLayout(winLayout); + win.setShowStatusbar(true); + win.open(); + + this.__edit = new qx.ui.form.TextField(); + win.add(this.__edit, {row: 0, column: 0, colSpan: 5 }); + + var app = this; + var makeButton = function(text, r, c) + { + var button = new qx.ui.form.Button(text); + win.add(button, {row: r, column: c }); + button.addListener("execute", function(e) { + this.__doKey(text); + }, app); + button.setAppearance("calc-button"); + } + makeButton("1", 4, 0); + makeButton("2", 4, 1); + makeButton("3", 4, 2); + makeButton("4", 3, 0); + makeButton("5", 3, 1); + makeButton("6", 3, 2); + makeButton("7", 2, 0); + makeButton("8", 2, 1); + makeButton("9", 2, 2); + makeButton("0", 5, 0); + + var clearButton = new qx.ui.form.Button("C"); + win.add(clearButton, {row: 1, column: 0}); + clearButton.addListener("execute", this.__clearAll, this); + clearButton.setAppearance("calc-button"); + + var makeOpp = function(text, func, r, c, span) + { + if (span == null) + span = 1; + var button = new qx.ui.form.Button(text); + win.add(button, {row: r, column: c, colSpan: span }); + button.addListener("execute", function(e) { + app.__doExec(func); + }, app); + button.setAppearance("calc-button"); + } + + makeOpp("=", null, 1, 4); + makeOpp("+", "Add", 2, 4); + makeOpp("-", "Sub", 3, 4); + makeOpp("*", "Multiply", 4, 4); + makeOpp("/", "Divide", 5, 4); + + this.__rpc = new qx.io.remote.Rpc("http://localhost:8080/rpc", "com.pengutronix.jdb.Calculator|/"); + + }, + __doKey : function(key) + { + var value; + this.__win.setStatus(""); + if (this.__clear) { + value = ""; + this.__clear = false; + } + else { + value = this.__edit.getValue(); + if (value == null) + value = ""; + } + this.__edit.setValue(value + key); + }, + __doExec : function(func) + { + this.__win.setStatus(""); + var current = parseInt(this.__edit.getValue()); + if (current == null) + current = 0; + if ((this.__last == null) || (this.__lastCmd == null)) { + this.__last = current; + } + else { + try { + this.__last = this.__rpc.callSync("com.pengutronix.jdb.Calculator." + this.__lastCmd, + "ii", this.__last, current); + this.__edit.setValue("" + this.__last); + } + catch (error) { + this.__clearAll(); + this.__win.setStatus(error); + return; + } + } + this.__lastCmd = func; + this.__clear = true; + }, + __clearAll : function() + { + this.__last = null; + this.__lastCmd = null; + this.__edit.setValue(""); } } }); diff --git a/web-gui/calculator/source/class/calculator/theme/Appearance.js b/web-gui/calculator/source/class/calculator/theme/Appearance.js index 5f56b24..3571fe9 100644 --- a/web-gui/calculator/source/class/calculator/theme/Appearance.js +++ b/web-gui/calculator/source/class/calculator/theme/Appearance.js @@ -14,5 +14,14 @@ qx.Theme.define("calculator.theme.Appearance", appearances : { + "calc-button": { + include: "button", + alias: "button", + style: function(states) { + return { + font: "large" + }; + } + } } -}); \ No newline at end of file +}); diff --git a/web-gui/calculator/source/class/calculator/theme/Font.js b/web-gui/calculator/source/class/calculator/theme/Font.js index 24356ca..7382377 100644 --- a/web-gui/calculator/source/class/calculator/theme/Font.js +++ b/web-gui/calculator/source/class/calculator/theme/Font.js @@ -14,5 +14,14 @@ qx.Theme.define("calculator.theme.Font", fonts : { + "large" : + { + size : (qx.bom.client.System.WINVISTA || qx.bom.client.System.WIN7) ? 25 : 23, + lineHeight : 1.4, + family : qx.bom.client.Platform.MAC ? [ "Lucida Grande" ] : + (qx.bom.client.System.WINVISTA || qx.bom.client.System.WIN7) ? + [ "Segoe UI", "Candara" ] : + [ "Tahoma", "Liberation Sans", "Arial", "sans-serif" ] + } } -}); \ No newline at end of file +}); -- cgit v1.2.3