Tutorial für die Anwendungsentwicklung </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#the-goal" class="sidebar-link">Das Ziel </a></li><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#part-1-the-environment" class="sidebar-link">Teil 1: Die Umwelt </a></li><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#part-2-contract" class="sidebar-link">Teil 2: Vertrag </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#creator-account" class="sidebar-link">Creator-Konto </a></li><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#new-application" class="sidebar-link">Neue Bewerbung </a></li><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#new-database-table" class="sidebar-link">Neue Datenbanktabelle </a></li><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#new-contract" class="sidebar-link">Neuer Vertrag </a></li></ul></li><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#part-3-page" class="sidebar-link">Teil 3: Seite </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#new-field" class="sidebar-link">Neues Feld </a></li><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#update-the-contract" class="sidebar-link">Aktualisieren Sie den Vertrag </a></li><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#page" class="sidebar-link">Buchseite </a></li></ul></li><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#part-4-application" class="sidebar-link">Teil 4: Bewerbung </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#menu" class="sidebar-link">Speisekarte </a></li><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#send-a-message" class="sidebar-link">Eine Nachricht schicken </a></li><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#form-navigation" class="sidebar-link">Formularnavigation </a></li><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#full-page-code-2" class="sidebar-link">Vollständiger Seitencode </a></li></ul></li><li class="sidebar-sub-header"><a href="/de/tutorials/app_tutorial.html#conclusions" class="sidebar-link">Schlussfolgerungen </a></li></ul></li><li><a href="/de/tutorials/tutorial.html" class="sidebar-link">IBAX Development Tutorial </a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="tutorial-for-application-development"><a href="#tutorial-for-application-development" class="header-anchor">#</a> Tutorial für die Anwendungsentwicklung </h1> <p>In diesem Abschnitt zeigen wir Ihnen, wie Sie eine einfache Anwendung im IBAX-Netzwerk entwickeln.</p> <ul><li><a href="#the-goal">Das Ziel</a> <ul><li><a href="#part-1-the-environment">Teil 1: Die Umwelt</a></li> <li><a href="#part-2-contract">Teil 2: Vertrag</a> <ul><li><a href="#creator-account">Creator-Konto</a></li> <li><a href="#new-application">Neuer Antrag</a></li> <li><a href="#new-database-table">Neue Datenbanktabelle</a></li> <li><a href="#new-contract">Neuer Vertrag</a> <ul><li><a href="#contract-code">Vertragscode</a></li> <li><a href="#create-a-contract">Vertrag erstellen</a></li> <li><a href="#contract-name">Vertragsname</a></li> <li><a href="#data">Daten</a></li> <li><a href="#conditions">Bedingungen</a></li> <li><a href="#action">Aktion</a></li> <li><a href="#full-contract-code">Vollständiger Vertragscode</a></li> <li><a href="#save-and-run">Speichern und ausführen</a></li></ul></li></ul></li> <li><a href="#part-3-page">Teil 3: Seite</a> <ul><li><a href="#new-field">Neues Feld</a></li> <li><a href="#update-the-contract">Vertrag aktualisieren</a></li> <li><a href="#page">Seite</a> <ul><li><a href="#designer-views">Designer-Ansichten</a></li> <li><a href="#developer-view">Entwickleransicht</a></li> <li><a href="#fetch-data-from-the-database-table">Daten aus der Datenbanktabelle holen</a></li> <li><a href="#full-page-code-1">Ganzseitiger Code</a></li> <li><a href="#save-the-page">Seite speichern</a></li></ul></li></ul></li> <li><a href="#part-4-application">Teil 4: Bewerbung</a> <ul><li><a href="#menu">Menü</a> <ul><li><a href="#add-a-menu-item">Einen Menüpunkt hinzufügen</a></li> <li><a href="#test-the-new-menu-item">Neues Menüelement testen</a></li></ul></li> <li><a href="#send-a-message">Nachricht senden</a> <ul><li><a href="#form">Formular</a></li></ul></li> <li><a href="#form-navigation">Formularnavigation</a> <ul><li><a href="#navigation-buttons">Navigationsschaltflächen</a></li> <li><a href="#variables">Variablen</a></li> <li><a href="#entry-count">Anzahl der Einträge</a></li> <li><a href="#table-offset">Tabellenoffset</a></li> <li><a href="#button-code">Schaltflächencode</a></li> <li><a href="#page-refreshing">Seitenaktualisierung</a></li></ul></li> <li><a href="#full-page-code-2">Vollständiger Seitencode</a></li></ul></li> <li><a href="#conclusions">Schlussfolgerungen</a></li></ul></li></ul> <h2 id="the-goal"><a href="#the-goal" class="header-anchor">#</a> Das Ziel </h2> <p>Die Anwendung beginnt mit einfachen Funktionen, wird aber im Laufe des Tutorials immer komplexer.</p> <p>In der endgültigen Version der Anwendung werden einige einfache Nachrichten (Strings) in einer Datenbanktabelle gespeichert, die die Zeitstempel und Kontokennungen der Absender enthält. Benutzer können die Nachrichtenliste anzeigen und eine neue Nachricht von der Anwendungsseite hinzufügen, auf die über das Menü des Ökosystems zugegriffen werden kann.</p> <h2 id="part-1-the-environment"><a href="#part-1-the-environment" class="header-anchor">#</a> Teil 1: Die Umwelt </h2> <p><strong>Weber</strong></p> <p>Als einziger Client von IBAX stellt Weaver Funktionen für alle Benutzer und Ökosystemrollen bereit. Damit können Anwendungsentwickler ihre Anwendungen entwickeln und testen, Ökosystemadministratoren können ihre Ökosysteme verwalten, während Benutzer mit den Ökosystemen interagieren können.</p> <p>In diesem Tutorial codieren Sie Verträge, Seitenvorlagen und führen alle anderen Aktionen in Weaver aus. Weaver bietet auch eine Möglichkeit, Vertragscodes wiederherzustellen, zu speichern und auszuführen, Datenstrukturen (Datenbanktabellen) zu verwalten, Zugriffsberechtigungen zuzuweisen und Anwendungen zu erstellen.</p> <p>Jeder Knoten hat seine eigene Weaver-Instanz.</p> <h2 id="part-2-contract"><a href="#part-2-contract" class="header-anchor">#</a> Teil 2: Vertrag </h2> <p>Ihre erste einfache Anwendung ist „Hello, World!“.</p> <blockquote><p>Hinweis</p></blockquote> <blockquote><p>In dieser Anwendung werden Zeichenfolgen in einer Datenbanktabelle gespeichert, und es gibt keine Benutzerseite.</p></blockquote> <h3 id="creator-account"><a href="#creator-account" class="header-anchor">#</a> Creator-Konto </h3> <p>Konten mit der Entwicklerrolle werden die „Root“-Privilegien des Ökosystems zugewiesen. Standardmäßig kann diese Rolle auf alle Aktionen zugreifen. In einem neuen Ökosystem wird dem Erstellerkonto die Admin-Rolle zugewiesen, die Sie verwenden müssen, um größere Änderungen am Ökosystem vorzunehmen, z. B. das Erstellen neuer Anwendungen und Datenbanktabellen.</p> <p>Melden Sie sich mit dem Erstellerkonto beim Ökosystem an.</p> <h3 id="new-application"><a href="#new-application" class="header-anchor">#</a> Neue Bewerbung </h3> <p>Sobald Sie sich als Ersteller des Ökosystems angemeldet haben, können Sie eine neue Anwendung erstellen.</p> <p>Erstellen Sie eine neue Anwendung:</p> <ol><li><p>Gehen Sie zur Registerkarte Entwickler;</p></li> <li><p>Wählen Sie Anwendung im Menü auf der linken Seite;</p></li> <li><p>Wählen Sie Neu auf der Anwendungsseite;</p></li> <li><p>Geben Sie den Anwendungsnamen im Feld Name an;</p></li> <li><p>Bedingungen auf <code>true</code> setzen;</p></li></ol> <p><code>true</code> bedeutet, dass jeder Änderungen an der Anwendung vornehmen kann;</p> <p>Eine weitere Option ist <code>ContractConditions("MainCondition")</code>, was bedeutet, dass niemand außer dem Ersteller Änderungen an der Anwendung vornehmen kann.</p> <ol start="6"><li>Ihre Anwendung wird in der Anwendungsliste angezeigt, klicken Sie auf das Namensfeld einer bestimmten Anwendung, um sie zu aktivieren.</li></ol> <blockquote><p>Hinweis</p></blockquote> <blockquote><p>Sie können auf relevante Ressourcen zugreifen, indem Sie auf der Registerkarte „Entwickler“ auf eine Anwendung klicken, ohne Auswirkungen auf das Ökosystem. Egal für welche Sie sich entscheiden, alle Ökosystemanwendungen sind weiterhin verfügbar.</p></blockquote> <h3 id="new-database-table"><a href="#new-database-table" class="header-anchor">#</a> Neue Datenbanktabelle </h3> <p>Erstellen Sie zum Speichern der Daten eine Datenbanktabelle für die Anwendung in Weaver.</p> <p>Erstellen Sie eine Datentabelle:</p> <ol><li>Wählen Sie auf der Registerkarte „Entwickler“ Anwendung – Name > Datenbanktabelle;</li></ol> <p>Hier werden alle Datenbanktabellen zur ausgewählten Anwendung angezeigt. Wenn die Liste leer ist, wurden noch keine Datenbanktabellen für Ihre Anwendung erstellt.</p> <ol start="2"><li>Klicken Sie auf Neu;</li></ol> <p>Weaver zeigt Ihnen die Seite zum Erstellen einer neuen Datenbanktabelle.</p> <ol start="3"><li><p>Geben Sie den Namen im Feld Name an; In diesem Tutorial lautet der Name der Datenbanktabelle <code>apptable</code>.</p></li> <li><p>Fügen Sie die Spalte <code>message</code> hinzu, legen Sie ihren Typ als <code>Text</code> fest;</p></li></ol> <div class="language- extra-class"><pre><code>Diese Tabelle muss zwei Spalten haben: `id` (vordefiniert) und `message`. Sie werden später weitere Spalten hinzufügen. </code></pre></div><ol start="5"><li>Setzen Sie in Bezug auf die Lese- und Schreibberechtigungen jedes Feld auf <code>true</code>;</li></ol> <div class="language- extra-class"><pre><code>Dies ermöglicht es jedem, Einträge in die Datenbanktabelle einzufügen, zu aktualisieren, Spalten hinzuzufügen und Eintragsdaten zu lesen; Optional können Sie die Lese- und Schreibrechte für das Erstellerkonto reservieren. Setzen Sie in diesem Fall dieses Feld auf `ContractConditions("MainCondition")`. </code></pre></div><h3 id="new-contract"><a href="#new-contract" class="header-anchor">#</a> Neuer Vertrag </h3> <h4 id="contract-code"><a href="#contract-code" class="header-anchor">#</a> Vertragscode </h4> <p>Jeder Vertrag besteht aus drei Teilen. Weitere Einzelheiten finden Sie unter: <a href="/de/topics/script.html#contract-structure">Contract scructure</a>。</p> <h4 id="create-a-contract"><a href="#create-a-contract" class="header-anchor">#</a> Vertrag erstellen </h4> <ol><li>Wählen Sie auf der Registerkarte „Entwickler“ Anwendung – Name > Vertrag;</li></ol> <p>Hier werden alle Verträge im Zusammenhang mit der Bewerbung angezeigt. Bei Neuanmeldungen ist die Liste leer.</p> <ol start="2"><li>Klicken Sie auf Neu;</li></ol> <p>Im Editor wird eine neue Vertragsvorlage angezeigt.</p> <p>Eine leere Vertragsvorlage wird wie folgt angezeigt:</p> <div class="language- extra-class"><pre class="language-text"><code>contract ... { data { } conditions { } action { } } </code></pre></div><h4 id="contract-name"><a href="#contract-name" class="header-anchor">#</a> Vertragsname </h4> <p>Bitte geben Sie zunächst den Vertragsnamen an.</p> <div class="language- extra-class"><pre class="language-text"><code> contract AppContract { } </code></pre></div><h4 id="data"><a href="#data" class="header-anchor">#</a> Daten </h4> <p>Füllen Sie den Abschnitt <code>data</code> aus.</p> <p>Im folgenden Beispiel bezieht sich <code>message</code> auf den Variablennamen, während <code>string</code> auf den Variablentyp verweist.</p> <div class="language- extra-class"><pre class="language-text"><code> data { Message string } </code></pre></div><h4 id="conditions"><a href="#conditions" class="header-anchor">#</a> Bedingungen </h4> <p>Füllen Sie den Abschnitt "<code>condition</code>" aus. Eine einfache Überprüfungsbedingung besteht darin, leere Zeichenfolgen zu vermeiden. Wenn die Länge von <code>Message</code> <code>0</code> ist, wird eine vordefinierte Warnmeldung bei der Ausführung des Vertrags ausgelöst.</p> <div class="language- extra-class"><pre class="language-text"><code>conditions { // avoid writing empty strings if Size($Message) == 0 { error "Message is empty" } } </code></pre></div><h4 id="action"><a href="#action" class="header-anchor">#</a> Handlung </h4> <p>Füllen Sie den Abschnitt <code>action</code> aus. Eine einfache Aktion besteht darin, <code>Message</code> in die Datentabelle zu schreiben.</p> <div class="language- extra-class"><pre class="language-text"><code> action { DBInsert("apptable", {message: $Message}) } </code></pre></div><h4 id="full-contract-code"><a href="#full-contract-code" class="header-anchor">#</a> Vollständiger Vertragscode </h4> <p>Der vollständige Vertragscode wird unten angezeigt.</p> <p>Alle Verträge in IBAX werden so aufgebaut, einschließlich der Abschnitte <code>data</code>, <code>condition</code> und <code>action</code>.</p> <div class="language- extra-class"><pre class="language-text"><code>contract AppContract { data { Message string } conditions { // avoid writing empty strings if Size($Message) == 0 { error "Message is empty" } } action { DBInsert("apptable", {message: $Message}) } } </code></pre></div><h4 id="save-and-run"><a href="#save-and-run" class="header-anchor">#</a> Speichern und ausführen </h4> <p>Jetzt bereiten wir uns darauf vor, den Vertrag zu testen:</p> <ol><li>Klicken Sie im Menü des Editors auf Speichern;</li></ol> <p>Dadurch wird der Vertragscode aktualisiert und die aktualisierte Version steht allen Netzwerkknoten zur Verfügung.</p> <ol start="2"><li>Klicken Sie im Menü des Editors auf Ausführen;</li></ol> <p>Dadurch wird die Seite Vertrag ausführen angezeigt.</p> <ol start="3"><li>Geben Sie auf der Seite Vertrag ausführen die Eingabeparameter des Vertrags ein;</li></ol> <p>Da dieser Vertrag einen Parameter <code>Message</code> hat, setzen Sie <code>Message</code> im feld schlüssel und <code>Hello, World</code> im feld wert.</p> <ol start="4"><li>Click run.</li></ol> <p>The result will be displayed at the right.</p> <p>If successfully added some strings, then, the result will contain the block ID and result code to introduce the change of transactions.</p> <div class="language- extra-class"><pre class="language-text"><code>{ "block": "31", "result": null } </code></pre></div><h2 id="part-3-page"><a href="#part-3-page" class="header-anchor">#</a> Teil 3: Seite </h2> <p>Wenn der Vertrag in Kraft tritt, ist es an der Zeit, ihn um etwas Sinnvolles zu erweitern. In diesem Teil implementieren Sie die Benutzeroberfläche und andere Funktionen.</p> <p>Klasse</p> <p>In dieser Anwendung werden Zeichenfolgen wie Einträge in einem Protokoll in einer Datenbanktabelle gespeichert. Jede Zeichenfolge hat einen Autor und einen Zeitstempel.</p> <p>Benutzer können die Liste der auf der Anwendungsseite gespeicherten Zeichenfolgen anzeigen, die dann als einfaches Formular angezeigt wird.</p> <h3 id="new-field"><a href="#new-field" class="header-anchor">#</a> Neues Feld </h3> <p>Bearbeiten Sie wie zuvor die Datenbanktabelle auf der Registerkarte Entwickler > Anwendung - Name > Seite Datenbanktabelle;</p> <ul><li><p>Fügen Sie die folgenden Felder in <code>apptable</code> hinzu:</p></li> <li><p><code>author</code>, Feldtyp <code>number</code>, setze Change auf <code>true</code>;</p></li> <li><p>Dieses Feld speichert die Kennung des Autorenkontos.</p></li> <li><p><code>timestamp</code> , Feldtyp <code>Date/Time</code>, setze Change auf <code>true</code>.</p></li></ul> <h3 id="update-the-contract"><a href="#update-the-contract" class="header-anchor">#</a> Aktualisieren Sie den Vertrag </h3> <p>Wir werden den Vertragscode aktualisieren, um die Autoren-ID und den Zeitstempel zu verarbeiten.</p> <p>Die Autoren-ID ist die Konto-ID des Ökosystems. Der Zeitstempel ist das Datum und die Uhrzeit der Vertragsausführung im Unix-Zeitformat.</p> <p>Da beide Werte von den <a href="/de/topics/script.html#variables">Predefined variables</a> bereitgestellt werden und die vordefinierten Variablen nicht eingegeben oder überprüft werden müssen, können sie nur im Aktionsteil aktualisiert werden.</p> <p>Aktualisieren Sie den Vertrag, um die Autoren-ID und den Zeitstempel in die Datenbanktabelle zu schreiben, wenn Sie eine Nachricht hinzufügen, wobei die Autoren-ID durch <code>$key_id</code> definiert wird, während der Zeitstempel durch <code>$time</code> definiert wird.</p> <div class="language- extra-class"><pre class="language-text"><code>action { DBInsert("apptable", {message: $Message, author: $key_id, timestamp: $time}) } </code></pre></div><h3 id="page"><a href="#page" class="header-anchor">#</a> Buchseite </h3> <p>Bei der Anwendungsseite handelt es sich um eine einfache Seite, auf der die in der Datenbanktabelle gespeicherten Nachrichten angezeigt werden.</p> <p>Wie alle anderen Ressourcen können Sie die UI-Seite in Weaver erstellen:</p> <ol><li>Navigieren Sie zur Registerkarte Entwickler, klicken Sie auf Anwendung – Name > Seite;</li></ol> <p>2.Klicken Sie auf Neu; Der visuelle Designer wird in einem neuen Tab geöffnet.</p> <h4 id="designer-views"><a href="#designer-views" class="header-anchor">#</a> Designeransichten </h4> <p>Die Standardseite ist leer. Sie können die vordefinierte Struktur verwenden, um die Seite schnell auszufüllen.</p> <p>Erstellen Sie eine einfache Tabelle:</p> <ol><li><p>Klicken Sie in der Ansichtsauswahl rechts auf Designer; Die Ansicht wird auf den visuellen Designer umgeschaltet.</p></li> <li><p>Wählen Sie im Menü links Tabelle mit Kopfzeile und ziehen Sie sie auf die Seite. Auf der Seite wird eine Tabelle mit mehreren Elementen angezeigt.</p></li></ol> <h4 id=""><a href="#" class="header-anchor">#</a> Entwickleransicht</h4> <p>Da die Benutzerseite von IBAX mit einer <a href="/de/topics/templates2.html">Template Language</a> codiert ist, wechseln Sie bitte beim Schreiben des Seitencodes in die Entwickleransicht.</p> <p>Wechseln Sie in die Entwickleransicht.</p> <ol><li>Klicken Sie in der Ansichtsauswahl rechts auf Entwickler.</li></ol> <p>Die Ansicht wird auf den Editor mit einem Reiter umgeschaltet, der den Seitencode enthält.</p> <h4 id="fetch-data-from-the-database-table"><a href="#fetch-data-from-the-database-table" class="header-anchor">#</a> Daten aus der Datenbanktabelle holen </h4> <p>Bisher nichts mit der Seitenvorlage gemacht. Als Nächstes werden wir den Code aktualisieren, damit die Seite Daten von <code>apptable</code> anzeigen kann.</p> <ol><li>Anfordern von Daten aus der Datenbanktabelle mit der Funktion <a href="/de/topics/script.html#dbfind">DBFind</a>;</li></ol> <p>Im folgenden Beispiel wird dieser Funktionsaufruf verwendet, um Daten aus <code>apptable</code> abzurufen. Die Daten werden in die Quelle <code>src_table</code> gestellt und nach dem Zeitstempelfeld sortiert. <code>src_table</code> wird später als Datenquelle für die Seite in der Tabellenansicht verwendet.</p> <div class="language- extra-class"><pre class="language-text"><code> DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp) </code></pre></div><ol start="2"><li>Um die Daten aus <code>src_table</code> anzuzeigen, geben Sie diese als Datenquelle und den Header in der <code>Table</code>-Funktion an.</li></ol> <div class="language- extra-class"><pre class="language-text"><code> Table(Columns: "AUTHOR=author,TIME=timestamp,MESSAGE=message", Source: src_table) </code></pre></div><ol start="3"><li>Klicken Sie rechts in der Ansichtsauswahl auf Vorschau, um zu prüfen, ob die Daten korrekt angezeigt werden.</li></ol> <h4 id="full-page-code-1"><a href="#full-page-code-1" class="header-anchor">#</a> Ganzseitiger Code </h4> <p>Das Folgende ist der ganzseitige Code für diesen Teil. Diese Basisseite wird später erweitert.</p> <div class="language- extra-class"><pre class="language-text"><code>DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp) Div(Class: panel panel-primary) { Div(Class: panel-heading, Body: Table block) Table(Columns: "AUTHOR=author,TIME=timestamp,MESSAGE=message", Source: src_table) Div(Class: panel-footer text-right) { Button(Class: btn btn-primary, Contract: ContractName, Body: More) } } </code></pre></div><h4 id="save-the-page"><a href="#save-the-page" class="header-anchor">#</a> Seite speichern </h4> <p>Klicken Sie auf Speichern, um die Seite zu speichern:</p> <ol><li><p>Geben Sie <code>AppPage</code> oder einen anderen Namen für die Seite im Feld „Seitenname“ an;</p></li> <li><p>Wählen Sie <code>default_menu</code> im Menü;</p></li> <li><p>Bedingungen auf <code>true</code> setzen;</p></li> <li><p>Klicken Sie auf OK.</p></li></ol> <h2 id="part-4-application"><a href="#part-4-application" class="header-anchor">#</a> Teil 4: Bewerbung </h2> <p>In den vorherigen Abschnitten haben Sie einen Vertrag, eine Tabelle zum Speichern von Daten und eine einfache UI-Seite zum Anzeigen dieser Daten erstellt.</p> <p>In diesem Teil werden Sie die Anwendung fertigstellen, damit ihr Aussehen und ihre Aktionen denen einer tatsächlichen ähneln.</p> <h3 id="menu"><a href="#menu" class="header-anchor">#</a> Speisekarte </h3> <p>Die Seite muss mit einem Menü verknüpft sein, z. B. ist <code>default_page</code>, das auf der Registerkarte „Startseite“ angezeigt wird, mit dem standardmäßigen Ökosystemmenü <code>default_menu</code> verknüpft.</p> <p>Da dieses Anwendungs-Tutorial sehr einfach ist (nur eine Seite hat), muss dafür kein separates Menü erstellt werden. Der neue Menüpunkt im Standardmenü genügt.</p> <blockquote><p>Hinweis</p></blockquote> <blockquote><p>Sie können das Seitenmenü definieren, indem Sie die Seiteneigenschaften auf der Registerkarte Entwickler > Anwendung - Name > Seite bearbeiten. Wenn Ihre App beispielsweise mehrere Seiten hat, müssen Sie möglicherweise ein Menü erstellen, um zwischen diesen Seiten zu navigieren, und es allen Seiten der App zuweisen.</p></blockquote> <h4 id="add-a-menu-item"><a href="#add-a-menu-item" class="header-anchor">#</a> Menüpunkt hinzufügen </h4> <p>Wie alle anderen Ressourcen können Menüs in Weaver erstellt und bearbeitet werden:</p> <ol><li><p>Navigieren Sie zur Registerkarte Entwickler > Menü;</p></li> <li><p>Klicken Sie auf den Namen des Eintrags <code>default_menu</code>;</p></li></ol> <p>Im Editor wird ein neuer Tab geöffnet.</p> <ol start="3"><li>Fügen Sie am Ende der Vorlage einen neuen Menüpunkt hinzu, der zum Öffnen der Anwendungsseite verlinkt wird und dessen Symbol aus dem Symbolsatz <a href="https://fontawesome.com/icons" target="_blank" rel="noopener noreferrer">FontAwesome<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> stammt.</li></ol> <div class="language- extra-class"><pre class="language-text"><code> MenuItem(Title:Messages, Page:AppPage, Icon:"fa fa-envelope") </code></pre></div><ol start="4"><li>Klicken Sie auf Speichern.</li></ol> <h4 id="test-the-new-menu-item"><a href="#test-the-new-menu-item" class="header-anchor">#</a> Testen Sie das neue Menüelement </h4> <p>Prüfen Sie, ob der neue Menüpunkt gültig ist:</p> <ol><li><p>Öffnen Sie die Registerkarte Startseite;</p></li> <li><p>Klicken Sie im Menü auf Aktualisieren;</p> <p>Ein Eintrag mit einer Kopfzeile von Nachrichten wird angezeigt;</p></li> <li><p>Klicken Sie auf Nachrichten.</p> <p>Die Bewerbungsseite wird geöffnet.</p></li></ol> <h3 id="send-a-message"><a href="#send-a-message" class="header-anchor">#</a> Eine Nachricht schicken </h3> <p>Die Schaltflächen in Logicor können je nach Parameter zum Ausführen von Verträgen und Aufrufen von Seiten verwendet werden. Die Funktion <a href="/de/topics/templates2.html#button">Button</a> hat zwei Vertragsparameter:</p> <ul><li><p><code>Contract</code>.</p> <div class="language- extra-class"><pre><code>Name des aktivierten Vertrags. </code></pre></div></li> <li><p><code>Params</code></p> <p>Eingabeparameter des Vertrags.</p></li></ul> <h4 id="form"><a href="#form" class="header-anchor">#</a> Form </h4> <p>Um Daten an den Vertrag zu senden, fügen Sie auf der Antragsseite ein Formular hinzu, das über ein Eingabefeld für eine Nachricht und einen Button zur Aktivierung des Vertrags AppContract verfügen muss.</p> <p>Im Folgenden finden Sie ein Beispiel für diese Art von Formular. Es ist in einem eigenen <a href="/de/topics/templates2.html#div">Div</a> verschachtelt. Platzieren Sie es nach dem Div-Element, das die Formularansicht enthält, wodurch definiert wird, dass das Feld <a href="/de/topics/templates2.html#input">Input</a> einen vordefinierten Namen <code>message_input</code> hat. Die Schaltfläche verwendet diesen Namen, um den Wert von <code>message</code> an den Vertrag zu senden. Schließlich wird die Funktion <a href="/de/topics/templates2.html#calling-contracts">Val</a> verwendet, um den Wert des Eingabefelds zu erhalten.</p> <div class="language- extra-class"><pre class="language-text"><code>Div(Class: panel panel-primary) { Form() { Input(Name: message_input, Class: form-control, Type: text, Placeholder: "Write a message...", ) Button(Class: btn btn-primary, Body: Send, Contract: AppContract, Params: "Message=Val(message_input)") } } </code></pre></div><p>Möglicherweise stellen Sie fest, dass das Formular beim Testen dieser neuen Funktion durch Senden einer Nachricht nicht aktualisiert wird. Dies wird in <a href="#page-refreshing">Seitenaktualisierung</a> eingeführt.</p> <h3 id="form-navigation"><a href="#form-navigation" class="header-anchor">#</a> Formularnavigation </h3> <p>In der Standardansicht kann das Formular auf der Seite nur 25 Einträge auf der ersten Seite anzeigen. Daher können Sie einige einfache Schaltflächen hinzufügen, um Benutzer zu allen Formulareinträgen zu navigieren.</p> <h4 id="navigation-buttons"><a href="#navigation-buttons" class="header-anchor">#</a> Navigationstasten </h4> <p>Es wird zwei Navigationsschaltflächen geben, und jede von ihnen könnte die Anwendungsseite neu laden und die Parameter an sie übergeben.</p> <ul><li><p>Die Schaltfläche Zurück zeigt die ersten 25 Einträge an. Wenn keine weiteren Einträge vorhanden sind, wird die Schaltfläche nicht angezeigt;</p></li> <li><p>Die Schaltfläche Weiter zeigt die nächsten 25 Einträge an. Wenn keine weiteren Einträge vorhanden sind, wird die Schaltfläche nicht angezeigt.</p></li></ul> <h4 id="variables"><a href="#variables" class="header-anchor">#</a> Variablen </h4> <p>Die Navigationsschaltflächen erfordern zwei Variablen zum Speichern der Tabellenansichtszustände:</p> <ul><li><code>#table_view_offset#</code></li></ul> <p>Diese Variable speichert den Offset der aktuellen Tabellenansicht.</p> <p>Die Navigationsschaltflächen übergeben es als Parameter, wenn die Seite neu geladen wird.</p> <ul><li><code>#record_count#</code></li></ul> <p>Diese Variable speichert die Gesamtzahl der Einträge in der Tabelle.</p> <p>Der Wert wird berechnet.</p> <h4 id="entry-count"><a href="#entry-count" class="header-anchor">#</a> Anzahl der Einträge </h4> <p>Um <code>#record_count#</code> zu zählen, ändern Sie bitte den bestehenden Funktionsaufruf <a href="/de/topics/script.html#dbfind">DBFind</a>. Die im <code>.count()</code>-Aufruf angegebene Variable speichert die Eintragsanzahl.</p> <div class="language- extra-class"><pre class="language-text"><code>DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp).Count(record_count) </code></pre></div><h4 id="table-offset"><a href="#table-offset" class="header-anchor">#</a> Tabellen-Offset </h4> <p>Der Offset der Tabellenansicht muss beim Öffnen der Seite an die Seite übergeben werden. Wenn <code>#table_view_offset#</code> keinen Wert bekommt, setzen Sie ihn auf 0.</p> <p>Fügen Sie oben auf der Seite den folgenden Code hinzu.</p> <div class="language- extra-class"><pre class="language-text"><code>If(GetVar(table_view_offset)){ }.Else{ SetVar(table_view_offset, 0) } </code></pre></div><p>Ändern Sie den Funktionsaufruf <a href="/de/topics/script.html#dbfind">DBFind</a> erneut. Dieses Mal muss es den neuen Offset der Tabellenansicht verwenden.</p> <div class="language- extra-class"><pre class="language-text"><code>DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp).Count(record_count).Offset(#table_view_offset#) </code></pre></div><h4 id="button-code"><a href="#button-code" class="header-anchor">#</a> Tastencode </h4> <p>Suchen Sie den Funktionsaufruf <a href="/de/topics/templates2.html#div">Div</a>, der die Fußzeile definiert: <code>Div(Class:panel-footer text-right)</code>. Fügen Sie den Schaltflächencode hinzu.</p> <div class="language- extra-class"><pre class="language-text"><code>Div(Class: panel-footer text-right) { } </code></pre></div><p>Die Schaltfläche <em>Zurück</em> wird nur angezeigt, wenn mindestens ein Weiter zum Zurückkehren vorhanden ist. Beim Hinzufügen einer Schaltfläche wird der neue Tabellenansichts-Offset <code>offset_ previous</code> der Seite berechnet. Die Parameter werden an <code>PageParams</code> der erneut geöffneten Seite übergeben.</p> <div class="language- extra-class"><pre class="language-text"><code>If(#table_view_offset# >= 25) { SetVar(offset_previous, Calculate(#table_view_offset# - 25)) Button(Class: btn btn-primary, Body: Previous, Page: AppPage, PageParams:"table_view_offset=#offset_previous#") } </code></pre></div><p>Die Schaltfläche Weiter wird nur angezeigt, wenn die Gesamtzahl der Datensätze größer ist als die auf der Seite angezeigte Zahl. Wenn eine Schaltfläche hinzugefügt wird, wird der neue Tabellenansichts-Offset <code>offset_next</code> der Seite berechnet. Die Parameter werden an <code>PageParams</code> der erneut geöffneten Seite übergeben.</p> <div class="language- extra-class"><pre class="language-text"><code>If(#record_count# >= Calculate(#table_view_offset# + 25)) { SetVar(offset_next, Calculate(#table_view_offset# + 25)) Button(Class: btn btn-primary, Body: Next, Page: AppPage, PageParams:"table_view_offset=#offset_next#") } </code></pre></div><p>Nachdem Sie diese Schaltflächen hinzugefügt haben, speichern Sie die Seite und testen Sie sie über das Menüelement Startseite > Nachrichten.</p> <h4 id="page-refreshing"><a href="#page-refreshing" class="header-anchor">#</a> Seite wird aktualisiert </h4> <p>Die letzte zu implementierende Funktion ist die automatische Aktualisierung der Tabelle auf der Seite. Wenn Benutzer eine neue Nachricht senden, muss diese in der Tabelle angezeigt werden.</p> <p>Neben der Vertragsabwicklung können Sie auch über die Schaltfläche Senden die aktuelle Seite erneut öffnen, um dasselbe zu erreichen. <code>#table_view_offset#</code> muss unverändert an die Seite übergeben werden.</p> <p>Fügen Sie „Page“ und <code>PageParams</code> zur Schaltfläche „Senden“ hinzu. Der Code lautet wie folgt:</p> <div class="language- extra-class"><pre class="language-text"><code>Button(Class: btn btn-primary, Body: Send, Contract: AppContract, Params: "Message=Val(message_input)", Page:AppPage, PageParams:"table_view_offset=#table_view_offset#") </code></pre></div><h3 id="full-page-code-2"><a href="#full-page-code-2" class="header-anchor">#</a> Vollständiger Seitencode </h3> <p>Dieser Teil beschreibt viele Änderungen an der Anwendungsseite. Das Folgende ist der vollständige Code der Anwendungsseite.</p> <div class="language- extra-class"><pre class="language-text"><code>If(GetVar(table_view_offset)){ }.Else{ SetVar(table_view_offset, 0) } DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp).Count(record_count).Offset(#table_view_offset#) Div(Class: panel panel-primary) { Div(Class: panel-heading, Body: Table block) Table(Columns: "AUTHOR=author,TIME=timestamp,MESSAGE=message", Source: src_table) Div(Class: panel-footer text-right) { If(#table_view_offset# >= 25) { SetVar(offset_previous, Calculate(#table_view_offset# - 25)) Button(Class: btn btn-primary, Body: Previous, Page: AppPage, PageParams:"table_view_offset=#offset_previous#") } If(#record_count# >= Calculate(#table_view_offset# + 25)) { SetVar(offset_next, Calculate(#table_view_offset# + 25)) Button(Class: btn btn-primary, Body: Next, Page: AppPage, PageParams:"table_view_offset=#offset_next#") } } } Div(Class: panel panel-primary) { Form() { Input(Name: message_input, Class: form-control, Type: text, Placeholder: "Write a message...", ) Button(Class: btn btn-primary, Body: Send, Contract: AppContract, Params: "Message=Val(message_input)", Page:AppPage, PageParams:"table_view_offset=#table_view_offset#") } } </code></pre></div><h2 id="conclusions"><a href="#conclusions" class="header-anchor">#</a> Schlussfolgerungen </h2> <p>Anstatt andere wichtige Themen für Anwendungsentwickler zu erläutern, wie z. B. Layoutstile, Verwaltung von Zugriffsberechtigungen und Interaktion zwischen Anwendungen und Ressourcen, führt dieses Tutorial ein, wie eine grundlegende Anwendung für ein Ökosystem erstellt wird. Weitere Informationen zu diesen fortgeschrittenen Themen finden Sie in anderen relevanten Dokumenten.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/IBAX-io/documentation/edit/master/docs/de/tutorials/app_tutorial.md" target="_blank" rel="noopener noreferrer">Bearbeiten Sie diese Seite auf GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Letzte Aktualisierung:</span> <span class="time">4.7.2023, 11:08:51</span></div></footer> <div class="page-nav"><p class="inner"> <span class="next"><a href="/de/tutorials/tutorial.html"> IBAX Development Tutorial </a> → </span></p></div> </main></div><div class="global-ui"></div></div> <script src="/assets/js/app.d049f7ab.js" defer></script><script src="/assets/js/2.8d94a0db.js" defer></script><script src="/assets/js/29.232aaba8.js" defer></script> </body> </html>