Rich-UI-Widgetgruppe erweitern

Sie können einen neuen Widgettyp mithilfe von EGL erstellen oder Sie können JavaScript verwenden.

Rich-UI-Widgets

Ein Rich-UI-Widget wird in EGL geschrieben und hat den Typ RUIWidget (d. h. egl.ui.rui.RUIWidget). Häufig brauchen Sie nur wie folgt vorzugehen:
  • Geben Sie einen HTML-Tagnamen in der Eigenschaft tagName an. Alternativ können Sie ein deklariertes Widget in der Eigenschaft targetWidget angeben. In diesem Fall gilt Folgendes:
    • Der HTML-Tag, der die Basis des Typs des referenzierten Widgets ist, bildet die Basis des Widgettyps, den Sie definieren.
    • Über den Namen des referenzierten Widgets können Sie auf die Funktionen und Eigenschaften zugreifen, die für diesen Widgettyp definiert sind.

    Wenn Sie sowohl tagName als auch targetWidget angeben, gilt die letztere Angabe.

  • Geben Sie einige oder alle Eigenschaften an, die in einem späteren Abschnitt aufgeführt werden.
  • Geben Sie eine onConstruction-Funktion an und legen Sie einen CSS-Klassennamen in dieser Funktion fest.
  • Erstellen Sie die Funktionalität aus weiteren Widgets.
Das folgende Beispiel zeigt den Entwurf einer Definition für das Widget H3, der keine Anweisungen import erfordert:
Handler H3 type RUIWidget{tagName = "h3", onConstructionFunction = start,
   @VEWidget{
				category = "New Widgets",
				template = "my.package.H3{ text=\"The Heading Text\" }",
				smallIcon = "icons/h3small.gif",
				largeIcon = "icons/h3large.gif" 	}}

   text String  { @EGLProperty { getMethod=getText, setMethod=setText }, 
                  @VEProperty{}};
   function start()
      class = "EglRuiH3";
   end

   function setText(textIn String in)
      text = textIn;
      this.innerText = textIn;
   end

   function getText() returns (String)
      return (text);
   end
end
Wenn diese Definition gegeben ist, können Sie Widgets erstellen, die auf dem Typ H3 basieren. Die folgende Beispieldeklaration erstellt zum Beispiel ein Feld ('Box') mit einem verschachtelten H3-Widget:
ui Box { children = [ 
            new H3 { text = "Summary" }
       	]};  	

Widgets mit externem Typ

Sie können ein Widget mit einem externen Typ erstellen, indem Sie einen angepassten JavaScript-Code schreiben oder auf spezialisierte JavaScript-Bibliotheken zugreifen.

Gehen Sie wie folgt vor, um ein neues Rich-UI-Widget auf der Basis von JavaScript zu erstellen:
  1. Erstellen Sie eine JavaScript-Datei, die den Code für das Widget enthält. Rufen Sie 'egl.defineWidget' auf und geben Sie die folgenden Argumente an:
    • Der Name des Pakets, in dem sich der angepasste JavaScript-Code befindet. Der Paketname ist erforderlich, ist von der Groß-/Kleinschreibung abhängig und gibt den Unterordner 'WebContent' an, der den JavaScript-Code enthält.

      Fügen Sie Punkte anstelle von Schrägstrichen für jeden Unterordner unter dem ersten ein. Beispiel: Wenn sich Ihr JavaScript-Code im Ordner WebContent/myPkg/test befindet, muss packageName den Wert myPkg.test haben.

    • Der Name der Widgetklasse (z. B. Button). Dieser Klassenname ist der Name des externen Typs, den Sie erstellen wollen.
    • Der Paketname des externen EGL-Typs für das übergeordnete Widget. Sie können einen eigenen externen Typ erweitern. In den meisten Fällen ist der übergeordnete Typ jedoch 'Widget', der für Sie bereitgestellt wird und die Basis für andere EGL-Widgets mit externen Typen darstellt. Wenn der übergeordnete Typ 'Widget' ist, lautet der Paketname egl.ui.rui.
    • Der Name des externen EGL-Typs (z. B. Widget) für das übergeordnete Widget.
    • Der Tagname (z. B. button) des DOM-Elements für das neue Widget.
    Ein Beispiel:
    egl.defineWidget( 'egl.rui.widgets', 'Button',
                      'egl.rui.widgets', 'Widget',
                      'button', { } );
  2. Definieren Sie in den geschweiften Klammern ( { } ) die JavaScript-Funktionen nach dem folgenden Beispiel, indem Sie eine Funktion durch ein Komma von der nächsten trennen:
    "functionName" : function(/*Parameter*/)
    { //JavaScript-Quelle }
    Beispiel:
    "getSelected" : function() {
       return this.check.checked;
    },
    "setSelected" : function(value) {
       this.check.checked = value;
    },
    "toString" : function() {
       return "[CheckBox, text=\""+this.egl$$DOMElement.innerHTML+"\"]";
    }
  3. Jedes Widget kann die folgenden Funktionen angeben, die von der JavaScript-Laufzeit aufgerufen werden:
    • Die Funktion constructor wird immer aufgerufen, wenn eine neue Widgetinstanz erstellt wird. Diese Funktion kann zum Beispiel zur Initialisierung von Daten verwendet werden.
    • Die Funktion egl$$initializeDOMElement wird immer aufgerufen, wenn das HTML-Element für das Widget erstellt wird. Diese Funktion kann zum Beispiel zum Festlegen von Anfangseigenschaften für das Element verwendet werden.
    • Die Funktion childrenChanged wird immer aufgerufen, wenn der Anwendungsentwickler die Eigenschaft children (sofern vorhanden) des neuen Widgets aufruft.

    Jedes Widget besitzt außerdem ein Feld mit dem Namen this.egl$$DOMElement, das das HTML-Element (bzw. das HTML-Element der höchsten Ebene) darstellt, das für das Widget erstellt wird.

  4. Erstellen Sie in einer EGL-Quellendatei einen externen EGL-Typ, der 'egl.ui.rui.Widget' oder ein vorhandenes Widget erweitert. Der externe Typ benötigt den Stereotyp JavaScriptObject, wie im Abschnitt “Externer Typ für JavaScript-Code” beschrieben.

    Geben Sie beim Erstellen des externen Typs einige oder alle der Eigenschaften an, die im nächsten Abschnitt aufgeführt werden.

EGL-Eigenschaften zum Erweitern der Widgetgruppe


Feedback