Ext-js Grids

Gestern habe ich wieder eineige Zeit damit verbracht die Daten nach Möglichkeit dynamisch in das Ext-Grid eizuspeisen. Dabei ist an sich folgende Eingabesyntax notwendig:


Ext.grid.dummyData = [

['Altenberg bei Linz','Urfahr-Umgebung',3739,'Marktgemeinde','www.altenberg.at', 'Stadt-Staat',14.35027, 48.37283],
....
];

Dies setzt voraus, dass die Tabelle in den vorrigen Codezeilen bereits korrekt deklariert wurde bzw. wird, was aber ohnehin schon der Fall ist. Daher funktioniert dieses statische Einfügen in die Tabelle auch ohne Probleme, will ich jedoch die Daten die von ajax via http.responseText als String (der bereits richtig mit eckigen Klammern usw. formatiert ist) einfügen "zerhackt" ajax diesen String nach jedem einzelnen Zeichen, was für die Tabelle natürlich nicht zielführend ist!

alle möglichen Änderungen bzw. eine explezite Deklaration als string halfen nicht.
Daher bin ich nach eingen recherchen auf die Idee gekommen den string quasi zu parsen und dann nach folgender weise in die tabelle einzufügen:

man splittet also das eingabearray etwa nach folgendem schema:

var string = http.ResponseText
var array = new Array();
array=string.split(",")

Das Array wird also quasi nach jedem Beistrich zerhackt, wobei der Beistrich entfernt wird und die anderen Daten in ein Array geschrieben werden!

nun funktioniert es tatsächlich die daten in das grid array folgendermaßen "dynamisch" einzuspeisen:

Ext.grid.dummyData = [

[array[0],array[1],array[2]......]
];

Dies hat lediglich den Nachteil, dass der Block in dem die Daten deklariert wrden keine Schleifen oder abfragen zulässt, dies wäre aber aufgrund der ja immer anderen länge des Array eig. erforderlich, vllt. findet sich hier noch ein lösung....

Einen Fehler der beim Absenden des ajax-requests passierte, konnte ich ebenfalls noch ausbessern, der befehl onKeyDown sendete nämlich die Information des Eingabefeldes bereits ab, bevor das neu eingegebene Zeichen im Formular war, dieses Problem lies sich mit onKeyUp lösen.

Generell haben mir hier die Informationen von w3c zur javaScript und html syntax geholfgen:
http://www.w3schools.com/jsref/jsref_split.asp und
http://www.javascriptkit.com/javatutors/string4.shtml

Generell muss ich noch anmerken, dass der FireBug "Debugger" (Firefox Plugin) bei der Entwicklung recht hilfreich ist, er macht z.B. auf syntaxfehler aufmerksam, meldet aber auch fehler bei ajax requests bzw. kann man wie bei einem richtigen Debugger auch Einsprungpunkte setzen und somit den Inhalt von gewissen Variablen zu gewissen Zeiten prüfen!

Letzte Schritte

Das Abfragen aus der Oracle DB funktioniert jetzt über einmaligen Verbindungsaufbau, so dass jetzt nicht mehr für jede Abfrage eine neue Verbindung zur DB aufgebaut werden muss. Das haben wir mittels einer Abfrage bewerkstelligt"
if (callCounter) {callCounter = false;data.makeConnection();
}", die nur bei noch nicht bestehender Verbindung eine neue erzeugt.

Heute haben wir uns via icq über die nächstanstehenden Arbeiten unterhalten und unsere Aufgabenbereiche dabei abgesteckt. So hat sich Martin für die Ausgabe in der Tabelle bereit erklärt. Hierzu müssen die Daten, die bei der Abfrage aus der DB zurückkommen noch geeignet in die Grid-Komponente/Tabelle eingefügt werden. 

Ich werde mich noch um optische Feinschliffe kümmern und so viel wie noch möglich das Erforschen bzw. Miteinbauen von ExtJs Spezialitäten in unsere schon bestehende Apllikation versuchen.

DB anbindung und datenausgabe klappt

In den letzten Tagen ist wieder einiges weitergegangen bei der Fertigstellung des kleinen Projektes. Es kam allerdings auch zu einigen Problemen, die ich zum großteil schon gelöst habe:

1.wenn die oracle10gExpress edition und apache tomcat gleichzeitig gestartet waren, kam es zu dem Problem, dass ich via localhost bzw. 127.0.0.1 nur mehr auf das webinterface der orable DB zugreifen konnte, nicht allerdings auf tomcat, da beide Anwendungen offenbar standardmäßig den zugriff auf ihr webinterface nur via 127.0.0.1 zulassen. Eine einfache Änderungsmöglichkeit bot sich nach kurzer Internetrecherche leider nicht.

Als Lösung reichte es jedoch lediglich den Standardport von 8080 auf 8090 zu ändern:

der Zugriff auf das OracleDB Interface erfolgt also nun via 127.0.0.1:8080

der Zugriff auf Tomcat Apache Tomcat via 127.0.0.1:8090

2. Damit nach der Eingabe von 2-3 zeichen zumindest in den meisten fällen auch noch genügend Daten vorhanden sind, die angezeigt werden können (d.h. die aus der gleichen Zeichenfolge bestehen wie die eingabe ins eingabefeld) ist es notwendig eine hinreichend große DB zu haben!

Da ich bei den Aktienkursen leider keine ausreichend große DB gefunden habe, habe ich mich für eine DB entschieden die alle oberösterreichischen Orte mit Namen und einigen zusatzdaten entält, da ich diese Liste noch aus schulzeiten zur verfügung hatte. (ca.450 Einträge)

3.Die Änderung der Liste sollte sofort erfolgen, also nach jeder einzelnen Tastatureingabe sollte die Liste der gefundenen Orte bereits aktualisiert werden. Dieses Verhalten konnten wir mit dem Befehl onKeyDown="updateOrtResults(0) erreichen!

derzeit noch offen sind folgende Probleme:

1. die ext-js tabelle wird nicht aktualisiert nach den eingaben, sprich die daten werden zwar via ajax "normal" d.h. außerhalb der tabelle angezeigt aber noch nicht in der tabelle - hier fehlt vermutlich noch eine art "update" methode, sowie eine direkte Einbindung in die Tabelle

2. die datenbankanbindung wird offenbar nach jeder einzelnen zeicheneingabe neu aufgebaut, dies führt nach mehreren dutzend eingaben zu einem anbindungsproblem, sollte aber lösbar sein

Umlaute werden außerdem noch falsch angezeigt->ändert sich ev. sowieso mit der Einbindung in die ext-js Tabelle!

tlw. scheinen dir orte außerdem noch nicht ganz richtig nach der eingabe auf: es scheint als ob etwas zu viele orte angzeigt werden- hier liegt ev. noch ein fehler im stringvergleich

hier noch ein screenshot, zur verdeutlichung wie das ganze dzt. ca aussieht:

So, ich habe mich mittlerweile an der Datenbankanbindung gearbeitet. Da ich bereits bei der Übung DKE mit einer OracleDB gearbeitet habe, habe ich mich dafür entschlossen hier die für das Ajax-Projekt benötigten Datensätze in einer lokal installierten Oracle Datenbank zu verwalten.

Hierzu hat sich die Oracle Database 10g Express Edition empfohlen, da die Standardversion viel zu umfangreich für eine lokale Installation wäre. Als Schnittstelle wird JDBC dienen. Mit dem DB-Manager von myEclipse kam es dabei zu einem speziellen ORA Fehler mit folgendem Anbindungsstring: jdbc:oracle:thin:@localhost:1521:XE (*User+PW)

Da dieser Fehler jedoch ausschließlich im myEclipse DB Browser auftritt handelt es sich offenbar um einen Fehler von myEclipse. Dies ist aber nicht so schlimm, da eine Verbindung mit anderen Tools wie dem SQL-Exploerer oder dem SQL-Developer kein Problem darstellt.

Als nächstes gilt es von der Datenbankseite her eine Möglichkeit zu finden eine hinreichend große Menge an Aktiendatensätzen (vor allem Namen) in die Datenbank einzubinden, damit z.b. bei einr eingabe von 2 beliebigen Buchstaben nach Möglichkeit zumindest 1 oder 2 Aktiensätze überbleiben, die dann via AJAX sofort angezeitg werden können.

ExtJs Einbindungsprobleme

Heute habe ich wieder versucht weiterzumachen
und die schöne ExtJs Tabelle auf unserer jsp-Seite
in die Tat umzusetzten. Bin dabei streng nach
Tutorials vorgegangen, nur scheint die Anbindung
der ExtJs Bilbliothek nicht ganz zu funktionieren,
weil mir im Browser zur Zeit nur der Inhalt des
headers der jsp angezeigt wird. 

Habe schon ziemlich viele Pfadangaben probiert und 
Ordner mit den Js-Files in viele verschiedene Pfade
verschoben.

Hoffentlich gelingt mir bald einmal die
Bibliothekseinbindung damit ich den Code
endlich mal werkeln sehe.

Jetzt habe ich gerade die MyEclipse 6.0 Version installiert, wie ich es mir gestern mit Martin ausgemacht habe, um eine gemeinsame, sichere Arbeitsbasis herzustellen.

Dann habe ich mir den Code-Ansazt von Martin näher durchgesehen. D. h. ich habe den integrierten Tomcat Server gestartet, das ganze Projekt über 
MyEclipse  auf dem Server deployt, was auch gleich beim ersten Verusch geklappt hat.

Nun habe ich mir mit Martin ausgemacht, dass ich mich auf ein Spezifikum des ExtJs Frameworks, nämlich die Darstellung in einer anschaulichen, in vielen erdenklichen Richtungen
veränderbare Tabelle.

Martin wird demnächst eine Lösung zur Datenbankanbindungsfrage bringen, damit wir dann auch zum Kern dieses KTs, der Ajax-Technologie, umgesetzt in ExtJs, nachgehen können.

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.