Posts Tagged: ‘HTML’

Quick-n-Dirty: Text ohne -Tags

2. November 2011 Posted by Sven Hasselbach

Verwendet man ein <xp:text>-Element, wird dieser von der XPages-Engine immer mit einem <span>-Tag gerendert:

So wird aus folgendem Beispiel

<xp:text value="Hello world!" id="computedField1" ></xp:text>

der folgende HTML-Code generiert:

<span id="view:_id1:computedField1">Hello world!</span>

Um den überflüssigen <span>-Tag loszuwerden, muß nur die Id des Elements weggelassen werden; ein disableTheme muß bei der Verwendung von Themes hinzugefügt werden:

<xp:text disableTheme="true" value="Hello world!" />

Und schon generiert die XPage-Engine nur den Text “Hello world!”.

P.S.: Die neue Option disableOutputTag (8.5.3) ist dafür nicht geeignet; damit soll der Output komplett unterbunden werden und ist z.B. für RepeatControls sinnvoll. Die Ausgabe wird dann komplett unterdrückt (also auch kein “Hello world!”).

Read full article |Kommentare deaktiviert für Quick-n-Dirty: Text ohne -Tags
Tags: , , , , ,
Categories: Allgemein

Der Fluch des Partial Refreshs

30. Oktober 2011 Posted by Sven Hasselbach

Bei der Architektur von Web 2.0-Applikationen gibt es ein paar Besonderheiten zu beachten, die es im “alten” Web nicht gegeben hat, denn der konzeptionelle Ansatz, durch die AJAX-gestützten Abfragen nur einzelne Segmente einer Webseite zu laden (und diese Abfragen im Hintergrund durchzuführen), kann sich zu einem grundlegenden Problem entwickeln: Zum Einen leidet die Benutzbarkeit einer Applikation, denn das Verlinken der Inhalte ist nicht möglich, zum Anderen können Suchmaschinen die Seiten nicht oder nur noch teilweise indizieren.

Zum Erläuterung des Problems hier eine kleine Denksportaufgabe: Wie verlinke ich eine bestimmte Seite, z.B. die zweite Seite des XPages-Developer-Forums? Das Verlinken eines Beitrages stellt kein Problem dar, aber die zweite Seite zu verlinken ist nicht möglich.

Im “guten alten Web”, bei dem die Webseiten immer komplett geladen und die Optionen zum Großteil über URL-Parameter gesteuert werden, existiert als Nebeneffekt automatisch eine Möglichkeit, ein Bookmark zu setzen, wie z.B. hier: Domino 8.5 Forum, Seite 2, Kategorisierung eingeklappt.

Auch ist es für die Bots der Suchmaschinen viel einfacher, allen Verlinkungen innerhalb einer Webseite zu folgen, denn hinter dem Link verbirgt sich eine (neue) Seite, die es ebenfalls zu indizieren gilt.

Im Falle von XPages-Applikationen gibt es diese Möglichkeiten nicht Out-Of-The-Box. Man kann hier getrost vom “Fluch des Partial Refreshes” sprechen kann, denn so muß die Google-Spezifikation für durchsuchbare AJAX-Applikationen in die XPages händisch eingebaut werden. Und das für jeden Pager, jede Aktion, jeden Serverseitigen Link…

Um die Funktionalität der Bookmarks wieder herzustellen, kann der URL Hash “angezapft” werden; dieser muß jedoch via Javascript gesetzt bzw. ausgewertet werden. Eine Hilfe hierfür bietet der Dojo Toolkit mittels dojo.hash. Die Variante der URL Manipulation OHNE ein Neuladen der Webseite ist auch mit älteren Browsern möglich; mit HTML 5 ist die Möglichkeit geschaffen worden, die URL wirklich manipulieren zu können. Eine nette Implementierung findet sich auch unter https://github.com/balupton/history.js. Die HTML 5 – Variant e ist Serverseitig auswertbar, da sich die URL-Parameter ohne Reload der Seite setzen lassen (und im HTTP Request übertragen werden). Aber leider ist diese Funktionalität nicht in älteren Browser verfügbar.

Will man kompatibel bleiben, bleibt also nur der Weg über den URL-Hash. Im Falle eines Seitenaufrufs über ein Bookmark muß der Hash-Part der URL im Client ausgewertet werden, denn der Hash wird NICHT via HTTP Request übertragen (und damit auch nicht Serverseitig auswertbar). Erst nach dieser Auswertung können diese Informationen z.B. mit einen Partial Refresh übertragen werden.

Eine Beispiel-Implementation ist in Arbeit und wird bei Gelegenheit veröffentlicht.

Read full article |Kommentare deaktiviert für Der Fluch des Partial Refreshs
Tags: , , , , , , , , ,
Categories: Allgemein

Zeta-Dialog: Erweiterung um “Closable”-Parameter

7. September 2011 Posted by Sven Hasselbach

Jeremy Hodge hat den dijit.Dialog erweitert und die wunderbare Komponente ZetaDialog für die Domino-Welt bereitgestellt, einen XPages-Kompatiblen Dojo Dialog. Doch leider fehlt dem Dialog eine Kleinigkeit, nämlich die Möglichkeit, zu Verhindern, das der User das Dialogfenster per <ESC> oder Close-Icon einfach schließt.

Daher habe ich den Code ergänzt, so dass dies programmatisch unterbunden werden kann:

<xp:scriptBlock id="scriptBlockZetaDialog">
    <xp:this.value><![CDATA[dojo.addOnLoad( function(){
            dijit.byId('#{id:zeta}').setCloseButtonDisabled( true );
            dijit.byId('#{id:zeta}').show(); } )]]>
    </xp:this.value>
</xp:scriptBlock>

[In Fett: die Funktion setCloseButtonDisabled verhindert das Schließen durch den User]

Hier der vollständige ergänzte Sourcecode:

//Licensed under http://creativecommons.org/licenses/by/3.0/
//
//Modified by Sven Hasselbach: Now dialog no longer closable if required!
//http://blog.hasselba.ch
//
//Oringinal Code from Jeremy Hodge on the XPages Blog
//http://xpagesblog.com/xpages-blog/2010/4/10/xpages-compatible-dojo-dialog-reusable-component.html

// com.ZetaOne.Widget.Dialog
dojo.provide('com.ZetaOne.widget.Dialog');
dojo.require('dijit.Dialog');
(function(){
    dojo.declare("com.ZetaOne.widget.Dialog", dijit.Dialog, {
            disableCloseButton: false,
             _onKey: function(evt)
            {
                if(this.disableCloseButton &&
                   evt.charOrCode == dojo.keys.ESCAPE) return;
                this.inherited(arguments);
            },
            setCloseButtonDisabled: function(flag)
            {
                this.disableCloseButton = flag;
                this._updateCloseButtonState();
            },
            _updateCloseButtonState: function()
            {
                dojo.style(this.closeButtonNode,
                "display",this.disableCloseButton ? "none" : "block");
            },
            postCreate: function(){
                this.inherited(arguments);
                this._updateCloseButtonState();
                dojo.query('form', dojo.body())[0].appendChild(this.domNode);
            },
            _setup: function() {
                this.inherited(arguments);
                if (this.domNode.parentNode.nodeName.toLowerCase() == 'body')
                    dojo.query('form', dojo.body())[0].appendChild(this.domNode);                
            }                
        })
}());
Read full article |Kommentare deaktiviert für Zeta-Dialog: Erweiterung um “Closable”-Parameter
Tags: , , , , , ,
Categories: Allgemein
Newer Entries »