Beispielskript zur Widget-Methode popup.form

Das in dieser Dokumentation beschriebene Skript erzeugt ein neues form-Widget anhand der übergebenen Konfiguration und bettet das Widget darin ein, auf dem das System die Funktion popup() aufgerufen hat. Danach zeigt das System das form-Widget clientseitig als ein neues Fenster an, auf das Sie zugreifen können.

Hinweis: Für Widgets vom Typ agorum.menu erzeugt das System kein umgebendes form-Widget. Stattdessen zeigt es das Menü direkt an, etwa für die Verwendung als Kontextmenü. Da das System in diesem Fall kein form-Widget erzeugt, sind auch die in dieser Dokumentation beschriebenen Parameter ohne Funktion.

Beispiel einer grafischen Oberfläche

Beispiel zur Widget-Methode popup.form

Skript zur grafischen Oberfläche

let aguila = require('common/aguila');


let widget = aguila.create(
  {
    type: 'agorum.vbox',
    items: [
      {
        type: 'agorum.hbox',
        width: 500,
        items: [
          {
            type: 'agorum.textInput',
            name: 'input',
            flexible: true
          },
          {
            type: 'agorum.button',
            name: 'button',
            text: 'Öffne Pop-up.'
          }
        ]
      }
    ]
  });

let input = widget.down('input');
let inputText = widget.down('inputText');

widget.down('button').on('clicked', () => {
  
  let popup = aguila.create({
    type: 'agorum.vbox',
    width: 600,
    height: 300,
    items: [
      {
        type: 'agorum.single',
        width: 800,
        items: [
          {
            type: 'agorum.vbox',
            flexible: true,
            items: [
              {
                type: 'agorum.htmlDisplay',
                name: 'replacetext',
                value:''
              },
              {
                type: 'agorum.hbox',
                flexible: true,
                items: [          
                  {
                    type: 'agorum.textInput',
                    name: 'textinput',
                    value: 'Du bist im Pop-up-Fenster.',
                    flexible: true
                  },
                ]
              },
              {
                type: 'agorum.vbox',
                flexible: true,
                items: [
                  {
                    type: 'agorum.basicGrid',
                    name: 'keywords',
                    border: false,
                    //flexible: true,
                    //columns: cpf.getColumns(),  
                    //rows: data,
                  }
                ]
              }
            ]        
          }
        ]
      }    
    ]
  });

  let keywords = popup.down('keywords');
  let textinput = popup.down('textinput');
  let replacetext = popup.down('replacetext');
  
  setImmediate(() => {
    textinput.focus();
  });

  popup.popup({
    title: 'Popup-Fenster',
    modal: true,
    /**
    // Kurzschreibweise
    align: {      
      // Ausrichtung: bezieht sich auf die Ecke oben links (0/0)
      // left und top immer positiv für den Abstand
      left: 5,  
      top: 50,
      // right und bottom immer negativ für den Abstand
      right: -5,
      bottom: -5
    },
    /**/
    
    /**
    // Am gesamten Fenster ausrichten, wieder mit offset 5 Pixel nach innen
    align: {      
      top: {
        edge: 'bottom',
        offset: 5
      },
      left: {
        edge: 'left',
        offset: 5
      },
      bottom: {
        edge: 'top',
        offset: -5
      },
      right: {
        //offset: 1, // 0,0 ist oben links
                   // positiv nach rechts oder nach unten
                   // negativ nach Links oder nach oben
        edge: 'right',
        offset: -5
      }
    }
    /**/
    
    /**
    // Zwischen die Boxen input und textinput legen auch mit 5 Pixel offset nach innen
    align: {      
      top: {
        to: input,
        edge: 'bottom',
        offset: 5
      },
      left: {
        to: input,
        edge: 'left',
        offset: 5
      },
      bottom: {
        to: inputText,
        edge: 'top',
        offset: -5
      },
      right: {
        //offset: 1, // 0,0 ist oben links
                   // positiv nach rechts oder nach unten
                   // negativ nach Links oder nach oben
        to: inputText,
        edge: 'right',
        offset: -5
      }
    }
    /**/    
    
    /**
    // Einfach in die Mitte des Fensters
    // align kann in diesem Falle auch komplett weggelassen werden
    align: {      
    }
    /**/    
    
    /**
    // Exakt über die inputText-Box legen, mit 5 Pixeln nach innen
    align: {
      top: {
        to: inputText,
        edge: 'top',
        offset: 5
      },
      left: {
        to: inputText,
        edge: 'left',
        offset: 5
      },
      bottom: {
        to: inputText,
        edge: 'bottom',
        offset: -5
      },
      right: {
        //offset: 1, // 0,0 ist oben links
                   // positiv nach rechts oder nach unten
                   // negativ nach Links oder nach oben
        to: inputText,
        edge: 'right',
        offset: -5
      }
    }
    /**/
  });
});

widget;

Parameter

title

Definiert einen Fenster-Titel.

Beispiel

// Erzeugtes Widget in einem neuen Fenster öffnen
widget.popup({
  title: 'popup-Beispiel'
});

modal

Wert	Beschreibung
true	Das Fenster öffnet sich so, dass der Rest der Anwendung gesperrt wird, solange dieser Dialog erscheint.
false (Standard)	Das Fenster öffnet sich so, dass der Rest der Anwendung bearbeitet werden kann.

Beispiel

// Erzeugtes Widget in einem neuen Fenster öffnen
widget.popup({
  title: 'popup-Beispiel',
  modal: true  // Fenster wird modal geöffnet
});

width, height

Definiert eine Breite und Höhe.

Das Fenster öffnet sich in der Größe der getätigten Angaben.
Die Angabe von width und height ist optional, wenn das Widget selbst eine definierte Größe hat.

Beispiel

// Erzeugtes Widget in einem neuen Fenster öffnen
widget.popup({
  title: 'popup-Beispiel',
  modal: false,  // true = Fenster wird modal geöffnet
  width: 600,
  height: 400
});

align

Steuert, wie und wo sich das Fenster öffnet.

Durch align-Parameter definierten Sie die Position.
Die align-Parameter existieren in Kurzschreibweise und in ausführlicher Schreibweise.
Wenn Sie den Parameter nicht angeben, positioniert das System das geöffnete Fenster immer in der Mitte des Anwendungsfensters.

Kurzschreibweise der align-Parameter

In der Kurzschreibweise geben die align-Parameter den Offset in Pixeln an, bezogen auf das Anwendungsfenster. Das Koordinatensystem des Bildschirms ist immer oben links (0/0).

left und right

Ein positiver Wert verschiebt den Rand des Fensters nach rechts.
Ein negativer Wert verschiebt den Rand des Fensters nach links.

top und bottom

Ein positiver Wert verschiebt den Rand des Fensters nach unten.
Ein negativer Wert verschiebt den Rand des Fensters nach oben.

Parameter	Beschreibung
left: 5	Positioniert den oberen Rand des geöffneten Fensters um 5 Pixel vom linken Rand des Anwendungsfensters nach rechts.
top: 50	Positioniert den oberen Rand des geöffneten Fensters um 50 Pixel vom oberen Rand des Anwendungsfensters nach unten.
right: -5	Positioniert den rechten Rand des geöffneten Fensters um 5 Pixel vom rechten Rand des Anwendungsfensters nach links.
bottom: -5	Positioniert den unteren Rand des geöffneten Fensters um 5 Pixel vom unteren Rand des Anwendungsfensters nach oben.

Beispiel mit der Kurzschreibweise

widget.popup({
    title: 'Ad-hoc-Definition bearbeiten',
    align: {      
      // Ausrichtung: bezieht sich auf die Ecke oben links (0/0)
      // left und top immer positiv für den Abstand
      left: 5,  
      top: 50,
      // right und bottom immer negativ für den Abstand
      right: -5,
      bottom: -5
    }
});

Ausführliche Schreibweise der align-Parameter

In der ausführlichen Schreibweise können Sie auf vorhandene Elemente Bezug nehmen.

Paremeter	Beschreibung
top	{ top-Parameter}
left	{ left-Parameter}
bottom	{ bottom-Parameter }
right	{ right-Parameter }

Für alle { <top | left | bottom | right>-Parameter } gelten dieselben Parameter mit diesen Bedeutungen:

Parameter	Beschreibung
to: <Widget-Element>	Beschreibt das Element, auf das sich die Positionierung beziehen soll. Wenn Sie diesen Parameter nicht setzen, beziehen sich die weiteren Parameter auf das Anwendungsfenster. Wenn Sie pointer angeben, verwendet das System die aktuelle Position des Mauszeigers.
edge: <top \| left \| bottom \| right>	Beschreibt den Rand des Elementes, das unter to angegeben wurde, als Bezugskante. Wenn Sie für to ein Widget angegeben, müssen Sie edge zwingend definieren. Das System zeigt das Fenster ansonsten nicht an.
offset: 10	Verschiebt optional das Fenster um die Anzahl an Pixeln, bezogen auf den Rand, der Sie unter edge definiert haben. Wenn Sie to nicht angeben, bezieht sich offset auf das Anwendungsfenster.

Beispiel mit der ausführlichen Schreibweise

  widget.popup({
    title: 'Popup-Beispiel',
    // Zwischen die Boxen input und textinput legen, jeweils mit 5 Pixel offset nach innen
    align: {      
      top: {
        to: input,
        edge: 'bottom',
        offset: 5
      },
      left: {
        to: input,
        edge: 'left',
        offset: 5
      },
      bottom: {
        to: inputText,
        edge: 'top',
        offset: -5
      },
      right: {
        //offset: 1, // 0,0 ist oben links
                   // positiv nach rechts oder nach unten
                   // negativ nach Links oder nach oben
        to: inputText,
        edge: 'right',
        offset: -5
      }
    }
 });