Tutorial for application development </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#the-goal" class="sidebar-link">The Goal </a></li><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#part-1-the-environment" class="sidebar-link">Part 1: The Environment </a></li><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#part-2-contract" class="sidebar-link">Part 2: Contract </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#creator-account" class="sidebar-link">Creator account </a></li><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#new-application" class="sidebar-link">New application </a></li><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#new-database-table" class="sidebar-link">New database table </a></li><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#new-contract" class="sidebar-link">New contract </a></li></ul></li><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#part-3-page" class="sidebar-link">Part 3: Page </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#new-field" class="sidebar-link">New field </a></li><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#update-the-contract" class="sidebar-link">Update the contract </a></li><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#page" class="sidebar-link">Page </a></li></ul></li><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#part-4-application" class="sidebar-link">Part 4: Application </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#menu" class="sidebar-link">Menu </a></li><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#send-a-message" class="sidebar-link">Send a message </a></li><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#form-navigation" class="sidebar-link">Form navigation </a></li><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#full-page-code-2" class="sidebar-link">Full page code </a></li></ul></li><li class="sidebar-sub-header"><a href="/it/tutorials/app_tutorial.html#conclusions" class="sidebar-link">Conclusions </a></li></ul></li><li><a href="/it/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 for application development </h1> <p>In this section, we will show you how to develop a simple application on the IBAX Network.</p> <ul><li><a href="#the-goal">The Goal</a></li> <li><a href="#part-1-the-environment">Part 1: The Environment</a></li> <li><a href="#part-2-contract">Part 2: Contract</a> <ul><li><a href="#creator-account">Creator account</a></li> <li><a href="#new-application">New application</a></li> <li><a href="#new-database-table">New database table</a></li> <li><a href="#new-contract">New contract</a> <ul><li><a href="#contract-code">Contract code</a></li> <li><a href="#create-a-contract">Create a contract</a></li> <li><a href="#contract-name">Contract name</a></li> <li><a href="#data">Data</a></li> <li><a href="#conditions">Conditions</a></li> <li><a href="#action">Action</a></li> <li><a href="#full-contract-code">Full contract code</a></li> <li><a href="#save-and-run">Save and run</a></li></ul></li></ul></li> <li><a href="#part-3-page">Part 3: Page</a> <ul><li><a href="#new-field">New field</a></li> <li><a href="#update-the-contract">Update the contract</a></li> <li><a href="#page">Page</a> <ul><li><a href="#designer-views">Designer views</a></li> <li><a href="#developer-view">Developer view</a></li> <li><a href="#fetch-data-from-the-database-table">Fetch data from the database table</a></li> <li><a href="#full-page-code-1">Full page code</a></li> <li><a href="#save-the-page">Save the page</a></li></ul></li></ul></li> <li><a href="#part-4-application">Part 4: Application</a> <ul><li><a href="#menu">Menu</a> <ul><li><a href="#add-a-menu-item">Add a menu item</a></li> <li><a href="#test-the-new-menu-item">Test the new menu item</a></li></ul></li> <li><a href="#send-a-message">Send a message</a> <ul><li><a href="#form">Form</a></li></ul></li> <li><a href="#form-navigation">Form navigation</a> <ul><li><a href="#navigation-buttons">Navigation buttons</a></li> <li><a href="#variables">Variables</a></li> <li><a href="#entry-count">Entry count</a></li> <li><a href="#table-offset">Table offset</a></li> <li><a href="#button-code">Button code</a></li> <li><a href="#page-refreshing">Page refreshing</a></li></ul></li> <li><a href="#full-page-code-2">Full page code</a></li></ul></li> <li><a href="#conclusions">Conclusions</a></li></ul> <h2 id="the-goal"><a href="#the-goal" class="header-anchor">#</a> The Goal </h2> <p>The application begins with simple functions but grows in complexity as the tutorial progresses.</p> <p>In the final version of the application, some simple messages (strings) are stored in a database table, which contains the timestamps and account identifiers of senders. Users can view the messages list and add a new message from the application page which can be accessed from the menu of the ecosystem.</p> <h2 id="part-1-the-environment"><a href="#part-1-the-environment" class="header-anchor">#</a> Part 1: The Environment </h2> <p><strong>Weaver</strong></p> <p>As the only client of IBAX, Weaver provides functions for all users and ecosystem roles. With it, application developers can develop and test their applications, ecosystem administrators can manage their ecosystems, while users can interact with the ecosystems.</p> <p>In this tutorial, you are going to code contracts, page templates and perform all other actions in Weaver. Weaver also provides a way to restore, save and execute contract codes, manage data structures (database tables), assign access permissions and create applications.</p> <p>Each node has its own Weaver instance.</p> <h2 id="part-2-contract"><a href="#part-2-contract" class="header-anchor">#</a> Part 2: Contract </h2> <p>Your first simple application is "Hello, World!".</p> <blockquote><p>Note</p></blockquote> <blockquote><p>In this application, strings will be stored in a database table, and there is not a user page.</p></blockquote> <h3 id="creator-account"><a href="#creator-account" class="header-anchor">#</a> Creator account </h3> <p>Accounts with the Developer role will be assigned the "root" privileges of the ecosystem. By default, this role can access all actions. In a new ecosystem, the creator account will be assigned the Admin role, which you must use it to introduce major changes to the ecosystem, such as creating new applications and database tables.</p> <p>Log in to the ecosystem using the creator account.</p> <h3 id="new-application"><a href="#new-application" class="header-anchor">#</a> New application </h3> <p>Once you logged in as the ecosystem creator, you can create a new application.</p> <p>Create a new application:</p> <ol><li><p>Go to the Developer tab;</p></li> <li><p>Select Application in the menu at the left;</p></li> <li><p>Select New at the application page;</p></li> <li><p>Specify the application name in the Name field;</p></li> <li><p>Set Conditions to <code>true</code>;</p></li></ol> <p><code>true</code> means anyone can make changes to the application;</p> <p>Another option is <code>ContractConditions("MainCondition")</code>, which means no one can make changes to the application except for the creator.</p> <ol start="6"><li>Your application will be displayed in the applications list, click the Name field of a specific application to activate it.</li></ol> <blockquote><p>Note</p></blockquote> <blockquote><p>You can access relevant resources by clicking an application in the Developer tab, no impact on the ecosystem. No matter which one you choose, all ecosystem applications are still available.</p></blockquote> <h3 id="new-database-table"><a href="#new-database-table" class="header-anchor">#</a> New database table </h3> <p>To store the data, create a database table for the application in Weaver.</p> <p>Create a data table:</p> <ol><li>In the Developer tab, select Application - Name > Database table;</li></ol> <p>All database tables in relation to the application selected will be displayed here. If the list is empty, then, no database tables have been created for your application yet.</p> <ol start="2"><li>Click New；</li></ol> <p>Weaver will show you the page to create a new database table.</p> <ol start="3"><li>Specify the name in the Name field;</li></ol> <p>In this tutorial, the name of the database table will be <code>apptable</code>.</p> <ol start="4"><li>Add the <code>message</code> column, set its type as <code>Text</code>;</li></ol> <p>This table must have two columns: <code>id</code> (predefine) and <code>message</code>. You are going to add more columns later.</p> <ol start="5"><li>With respect to the read and write permissions, set each field to <code>true</code>;</li></ol> <p>This will allow anyone to insert, update entries, add columns and read entry data on the database table;</p> <p>As an option, you may reserve the read and write permissions to the creator account. In this case, set this field to <code>ContractConditions("MainCondition")</code>.</p> <h3 id="new-contract"><a href="#new-contract" class="header-anchor">#</a> New contract </h3> <h4 id="contract-code"><a href="#contract-code" class="header-anchor">#</a> Contract code </h4> <p>Each contract has three parts. For more details, please see: <a href="/it/topics/script.html#contract-structure">Contract structure</a>。</p> <h4 id="create-a-contract"><a href="#create-a-contract" class="header-anchor">#</a> Create a contract </h4> <ol><li>In the Developer tab, select Application - Name > Contract;</li></ol> <p>All contracts in relation to the application will be displayed here. The list is empty for new applications.</p> <ol start="2"><li>Click New;</li></ol> <p>A new contract template will be displayed in the editor.</p> <p>An empty contract template is shown as below:</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> Contract name </h4> <p>First, please specify the contract name.</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> Data </h4> <p>Fill in the <code>data</code> section.</p> <p>In the following example, <code>Message</code> refers to the variable name, while <code>string</code> the variable type.</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> Conditions </h4> <p>Fill in the <code>conditions</code> section. A simple verification condition is to avoid empty strings. If the length of <code>Message</code> is <code>0</code>, a predefined warning message will be triggered when implementing the contract.</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> Action </h4> <p>Fill in the <code>action</code> section. A simple action is to write <code>Message</code> into the data table.</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> Full contract code </h4> <p>The full contract code is shown below.</p> <p>All contracts in IBAX will be constructed like this, including the <code>data</code>, <code>conditions</code> and <code>action</code> sections.</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> Save and run </h4> <p>Now, we are preparing to test the contract:</p> <ol><li>Click Save in the editor's menu;</li></ol> <p>This will update the contract code, and the updated version will be available to all network nodes.</p> <ol start="2"><li>Click Run in the editor's menu;</li></ol> <p>This will display the Run the Contract page.</p> <ol start="3"><li>In the Run the Contract page, fill in the input parameters of the contract;</li></ol> <p>As this contract has one parameter <code>Message</code>, set <code>Message</code> at the Key field and <code>Hello, World</code> at the Value field.</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> Part 3: Page </h2> <p>When the contract becomes effective, it is time to extend it to something useful. In this part, you are going to implement the UI and other functions.</p> <p>Note</p> <p>In this application, strings will be stored in a database table, like entries in a log. Each string will have an author and timestamp.</p> <p>Users can view the list of strings stored at the application page, which is shown as a simple form then.</p> <h3 id="new-field"><a href="#new-field" class="header-anchor">#</a> New field </h3> <p>As with the previous, edit the database table at the Developer tab > Application - Name > Database table page;</p> <p>Add the following fields into <code>apptable</code>:</p> <ul><li><code>author</code> , field type <code>Number</code>, set Change to <code>true</code>;</li></ul> <p>This field will store the identifier of the author account.</p> <ul><li><code>timestamp</code> , field type <code>Date/Time</code>, set Change to <code>true</code>.</li></ul> <h3 id="update-the-contract"><a href="#update-the-contract" class="header-anchor">#</a> Update the contract </h3> <p>We will update the contract code to handle the author ID and timestamp.</p> <p>The author ID is the account ID of the ecosystem. The timestamp is the date and time executing the contract in Unix time format.</p> <p>As both values are provided by the <a href="/it/topics/script.html#variables">Predefined variables</a> and no need to input or verify the predefined variables, they can only be updated in the action part.</p> <p>Update the contract to write the author ID and timestamp into the database table when adding a message, among which the author ID is defined by <code>$key_id</code>, while the timestamp by <code>$time</code>.</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> Page </h3> <p>For the application page, it is a simple page where displays the messages stored in the database table.</p> <p>Like all other resources, you can create the UI page in Weaver:</p> <p>1.Navigate to the Developer tab, click Application - Name > Page;</p> <p>2.Click New; The visual designer will be opened in a new tab.</p> <h4 id="designer-views"><a href="#designer-views" class="header-anchor">#</a> Designer views </h4> <p>The default page is empty. You can use the predefine structure to quickly fill in the page.</p> <p>Create a basic table:</p> <ol><li><p>In the view selector at the right, click Designer; The view will be switched to the visual designer.</p></li> <li><p>In the menu at the left, select Table With Header and drag it on to the page. A table with multiple elements will be displayed on the page.</p></li></ol> <h4 id="developer-view"><a href="#developer-view" class="header-anchor">#</a> Developer view </h4> <p>As the user page of IBAX is coded with a <a href="/it/topics/templates2.html">Template Language</a>, please switch to the Developer view when writing the page code.</p> <p>Switch to the Developer view.</p> <ol><li>In the view selector at the right, click Developer.</li></ol> <p>The view will be switched to the editor with a tab holding the page code.</p> <h4 id="fetch-data-from-the-database-table"><a href="#fetch-data-from-the-database-table" class="header-anchor">#</a> Fetch data from the database table </h4> <p>So far, nothing done with the page template. In the next, we will update the code to allow the page to display data from <code>apptable</code>.</p> <ol><li>To request data from the database table with the <a href="/it/topics/script.html#dbfind">DBFind</a> function;</li></ol> <p>In the following example, this function call is used to fetch data from <code>apptable</code>. The data will be put it in the source <code>src_table</code> and sorted by the timestamp field. <code>src_table</code> will be later used as the data source for the page in table view.</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>To display the data from <code>src_table</code>, specify it as the data source and the header in the <code>Table</code> function.</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>In the view selector at the right, click Preview to check whether the data is displayed correctly.</li></ol> <h4 id="full-page-code-1"><a href="#full-page-code-1" class="header-anchor">#</a> Full page code </h4> <p>The following is the full page code for this part. This basic page will be expanded later.</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> Save the page </h4> <p>Click Save to save the page:</p> <ol><li><p>Specify <code>AppPage</code> or any other name for the page in the Page Name field;</p></li> <li><p>Select <code>default_menu</code> in the Menu;</p></li> <li><p>Set Conditions to <code>true</code>;</p></li> <li><p>Click OK.</p></li></ol> <h2 id="part-4-application"><a href="#part-4-application" class="header-anchor">#</a> Part 4: Application </h2> <p>In the previous sections, you created a contract, a table to store data, and a basic UI page to display that data.</p> <p>In this part, you are going to finalize the application to make its appearance and actions are similar to an actual one.</p> <h3 id="menu"><a href="#menu" class="header-anchor">#</a> Menu </h3> <p>The page needs to be linked to a menu, for example, <code>default_page</code> displayed on the Home tab is linked to the default ecosystem menu <code>default_menu</code>.</p> <p>As this application tutorial is very simple (only having one page), there is no need to create a separate menu for it. The new menu item in the default menu is sufficient.</p> <blockquote><p>Note</p></blockquote> <blockquote><p>You can define the page menu by editing the page properties at the Developer tab > Application - Name > Page. For example, if your app has multiple pages, you may need to create a menu to navigate between these pages and assign it to all pages of the app.</p></blockquote> <h4 id="add-a-menu-item"><a href="#add-a-menu-item" class="header-anchor">#</a> Add a menu item </h4> <p>Like all other resources, menus can be created and edited in Weaver:</p> <ol><li><p>Navigate to the Developer tab > Menu;</p></li> <li><p>Click the Name of the <code>default_menu</code> entry;</p></li></ol> <p>A new tab will be opened in the editor.</p> <ol start="3"><li>Add a new menu item to the end of the template, which will be linked to open the application page and its icon comes from the <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> icon set.</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>Click Save.</li></ol> <h4 id="test-the-new-menu-item"><a href="#test-the-new-menu-item" class="header-anchor">#</a> Test the new menu item </h4> <p>Check whether the new menu item is valid:</p> <ol><li><p>Open the Home tab;</p></li> <li><p>Click Refresh in the menu;</p> <p>An entry with a header of Messages will appear;</p></li> <li><p>Click Messages.</p> <p>The application page will be opened.</p></li></ol> <h3 id="send-a-message"><a href="#send-a-message" class="header-anchor">#</a> Send a message </h3> <p>The buttons in Logicor can be used to implement contracts and open pages, depending on the parameters.</p> <p>The <a href="/it/topics/templates2.html#button">Button</a> function has two contract parameters:</p> <ul><li><p><code>Contract</code></p> <p>Name of the contract activated.</p></li> <li><p><code>Params</code></p> <p>Input parameters of the contract.</p></li></ul> <h4 id="form"><a href="#form" class="header-anchor">#</a> Form </h4> <p>To send data to the contract, add a form on the application page, which must have an input field for a message and a button to activate the contract AppContract.</p> <p>The following is an example of this type of form. It is nested in its own <a href="/it/topics/templates2.html#div">Div</a>. Putting it after the Div element that contains the form view, which defines that the <a href="/it/topics/templates2.html#input">Input</a> field has a predefine name <code>message_input</code>. The button uses this name to send the value of <code>Message</code> to the contract. Finally, the <a href="/it/topics/templates2.html#calling-contracts">Val</a> function is used to get the value of the input field.</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>You may notice that when testing this new feature by sending a message, the form does not refresh. This will be introduced in <a href="#page-refreshing">page refresh</a>.</p> <h3 id="form-navigation"><a href="#form-navigation" class="header-anchor">#</a> Form navigation </h3> <p>Under the default view, the form on the page can only display 25 entries on the first page. Hence, you can add some simple buttons to navigate users to all form entries.</p> <h4 id="navigation-buttons"><a href="#navigation-buttons" class="header-anchor">#</a> Navigation buttons </h4> <p>There will be two navigation buttons, and each of them could reload the application page and pass the parameters to it.</p> <ul><li><p>The Previous button will display the first 25 entries. If there are no other entries, the button will not be displayed;</p></li> <li><p>The Next button will display the next 25 entries. If there are no other entries, the button will not be displayed.</p></li></ul> <h4 id="variables"><a href="#variables" class="header-anchor">#</a> Variables </h4> <p>The navigation buttons require two variables to store the table view states:</p> <ul><li><code>#table_view_offset#</code></li></ul> <p>This variable stores the offset of current table view.</p> <p>The navigation buttons will pass it as a parameter when the page is reloaded.</p> <ul><li><code>#record_count#</code></li></ul> <p>This variable stores the total number of entries in the table.</p> <p>The value will be calculated.</p> <h4 id="entry-count"><a href="#entry-count" class="header-anchor">#</a> Entry count </h4> <p>To count <code>#record_count#</code>, please modify the existing <a href="/it/topics/script.html#dbfind">DBFind</a> function call. The variable specified in the <code>.count()</code> call will store the entry count.</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> Table offset </h4> <p>The table view offset must be passed to the page when the page is opened. If <code>#table_view_offset#</code> does not get a value, set it to 0.</p> <p>Add the following code to the top of the page.</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>Modify the <a href="/it/topics/script.html#dbfind">DBFind</a> function call again. This time it must use the new table view offset.</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> Button code </h4> <p>Find the <a href="/it/topics/templates2.html#div">Div</a> function call that defines the footer: <code>Div(Class:panel-footer text-right)</code>. Add the button code into it.</p> <div class="language- extra-class"><pre class="language-text"><code>Div(Class: panel-footer text-right) { } </code></pre></div><p>The <em>Previous</em> button will only appear if there is at least one Next to return. When adding a button, the new table view offset <code>offset_previous</code> of the page will be calculated. The parameters are passed to <code>PageParams</code> of the reopened page.</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>The Next button will only be displayed when the total number of records is greater than the number displayed on the page. When a button is added, the new table view offset <code>offset_next</code> of the page will be calculated. The parameters are passed to <code>PageParams</code> of the reopened page.</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>After adding these buttons, save the page and test it from the Home > Messages menu item.</p> <h4 id="page-refreshing"><a href="#page-refreshing" class="header-anchor">#</a> Page refreshing </h4> <p>The last function to be implemented is to automatically update the table on the page. When users send a new message, it must be displayed in the table.</p> <p>In addition to implementing the contract, you may also use the Send button to reopen the current page to achieve the same. <code>#table_view_offset#</code> must be passed to the page without any change.</p> <p>Add <code>Page</code> and <code>PageParams</code> to the Send button, the code is as follows:</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> Full page code </h3> <p>This part describes many changes to the application page. The following is the full code of the application page.</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> Conclusions </h2> <p>Instead of expounding other important topics for application developers, such as layout styles, access permissions management and interaction between applications and resources, this tutorial introduces how to create a basic application for an ecosystem. For more information on these advanced topics, see other relevant documents.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/IBAX-io/documentation/edit/master/docs/it/tutorials/app_tutorial.md" target="_blank" rel="noopener noreferrer">Modifica questa pagina su 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">Ultimo aggiornamento:</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="/it/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/84.321f6167.js" defer></script> </body> </html>