Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 21 AJAX-Frameworks
|  | 21.1 Dojo
|  | 21.2 Atlas
## 21.2 Atlas ASP.NET von Microsoft verwendet einen Steuerelement-Ansatz: Es gibt auf dem Webserver spezielle Elemente, die dann im Client als HTML (und CSS und JavaScript) »ankommen«. Damit ist die Technologie natürlich prädestiniert für AJAX-Frameworks, denn diese können sich dann auf der Serverseite einklinken und bestehende Steuerelemente mit zusätzlicher AJAX-Funktionalität versehen. Das AJAX-Framework von Microsoft für ASP.NET 2.0 heißt Atlas (das ist ein Code-Name, er kann sich also in Zukunft unter Umständen noch ändern). Unter http://atlas.asp.net/ gibt es das Framework (zurzeit) als Vorabversion. In Kapitel 20 haben Sie bereits den Visual Web Developer Express Edition kennengelernt; diesen benötigen Sie auch, um den Atlas-Download nutzen zu können. Atlas integriert sich nämlich in den Gratis-Editor (und auch in die kostenpflichtigen Varianten von Visual Studio 2005). Wenn Sie eine neue Website anlegen möchten, finden Sie – natürlich erst nach der Installation – eine Atlas-Projektvorlage (siehe Abbildung 21.2). Wählen Sie diese aus, damit Sie eine komplett für Atlas vorkonfigurierte Website vorfinden. Atlas erfordert ASP.NET 2.0; ASP.NET 1.x wird hier leider nicht unterstützt. Auch hier soll wieder ein Google-Suggest-ähnlicher Effekt erzeugt werden. Dazu benötigen Sie diesmal einen Web Service. Atlas ruft nämlich in Verbindung mit dem ComboBox-Effekt einen Web Service auf, wenn Sie ein paar Zeichen in das Textfeld tippen. Als Parameter werden zwei Informationen übergeben: welche Zeichen eingetippt worden sind und wie viele Ergebnisse maximal zurückgeliefert werden dürfen. Hier klicken, um das Bild zu Vergrößern Abbildung 21.2 Die Atlas-Website-Vorlage im Visual Web Developer Der Web Service wird ähnlich wie in Kapitel 20 erstellt: Sie müssen System.Web.Services importieren, eine Klasse von WebService ableiten und WebMethodAttribute verwenden:
    <%@ WebService Language="JScript" Class="Atlas_Autocompleter" %>

    import System.Web.Services;

    public class Atlas_Autocompleter extends WebService {

       WebMethodAttribute
       function Monate(prefixText: String, count: int) : String[] {
Die Parameternamen prefixText und count sind dieselben Namen, die Atlas an den Web Service schickt. Die Methode Monate() soll alle Monate zurückliefern, die mit prefixText beginnen. Dazu benötigen wir zunächst einmal eine Liste aller möglichen Monate:
    var monate: String[] = [
       "Januar", "Februar", "März", "April",
       "Mai", "Juni", "Juli", "August",
       "September", "Oktober", "November", "Dezember"];
Das Array-Handling ist unter .NET (und damit auch unter JScript.NET) etwas mühsamer als unter JavaScript. Es gibt mehrere mögliche Lösungen, aber diese Implementierung ist besonders einfach zu verstehen. Zunächst zählen wir alle passenden Monate. Ein Monat "passt", wenn er mit prefixText beginnt:
    var i: int = 0;
    var treffer: int = 0;
    for (i = 0; i < monate.Length; i++) {
       if (monate[i].IndexOf(prefixText) == 0) {
          treffer ++;
       }
    }
In der Variablen treffer steht nun die Anzahl der Treffer. Damit initialisieren wir ein neues Array (.NET möchte gern vorher wissen, wie viele Elemente ein Array hat). Eine Besonderheit gibt es: count gibt ja an, wie viele Treffer es maximal geben darf, also ermitteln wir, welche Zahl kleiner ist: count oder treffer.
    var ergebnis: String[] =
       new String[Math.min(count, treffer)];
Jetzt werden alle Monatsnamen noch einmal durchlaufen und damit das Array ergebnis mit allen gültigen Monaten gefüllt:
    var pos: int = 0;
    for (i = 0; i < monate.Length; i++) {
       if (monate[i].IndexOf(prefixText) == 0) {
          ergebnis[pos] = monate[i];
          pos ++;
          if (pos == ergebnis.Length) {
             break;
          }
       }
    }
Das war es; nun muss das Array ergebnis nur noch von der Funktion zurückgegeben werden. Hier der komplette Code des Web Service:
    <%@ WebService Language="JScript" Class="Atlas_Autocompleter" %>

    import System.Web.Services;

    public class Atlas_Autocompleter extends WebService {

       WebMethodAttribute
       function Monate(prefixText: String, count: int) : String[] {
          var monate: String[] = [
             "Januar", "Februar", "März", "April",
             "Mai", "Juni", "Juli", "August",
             "September", "Oktober", "November", "Dezember"];

          var i: int = 0;
          var treffer: int = 0;
          for (i = 0; i < monate.Length; i++) {
             if (monate[i].IndexOf(prefixText) == 0) {
                treffer ++;
             }
          }

          var ergebnis: String[] = new String[Math.min(count, treffer)];
          var pos: int = 0;
          for (i = 0; i < monate.Length; i++) {
             if (monate[i].IndexOf(prefixText) == 0) {
                ergebnis[pos] = monate[i];
                pos ++;
                if (pos == ergebnis.Length) {
                   break;
                }
             }
          }

          return ergebnis;
       }

    }
Rufen Sie ihn im Browser auf, und nehmen Sie die Testmöglichkeit in Anspruch (Abbildung 21.3). Suchen Sie beispielsweise nach allen Monaten, die mit einem J beginnen; Sie sollten drei Ergebnisse erhalten (siehe Abbildung 21.4). Wenn Sie allerdings bei count den Wert 2 angeben, sollten Sie auch nur noch zwei Ergebnisse im Browser sehen (Abbildung 21.5). Hier klicken, um das Bild zu Vergrößern Abbildung 21.3 Testen Sie den Web Service. Hier klicken, um das Bild zu Vergrößern Abbildung 21.4 Drei Monate beginnen mit J. Hier klicken, um das Bild zu Vergrößern Abbildung 21.5 Sie können die Anzahl der Rückgabewerte beschränken. Jetzt fehlt nur noch die ASP.NET-Seite, die diesen Web Service als Daten-Backend für eine ComboBox nutzt. Ausnahmsweise erstellen wir eine C#-Datei in Visual Web Developer. Keine Sorge, Sie müssen keine neue Sprache lernen, denn die ASP.NET-Datei wird keine einzige Zeile Code enthalten, nur Markup. Jedoch unterstützt Visual Web Developer standardmäßig kein IntelliSense (Codevervollständigung etc.) für JScript.NET. Schlimmer noch: Atlas kommt ebenfalls nicht mit JScript.NET zurecht, zumindest in der zum Redaktionsschluss vorliegenden Version (July CTP). Deswegen erzeugen Sie eine C#-Datei, und alles funktioniert. Als Erstes benötigen Sie natürlich ein Textfeld. Erzeugen Sie ein HTML Control, also ein HTML-Formularelement mit dem Attribut runat="server" sowie mit einer eindeutigen ID:
    <form id="form1" runat="server">
    <div>
    <input type="text" id="Monatsliste" runat="server" />
Als Nächstes laden Sie die Atlas-Bibliothek. Das übernimmt ein spezielles serverseitiges Steuerelement, der ScriptManager von Atlas. Den bauen Sie wie folgt in die Seite ein:
    <atlas:ScriptManager id="ScriptManager1" runat="server" />
Im nächsten – und auch schon letzten – Schritt wandeln Sie das Texteingabefeld in eine ComboBox um. Das erledigt das Steuerelement AutoCompleteExtender. Innerhalb dieses Elements sorgen die AutoCompleteProperties dafür, dass Atlas auch alle relevanten Daten erhält: Wo ist der Web Service (ServicePath), welche Methode soll aufgerufen werden (ServiceMethod), ab wie vielen eingetippten Zeichen soll die ComboBox aktiv werden (MinimumPrefixLength). Vergessen Sie nicht, Atlas mitzuteilen, welches Textfeld überhaupt zur Combobox werden soll: Die Feld-ID geben Sie in der Eigenschaft TargetControlID an. Das sieht dann am Ende wie folgt aus:
    <atlas:AutoCompleteExtender ID="Extender1" runat="server">
    <atlas:AutoCompleteProperties
       Enabled="true"
       MinimumPrefixLength="1"
       ServiceMethod="Monate"
       ServicePath="Atlas_Autocompleter.asmx"
       TargetControlID="Monatsliste" />
    </atlas:AutoCompleteExtender>
Hier noch einmal das komplette Markup:
    <%@ Page Language="C#" %>

    <!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 runat="server">
       <title>Atlas</title>
    </head>
    <body>
       <form id="form1" runat="server">
       <div>
          <atlas:ScriptManager id="ScriptManager1" runat="server" />
          <input type="text" id="Monatsliste" runat="server" />
          <atlas:AutoCompleteExtender ID="Extender1" runat="server">
             <atlas:AutoCompleteProperties
                Enabled="true"
                MinimumPrefixLength="1"
                ServiceMethod="Monate"
                ServicePath="Atlas_Autocompleter.asmx"
                TargetControlID="Monatsliste" />
          </atlas:AutoCompleteExtender>
       </div>
       </form>
    </body>
    </html>
Das ist natürlich der serverseitige Code. Wenn Sie diese Seite im Webbrowser aufrufen, erhalten Sie folgendes HTML1 , das mit einer ganzen Menge JavaScript gespickt ist:
    <!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><title>
       Atlas
    </title></head>
    <body>
       <form name="form1" method="post" action="Atlas_Autocompleter.aspx" id="form1">
    <div>
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
    value="/wEPDwULLTE1MTA3MzU1OThkZIPhr5F/xEkLRSDqE4TCplm4938/" />
    </div>

    <script src="/AtlasWebSite1/WebResource.axd?d=GMTDuAhqpvtSdvkkcIt9MJ4wGcQ-
    wg_8ety6VK45YP95SfJxmXyg3FkmT6pciiVGSULNSKxDGxAbeN4o6GgWa6-YHKRRMRB-YXenf8g93oc1&amp;t=
    632782292040000000" type="text/javascript"></script>
    <script src="atlasglob.axd" type="text/javascript"></script>
       <div>

          <input name="Monatsliste" type="text" id="Monatsliste" />

       </div>

    <div>

       <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
    value="/wEWAgKX6aD0CwLL0aKoBy6+tbmlKBMbaeibAFZoZZ6TKuQ4" />
    </div>
    <script type="text/xml-script">
    <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
      <components>
        <control id="Monatsliste">
          <behaviors>
            <autoComplete minimumPrefixLength="1" serviceURL="Atlas_Autocompleter.asmx"
    serviceMethod="Monate" />
          </behaviors>
        </control>
      </components>
    </page></script>
    <script type="text/javascript">
    </script>
    </form>
    </body>
    </html>
Einige Elemente sind besonders hervorgehoben: Offensichtlich wurde das ScriptManager-Element durch zwei <script>-Tags ersetzt; der AutoCompleteExtender wurde ebenfalls in ein <script>-Element umgesetzt (allerdings eines mit XML im Inneren, kein JavaScript). Und so ist es tatsächlich: Die ersten <script>-Elemente enthalten die Atlas-Client-Bibliothek, werten das XML-<script>-Element am Seitenende aus und erzeugen so den ComboBox-Effekt, wie in Abbildung 21.6 zu sehen ist. Hier klicken, um das Bild zu Vergrößern Abbildung 21.6 Die Atlas-ComboBox Auch für Atlas gilt: Ganze Bücher ließen sich damit füllen, dies war nur eines von vielen Beispielen. Wenn Sie auf ASP.NET 2.0 setzen, sollten Sie unbedingt einen Blick darauf werfen. 1 Zumindest so ungefähr – die exakte Ausgabe hängt auch vom Browsertyp ab.
<< zurück | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de