qooxdoo » Playground

// Fenster erstellen
var win = new qx.ui.window.Window("Calculator"); 
win.setLayout(new qx.ui.layout.VBox(3)); 
this.getRoot().add(win); 
win.open();
win.moveTo(60, 40);

// Display erstellen
var display = new 
qx.ui.basic.Label("0").set({ 
  allowGrowX: true, 
  textAlign: "right", 
  font: "bold", 
  decorator: "main" 
}); 
win.add(display);

// Button Container erstellen
var buttonContainer = new 
qx.ui.container.Composite(); 
var grid = new qx.ui.layout.Grid(3, 3);
buttonContainer.setLayout(grid); 
win.add(buttonContainer);

// Tastenbeschriftung
var labels = [ 
	["MC", "M+", "M-", "MR"], 
	["C", "±", "÷", "*"], 
	["7", "8", "9", "-"], 
	["4", "5", "6", "+"], 
	["1", "2", "3", "="], 
	["0", null, ".", null] 
];

// Tasten erstellen und einfügen
var buttons = {}; 
for (var row=0; row<6; row++) { 
  for (var column=0; column<4; column++) {
    var label = labels[row][column]; 
    if (label) { 
			var button = new qx.ui.form.Button(label); 
			button.setRich(true); 
			buttonContainer.add(button, {row:	row, column: column}); 
			buttons[label] = button; 
    } 
  } 
}

// "=" und "." Tasten auf zwei Zellen ausdehnen
buttons["="].setLayoutProperties({rowSpan: 2}); 
buttons["0"].setLayoutProperties( {colSpan: 2});

// Fenster erstellen
var win = new qx.ui.window.Window("Calculator"); 
win.setLayout(new qx.ui.layout.VBox(3)); 
this.getRoot().add(win); 
win.open();
win.moveTo(60, 40);

// Display erstellen
var display = new 
qx.ui.basic.Label("0").set({ 
  allowGrowX: true, 
  textAlign: "right", 
  font: "bold", 
  decorator: "main" 
}); 
win.add(display);

// Button Container erstellen
var buttonContainer = new 
qx.ui.container.Composite(); 
var grid = new qx.ui.layout.Grid(3, 3);
buttonContainer.setLayout(grid); 
win.add(buttonContainer);

// Tastenbeschriftung
var labels = [ 
  ["MC", "M+", "M-", "MR"], 
  ["C", "±", "÷", "*"], 
  ["7", "8", "9", "-"], 
  ["4", "5", "6", "+"], 
  ["1", "2", "3", "="], 
  ["0", null, ".", null] 
];

// Tasten erstellen und einfügen
var buttons = {}; 
for (var row=0; row<6; row++) { 
  for (var column=0; column<4; column++) {
    var label = labels[row][column]; 
    if (label) { 
      var button = new qx.ui.form.Button(label); 
      button.setRich(true); 
      buttonContainer.add(button, {row: row, column: column}); 
      buttons[label] = button; 
    } 
  } 
}

// "=" und "." Tasten auf zwei Zellen ausdehnen
buttons["="].setLayoutProperties({rowSpan: 2}); 
buttons["0"].setLayoutProperties( {colSpan: 2});

// Event-Listener registrieren
for (label in buttons) { 
  buttons[label].addListener("execute", function(e) { 
    var button = e.getTarget(); 
    alert("Pressed: " + button.getLabel()); 
  }, this); 
}

win.addListener("keypress", function(e) { 
  alert("Key: " + e.getKeyIdentifier()); 
}, this);

// Fenster erstellen
var win = new qx.ui.window.Window("Calculator"); 
win.setLayout(new qx.ui.layout.VBox(3)); 
this.getRoot().add(win); 
win.open();
win.moveTo(60, 40);

// Display erstellen
var display = new 
qx.ui.basic.Label("0").set({ 
  allowGrowX: true, 
  textAlign: "right", 
  font: "bold", 
  decorator: "main" 
}); 
win.add(display);

// Button Container erstellen
var buttonContainer = new 
qx.ui.container.Composite(); 
var grid = new qx.ui.layout.Grid(3, 3);
buttonContainer.setLayout(grid); 
win.add(buttonContainer);

// Tastenbeschriftung
var labels = [ 
  ["MC", "M+", "M-", "MR"], 
  ["C", "±", "÷", "*"], 
  ["7", "8", "9", "-"], 
  ["4", "5", "6", "+"], 
  ["1", "2", "3", "="], 
  ["0", null, ".", null] 
];

// Tasten erstellen und einfügen
var buttons = {}; 
for (var row=0; row<6; row++) { 
  for (var column=0; column<4; column++) {
    var label = labels[row][column]; 
    if (label) { 
      var button = new qx.ui.form.Button(label);
      button.setRich(true); 
      buttonContainer.add(button, {row: row, column: column}); 
      buttons[label] = button; 
    } 
  } 
}

// "=" und "." Tasten auf zwei Zellen ausdehnen
buttons["="].setLayoutProperties({rowSpan: 2}); 
buttons["0"].setLayoutProperties( {colSpan: 2});

win.addListener("keypress", function(e) { 
  alert("Key: " + e.getKeyIdentifier()); 
}, this);

// Fenster skalierbar machen
buttonContainer.setLayoutProperties({flex: 1});
for (var row=0; row<6; row++) {
  grid.setRowFlex(row, 1);
}  
for (var column=0; column<4; column++) {
  grid.setColumnFlex(column, 1);
}
for (var name in buttons) {
  buttons[name].setAllowShrinkX(false);
}
win.set({
  showClose : false,
  showMinimize : false,
  showMaximize : false
});

qx.Theme.define("calc.theme.Decoration",
{
  extend : qx.theme.modern.Decoration,

decorations :
  {
    "calc-button" :
    {
      decorator : qx.ui.decoration.Grid,
      
      style :
      {
        baseImage : "calc/theme/button.png",
        insets : [3, 3, 5, 3]        
      }
    },
    
    "calc-button-pressed" :
    {
      decorator : qx.ui.decoration.Grid,
      
      style :
      {
        baseImage : "calc/theme/button-pressed.png",
        insets : [3, 3, 5, 3]        
      }
    },
    
    "calc-display" :
    {
      decorator : qx.ui.decoration.Grid,
      
      style :
      {
        baseImage : "calc/theme/display.png",
        insets : [5, 5, 5, 4]        
      }
    },
    
    "calc-window" :
    {
      decorator : qx.ui.decoration.Grid,
      
      style :
      {
        baseImage : "calc/theme/window.png",
        insets : 2        
      }
    }     
  }
});

qx.theme.manager.Decoration.getInstance().setTheme(calc.theme.Decoration);

// Fenster erstellen
var win = new qx.ui.window.Window("Calculator"); 
win.setLayout(new qx.ui.layout.VBox(3)); 
this.getRoot().add(win); 
win.open();
win.moveTo(60, 40);

// Display erstellen
var display = new 
qx.ui.basic.Label("0").set({ 
  allowGrowX: true, 
  textAlign: "right", 
  font: "bold", 
  decorator: "calc-display" 
}); 
win.add(display);

// Button Container erstellen
var buttonContainer = new 
qx.ui.container.Composite(); 
var grid = new qx.ui.layout.Grid(3, 3);
buttonContainer.setLayout(grid); 
win.add(buttonContainer);

// Tastenbeschriftung
var labels = [ 
  ["MC", "M+", "M-", "MR"], 
  ["C", "±", "÷", "*"], 
  ["7", "8", "9", "-"], 
  ["4", "5", "6", "+"], 
  ["1", "2", "3", "="], 
  ["0", null, ".", null] 
];

// Tasten erstellen und einfügen
var buttons = {}; 
for (var row=0; row<6; row++) { 
  for (var column=0; column<4; column++) {
    var label = labels[row][column]; 
    if (label) { 
      var button = new qx.ui.form.Button(label); 
      button.setRich(true); 
      buttonContainer.add(button, {row: row, column: column}); 
      buttons[label] = button; 
    } 
  } 
}

// "=" und "." Tasten auf zwei Zellen ausdehnen
buttons["="].setLayoutProperties({rowSpan: 2}); 
buttons["0"].setLayoutProperties( {colSpan: 2});

win.addListener("keypress", function(e) { 
  alert("Key: " + e.getKeyIdentifier()); 
}, this);

qx.Theme.define("calc.theme.Appearance",
{
  extend : qx.theme.modern.Appearance,

appearances :
  {    
    "calculator" : 
    {
      style : function(states)
      {
        return {
          backgroundColor : "#969696",
          decorator : "calc-window",
          shadow : "shadow-window",
          contentPadding : [6, 8, 8 ,8]
        }
      }
    },    
    "calculator/pane" : "widget",
    "calculator/captionbar" : "widget",
    "calculator/minimize-button" : "widget",
    "calculator/maximize-button" : "widget",
    "calculator/close-button" : "widget",
    
    "calculator/title" :
    {
      style : function(states)
      {
        return {
          alignY : "middle",
          textAlign : "center",
          font : "bold",
          textColor : "#DDD"
        };
      }
    },     
  
    "calc-display" :
     {
      style : function(states)
      {
        return {
          decorator : "calc-display",
          marginBottom : 8,
          height: 51,
          padding : [0, 20],
          font: "bold"
        }
      }
    },      
    
    "calc-button" :
    {
      alias: "button",
      
      style : function(states)
      {
       return {
         textColor : states.pressed ? "#AAA" : "white",
         decorator : states.pressed ?
           "calc-button-pressed" :
           "calc-button",
         center: true,
         padding : states.pressed ? [1, 8, 3, 8] : [2, 8]
       }
     }
   }
 }
});

qx.Theme.define("calc.theme.Decoration",
{
  extend : qx.theme.modern.Decoration,

qx.theme.manager.Decoration.getInstance().setTheme(calc.theme.Decoration);
qx.theme.manager.Appearance.getInstance().setTheme(calc.theme.Appearance);

// Fenster erstellen
var win = new qx.ui.window.Window("Calculator"); 
win.setAppearance("calculator");
win.setLayout(new qx.ui.layout.VBox(3)); 
this.getRoot().add(win); 
win.open();
win.moveTo(60, 40);

// Display erstellen
var display = new 
qx.ui.basic.Label("0").set({ 
  allowGrowX: true, 
  textAlign: "right", 
  font: "bold", 
  appearance: "calc-display"
}); 
win.add(display);

// Button Container erstellen
var buttonContainer = new 
qx.ui.container.Composite(); 
var grid = new qx.ui.layout.Grid(3, 3);
buttonContainer.setLayout(grid); 
win.add(buttonContainer);

// Tastenbeschriftung
var labels = [ 
  ["MC", "M+", "M-", "MR"], 
  ["C", "±", "÷", "*"], 
  ["7", "8", "9", "-"], 
  ["4", "5", "6", "+"], 
  ["1", "2", "3", "="], 
  ["0", null, ".", null] 
];

// Tasten erstellen und einfügen
var buttons = {}; 
for (var row=0; row<6; row++) { 
  for (var column=0; column<4; column++) {
    var label = labels[row][column]; 
    if (label) { 
      var button = new qx.ui.form.Button(label); 
      button.setAppearance("calc-button");
      button.setRich(true); 
      buttonContainer.add(button, {row: row, column: column}); 
      buttons[label] = button; 
    } 
  } 
}

// "=" und "." Tasten auf zwei Zellen ausdehnen
buttons["="].setLayoutProperties({rowSpan: 2}); 
buttons["0"].setLayoutProperties( {colSpan: 2});

win.addListener("keypress", function(e) { 
  alert("Key: " + e.getKeyIdentifier()); 
}, this);