Einleitung

HTMX ist eine leistungsstarke JavaScript-Bibliothek, mit der Sie dynamische Webanwendungen mit minimalem JavaScript erstellen können.Es ermöglicht Ihnen, AJAX-Anfragen zu machen., swap HTML-Inhalte und die Bearbeitung von Ereignissen direkt in Ihren HTML-Attributen.MSC3 IM' ?ve verwendet HTX seit etwa zwei Jahren an dieser Stelle und mit jedem Projekt erfahre ich mehr und mehr über seine Fähigkeiten und noch wichtiger ist es.

Jedoch behaupte ich immer noch nicht, Expertenwissen von ihm zu haben. Ich wollte nur einige der Dinge teilen, die I'... auf dem Weg gelernt haben.

Art.-Nr. der Gesellschaft Dieser Artikel konzentriert sich auf HTMX-''s Ereignissystem.,'s Erweiterungen und erweiterte Individualisierungen.MSC3' Für ASP-MSC4'NET Kernintegrationsmuster mit Teilansichten. ,'s HTMLC6'NET.MSSK7' und Pagination.,'s siehe meinen Begleiter Artikel. HTMX mit ASP-.-NET-Kernteilchen, der Server, die Renaissance.

Veranstaltungen

Antrag auf Vorbereitung

In der Request-Vorbereitungsphase konfiguriert HTMX die Anforderung, bevor sie an den Server gesendet wird.Dies beinhaltet die Einstellung von Headern, die Parameter hinzufügen., und die Handhabung von Benutzereingaben Die folgenden Ereignisse werden während dieser Phase ausgelöst.

flowchart LR

        A[htmx:configRequest] --> B[htmx:confirm] --> C[htmx:prompt] --> D[htmx:abort]

Antrag Lebenszyklus

Die Request-Lebenszyklusphase ist, wo HTMX die Anfrage an den Server sendet und das Response bearbeitet.Die folgenden Ereignisse werden während dieser Phase ausgelöst.

flowchart LR
 E[htmx:beforeRequest] --> F[htmx:request] --> G[htmx:afterRequest]

Reaktionsbehandlung

Die Reaktionsbearbeitungsphase ist, wo HTMX die Antwort vom Server verarbeitet und das DOM-. updates Die folgenden Ereignisse werden während dieser Phase ausgelöst.

flowchart LR
        H[htmx:beforeOnLoad] --> I[htmx:onLoad]
        I --> J[htmx:beforeSwap] --> K[htmx:swap] --> L[htmx:afterSwap]
        L --> M[htmx:afterSettle] --> N[htmx:afterOnLoad]

Geschichtsverwaltung

Die Geschichte Management Phase ist, wo HTMX aktualisiert die Browser-Historie und URL... Die folgenden Ereignisse werden während dieser Phase ausgelöst

flowchart LR
 A[htmx:historyRestoreRequest]
 A --> B[htmx:historyPopped]
 B --> C[htmx:historyRestorePage]

Wie Sie sehen können, bietet HTMX eine Reihe von Ereignissen an, die Sie einhaken können, um die Anforderung oder Antwort zu ändern.,- oder sogar Geschichte.MSC1-HTMX macht einen LOT für das Sein eines solchen kompakten Systems.

Erweiterungen

Einer der mächtigsten Aspekte von HTMX ist die Fähigkeit, Erweiterungen erstellen um seine Fähigkeiten zu erweitern..- In meinem Fall greife ich normalerweise in htmx:configRequest zusätzliche Parameter zum Request hinzufügen Dies ist nützlich, wenn Sie zusätzliche Daten an den Server übergeben möchten, ohne den HTML- oder JavaScript-Code ändern zu müssen.

Andere Erweiterungen können Haken htmx:beforeRequest um die Anfrage zu ändern, bevor sie gesendet wird, aber nach die meisten anderen Erweiterungen, die Haken configRequestWie in beforeRequest Sachen wie HX-Vals und HX-Includes sind bereits in der Nutzlast an die reuest (ether angehängt Du kannst sogar haken htmx:afterSwap um Aktionen durchzuführen, nachdem der Inhalt geswappt wurde..-In Kombination mit clientseitigen Templating-Bibliotheken wie Alpen-.-js oder Liter Sie können leistungsstarke dynamische Anwendungen mit minimalem Code erstellen

HTMX bietet einige eingebaute --Erweiterungen wie hx-boost und hx-swap-oob die Ihnen erlauben, die Funktionalität von HTMX zu verbessern, ohne einen benutzerdefinierten Code zu schreiben..- jedoch gibt es Zeiten, in denen Sie Ihre eigenen Erweiterungen erstellen müssen, um bestimmte Anforderungen zu erfüllen.

Zum Beispiel möchten Sie möglicherweise benutzerdefinierte Kopfzeilen zu Ihren Anfragen hinzufügen., modifizieren Sie die Anforderung payload.MSC2 , oder behandeln Sie bestimmte Ereignisse in einer einzigartigen Weise.

Um diese HTMX zu erreichen bietet Ihnen einige praktische Integrationspunkte

{
  /**
   * init(api)
   * Called once when the extension is initialized.
   * Use it to set up internal state, store references, or access HTMX utility functions via the api parameter.
   */
  init: function(api) {
    return null;
  },

  /**
   * getSelectors()
   * Returns additional CSS selectors that HTMX should monitor.
   * Useful if your extension needs to handle custom elements or dynamic behavior.
   */
  getSelectors: function() {
    return null;
  },

  /**
   * onEvent(name, evt)
   * Called on every HTMX event (e.g., htmx:beforeRequest, htmx:afterSwap).
   * Return false to cancel the event or stop propagation.
   */
  onEvent: function(name, evt) {
    return true;
  },

  /**
   * transformResponse(text, xhr, elt)
   * Modify the raw response text before it is parsed and swapped into the DOM.
   * Use this to sanitize or preprocess HTML.
   */
  transformResponse: function(text, xhr, elt) {
    return text;
  },

  /**
   * isInlineSwap(swapStyle)
   * Return true if your extension will handle this swap style manually.
   * This tells HTMX to skip default behavior.
   */
  isInlineSwap: function(swapStyle) {
    return false;
  },

  /**
   * handleSwap(swapStyle, target, fragment, settleInfo)
   * Perform custom DOM manipulation if you implement a custom swap style.
   * Return true to prevent HTMX's default swap.
   */
  handleSwap: function(swapStyle, target, fragment, settleInfo) {
    return false;
  },

  /**
   * encodeParameters(xhr, parameters, elt)
   * Modify or serialize request parameters before sending.
   * Return null to use default URL/form encoding.
   * Return a string to override with a custom payload (e.g., JSON).
   */
  encodeParameters: function(xhr, parameters, elt) {
    return null;
  }
}

HTMX bietet eine Reihe von vor--?built Erweiterungen können Sie lesen Sie hier.

Zum Beispiel eine handliche Builded---in-Erweiterung json-encode ermöglicht es Ihnen, JSON-Daten in der Request-Körper anstelle von URL.- encodiert Formular data.. . Dies ist nützlich, wenn Sie komplexe Datenstrukturen oder Arrays an den Server senden möchten. Sie können sehen, dass dieser Haken in Ereignisse

• init Um die Erweiterung einzurichten und eine Referenz auf die HTMX API zu speichern
• onEvent Um die Content-Type header zu application/json wenn die Anforderung konfiguriert ist
• encodeParameters Es gibt auch eine Zeichenfolge zurück, um zu verhindern, dass HTMX die Standard-URL, -, kodierte Formkodierung verwendet.

(function() {
  let api
  htmx.defineExtension('json-enc', {
    init: function(apiRef) {
      api = apiRef
    },

    onEvent: function(name, evt) {
      if (name === 'htmx:configRequest') {
        evt.detail.headers['Content-Type'] = 'application/json'
      }
    },

    encodeParameters: function(xhr, parameters, elt) {
      xhr.overrideMimeType('text/json')

      const object = {}
      parameters.forEach(function(value, key) {
        if (Object.hasOwn(object, key)) {
          if (!Array.isArray(object[key])) {
            object[key] = [object[key]]
          }
          object[key].push(value)
        } else {
          object[key] = value
        }
      })

      const vals = api.getExpressionVars(elt)
      Object.keys(object).forEach(function(key) {
        // FormData encodes values as strings, restore hx-vals/hx-vars with their initial types
        object[key] = Object.hasOwn(vals, key) ? vals[key] : object[key]
      })

      return (JSON.stringify(object))
    }
  })
})()

Oder sogar die einfacheren, aber immer mehr HANDY hx-debug Erweiterung, die eine HX-Debug header to the request..-Dies ist nützlich für Debugging und Protokollierungszwecke, da es Ihnen erlaubt, die rohen Request- und Antwortdaten in der dev-Konsole zu sehen.

(function() {
  htmx.defineExtension('debug', {
    onEvent: function(name, evt) {
      if (console.debug) {
        console.debug(name, evt)
      } else if (console) {
        console.log('DEBUG:', name, evt)
      } else {
        throw new Error('NO CONSOLE SUPPORTED')
      }
    }
  })
})()

Es ist viel mehr als ;, einschließlich einer sehr leistungsfähigen clientseitige Templating-Erweiterung die Ihnen erlaubt, client.- side vertemplating libraries zu verwenden, um zurückgegebene JSON-Daten in HTML zu transformieren, . Dies ist nützlich für das Erstellen dynamischer UIs ohne sich auf Server verlassen zu müssen.

Einige benutzerdefinierte Erweiterungen

Dynamische Zeilen-IDs

Zum Beispiel in einem neuen Projekt habe ich HTMX OOB Swaps verwendet, um eine Reihe von Zeilen in einer Tabelle zu aktualisieren. Um dies zu tun, wollte ich wissen, welche Zeilen derzeit in der Tabelle angezeigt wurden.

Die Erweiterung

export default {
    encodeParameters: function (xhr, parameters, elt) {
        const ext = elt.getAttribute('hx-ext') || '';
        if (!ext.split(',').map(e => e.trim()).includes('dynamic-rowids')) {
            return null; // Use default behavior
        }

        const id = elt.dataset.id;
        const approve = elt.dataset.approve === 'true';
        const minimal = elt.dataset.minimal === 'true';
        const single = elt.dataset.single === 'true';

        const target = elt.dataset.target;
        const payload = { id, approve, minimal, single };

        if (approve && target) {
            const table = document.querySelector(target);
            if (table) {
                const rowIds = Array.from(table.querySelectorAll('tr[id^="row-"]'))
                    .map(row => row.id.replace('row-', ''));
                payload.rowIds = rowIds;
            }
        }

        // Merge payload into the parameters object
        Object.assign(parameters, payload);
        return null; // Return null to continue with default URL-encoded form encoding
    }
}

Es zu benutzen

Um es zu verwenden, müssen wir die Erweiterung zu unserer HTMX-Konfiguration hinzufügen. Also in Ihrem Einstiegspunkt js Datei Nehmen Sie an, dass Sie sich mit den Modulen ; yoy sollten Sie so etwas tun können

import dynamicRowIds from "./dynamicRowIds"; // Load the file

htmx.defineExtension("dynamic-rowids", dynamicRowIds); // Register the extension

Dann auf welchem Element Sie es verwenden möchten, können Sie die hx-ext Attribut mit dem Wert dynamic-rowids.

                <button
                    hx-ext="dynamic-rowids"
                    data-target="#my-table"
                    data-id="@Model.Id"
                    data-param1="true"
                    data-param2="false"
                    data-param3="@Model.Whatever"
                    hx-post
                    hx-controller="Contoller"
                    hx-action="Action"
                >
                    <i class='bx bx-check text-xl text-white'></i>
                </button>

Params bewahren

Dies ist eine weitere einfache HTMX-Erweiterung. htmx:configRequest Diese Erweiterung ist praktisch, wenn du die Querystring-basierte Filterung usw. verwendest.. und du möchtest, dass einige Anfragen vorhandener Filter erhalten, während andere nicht .g,, sondern ' und 'startdate', aber nicht ' oder ', sondern ').,

Dies ist SIMILAR, aber nicht genau das gleiche wie die bestehende HTMX-Erweiterung push---Params

Die Erweiterung

Du kannst sehen, dass wir haken onEvent zu hören für die htmx:configRequest Ereignis

Dann werden wir uns anstrengen

• Holen Sie sich das Element, das das Ereignis ausgelöst hat
• Holen Sie sich die preserve-params-exclude Attribut aus dem Element (, wenn es existiert, ) und teilt es in ein Array von Schlüsseln, um auszuschließen, dass wir nicht hinzufügen ', sie zu der Anfrage
• Holen Sie sich die aktuellen URL-Parameter vom Fensterort
• Holen Sie sich die neuen Parameter aus der Request URL
• Schleifen Sie durch die aktuellen Parameter und überprüfen, ob sie nicht in der Ausschlussliste sind und nicht bereits in den neuen Parametern
• Wenn sie nicht sind, fügen wir sie zu den neuen Parametern hinzu
• Schließlich setzen wir die neuen Parameter auf die Request-URL und geben true zurück, um mit der Request fortfahren zu können.

export default {
    onEvent: function (name, evt) {
        if (name !== 'htmx:configRequest') return;
        const el = evt.detail.elt;
        const excludeStr = el.getAttribute('preserve-params-exclude') || '';
        const exclude = excludeStr.split(',').map(s => s.trim());

        const currentParams = new URLSearchParams(window.location.search);
        const newParams = new URLSearchParams(evt.detail.path.split('?')[1] || '');

        currentParams.forEach((value, key) => {
            if (!exclude.includes(key) && !newParams.has(key)) {
                newParams.set(key, value);
            }
        });

        evt.detail.path = evt.detail.path.split('?')[0] + '?' + newParams.toString();

        return true;
    }
};

Hier verwende ich das Wesentliche HTMX-.-Net für seine Tag-Hilfskräfte. hx-controller und hx-action sind Tag-Helper, die die richtigen HTMX-Attribute für Sie generieren hx-route-<x> für die Werte, die in der Route übergeben werden können Dieses ist wirklich nützlich, da es Ihnen erlaubt, den Code zu verwenden, um die korrekten Werte für die Attribute zu erzeugen, anstatt sie in Ihrem HTML programmieren zu müssen.

Es zu benutzen

Es ist eine Erweiterung, die es wirklich einfach zu verwenden ist.

Zuerst müssen wir die Erweiterung zu unserer HTMX-Konfiguration hinzufügen.

import preserveParams from './preserveParams.js';
htmx.defineExtension('preserve-params', preserveParams);

HINWEIS:-You-'-ll beachten, dass die Standard-HTMX-Erweiterungen verwenden Sie die Methode ' zum Laden der Erweiterung "MSC4"

// Autoloading the extension and registering it
(function() {
  htmx.defineExtension('debug', {
}

Dies ist ein guter Weg, um es zu tun, wenn du HTMX in einer nicht-- modulen Umgebung verwendest ,. , jedoch , wenn Sie , ' , die Module verwenden , ( , welche Sie besser sein sollten , um die import Erklärung, um die Erweiterung laden dann explizit registrieren Sie es gegen Ihre htmx instance..- Dies ermöglicht es Ihnen, die Vorteile von tree.--Shaking zu nutzen und nur die Erweiterungen zu laden, die Sie benötigen.

Dann können Sie auf Ihrem Element die hx-ext Attribut mit dem Wert preserve-params und der preserve-params-exclude Attribut mit einer durch Komma getrennten Liste der Parameter, um von der Anfrage auszuschließen

<a class="btn-outline-icon"
   hx-controller="MyController"
   hx-action="MyAction"
   hx-route-myparam="@MyParam"
   hx-push-url="true"
   hx-ext="preserve-params"
   preserve-params-exclude="page,sort"
   hx-target="#page-content"
   hx-swap="innerHTML show:top"
   hx-indicator>
    <i class="bx bx-search"></i>
</a>

In diesem Fall aufgrund der event.detail.path mit dem neuen myparam value set it in it - MSA Ersetzen Sie diesen mit unserem neuen Wert, aber bewahren Sie alle anderen page und sortSo können wir halten übergeben alle Filter, die wir in der URL auf den Server gesetzt haben, ohne sich Sorgen um sie verloren gehen zu lassen, wenn wir eine neue Anfrage stellen.

ASP-.-NET Kern

Eine der ordentlichen Sachen über HTMX ist, dass viel von seiner Interaktion mit dem Server durch HTTP-Header geschieht.Diese Header bieten dem Server einen reichhaltigen Kontext darüber, was die Anfrage ausgelöst hat.,...

Auch hier ist ein Schlüsselbestandteil HTMX-.-NetUnter vielen der Gegenstände, die es zur Verfügung stellt sind ordentlich Request Erweiterungen zur Erkennung von HTMX-Anfragen Dies ist nützlich, um festzustellen, ob eine Anfrage von OTMX oder nicht gemacht wurde, und es entsprechend zu handhaben.

Es hat auch einen eigenen Mechanismus, um Trigger zu senden

Response.Htmx(h => {
    h.WithTrigger("yes")
     .WithTrigger("cool", timing: HtmxTriggerTiming.AfterSettle)
     .WithTrigger("neat", new { valueForFrontEnd= 42, status= "Done!" }, timing: HtmxTriggerTiming.AfterSwap);
});

Drücke Urls usw. Khalid hat eine große Arbeit der Schaffung eines Satzes von Erweiterungen, um es einfach zu arbeiten mit HTMX in ASP-....

Es ist ein Schlüssel-Tool in meiner Toolbox, wenn es mit HTMX und ASP...NET Core®. zusammenarbeitet Sehen Sie es sich an.

Häufige HTMX-Anforderung Header

Hier ist eine Aufschlüsselung der nützlichsten Header, die HTMX mit jeder Anfrage sendet.

Beschreibung |----------------------------|------------------------------------------------------------------------------------------------------------------| |-HX---Anfrage anfordern |-Antrag immer für jede HTMX eingestellt --Einleitungsanfrage T.-Anrufe in Middleware oder Controllern zu erkennen Die ID des Zielelements in der DOM, dass die Antwort wird in getauscht werden. Die ID des Elements, das die Anforderung ausgelöst hat Der Name des auslösenden Elements ist für Formulare nützlich. Beinhaltet Benutzereingaben von hx, -, prompt., Die Browser-URL, wenn die Anfrage gestartet wurde, ist nützlich für das Protokollieren und den Kontext. |-HX---Geschichte--Restore--Request Als wahr gesendet, wenn die Anfrage Teil einer historischen Wiederherstellung nach der Navigation ist .-G.,-Rückenknopf

Verlängerungen beantragen

Ich verwende diese ziemlich ausgiebig in meinen ASP-.-NET Core-Apps, kombiniert mit den HTMX-MSC2-Net Anwendungen wie Request.IsHtmx() , Request.IsHtmxBoosted() und Request.IsHtmxNonBoosted() Sie können HTMX-Anfragen leicht erkennen und entsprechend reagieren

Zum Beispiel haben Sie eine wirklich einfache Erweiterung zu Anfrage, mit der ich erkennen kann, ob eine Anfrage auf mein Hauptziel ausgerichtet ist #page-content Wenn es dann IST, weiß ich, dass ich eine teilweise senden sollte HINWEIS:. Viele don-'.t erkennen, dass Sie eine vollständige Seite angeben können.

        if (Request.PageContentTarget())
        {   
            Response.PushUrl(Request);
            return PartialView("List", vm);
        }
        return View("List", vm);
        
        public static class RequestExtensions
{
        
        public static bool PageContentTarget(this HttpRequest request)
    {
        bool isPageContentTarget = request.Headers.TryGetValue("hx-target", out var pageContentHeader) 
                                   && pageContentHeader == "page-content";
        
        return isPageContentTarget;
    }
    }

Ansprechverlängerungen

Zusätzlich zu Request-Erweiterungen können Sie auch Response-Erweiterungs erstellen, um Ereignisse an den Client zurückzuschicken.Dies ist nützlich für das Auslösen von clientseitigen Ereignissen.

Beispiel für SweetAlert

Zum Beispiel in meiner SweetAlert-2-Integration Ich aktiviere das Schließen des Dialogs mit einem Trigger, der vom Server gesetzt wird.

    document.body.addEventListener('sweetalert:close', closeSweetAlertLoader);

Dies wird vom Server als HTMX Trigger Ereignis ausgelöst.

    public static void CloseSweetAlert(this HttpResponse response)
    {
        response.Headers.Append("HX-Trigger" , JsonSerializer.Serialize(new
        {
            sweetalert = "close"
        }));

    }

Dies löst die sweetalert:close Event auf der Client-Seite, mit dem Sie den Dialog schließen können, können Sie auch Daten an den Client übergeben. HX-Trigger Dies ist nützlich, um Daten vom Server an den Client weiterzugeben, ohne den HTML- oder JavaScript-Code ändern zu müssen.

Wie du es siehst – 's tot leicht zu hören für diese Ereignisse, indem ich einfach einen Event-Hörer in den Körper einfüge – .. Ich verwende JSON hauptsächlich, da er immer richtig kodiert.

Toast anzeigen

Ich schrieb über meine Toast-Methode vorher HierherUm den Server sehr einfach zu aktivieren, um eine Toast-Benachrichtigung auf der Clientseite auszulösen, habe ich den Auslöser in dieser Response-Erweiterung gesetzt.

    public static void ShowToast(this HttpResponse response, string message, bool success = true)
    {
        response.Headers.Append("HX-Trigger", JsonSerializer.Serialize(new
        {
            showToast = new
            {
                toast = message,
                issuccess =success
            }
        }));

    }

Ich klinke mich dann in die Event-Client-Seite und rufe meine showToast Funktion„."

import { showToast, showHTMXToast } from './toast';

window.showHTMXToast = showHTMXToast;

document.body.addEventListener("showToast", showHTMXToast);

Dies ruft dann in meine showToast Funktion und gut ,,' zeigt einen Toast , ;' wieder mehr darüber sehen im Artikel .

export function showHTMXToast(event) {
    const xhr = event?.detail?.xhr;
    let type = 'success';
    let message = xhr?.responseText || 'Done!';

    try {
        const data = xhr ? JSON.parse(xhr.responseText) : event.detail;

        if (data.toast) message = data.toast;
        if ('issuccess' in data) {
            type = data.issuccess === false ? 'error' : 'success';
        } else if (xhr?.status >= 400) {
            type = 'error';
        } else if (xhr?.status >= 300) {
            type = 'warning';
        }

    } catch {
        if (xhr?.status >= 400) type = 'error';
        else if (xhr?.status >= 300) type = 'warning';
    }

    showToast(message, 3000, type);
}

Schlussfolgerung

Na ja, das ist es.,. Eine Wirbelwindtour von HTMX und ASP.MSC2.NET Core... .. Ich hoffe, Sie fanden sie nützlich und informativ... Wenn Sie Fragen oder Kommentare haben, zögern Sie nicht unten zu kommentieren

Verwandte Artikel auf diesem Blog

Gesellschafter Artikel

Dieser Artikel ist Teil einer zweiseitigen Serie auf HTMX mit ASP-..NET Core-:.

1. HTMX mit ASP-.-NET Core Partials Fokussierung auf die Kernintegration von ASP ,. ,NET , , , Teilansichten von , HTMX , . , und Pagination
2. Dieser Artikel Deep tauchen Sie ein in HTMX-Ereignisse, Lifecycle, Erweiterungsarchitektur und benutzerdefinierte Erweiterungen

Weitere HTMX-Artikel

• Paging mit HTMX hinzufügen Umsetzung der Pagination mit HTMX
• ASP-.-NET Core Caching mit HTMX Caching-Strategien für HTMX Anfragen
• Mit Alpine und HTMX wieder auffrischen Kombination von Alpine-.®js mit HTMX für reaktive Komponenten
• Machen Sie Ihre Website mehr SPA--elike mit HTMX Navigation ohne JavaScript-Frames
• Verwendung von SweetAlert für HX-Indikatoren Schöne Ladeanzeigen mit HTMX
• Zeigt Toast und Swapping mit HTMX Benachrichtigte Toast-Meldungen

Literaturhinweise

Offizielle HTMX-Dokumentation

• HTMX-Dokumentation Die offizielle HTMX-Dokumentation
• HTMX-Ereignisse Referenz Vollständige Liste der HTMX-Ereignisse
• HTMX-Erweiterungen Offizielle HTMX-Erweiterungen
• HTMX-Beispiele Praktische Beispiele für HTMX-Muster
• HTMX Abhandlungen Nachdenkliche Artikel über HTMX Philosophie

Bibliotheken Werkzeuge

• HTMX-.-NET GitHub Code für die HTMX-Bibliothek
• HTMX-.-NET NuGet HTMX-.-NET auf NuGet
• Website von Khalid Abuhakmeh' Der Schöpfer von HTMX-.-NET
• Alpine-.-Dokumentation Amtliche Veröffentlichungen der Europäischen Gemeinschaften

Gemeinschaftsressourcen

• HTMX-Diskord Aktive Community-Unterstützung
• Hypermedia Systems Buch Kostenloses Online-Buch über den Aufbau von Hypermedia-Anwendungen