Hbuilder developing the App tutorial 10-completing matters

<span id="Label3"></p><p><p></p></p>Review the previous Points:<p><p>1.Hbuilder Creating a project, debugging a real machine</p></p><p><p>2. Home</p></p><p><p>3. List page</p></p><p><p>4. Side-slip Menu</p></p><p><p>5.websql</p></p><p><p>6. How several pages are opened</p></p>Let's talk about the main points of this section:<p><p>1.fire-way Page Transfer value</p></p><p><p>2. Re-talk websql</p></p><p><p><br></p></p>Completion function Description<br><p><p>The left-to-do item appears with the Finish button, and clicking on the button will complete the backlog and add a side-slip menu,</p></p>Process<br><p><p>1. Left Slide Show Complete button</p></p><p><p>2. Delete items from the to-do list after clicking on the button</p></p><p><p>3. Add the item to the completion table at the same time</p></p><p><p>4. Slide-out Menu Display complete items</p></p>Page<p><p>Involves two pages, one is list, one is menu,</p></p><p><p>To make the operation smoother, only click events on the list page, and then pass the events to the menu page,</p></p><p><p>Menu page, Add completion items, remove To-do items, show completion actions.</p></p>Realize<p><p>The left-to-do item appears complete button is the MUI comes with the component, see the documentation, the list code is as follows</p></p><pre class="brush:js;toolbar:false"><pre class="brush:js;toolbar:false">Complete qiao.on ('. donebtn ', ' tap ', function () { var $li = $ (this). Parent (). Parent (); var id = $li. data (' ID '); $li. Remove (); Showlist ($ (' #todolist ')); Qiao.h.fire (' menu ', ' Doneitem ', {todoid:id}); return false; });</pre></pre><p><p>List.js only need to add the code as above,</p></p><p><p>The first part is to get the ID of the to-do item li, and then remove the li,</p></p><p><p>The second part is to upload the acquired ID through the fire to the menu page<br></p></p><p><p><br></p></p>Websql1.index page Initialization two tables<pre class="brush:js;toolbar:false"><pre class="brush:js;toolbar:false"> var db = qiao.h.db (); Qiao.h.update (db, ' CREATE table if not ' exists T_plan_day_todo (id unique, plan_title, plan_content) '); Qiao.h.update (db, ' CREATE table if not ' exists t_plan_day_done (id unique, plan_title, plan_content) ');</pre></pre><p><p>Table T_plan_day_todo is used to save the list page to-do items, with the primary key, title and content three properties,</p></p><p><p>Table T_plan_day_done is used to save the completion of the menu page, with the primary key, title and content three Attributes.</p></p>2.qiao.h.db ()<p><p>Used to obtain a database with the following code:</p></p><pre class="brush:js;toolbar:false"><pre class="brush:js;toolbar:false">qiao.h.db = function (name, Size) { var db_name = name? name: ' db_test '; var db_size = size? size:2; return OpenDatabase (db_name, ' 1.0 ', ' db_test ', db_size * 1024 * 1024);};</pre></pre><p><p>It is visible that a "db_test" database is created by default, with a size of 2*1024*1024k</p></p>3.qiao.h.update ()<p><p>The update operation, all additions, deletions, modifications, and some SQL operations that do not require a return result, are as Follows:</p></p><pre class="brush:js;toolbar:false"><pre class="brush:js;toolbar:false">Qiao.h.update = function (db, sql) { if (db &&sql) db.transaction (function (tx) {tx.executesql (sql);});};</pre></pre>4.list page Fetch data<p><p>The list page needs to get the data from the T_plan_day_todo table and show the code as Follows:</p></p><pre class="brush:js;toolbar:false"><pre class="brush:js;toolbar:false">Initialize Todo function initlist () { var $ul = $ (' #todolist '). empty (); Qiao.h.query (qiao.h.db (), ' select * from T_plan_day_todo ORDER BY id desc ', function (res) {for (i = 0; I < res.rows . length; I++) { $ul. Append (genli (res.rows.item (i))); } Showlist ($ul); });}</pre></pre>5.qiao.h.query ()<p><p>To perform a query operation, you need to pass in the result returned by the callback function operation, with the following code:</p></p><pre class="brush:js;toolbar:false"><pre class="brush:js;toolbar:false">Qiao.h.query = function (db, sql, func) { if (db && sql) { db.transaction (function (tx) { Tx.executesql (sql, [], function (tx, results) { func (results); }, null);} ) ;};</pre></pre>Removal of 6.menu pages Add and query<p><p>To make the app smoother, only the LI element is removed from the list page, and all other database operations are placed on the menu page,</p></p><p><p>include, Delete the Todo table items, add to the done table, query the done table and display the code as Follows:</p></p><pre class="brush:js;toolbar:false">Initialize Mui.init ({keyeventbind: {backbutton:false}});//all methods are put here Mui.plusready (function () {initdoneli St (); Add completed Items Window.addeventlistener (' doneitem ', doneitemhandler);}); /initialize To-dos function initdonelist () {var $ul = $ (' #donelist '). Empty (); Qiao.h.query (qiao.h.db (), ' select * from T_plan_day_done ORDER BY id desc ', function (res) {for (i = 0; I < RES.R ows.length; I++) {$ul. Append (genli (res.rows.item (i). plan_title)); } showlist ($ul); });} function Genli (title) {return ' <li class= ' Mui-table-view-cell ' > ' + title + ' </li> ';} function Showlist (ul) {if (ul.find (' li '). size () > 0 && ul.is (': hidden ')) ul.show ();} Add completed event function Doneitemhandler (event) {var todoid = event.detail.todoId; var db = Qiao.h.db (); Qiao.h.query (db, ' select * ' from T_plan_day_todo where id= ' + todoid, function (res) {if (res.rows.length > 0) { var data = Res.rows.item (0); Qiao.h.query (db, ' select Max (id) mid from T_plan_day_done ', function (res1) {$ (' #donelist '). prepend (' &L T;li class= "mui-table-view-cell>test</li>"). prepend (genli (data.plan_title)). show (); var id = (res1.rows.item (0). mid)? Res1.rows.item (0). mid:0; Qiao.h.update (db, ' insert into T_plan_day_done (id, plan_title, plan_content) values (' + (id+1) + ', "' + data.plan_title + ' "," ' + data.plan_content + ') '); Qiao.h.update (db, ' Delete from T_plan_day_todo where id= ' + todoid); }); } });}</pre><p><p>first, the Back button is masked in the Mui.init initialization,</p></p><p><p>second, the data in the done table is queried by Qiao.h.query and displayed,</p></p><p><p>finally, listen for the event, get the ID that was removed in todo,</p></p><p><p>Query through Todoid to the title and content of the removed Todo column,</p></p><p><p>Insert this title and content into the done table,</p></p><p><p>After the Insert succeeds, delete the records in the Todo Table.</p></p><p><p><br></p></p>Fire principle<br><p><p>The code above is a bit dull, but it is not very difficult, I hope you can read,</p></p><p><p>After you understand it, you will find that it is a problem to upload the todoid of the list page to the menu Page.</p></p><p><p>The fire way is used here, simply to say,</p></p><p><p>The list page initiates an event on the menu page, fire,</p></p><p><p>The menu page then listens to this event on the list Page.</p></p>Qiao.h.fire ()<pre class="brush:js;toolbar:false"><pre class="brush:js;toolbar:false">Qiao.h.fire = function (id, name, values) { mui.fire (qiao.h.getpage (id), name, values);};</pre></pre><p><p>As you can see, only the Mui.fire is encapsulated, only the page ID is passed in, and the page that corresponds to that ID is automatically obtained.</p></p>Qiao.h.getpage ()<pre class="brush:js;toolbar:false"><pre class="brush:js;toolbar:false">Qiao.h.getpage = function (id) { return id? plus.webview.getWebviewById (id): null;};</pre></pre><p><p>Gets the encapsulation of the WebView Page object by ID.</p></p>List Page Fire<pre class="brush:js;toolbar:false"><pre class="brush:js;toolbar:false">Qiao.h.fire (' menu ', ' Doneitem ', {todoid:id});</pre></pre><p><p>Say MUI two kinds of page transfer value method, one is evaljs, but do not recommend, why do not recommend, please baidu,</p></p><p><p>Then is the fire way, convenient to pass the value, or relatively good.</p></p><p><p>Here is the list page fire to the menu Page.</p></p>Menu Page Monitoring<pre class="brush:js;toolbar:false"><pre class="brush:js;toolbar:false">Window.addeventlistener (' Doneitem ', doneitemhandler);</pre></pre><p><p>Then you can do all kinds of things.</p></p><p><p><br></p></p>Summarize<p><p>1.websql explanation</p></p><p><p>2.fire explanation</p></p><p><p><br></p></p>More Tutorials:<p><p>Hbuilder Development App Tutorial: HTTP://UIKOO9.COM/BOOK/DETAIL/3</p></p><p><p>More study Notes: Http://uikoo9.com/book</p></p> <p style="font-size:12px;"><p style="font-size:12px;">Copyright Notice: This article for Bo Master original article, without Bo Master permission not Reproduced.</p></p> <p><p>Hbuilder developing the App tutorial 10-completing matters</p></p></span>