erster Test von Ajax

Nachdem es in den bisherigen Postings vor allem darum ging die Funktionalitäten des Ext-Js Framework grundlegend kennenzulernen habe ich nun einmal versucht eine Ajax Funktion zu erstellen, bzw. mich umgeschaut wie dies überhaupt funktioniert.

Der Schmäh bei Ajax ist ja, dass eine HTML-Seite vom Server nicht wie sonst üblich komplett neu geladen werden muss, sondern nur bestimmte Teile zB. vom JavaScript neu geladen werden.

Dabei habe ich grundsätzlich wieder eine ähnliche Vorgangsweise wie bei der 4.Ce-Übung verwendet. D.h. ich habe Eclipse gemeinsam mit dem Plugin MyEclipse verwendet (das das Deployen im Tomcat server erleichtert).

Anschließend habe ich nach " Running XMLHttpRequest with Java" gesucht und dabei folgendes beispiel gefunden: http://josesandoval.virtual.vps-host.net/XMLHttpRequest.html .

Hier werden mittels Ajax gewisse Suchergebnisse, die zuvor in ein Eingabefeld eingegeben wurden zurückgegeben. In diesem (Test-)Fall ist das jedoch keine Suchergebnis son dern es wird einfach der eingegebene Text zurückgegeben.

Dabei fungiert ein Servlet als Schnittstelle um gewisse Ajax Werte zurückzugeben, die wesentliche Methode sieht dabei so aus:

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

PrintWriter out = response.getWriter();
StringBuffer resultBuffer = new StringBuffer();
String id = request.getParameter("id");
resultBuffer.append("1;Apple;1201 " + id); //hier wird einfach eine Konstante //zurückgegeben idf. die Apple Aktie sowie die id, die dem eingegebenen String im Suchfenster // entspricht

..........

out.print(resultBuffer.toString());
out.close();
}

Der Rest, also der Aufbau der JavaScript Datei und der html Code sind in der index.html datei, in der auch der java script code eingebaut ist!

Hier wird dann auch ein HttpObjekt erzeugt und mit
http.open wird dann auch auf das servlet zugegriffen, wobei hier auch die id mitgegeben wird, die den in das textfeld eingegebenen text liefert.




Ich hoffe nun, das sich das als grundlage eigenet, dass man in einem weiteren Schritt hier z.b. nach der eingabe eines namens wie apple in einer schönen ext-js tabelle aktiennamen und deren kurswerte sowie ev. weitere infos ausgeben kann!

Toll wäre die sache natürlich mit einem richtigen webserver, der tomcat ersetzt, aber auch so scheint die sache hoffentlich ganz aufschlussreich zu weden

Ext-JS Tutorial 2.Teil

Nachdem die einfachen Sachen bereits rel. schnell funktioniert haben, geht das Tutorial nun weiter mit einer der wesentlichen Fähigkeiten von Ext-Js nämlich der übersichichtlichen und anschaulichen Darstellungen von Tabellen in Webbrowsern!

Bei der Tabellenerstellung wird dabei zunächst eine Art Array erstellt, das wie in JavaScript üblich (das doch etwas gewöhnungsbedürftig im Vergleich zu Java ist) einfach in einer beliebigen Variablen gespeichert wird.

Anschließend muss man einen "DataReader" erstellen, der die Daten quasi in ein für Ext-Js passendes Format bringt, damit sie anschließend aufbereitet werden können.

Anschließend müssen noch einige Parameter spezifiziert werden und die Tabelle wird in optisch recht ansprechender Form angezeigt, wobei der Aufwand, zumindest wenn man sich etwas mit Ext-Js auskennt wirklich minimal zu sein scheint!

Installation-Die Zweite

Das Herunterladen und Installieren bereitete mir genauso wenige Probleme wie Martin, nämlich gar keine. Aus dem von Martin schon genannten Grund entschieden wir uns für die Version 2.0 des ExtJS-Frameworks.

Weiters habe ich noch folgende Tutorials durchgearbeitet:
• Getting Started
• Playing With Ext The Easy Way
• What is that Scope all about
• Application Layout for Beginners
• DomQuery
• DomQuery Basics
• DomQuery Advanced

Als nächsten Schritt nehme ich mir die API Dokumentation vor und versuche die passenden Scripts des ExtJS-Frameworks zu unserer geplanten Anwendung herauszufinden. Im Zuge dessen werden höchstwahrscheinlich einige explorative Prototypen entstehen.

Herunterladen und installieren

Das Herunterladen und Installieren des Ext-JS Frameworks machte keine Probleme. Wobei auf der Downloadseite des Frameworks grundsätzlich zwei Versionen erhältlich sind.
Zunächst Version 1.1.1 (current stable release) und Version 2.0 RC1 die noch nicht ganz final ist, die laut den Infos der Website aber doch wesentlich verbessert wurde. Daher werde wir uns zumindest vorläufig für die Version 2.0 entscheiden.
Nach dem Download reicht es das heruntergeldadene .zip File einfach in einen beliebigen Festplattenordner zu entpacken.

Folgende Seite hilft bzw. half dabei bei den ersten Schritten: http://dynamicinternet.eu/blog/2007-03-18/tutorial-einfuehrung-in-die-ext-ajax-library/

Nun ist es mittels 3 kleinener .html, .css und .js Datein möglich ein paar grundlegende Funktionen auszuprobieren. So erscheint z.b. mittels folgender Anweisung bei jedem Klick auf den Text eine Meldung

Ext.select('p').on('click', function() {
alert("You clicked a paragraph");
});

Hier sieht man schon das Ext-JS auf Java-Script basiert.