Tutorial for application development </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/tutorials/app_tutorial.html#the-goal" class="sidebar-link">The Goal </a></li><li class="sidebar-sub-header"><a href="/tutorials/app_tutorial.html#part-1-the-environment" class="sidebar-link">Part 1: The Environment </a></li><li class="sidebar-sub-header"><a href="/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="/tutorials/app_tutorial.html#creator-account" class="sidebar-link">Creator account </a></li><li class="sidebar-sub-header"><a href="/tutorials/app_tutorial.html#new-application" class="sidebar-link">New application </a></li><li class="sidebar-sub-header"><a href="/tutorials/app_tutorial.html#new-database-table" class="sidebar-link">New database table </a></li><li class="sidebar-sub-header"><a href="/tutorials/app_tutorial.html#new-contract" class="sidebar-link">New contract </a></li></ul></li><li class="sidebar-sub-header"><a href="/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="/tutorials/app_tutorial.html#new-field" class="sidebar-link">New field </a></li><li class="sidebar-sub-header"><a href="/tutorials/app_tutorial.html#update-the-contract" class="sidebar-link">Update the contract </a></li><li class="sidebar-sub-header"><a href="/tutorials/app_tutorial.html#page" class="sidebar-link">Page </a></li></ul></li><li class="sidebar-sub-header"><a href="/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="/tutorials/app_tutorial.html#menu" class="sidebar-link">Menu </a></li><li class="sidebar-sub-header"><a href="/tutorials/app_tutorial.html#send-a-message" class="sidebar-link">Send a message </a></li><li class="sidebar-sub-header"><a href="/tutorials/app_tutorial.html#form-navigation" class="sidebar-link">Form navigation </a></li><li class="sidebar-sub-header"><a href="/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="/tutorials/app_tutorial.html#conclusions" class="sidebar-link">Conclusions </a></li></ul></li><li><a href="/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> <div class="language- extra-class"><pre class="language-text"><code>> In this application, strings will be stored in a database table, and there is not a user page. </code></pre></div><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> <blockquote><ol><li><p>Go to the <strong>Developer</strong> tab;</p></li> <li><p>Select <strong>Application</strong> in the menu at the left;</p></li> <li><p>Select <strong>New</strong> at the <strong>application</strong> page;</p></li> <li><p>Specify the application name in the <strong>APP</strong> field;</p></li> <li><p>Set <strong>Conditions</strong> to <code>true</code>;</p> <blockquote><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></blockquote></li> <li><p>Your application will be displayed in the applications list, click the Name field of a specific application to activate it.</p></li></ol> <div class="language- extra-class"><pre class="language-text"><code>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. </code></pre></div></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> <blockquote><ol><li><p>In the <strong>Developer</strong> tab, select <strong>Application</strong> > <strong>APP</strong> > <strong>Database table</strong>;</p> <blockquote><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></blockquote></li> <li><p>Click <strong>New</strong>；</p> <blockquote><p>Weaver will show you the page to create a new database table.</p></blockquote></li> <li><p>Specify the name in the <strong>Name</strong> field;</p> <blockquote><p>In this tutorial, the name of the database table will be <code>apptable</code>.</p></blockquote></li> <li><p>Add the <code>message</code> column, set its type as <code>Text</code>;</p> <blockquote><p>This table must have two columns: <code>id</code> (predefine) and <code>message</code>. You are going to add more columns later. <img src="/app-tut-table.png" alt="image"></p></blockquote></li></ol></blockquote> <blockquote><ol start="5"><li><p>With respect to the read and write permissions, set each field to <code>true</code>;</p> <blockquote><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></blockquote></li></ol></blockquote> <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="/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><p>In the <strong>Developer</strong> tab, select <strong>Application</strong> > <strong>APP</strong> > <strong>Contract</strong>;</p> <blockquote><p>All contracts in relation to the application will be displayed here. The list is empty for new applications.</p></blockquote></li> <li><p>Click New;</p> <blockquote><p>A new contract template will be displayed in the editor.</p></blockquote></li></ol> <p>An empty contract template is shown as below:</p> <div class="language-js extra-class"><pre class="language-js"><code>contract <span class="token operator">...</span> <span class="token punctuation">{</span> data <span class="token punctuation">{</span> <span class="token punctuation">}</span> conditions <span class="token punctuation">{</span> <span class="token punctuation">}</span> action <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </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-js extra-class"><pre class="language-js"><code>contract AppContract <span class="token punctuation">{</span> <span class="token punctuation">}</span> </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-js extra-class"><pre class="language-js"><code>data <span class="token punctuation">{</span> Message string <span class="token punctuation">}</span> </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-js extra-class"><pre class="language-js"><code>conditions <span class="token punctuation">{</span> <span class="token comment">// avoid writing empty strings</span> <span class="token keyword">if</span> <span class="token function">Size</span><span class="token punctuation">(</span>$Message<span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token number">0</span> <span class="token punctuation">{</span> error <span class="token string">"Message is empty"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </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-js extra-class"><pre class="language-js"><code>action <span class="token punctuation">{</span> <span class="token function">DBInsert</span><span class="token punctuation">(</span><span class="token string">"apptable"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">message</span><span class="token operator">:</span> $Message<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> </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-js extra-class"><pre class="language-js"><code>contract AppContract <span class="token punctuation">{</span> data <span class="token punctuation">{</span> Message string <span class="token punctuation">}</span> conditions <span class="token punctuation">{</span> <span class="token comment">// avoid writing empty strings</span> <span class="token keyword">if</span> <span class="token function">Size</span><span class="token punctuation">(</span>$Message<span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token number">0</span> <span class="token punctuation">{</span> error <span class="token string">"Message is empty"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> action <span class="token punctuation">{</span> <span class="token function">DBInsert</span><span class="token punctuation">(</span><span class="token string">"apptable"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">message</span><span class="token operator">:</span> $Message<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </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> <blockquote><ol><li><p>Click Save in the editor's menu;</p> <blockquote><p>This will update the contract code, and the updated version will be available to all network nodes.</p></blockquote></li> <li><p>Click Run in the editor's menu;</p> <blockquote><p>This will display the Run the Contract page.</p></blockquote></li> <li><p>In the Run the Contract page, fill in the input parameters of the contract;</p> <blockquote><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> <p><img src="/app-tut-execute.png" alt="image"></p></blockquote></li> <li><p>Click Run.</p> <blockquote><p>The result will be displayed at the right.</p></blockquote></li></ol></blockquote> <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-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span> <span class="token string-property property">"block"</span><span class="token operator">:</span> <span class="token string">"31"</span><span class="token punctuation">,</span> <span class="token string-property property">"result"</span><span class="token operator">:</span> <span class="token keyword">null</span> <span class="token punctuation">}</span> </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> <div class="language- extra-class"><pre class="language-text"><code>In this application, strings will be stored in a database table, like entries in a log. Each string will have an author and timestamp. Users can view the list of strings stored at the application page, which is shown as a simple form then. </code></pre></div><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 <strong>Developer</strong> tab > <strong>Application</strong> > <strong>APP</strong> > <strong>Database table</strong> 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 <strong>Change</strong> 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="/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-js extra-class"><pre class="language-js"><code>action <span class="token punctuation">{</span> <span class="token function">DBInsert</span><span class="token punctuation">(</span><span class="token string">"apptable"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">message</span><span class="token operator">:</span> $Message<span class="token punctuation">,</span> <span class="token literal-property property">author</span><span class="token operator">:</span> $key_id<span class="token punctuation">,</span> <span class="token literal-property property">timestamp</span><span class="token operator">:</span> $time<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> </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> <ol><li><p>Navigate to the <strong>Developer</strong> tab, click <strong>Application</strong> > <strong>APP</strong> > <strong>Page</strong>；</p></li> <li><p>Click <strong>New</strong>；</p> <blockquote><p>The visual designer will be opened in a new tab.</p></blockquote></li></ol> <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> <blockquote><p><img src="/app-tut-designer.png" alt="image"></p></blockquote> <p>Create a basic table:</p> <ol><li><p>In the view selector at the right, click Designer;</p> <blockquote><p>The view will be switched to the visual designer.</p></blockquote></li> <li><p>In the menu at the left, select Table With Header and drag it on to the page.</p> <blockquote><p>A table with multiple elements will be displayed on the page.</p></blockquote></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="/topics/templates2.html">Template Language</a>, please switch to the Developer view when writing the page code.</p> <blockquote><p><img src="/app-tut-developer.png" alt="image"></p></blockquote> <p>Switch to the Developer view.</p> <ol><li><p>In the view selector at the right, click <strong>Developer</strong>.</p> <blockquote><p>The view will be switched to the editor with a tab holding the page code.</p></blockquote></li></ol> <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><p>To request data from the database table with the <a href="/topics/script.html#dbfind">DBFind</a> function；</p> <blockquote><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-js extra-class"><pre class="language-js"><code><span class="token function">DBFind</span><span class="token punctuation">(</span>Name<span class="token operator">:</span> apptable<span class="token punctuation">,</span> <span class="token literal-property property">Source</span><span class="token operator">:</span> src_table<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Columns</span><span class="token punctuation">(</span>Columns<span class="token operator">:</span> <span class="token string">"author,timestamp,message"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Order</span><span class="token punctuation">(</span>timestamp<span class="token punctuation">)</span> </code></pre></div></blockquote></li> <li><p>To display the data from <code>src_table</code>, specify it as the data source and the header in the <code>Table</code> function.</p> <blockquote><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Table</span><span class="token punctuation">(</span>Columns<span class="token operator">:</span> <span class="token string">"AUTHOR=author,TIME=timestamp,MESSAGE=message"</span><span class="token punctuation">,</span> <span class="token literal-property property">Source</span><span class="token operator">:</span> src_table<span class="token punctuation">)</span> </code></pre></div></blockquote></li> <li><p>In the view selector at the right, click <strong>Preview</strong> to check whether the data is displayed correctly.</p></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-js extra-class"><pre class="language-js"><code><span class="token function">DBFind</span><span class="token punctuation">(</span>Name<span class="token operator">:</span> apptable<span class="token punctuation">,</span> <span class="token literal-property property">Source</span><span class="token operator">:</span> src_table<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Columns</span><span class="token punctuation">(</span>Columns<span class="token operator">:</span> <span class="token string">"author,timestamp,message"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Order</span><span class="token punctuation">(</span>timestamp<span class="token punctuation">)</span> <span class="token function">Div</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">Class</span><span class="token operator">:</span> panel panel<span class="token operator">-</span>primary</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">Div</span><span class="token punctuation">(</span>Class<span class="token operator">:</span> panel<span class="token operator">-</span>heading<span class="token punctuation">,</span> <span class="token literal-property property">Body</span><span class="token operator">:</span> Table block<span class="token punctuation">)</span> <span class="token function">Table</span><span class="token punctuation">(</span>Columns<span class="token operator">:</span> <span class="token string">"AUTHOR=author,TIME=timestamp,MESSAGE=message"</span><span class="token punctuation">,</span> <span class="token literal-property property">Source</span><span class="token operator">:</span> src_table<span class="token punctuation">)</span> <span class="token function">Div</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">Class</span><span class="token operator">:</span> panel<span class="token operator">-</span>footer text<span class="token operator">-</span>right</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">Button</span><span class="token punctuation">(</span>Class<span class="token operator">:</span> btn btn<span class="token operator">-</span>primary<span class="token punctuation">,</span> <span class="token literal-property property">Contract</span><span class="token operator">:</span> ContractName<span class="token punctuation">,</span> <span class="token literal-property property">Body</span><span class="token operator">:</span> More<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre></div><h4 id="save-the-page"><a href="#save-the-page" class="header-anchor">#</a> Save the page </h4> <p>Click <strong>Save</strong> to save the page:</p> <ol><li>Specify <code>AppPage</code> or any other name for the page in the <strong>Page Name</strong> field;</li> <li>Select <code>default_menu</code> in the <strong>Menu</strong>;</li> <li>Set <strong>Conditions</strong> to <code>true</code>;</li> <li>Click <strong>OK</strong>.</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 <strong>Home</strong> 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>You can define the page menu by editing the page properties at the <strong>Developer</strong> tab > <strong>Application</strong> > <strong>APP</strong> > <strong>Page</strong>. 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 <strong>Developer</strong> tab > <strong>Menu</strong>；</p> <blockquote><p><img src="/app-tut-menu-list.png" alt="image"></p></blockquote></li> <li><p>Click the Name of the <code>default_menu</code> entry;</p> <blockquote><p>A new tab will be opened in the editor.</p></blockquote></li> <li><p>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.</p> <blockquote><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">MenuItem</span><span class="token punctuation">(</span>Title<span class="token operator">:</span>Messages<span class="token punctuation">,</span> <span class="token literal-property property">Page</span><span class="token operator">:</span>AppPage<span class="token punctuation">,</span> <span class="token literal-property property">Icon</span><span class="token operator">:</span><span class="token string">"fa fa-envelope"</span><span class="token punctuation">)</span> </code></pre></div></blockquote></li> <li><p>Click <strong>Save</strong>.</p></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 <strong>Home</strong> tab;</p></li> <li><p>Click <strong>Refresh</strong> in the menu;</p> <blockquote><p>An entry with a header of Messages will appear;</p> <p><img src="/app-tut-menu-messages.png" alt="image"></p></blockquote></li> <li><p>Click <strong>Messages</strong>.</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. The <a href="/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="/topics/templates2.html#div">Div</a>. Putting it after the Div element that contains the form view, which defines that the <a href="/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="/topics/templates2.html#calling-contracts">Val</a> function is used to get the value of the input field.</p> <div class="language-text 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> <blockquote><ul><li><div class="language- extra-class"><pre><code>The *Previous* button will display the first 25 entries. If there are no other entries, the button will not be displayed; </code></pre></div></li> <li><div class="language- extra-class"><pre><code>The Next button will display the next 25 entries. If there are no other entries, the button will not be displayed. </code></pre></div></li></ul></blockquote> <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> <blockquote><ul><li><p><code>#table_view_offset#</code></p> <blockquote><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></blockquote></li> <li><p><code>#record_count#</code></p> <blockquote><p>This variable stores the total number of entries in the table.</p></blockquote> <blockquote><p>The value will be calculated.</p></blockquote></li></ul></blockquote> <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="/topics/script.html#dbfind">DBFind</a> function call. The variable specified in the <code>.count()</code> call will store the entry count.</p> <blockquote><div class="language-text 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></blockquote> <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> <blockquote><div class="language-text extra-class"><pre class="language-text"><code>If(GetVar(table_view_offset)){ }.Else{ SetVar(table_view_offset, 0) } </code></pre></div></blockquote> <p>Modify the <a href="/topics/script.html#dbfind">DBFind</a> function call again. This time it must use the new table view offset.</p> <blockquote><div class="language-text 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></blockquote> <h4 id="button-code"><a href="#button-code" class="header-anchor">#</a> Button code </h4> <p>Find the <a href="/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> <blockquote><div class="language-text extra-class"><pre class="language-text"><code>Div(Class: panel-footer text-right) { } </code></pre></div></blockquote> <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> <blockquote><div class="language-text 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></blockquote> <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> <blockquote><div class="language-text 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></blockquote> <p><img src="/app-tut-navigation.png" alt="image"></p> <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-text 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-text 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/tutorials/app_tutorial.md" target="_blank" rel="noopener noreferrer">Edit this page on 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">Last Updated:</span> <span class="time">7/6/2023, 6:59:03 PM</span></div></footer> <div class="page-nav"><p class="inner"> <span class="next"><a href="/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/149.d6bf1108.js" defer></script> </body> </html>