Erste Schritte mit 4D Ajax Framework

Eigene HTML Seite - Teil 1

Bitte betrachten Sie zuerst das Video (5 MB)

Nun erstellen wir eine eigene Seite. Schauen Sie sich zuerst den Film an und vollziehen es danach nach. Zur Erleichterung haben wir hier die Schritte nochmals dokumentiert.

Entweder Sie legen nun ein eigenes HTML Dokument an und tragen die notwendigen Tags und Header ein - oder Sie verwenden einfach das vorhanden Index.html und löschen einfach alles innerhalb von <Body> </Body>. Im Header den redirect Teil für das iPhone entfernen.

Die Zeile <Body> ändern in:

<body onload="Login('Designer', ''); return false;">

Das ist eine Art On Startup methode, die automatisch aufgerufen wird. Zur Vereinfachung führen wir hier direkt das Login mit festem Kennwort durch. In der Praxis blendet man zuerst einen Kennwort dialog ein, läßt den Anwender sich anmelden, blendet dann diesen aus und schaltet auf die eigentliche User-Schnittstelle um. Nach dem Login ruft 4DAF automatisch die Javascript Funktion onAfterInit auf, also schreiben wir die jetzt als nächstes.

im Header fehlt noch ein Block für Javascript:

<script type="text/javascript">
<!--
<// -->
</script>

dort schreiben wir jetzt die erste Javascript Funktion:

onAfterInit = function() {
alert("test");
}

Speichern Sie das Dokument ab und testen Sie es, indem Sie den Browser mit http://localhost aufrufen (ggf bei anderer Port Nummer http://localhost:8080). Bei Aufruf der Seite kommt ein kleines Fenster mit "test", die Javascript Funktion wurde aufgerufen, also war die Initialisierung erfolgreich.

Unter Firefox gibt es den kostenlosen Debugger Firebug, sehr für Javascript Entwicklung zu empfehlen. Wenn Sie diesen installiert haben, könnten Sie ihn jetzt mal öffnen und einen Breakpoint in die OnAfterInit Funktion setzen und sich den Debugger einmal anschauen (wenn Sie Firebug schon kennen, warten Sie bis wir selbst etwas Code geschrieben haben).

Jetzt können wir das Test-Fenster mit einer Liste der Kunden ersetzen. In den Body Bereich fügen wir ein unsichtbares DIV Objekt ein. Das Objekt stellt einen Container dar, der später von 4D Ajax Framework "mit Leben" gefüllt wird, wir selbst geben dabei nur den Platzhalter vor:

<div id="customergrid" style="display: none; width: 750px;
height: 300px;border: 1px solid #CCCCCC;"></div>

Für dieses Beispiel könnte der DIV Container auch direkt sichtbar sein, wenn Sie in einer "echten" Anwendung jedoch ein Kennwort-Dialog vorschalten, soll die eigentliche Arbeitsfläche noch unsichtbar sein, man blendet sie erst nach vollzogener Anmeldung ein.

In unsere onAfterInit Funktion entfernen wir nun die Zeile mit alert und ersetzen sie mit:

$('customergrid').style.display = 'block';
myDataGrid = new dax_dataGrid('Customers', $('customergrid'));
myDataGrid.go();

Die erste Zeile blendet unseren DIV Container ein. Die zweite Zeile erzeugt ein Data Grid 2.0 Objekt, für die Tabelle "Customers" und setzt diesen in den DIV Container "customergrid" ein. Die dritte Zeile startet das Data Grid. Das war es schon, mehr ist nicht notwendig! Speichern Sie die Seite und führen Sie einen Redraw des Browsers durch und testen Sie die Funktion.

Nun noch etwas Fine Tuning. Die erste Spalte mit der Kundennummer ist hier nicht vorteilhaft, wir könnten sie über die Preferences/Access control ganz herausnehmen, aber vielleicht brauchen wir sie später als Referenz, also blenden wir sie lieber nur aus:

myDataGrid.hideColumn(1);
myDataGrid.setColumnWidth(4,80);

Die erste Spalte (leer angezeigt) ist das Klickobjekt für Inline Edit, dies hat die Spaltennummer 0 (Javascript zählt Arrayelemente von 0-x). Wir blenden also Spalte 1 aus. Die Spalte 5 (aus Javascript Sicht ID 4) ist die Postleitzahl/Zip, diese ist ziemlich breit, der Befehl setColumnWidth reduziert die Breite auf 80 Pixel.

Als Abschluß blenden wir noch die Toolbar ein. Diese unterstützt drei Funktionen: Neu, Löschen und Suchen. Für dieses Beispiel verwenden wir nur Suchen:

myDataGrid.showToolbar(['search']);

Speichern, Redraw im Browser, voila.

War doch gar nicht so schwer? Um Objekte in Javascript zu verwenden, müssen Sie einige Befehle erlernen, genauso, wie Sie z. B. die neuen Listbox Befehle in 4D erlernt haben. Oft kann man sich für einfachere Aufgaben mit Copy&Paste behelfen, kopieren Sie einfach Teile aus einer Demo-Anwendung in Ihre Seite...

Hier zur Übersicht noch der vollständige Inhalt der erstellten Seite, sowohl als Text wie als Download

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>4D Ajax Framework v11.1</title>

<script language="javascript" type="text/javascript" charset="ISO-8859-1" src="dax/dev/callbacks.js"></script>
<script language="javascript" type="text/javascript" charset="utf-8" src="dax/js/localization/resources_en.js"></script>
<script language="javascript" type="text/javascript" charset="ISO-8859-1" src="dax/js/compile.js"></script>

<!-- stylesheets -->
<link rel="stylesheet" charset="ISO-8859-1" href="dax/themes/basic/basic_gz.css" media="all" type="text/css" title="XPress"/>
<link rel="alternate stylesheet" charset="ISO-8859-1" href="dax/themes/vista/vista_gz.css" media="all" type="text/css" title="Vista"/>
<link rel="alternate stylesheet" charset="ISO-8859-1" href="dax/themes/osx/osx_gz.css" media="all" type="text/css" title="Mack Daddy"/>
<link rel="alternate stylesheet" charset="ISO-8859-1" href="dax/themes/leopard/leopard_gz.css" media="all" type="text/css" title="Leopard"/>

<link rel="stylesheet" charset="ISO-8859-1" href="dax/themes/dash/dash.css" media="all" type="text/css"/>
<link rel="stylesheet" charset="ISO-8859-1" href="dax/dev/custom.css" media="all" type="text/css"/>

<script type="text/javascript">
<!--
onAfterInit = function() {
$('maingriddiv').style.display = 'block';
myDataGrid = new dax_dataGrid('Customers', $('maingriddiv'));
myDataGrid.go();
myDataGrid.setColumnWidth(4,80);
myDataGrid.hideColumn(1);
myDataGrid.showToolbar(['search']);
}
// -->
</script>

</head>
<body onload="Login('Designer', ''); return false;">	
<div id="maingriddiv" style="display: none; width: 750px; height: 300px; border: 1px solid #CCCCCC;"></div>
</body>
</html>

Videofilm nochmal betrachten (5 MB)