Qooxdoo : Graficzny interfejs użytkownika, Programowanie zorientowane obiektowo, Zobacz też, Linki zewnętrzne Wikipedia, wolna encyklopedia

Qooxdoo

qooxdoo

Autor	1&1 Internet AG
Aktualna wersja stabilna	5.0.1 / 15 września 2015; ponad 8 lat temu
Aktualna wersja testowa	7.0.0-beta.10 (15 lutego 2022) [±]
System operacyjny	wieloplatformowy
Rodzaj	Biblioteka programistyczna
Licencja	GNU Lesser General Public License i Eclipse Public License
Strona internetowa

qooxdoo (IPA: ˈk uːk s d uː) – opensource'owa biblioteka programistyczna w języku JavaScript wydana na licencji GNU Lesser General Public License i Eclipse Public License. Wspiera tworzenie GUI i wysokopoziomową komunikację klient-serwer. Biblioteka ta jest zorientowana obiektowo. Nie modyfikuje lub rozszerza natywnych typów JavaScript.

Wspieranych jest większość współczesnych przeglądarek internetowych (Mozilla Firefox, Internet Explorer, Opera, Safari, Google Chrome).

Graficzny interfejs użytkownika

qooxdoo wspiera widżety w tym nawigację klawiaturą, zakładki i metodę przeciągnij i upuść. Do stworzenia interfejsu nie użyto HTML ani CSS do jego stylizacji. Do zmiany elementów wizualnych używa się prostych skórek.

Programowanie zorientowane obiektowo

qooxdoo używa zamkniętej formy definiowania klas. Globalny konstruktor klasy przyjmuje dwa parametry, nazwę klasy i mapę takich elementów, jak konstruktor, statyczne właściwości i metody oraz destruktor.

Poniższy kod utworzy z przyciskiem oraz tooltipem i oknem dialogowym, kiedy zostanie naciśnięty:

qx.Class.define("custom.Application",
{
  extend : qx.application.Standalone,

  members :
  {
    main : function()
    {
      this.base(arguments);

      // Stwórz przycisk
      var button1 = new qx.ui.form.Button("Pierwszy przycisk", "image/test.png");

      // Dokument jest korzeniem aplikacji
      var doc = this.getRoot();

      // Dodaje przycisk do dokumentu na ustalonej pozycji
      doc.add(button1, {left: 100, top: 50});

      // Dołącz tooltip
      button1.setToolTip(new qx.ui.popup.ToolTip("Ładny tooltip",
                                                 "icon/32/status/dialog-information.png"));

      // Dodaj zdarzenie
      button1.addEventListener("execute", function(e) {
        alert("Hello World!");
      });
    }
  }
});