এইচটিএমএল
এইচটিএমএল সোর্স:
<!DOCTYPE html> <html lang="en-US"> <title>Products</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="http://www.w3schools.com/appml/2.0.3/appml.js"></script> <body> <div class="container"> <h1>Products</h1> <div id="Form01" class="jumbotron" style="display:none" appml-controller="myFormController"> <div appml-include-html="inc_formcommands.htm"></div> <div class="form-group"> <label>ProductName:</label> <input id="ProductName" class="form-control"> </div> <div class="form-group"> <label>Supplier:</label> <div appml-data="local?model=model_dropdown_suppliers"> <select id="SupplierID" class="form-control"> <option appml-repeat="records" value="{{SupplierID}}">{{SupplierName}}</option> </select> </div> </div> <div class="form-group"> <label>Category:</label> <div appml-data="local?model=model_dropdown_categories"> <select id="CategoryID" class="form-control"> <option appml-repeat="records" value="{{CategoryID}}">{{CategoryName}}</option> </select> </div> </div> <div class="form-group"> <label>Unit:</label> <input id="Unit" class="form-control"> </div> <div class="form-group"> <label>Price:</label> <input id="Price" onchange="myValidator(this)" class="form-control"> </div> </div> <div appml-data="local?model=model_productslist" appml-controller="myListController"> <div appml-include-html="inc_listcommands.htm"></div> <div appml-include-html="inc_productsquery_local.htm"></div> <table class="table table-striped table-bordered"> <tr> <th></th> <th>Product Name</th> <th>Category</th> <th>Supplier</th> <th>Price</th> </tr> <tr appml-repeat="records"> <td style="cursor:pointer" onclick="appml('Form01').run({{ProductID}})"> <span class="glyphicon glyphicon-edit"></span> </td> <td>{{ProductName}}</td> <td>{{CategoryName}}</td> <td>{{SupplierName}}</td> <td>{{Price}}</td> </tr> </table> </div> <h3 id="sumprice"></h3> </div> <script> function myValidator(item) { var obj = appml("Form01"); obj.message = "validate"; obj.validate = {}; obj.validate.item = item.id; obj.validate.value = item.value; myFormController(obj); } function myListController($appml) { if ($appml.message == "done") { var i, x, tot = 0; x = $appml.data.records; for (i = 0; i < x.length; i++) { tot += Number(x[i].Price); } document.getElementById("sumprice").innerHTML = x.length + " products. Total price " + tot; } if ($appml.message == "display") { if ($appml.display.name == "ProductName") { $appml.display.value = $appml.display.value.toUpperCase(); } } } function myFormController($appml) { if ($appml.message == "ready") { $appml.dataSource = "local?model=model_productsform"; return -1; } if ($appml.message == "loaded") { document.getElementById("Form01").style.display = ""; } if ($appml.message == "validate") { if ($appml.validate.item == "Price") { if (isNaN($appml.validate.value)) { $appml.setError(15, "Price must be a number"); return; } } } } </script> </body> </html>
মডেল
এই অ্যাপ্লিকেশনের মধ্যে ব্যবহৃত মডেল
লিস্ট মডেল
{ "database" : { "connection" : "localmysql", "sql" : "SELECT ProductID,ProductName,CategoryName,SupplierName,Price FROM ((Products LEFT JOIN Suppliers ON Products.SupplierID=Suppliers.SupplierID) LEFT JOIN Categories ON Products.CategoryID=Categories.CategoryID)", "orderby" : "ProductName" }, "filteritems" : [ {"item" : "ProductName", "label" : "Name"}, {"item" : "Products.SupplierID", "type" : "number", "hidden" : "true"}, {"item" : "Suppliers.SupplierID", "label" : "Supplier"}, {"item" : "Categories.CategoryID", "label" : "Category"} ], "sortitems" : [ {"item" : "ProductName"} ]
ফরম মডেল
{ "database" : { "connection" : "localmysql", "sql" : "SELECT * FROM Products", "maintable" : "Products", "keyfield" : "ProductID" }, "updateItems" : [ {"item" : "ProductName"}, {"item" : "SupplierID"}, {"item" : "CategoryID"}, {"item" : "Unit"}, {"item" : "Price"} ] }