WebTML-Formulare mit "Enter-Submit"
Auf vielen Webseiten gibt es diese "Ein-Feld-Suchfunktionen": Ein einzelnes Eingabefeld links/rechts/über der Seite in welches ein Suchbegriff eingegeben werden kann. Eine Schaltfläche "Suchen" o.ä. gibt es auch daneben, aber meistens kann man im Suchfeld einfach "Enter" drücken und die Suche ist unterwegs. Warum eigentlich?
Weil dies eine Spezialfunktion vieler Browser ist. Erfüllt ein HTML-Formular folgende Voraussetzungen:
Dieser Artikel beschäftigt sich mit einer neuen Möglichkeit, dies in WGA für WebTML-Formulare zu erzielen.
Weil dies eine Spezialfunktion vieler Browser ist. Erfüllt ein HTML-Formular folgende Voraussetzungen:
- Es besitzt nur ein Eingabefeld
- Es besitzt eine "Submit"-Schaltfläche für das Abschicken des Formularinhaltes
Dieser Artikel beschäftigt sich mit einer neuen Möglichkeit, dies in WGA für WebTML-Formulare zu erzielen.
In WGA war diese Funktion für normale WebTML-Formulare lange Zeit nicht
vernünftig realisierbar. Um auf das Abschicken der Suche reagieren zu
können bräuchte man eine WebTML-Aktion die anschliessend läuft. Diese
wird durch einen einfachen HTML-Submit jedoch nicht ausgelöst, so wie ihn die
Entertaste verursacht.
Seit WGA 4.1.3 gibt es jedoch ein neues Attribut für den <tml:form>-Tag welches hier eingesetzt werden kann: Das defaultaction-Attribut.
Dieses Attribut erhält als Wert die ID einer WebTML-Aktion welche ausgelöst werden soll wenn das Formular per normalem HTML-Submit übertragen wird. Dies kann dann vorkommen, wenn eine normale HTML-Submit-Schaltfläche betätigt wird - so wie sie in obrigen Beispiel der <button>-Tag generiert, oder wenn das Formular per Enter-Taste abgeschickt wird.
In der Aktion ist das Formular wie üblich als "tmlform"-Objekt verfügbar und kann benutzt werden um die Suche über beliebige Funktionalitäten einzuleiten.
Oft reicht es dafür jedoch lediglich die Default-Aktion "$refresh" aufzurufen - die keine Operationen ausführt ausser die aktuelle Seite neu zu laden - und dann in der neu geladenen Seite auf die Existenz des Such-Formulars zu reagieren, wie etwa hier in einem hypothetischen äusseren Layout:
Die Kondititon des If-Tags prüft auf Vorhandensein eines WebTML-Formulars und auf dessen ID. Entspricht diese dem Suchformular so wird die Suche ausgeführt und ihre Ergebnisse angezeigt. Ansonsten wird wie üblich das innere Layout des aktuellen Dokumentes angezeigt.
Diese Vorgehensweise ist gut, wenn die Suchergebnisse auf lediglich einer Seite angezeigt werden sollen, verursacht jedoch Probleme wenn sie durch die Suchergebnisse blättern wollen, da das Formular welches den Suchbegriff erhält beim nächsten Request nicht mehr verfügbar ist. In diesem Fall ist es besser in der Suchaktion auf eine dedizierte Suchseite umzuleiten und den Suchbegriff als URL-Parameter zu übergeben:
Der URL-Parameter wird von den Links zum Blättern in Kollektionen - so wie sie <tml:url type="nextpage|previouspage"/> generiert - weitergetragen und ist so auf jeder Einzelseite weiter verfügbar.
Seit WGA 4.1.3 gibt es jedoch ein neues Attribut für den <tml:form>-Tag welches hier eingesetzt werden kann: Das defaultaction-Attribut.
<tml:form id="search" defaultaction="doSearch">
<tml:input name="query"/>
<button type="submit">Suchen</button></td>
</tml:form>
<tml:input name="query"/>
<button type="submit">Suchen</button></td>
</tml:form>
Dieses Attribut erhält als Wert die ID einer WebTML-Aktion welche ausgelöst werden soll wenn das Formular per normalem HTML-Submit übertragen wird. Dies kann dann vorkommen, wenn eine normale HTML-Submit-Schaltfläche betätigt wird - so wie sie in obrigen Beispiel der <button>-Tag generiert, oder wenn das Formular per Enter-Taste abgeschickt wird.
In der Aktion ist das Formular wie üblich als "tmlform"-Objekt verfügbar und kann benutzt werden um die Suche über beliebige Funktionalitäten einzuleiten.
Oft reicht es dafür jedoch lediglich die Default-Aktion "$refresh" aufzurufen - die keine Operationen ausführt ausser die aktuelle Seite neu zu laden - und dann in der neu geladenen Seite auf die Existenz des Such-Formulars zu reagieren, wie etwa hier in einem hypothetischen äusseren Layout:
<tml:if condition="tmlform != null && tmlform.formid == 'search'">
<tml:then>
.... Ausführen der Suche und Ausgabe der Ergebnisse...
<tml:then>
<tml:else>
<tml:innerlayout/>
<tml:else>
</tml:if>
<tml:then>
.... Ausführen der Suche und Ausgabe der Ergebnisse...
<tml:then>
<tml:else>
<tml:innerlayout/>
<tml:else>
</tml:if>
Die Kondititon des If-Tags prüft auf Vorhandensein eines WebTML-Formulars und auf dessen ID. Entspricht diese dem Suchformular so wird die Suche ausgeführt und ihre Ergebnisse angezeigt. Ansonsten wird wie üblich das innere Layout des aktuellen Dokumentes angezeigt.
Diese Vorgehensweise ist gut, wenn die Suchergebnisse auf lediglich einer Seite angezeigt werden sollen, verursacht jedoch Probleme wenn sie durch die Suchergebnisse blättern wollen, da das Formular welches den Suchbegriff erhält beim nächsten Request nicht mehr verfügbar ist. In diesem Fall ist es besser in der Suchaktion auf eine dedizierte Suchseite umzuleiten und den Suchbegriff als URL-Parameter zu übergeben:
redirectTo(layouturl(null, "mysearchtml") + "?query=" + tmlform.query);
Der URL-Parameter wird von den Links zum Blättern in Kollektionen - so wie sie <tml:url type="nextpage|previouspage"/> generiert - weitergetragen und ist so auf jeder Einzelseite weiter verfügbar.