[web] ajax in notes

[flaite]

ich hab mir überlegt, ein bischen mit Ajax rumzuspielen.
Dafür gibt es in der Notes-Blogosphere eine Menge Beispiele.
Ich hab (noch) ziemlich ungefähre Vorstellungen von Ajax.
Ajax ist eine Möglichkeit moderner Browser Daten in xml Form zwischen Webseiten und Server auszutauschen. So erhält man alle möglichen dynamischen Features, die das strarre Request-Response Schema von Webentwicklung durchbrechen. Mehr will ich dazu nicht sagen.

Ich check erst einmal die vorhandenen Beispiele.

Julian Robinchaux hat hier ein Type Ahead für das NAB. D.h.: ich gebe ein A ein und der Browser zeigt mir direkt eine Liste von Personen im NAB die mit A starten. In meinem NAB gibts nur 1 (Axel). Trotzdem sollte vom Screenshot klar ersichtlich sein, worum es geht.
http://www.nsftools.com/tips/NotesTips.htm#notessuggest

Ich hab einfach das zip von Julians blog runtergeladen, in mein notes-Data getan und mit dem Administrator unterzeichnet. Die Startseite der Anwendung führt einem zur Beispielseite.

Ich schau mir jetzt noch ein bischen den Source Code ein. Es gibt jetzt schon allemöglichen Frameworks für Ajax, die absolut empfohlen werden. Dies ist aber scheinbar noch einfach raw. Wenn ich ein bischen mehr Durchblick habe, werde ich auch ein paar Frameworks ausprobieren.

Gruß Axel

[flaite]

Hmm. Der Java Script code ist wirklich nicht unbedingt einfach. Mit dem JavaScript-Debugger Venkman (bei Mozilla dabei). (http://www.svendtofte.com/code/learning_venkman/) --> sehr praktisch, kann aber mit ein bischen Geschick an den richtigen Stellen Breakpoints setzen und den code ein wenig verstehen. Der JavaScript code ist in den Scriptlibraries.

Codestore hat auch ein paar Artikel und eine geheimnisvolle Beispiel-Datenbank, die DBLookups als AJAX verarbeitet. Als Einführung sind die Artikel sicher ganz ok.:
Ab hier einfach auf den Folgelink klicken.
(Was ist Ajax, warum, wie benutzen, etc.)
http://www.codestore.net/store.nsf/unid/BLOG-20050426/

Falls jemand etwas interessantes zu ajax weiss, einfach reinposten...

[flaite]

Hier noch 2 interessante Einträge, Ajax in einem Domino View Navigator zu nutzen.
http://bob-obringer.com/A557B7/blog.nsf/dx/04272005071321PMBOBV8U.htm?opendocument&comments
sowie diese Ergänzung:
http://www.workflowstudios.com/lance/blog.nsf/plinks/LSPN-6GGHVM
Bei der Ergänzung von workflowstudios gibts noch ein kleines Flash-Filmchen.

[flaite]

codestore hat in seinen ajax-Artikeln noch eine Datenbank, die optimistic Locking für das editieren von NotesDokumenten realisiert.
optimistic Locking:
User A öffnet ein Dokument zum Editieren
User B öffnet das gleiche Dokument zum Editieren
User B macht eine Änderung an dem Dokument und speichert es.
User A macht eine Änderung an dem Dokument.
Wenn User A versucht das Dokument zu speichern, bekommt er eine Meldung, dass User A es verändert hat.

Der Einfachheit halber kann man das auch mit einem User und 2 Browserinstanzen mit jeweils 1 geöffneten Dokument ausprobieren.
http://www.codestore.net/store.nsf/unid/BLOG-20050429/
Vorsicht: Vor dem Unterzeichnen sollte man die Datenbank 1x lokal öffnen und default auf manager setzen.

Das kann eine sinnvoll einsetzbare Funktionalität sein. Ajax ist also keine reine visuelle Spielerei.

[flaite]

Codestore empfiehlt diesen Artikel zum Einstieg:
http://www.adaptivepath.com/publications/essays/archives/000385.php
Absolut zu empfehlen.

Das wichtigste:
Ajax ist eine Abkürzung für Asynchronous JavaScript + XML
Gefährlich für den Entwickler ist imho hier das Asynchronous. Aus meiner Erfahrung ist Asynchronous ein anderes Wort für "schwer zu kontrollieren".


Ajax besteht technologisch aus:

• standards-based presentation using XHTML and CSS;
• dynamic display and interaction using the Document Object Model;
• data interchange and manipulation using XML and XSLT;
• asynchronous data retrieval using XMLHttpRequest;
• and JavaScript binding everything together.

Das ist natürlich auch deshalb interessant, weil diese Technologien für die verschiedensten Dinge genutzt werden können. Ergibt z.B. gewisse Synergie-Effekte mit z.B. Learning SOA. 

Ajax ausserhalb von Domino:

Es erscheinen jetzt massig Bücher zu Ajax (circa 10). Ich werd mir erst mal von Manning das PDF von u.a. dem Javaranch Javascript Forum Moderator Eric Pascarello ziehen.
Ausserdem wird bald eins in der Pragmatic Programmer Serie erscheinen (von Ben Galbraith und Dion Almaer).
Hier ist eine Sammlung interessanter Artikel:
http://www.ajaxmatters.com/r/resources;jsessionid=6BE07F42C0BA14CB07A0DD41AFFBEFB1?id=3

Diese Seite von Almaer/Galbraith ist auch sehr interessant (u.a. mit podcast für uns iTunes User  ).
http://www.ajaxian.com
Aus Podcast #2 hab ich dann schliesslich gelernt wie der Name Ajax zustandekam. Ein Typ namens Jesse James Garret (aus San Francisco) wusste nicht wie er die ganzen Abkürzungen in einem Management-Meeting verkaufen sollte. Um das ganze goutierbarer zu machen, erfand er als Sammelbegriff für diese neue Form von Webanwendungen den Begriff "Ajax".

Für Java gibts eine Art Framework, dass angeblich eine Menge Arbeit abnimmt. Namens DWR. Gibts auch schon Spring-Integrations-Zeug für.
Ich such aber noch nach vernünftigen javaScript Frameworks, die es - auf diesem niedrigeren Abstraktionsniveau - zu geben scheint und mehr Nähe zu Domino haben.

Gruß Axel

[flaite]

Hier ist noch ein interessanter technischer Einstiegsartikel auf xml.com von OReilley. Auch die Diskussion nach dem Artikel ist sehr interessant.
Ich versuch das mal selbst aus.
Schau mir erstmal ein paar Frameworks wie Dojo und Prototype an.
Im letzten Jahr sind tolle Sachen auf JavaScript Basis entstanden, die auch unter Domino nutzbar sind.
z.B. das hier: http://mochikit.com/index.html

Und: Irgendwie hab ich das Gefühl, dass sich die Domino Beispiele ein bischen vor xml drücken. Ich halte das nicht für "pragmatisch". 

Und diese Dojo-Leute machen definitiv keine Gefangenen. In der Doku sprechen die über Aspektorientierung und funktionale Programmierung. http://dojotoolkit.org/

[flaite]

So sieht modernes Ajax aus. Hab ich dem Movie, der einem mit dem ajax in action Buch für 22 $ mitgeliefert wird.
Das Beispiel benutzt die Prototype ajax library. Die Libraries machen echt Sinn, weil man sich da um cross Browser Zeugs und einige andere Sachen weniger Gedanken machen muß.
Für mich sieht das übrigens funktionale Programmierung. Closures?
Interessiert sich irgend jemand für sowas?

In Notes kann man diese vorhandenen, openSource Libraries natürlich auch einbinden. Als Server-Komponente nimmt man dann eben nicht ein CGI-Script sondern einen Notes Agenten.

Gruß Axel

[flaite]

Hier ist noch ein Präsentation eines kommerziellen Ajax Frameworks.
http://www.javalobby.org/eps/icefaces/
Wird daraus deutlich, dass Ajax mehr ist als ein paar Type-Aheads.
Eigentlich geht es darum, die richtig interaktiven Webfeatures wie z.B. in Gmail, Google-Maps oder auch Inotes Web-Mail (z.B. das drag-and-drop der Kalenderansicht) den ungewaschenen Massen (wie mir) zur Verfügung zu stellen.
Dafür gibt es mittlerweile ein paar Konzepte, Frameworks und eine Menge Ideen.
Die Apis und Tools, die mittlerweile für JavaScript zur Verfügung gestellt werden, sind wirklich überraschend.
Frameworks wie Dojo oder Prototype sollen die Entwickler vor komplexen low level Details schützen. Dabei erwarten die APIs dieser Frameworks eine Menge an Hintergrundwissen, das aber auch aus serverseitiger Programmierung benutzt wird. Locking bei gleichzeitig zugreifenden Prozessen, Asynchronität, xml-processing sowie modernen Programmierstilen wie (oft) Ideen aus der funktionalen Programmierung und sogar Aspekt-orientierung. 
Zumindest auf Java/J2EE und wohl auch ASP.NET Seite wird versucht, den Entwicklern Web-Komponenten-Frameworks zur Verfügung zu stellen, bei denen das Framework den Java-Script Code erzeugt (DWR, JSF-Komponenten, Tapestry). Auf Notes kann man diese serverseitigen Frameworks mit 99% Sicherheit nicht nutzen. Was man nutzen kann sind die reinen JavaScript-Frameworks wie Dojo und Prototype.

Auf Freenode gibts 2 irc channels: #ajax und #dojo. Da ist aber nicht viel los. 

Gruß Axel

[animate]

Wir setzen zur Zeit Ajaxtags ein (http://ajaxtags.sourceforge.net/).
Das ist so einfach - du musst im Prinzip nur ein Servlet schreiben, das eine Anfrage beantwortet und selbst dafür gibts noch eine Helperklasse.
Tieferes Wissen brauchst du dann, wenn die zur Verfügung stehenden Tags nicht mehr ausreichen (was sehr schnell der Fall sein kann). Die verwenden übrigens auch prototype.

[flaite]

 
nette Beispiele

[machineslave]

Hallo Notes Gemeinde,

ich habe mich in den letzten Tagen mit Ajax beschäftigt und muss sagen: sehr geniale Sache.
Ich habe letzte Woche einen Thread hier reingestellt (http://atnotes.de/index.php?topic=27237.0 :Dynamische Dialoglisten im Web, ohne Seite neu zu laden), bei dem es um mehrere untereinander abhängige ComboBoxen geht, die über @DbLookups gefüllt werden.

Das habe ich jetzt komplett mit Javascript/Ajax/Notes Agent realisiert und das funktioniert ziemlich gut (und ist dabei eigentlich auch ziemlich einfach).

Und der weitere Vorteil: das ist wesentlich schneller als das herkömmliche @DbLookup und dabei die Maske immer neu laden zu müssen.

Gruß

Stefan

[flaite]

Wäre nett, wenn du eine abgespeckte Beispielanwendung posten könntest.

[machineslave]

Guten Morgen zusammen,

ich habe ein kleines Problem bzgl Ajax:
Folgendes Gerüst habe ich für den Aufruf eines Server-Agenten, welcher mir über einen "Lookup" eine Liste zurückliefert, welche ich dann entsprechend in eine ComboBox fülle. Das funktioniert soweit ganz gut.
Allerdings möchte ich folgendes beim Öffnen der Maske ausführen:
- Fülle die erste ComboBox (ListeA) mit Werten (mache ich über einen normalen @DbColumn; funzt auch)
- Nehme den ersten Wert aus ListeA und fülle die zweite ComboBox (ListeB) mittels Ajax (funzt auch)
- Setze den ersten Wert in ListeB als selektiert (document.forms[0].ListeB.selectedIndex =0)
- Rufe wieder u.a. Routine auf, um ListeC zu füllen; der Parameter soll nun der aktuelle Wert der ListeB sein.

Hier ist nun das Problem:
Da Ajax nun mal asynchron ist, wartet die Routine, welche nach und nach u.a. Funktion aufruft, nicht, dass der Request an den Server vollständig durchgeführt wurde. Demnach wird bereits die Funktion zum Füllen von ListeC aufgerufen, selbst wenn ListeB noch nicht gefüllt sein sollte, was natürlich zu einem Fehler führt.
Hat jemand eine Idee, wie ich das per JavaScript abfangen kann?

Gruß

Stefan



var req;
function loadXMLDoc(url)
{
   if (window.XMLHttpRequest)
   {
      req = new XMLHttpRequest();
      req.onreadystatechange = processReqChange;
      req.open("GET", url, true);
      req.send(null);
   }
   else if (window.ActiveXObject)
   {
      req = new ActiveXObject("Microsoft.XMLHTTP");
      if (req)
         {
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);
            req.send();
         }
   }

}

function processReqChange()
{
   if (req.readyState == 4)
   {
      if (req.status == 200)
      {
         eval(req.responseText);
      }
      else
      {
         alert ("Problem retrieving data");
      }
   }
}

[flaite]

Das sind schon die schwierigeren Punkte.
Dies ist aber sicher ein ziemlich generisch.
So fit bin ich da auch noch nicht.
In dem screenshot weiter oben siehst du wie mit Hilfe des Prototype Frameworks der an sich asynchrone Ablauf in einem Call zusammengeschoben wird.
So ungefähr könnte es gehen. Du müsstest die beiden remote Calls zu einem remote Call machen, der durch das Framework hinsichtlich Nachricht senden/Nachricht empfangen synchronisiert wird.

Wie gesagt. Ich bin da selbst noch nicht der guru drin. Das sind auch letztlich die Fälle, bei denen man ein bischen tiefer in die Materie einsteigen muß.

Gruß Axel

[machineslave]

Hallo,

was ich eigentlich vorhabe, ist, mehrere Lookups hintereinander aufzurufen.
Dabei muss natürlich vor Aufruf des nächsten Lookups der vorige Request abgeschlossen sein.
Ergo: Ich möchte eigentlich synchrone Aufrufe (entgegen dem eigentlichen Nutzen von Ajax).

Laut Syntax kann man als 3. Parameter bei req.open den Wert false angeben (siehe unten), dann wird der Request synchron aufgerufen (sprich, der restlich JavaScript Code wird erst nach Fertigstellung des HttpRequests aufgerufen).
Im IE funktioniert das auch, allerdings mag Mozilla das wohl garnicht. Wenn man bei Mozilla den Parameter auf false setzt, wird der Request erst garnicht ausgeführt.

  if (window.XMLHttpRequest)
   {
      req = new XMLHttpRequest();
      req.onreadystatechange = processReqChange;
      req.open("GET", url, false);
      req.send(null);
   }

Weiss jemand, wie ich mir irgendeinen Handler oder sowas bauen muss, damit mein Problem behoben ist?

Gruß

Stefan

[flaite]

Ich find das sieht vielversprechend aus:
http://wiki.script.aculo.us/scriptaculous/show/Ajax.Request

... oder du programmierst das so um, dass bei jedem Aufruf die gesamte benötigte Datenstruktur zurückgegeben wird, inklusive der Auswahl der 3. Selectbox.

[flaite]

Ja. Und? Arbeitest du da jetzt weiter dran?
Interessiert mich wirklich.
Ich glaub nach wie vor, dass man das mit den ulkigen, bla-bla mässigen & überkomplexen Zeug wie
a) wirklich xml Nachrichten auszutauschen und
b) Frameworks wie Prototype
in den Griff zu bekommen ist.

Bin zur Zeit wg. Projektendterminen & meinem ex-post Domino 6 upgrade aus dem Gefecht, werd aber dran weiterarbeiten.
Wäre schön, wenn ein paar interessierte auch mal ein paar Beiträge posten.

Jedenfalls ist Ajax sehr ähnlich zu Webservice basierten Integrationsmechanismen ist und ich glaub mittlerweile, dass dies der beste Weg der Integration von Domino ist.

In der Zwischenzeit wird die Dokumentation der Prototype JS-Scriptlibrary besser:
http://ajaxian.com/archives/2005/12/a_quick_guide_t.html

Der Punkt den ich versuche zu machen:
Du mußt die Aufrufe nicht auf 2 Ajax Calls verteilen (und dadurch kommen nämlich deine Probleme)
Beispiel:
Select 1: Land
Select 2: Stadt
Select 3: Stadtviertel.

In Land wählt der User Deutschland.
Nun müßte vom Server das folgende mit 1 Call runterkommen:
Die Liste der Städte unddie Liste der Stadtviertel der ersten Stadt.

Am saubersten ginge das mit xml:
<response>
<cities>
<city>
Köln
</city>
<city>
Berlin
</city>
<city>
Hamburg
</city>
</cities>
<!-- Stadtviertel von erster stadt-->
<districts>
<district>
Niehl
</district>
<district>
Sülz
</district>
<district>
Ehrenfeld
</district>
</districts>
</response>

Natürlich mußt du noch nicht mal xml nehmen. Ein mit entsprechenden Trennzeichen enkodierter String geht auch. Aber xml ist sauberer (wichtig, imho).

In Webservices-Architektur-Theorie Welt wird viel über die konkrete Granularität von Services gesprochen. Und du hast hier in deinem Ajax die falsche Granularität.
Du brauchst für eine User-Aktion (=wähle Deutschland) nicht intern 2 calls, die auch noch gegen einen entfernten Server gehen.


viel Glück

Axel

[machineslave]

Hallo Axel,

ich habe meine Scripte nun so programmiert, dass:

a) beim Initialisieren ein Aufruf passiert (also Agent anstossen), der anhand des Benutzernamens die Comboboxen füllt, also die komplette Datenstruktur zurückliefert und
b) sobald ein Wert innerhalb einer Combobox geändert wird, wird erst einmal nur die nächste Combobox angefordert.

Das funktioniert sehr gut und ist sehr schnell.
Ich werde im Laufe der Woche mal die Lösung hier posten.

Gruß

Stefan

[flaite]

goil