Beispiel: Eine Seite von Grund auf #

Dieses Beispiel zeigt, wie Sie eine interne Webseite für EULANDA erstellen — von der minimalen HTML-Struktur bis zur fertigen Seite mit Navigation, Datenbankzugriff und Berichtsaufruf.

Zeichensatz #

Das eulanda://-Protokoll liefert alle Inhalte als UTF-8 aus. Intern werden sämtliche Texte im SQL Server als Unicode gespeichert. Verwenden Sie daher in Ihren Seiten immer:

<meta charset="utf-8" />

Hinweis: Die Bibliothek forms.js wird weiterhin mit charset="ISO-8859-1" eingebunden, da sie selbst nur ASCII-Zeichen enthält. Für Ihre eigenen Seiten und Skripte gilt jedoch UTF-8.

Beispiel anlegen und aufrufen #

Um ein Beispiel direkt in EULANDA auszuprobieren, legen Sie es in der SQL-Registry unter \USER\.ALLUSER\WEB\ an:

Öffnen Sie den Registry-Editor in EULANDA
Navigieren Sie zu \USER\.ALLUSER\WEB\
Erstellen Sie dort eine neue Zeichenfolge mit dem Namen sdk-beispiel-1.htm
Klicken Sie mit der rechten Maustaste auf den Eintrag und wählen Sie Ändern mit → Mehrzeiligem Editor
Kopieren Sie den HTML-Code in den Editor und speichern Sie mit Strg+S

Zum Aufrufen der Seite gehen Sie auf die EULANDA-Startseite und wählen im Menü Ansicht → URL öffnen. Geben Sie dort ein:

eulanda://./ALLUSER/sdk-beispiel-1.htm

Minimale Seite #

Die einfachste funktionsfähige Seite:

<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=11" />
  <link rel="stylesheet" type="text/css" href="eulanda://./w3eulanda.css" />
  <script src="eulanda://./forms.js" charset="ISO-8859-1"></script>
</head>
<body class="w3-light-grey">
  <div class="w3-container">
    <h2>Meine Seite</h2>
    <p>Hallo aus dem eingebetteten Browser!</p>
  </div>
</body>
</html>

Diese Seite lädt das CSS-Framework und forms.js, sodass die Host-Objekte (client, ellib etc.) zur Verfügung stehen.

Seite mit Datenbankzugriff #

Im nächsten Schritt lesen Sie Daten aus der EULANDA-Datenbank und zeigen sie in einer Tabelle an:

<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=11" />
  <link rel="stylesheet" type="text/css" href="eulanda://./w3eulanda.css" />
  <script src="eulanda://./forms.js" charset="ISO-8859-1"></script>
</head>
<body class="w3-light-grey">
  <div class="w3-container">
    <h2>Top 10 Kunden</h2>
    <table class="w3-table w3-striped w3-white" id="tabKunden">
      <tr>
        <th>Match</th>
        <th>Name</th>
        <th>Ort</th>
      </tr>
    </table>
  </div>

  <script>
    var kunden = executeSql(
      "select top 10 Match, Name1, Ort from Adresse order by Name1"
    );

    var tab = g("tabKunden");
    for (var i = 0; i < kunden.length; i++) {
      var tr = document.createElement("TR");
      tr.innerHTML =
        "<td>" + kunden[i].Match + "</td>" +
        "<td>" + kunden[i].Name1 + "</td>" +
        "<td>" + kunden[i].Ort + "</td>";
      tab.insertAdjacentElement("beforeend", tr);
    }
  </script>
</body>
</html>

Für eine vollwertige Seite mit Seitennavigation und Menü verwenden Sie das SSI-System:

<!--#SET VAR="PG_NAME" value="meinkunden"-->
<!--#SET VAR="PG_TITLE" value="Meine Kundenübersicht"-->
<!--#INCLUDE VIRTUAL="/include/page-head.inc" PATCH=SSI-->
<!--#INCLUDE VIRTUAL="/include/side-nav.htm"-->
<!--#INCLUDE VIRTUAL="/include/page-content.inc" PATCH=SSI-->
</body>
<!--#INCLUDE VIRTUAL="/include/page-customscripts.inc" PATCH=REPLACE-->

<script>
  currentDOC = "Eulanda.Adresse";
  currentMenu = g("mnuNav");
   
  // Daten in den Inhaltsbereich laden
  var kunden = executeSql( "select top 10 id, Match, Name1, Ort from Adresse " +
    " where id in (select top 100 adresseid from Auftrag order by id desc) order by Match "
  );
    
  // Menü aufbauen
  
  if (kunden) {
    addMenu("BERICHTE", "Berichte für " + kunden[0].Match);
    addMenuAllReportItem("BERICHTE", Number(kunden[0].id));
  } else {
    addMenu("BERICHTE", "(kein Kunde vorhanden)");     
  }

  addMenu("MODULE", "Module");
  addMenuFormItem("MODULE", "Adressverwaltung", "cnsoft.Adresse.Standard");

  var html = "<table class='w3-table w3-striped'>";
  html += "<tr><th>Match</th><th>Name</th><th>Ort</th></tr>";
  for (var i = 0; i < kunden.length; i++) {
    html += "<tr>";
    html += "<td><a href='eulanda://./DOC/Eulanda.Adresse/" +
      kunden[i].id + "'>" + kunden[i].Match + "</a></td>";
    html += "<td>" + kunden[i].Name1 + "</td>";
    html += "<td>" + kunden[i].Ort + "</td>";
    html += "</tr>";
  }
  html += "</table>";
  g("mnuClientLeft").innerHTML = html;
</script>
</html>

Diese Seite verwendet:

SSI-Includes für das Standard-Layout (Navigation, Header, Content-Bereich)
currentDOC für die automatische Berichtsauflistung
addMenuFormItem mit automatischer Zugriffsprüfung
executeSql für den Datenbankzugriff
eulanda://-Links zum Öffnen von Datensätzen

Seite ohne Host testen #

Wenn Sie eine Seite außerhalb von EULANDA im normalen Browser entwickeln möchten, prüfen Sie die Verfügbarkeit der Host-Objekte:

<script>
  if (!client) {
    // Fallback für lokale Entwicklung
    document.title = "Testmodus (ohne EULANDA)";
    g("mnuClientLeft").innerHTML =
      "<p class='w3-orange w3-padding'>Kein Host verfügbar. " +
      "Testdaten werden angezeigt.</p>";
  } else {
    // Normaler Betrieb mit Datenbankzugriff
    var daten = executeSql("select ...");
    // ...
  }
</script>

Die Bibliothek forms.js setzt die Host-Objekte nur, wenn window.external.ClientInContext vorhanden ist. Ansonsten bleiben sie undefined, und Sie können in Ihrem Code entsprechend reagieren.

Benutzerspezifische Erweiterung #

Über das page-customscripts.inc-Include werden automatisch benutzerdefinierte Skripte geladen. Wenn Sie eine Seite mit PG_NAME = "meinkunden" erstellt haben, kann ein Solution-Partner unter

ALLUSER/customize_web/meinkunden.js

zusätzliche Menüpunkte oder Funktionen hinzufügen, ohne die Originalseite zu verändern.