ऐपएमएल प्रोटोटाइप
इस अध्याय में, हम एक वेब एप्लिकेशन के लिए एक प्रोटोटाइप तैयार करेंगे।
एक HTML प्रोटोटाइप बनाएं
सबसे पहले, अपने पसंदीदा CSS का उपयोग करके एक अच्छा HTML प्रोटोटाइप बनाएं।
हमने इस उदाहरण में W3.CSS का उपयोग किया है:
उदाहरण
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>
{{...}} भविष्य के डेटा के लिए प्लेसहोल्डर हैं।
ऐपएमएल जोड़ें
एक HTML प्रोटोटाइप बनाने के बाद, आप AppML जोड़ सकते हैं:
उदाहरण
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
<script src="https://www.w3schools.com/appml/2.0.3/appml_sql.js"></script>
<body>
<div class="w3-container" appml-data="customers.js">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
</body>
</html>
ऐपएमएल जोड़ें:
<script src="https://www.w3schools.com/appml/2.0.3/appml.js">
एक स्थानीय WebSQL डेटाबेस जोड़ें:
<स्क्रिप्ट src="https://www.w3schools.com/appml/2.0.3/appml_sql.js">
डेटा स्रोत को परिभाषित करें:
appml-डेटा = "customers.js"
रिकॉर्ड में प्रत्येक रिकॉर्ड के लिए दोहराए जाने वाले HTML तत्व को परिभाषित करें:
appml_repeat="रिकॉर्ड"
इसे आसान बनाने के लिए, डेटाबेस से कनेक्ट करने से पहले स्थानीय डेटा जैसे
एक ऐपएमएल मॉडल बनाएं
डेटाबेस का उपयोग करने में सक्षम होने के लिए, आपको एक AppML डेटाबेस मॉडल की आवश्यकता होगी:
proto_customers.js
{
"rowsperpage" : 10,
"database" : {
"connection"
: "localmysql",
"sql" : "Select * from Customers",
"orderby"
: "CustomerName",
}
यदि आपके पास स्थानीय डेटाबेस नहीं है, तो आप वेब SQL डेटाबेस बनाने के लिए AppML मॉडल का उपयोग कर सकते हैं।
एकल रिकॉर्ड वाली तालिका बनाने के लिए, इस तरह के मॉडल का उपयोग करें: ।
आईई या फ़ायरफ़ॉक्स में स्थानीय डेटाबेस बनाना काम नहीं करता है। क्रोम या सफारी का प्रयोग करें।
अपने आवेदन में मॉडल का प्रयोग करें। डेटा स्रोत को local?model=proto_customers_single में बदलें :
उदाहरण
<div class="w3-container" appml-data="local?model=proto_customers_single">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
एकाधिक रिकॉर्ड के साथ एक स्थानीय डेटाबेस बनाएँ
एकाधिक रिकॉर्ड वाली तालिका बनाने के लिए, इस तरह के मॉडल का उपयोग करें: ।
डेटा स्रोत को स्थानीय में बदलें?model=proto_customers_all
उदाहरण
<div class="w3-container" appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
नेविगेशन टेम्प्लेट जोड़ें
मान लीजिए आप चाहते हैं कि आपके सभी एप्लिकेशन में एक सामान्य नेविगेशन टूलबार हो:
इसके लिए एक HTML टेम्प्लेट बनाएं:
inc_listcommands.htm
<div class="w3-bar w3-border w3-section">
<button class="w3-button" id='appmlbtn_first'>❮❮</button>
<button class="w3-button" id='appmlbtn_previous'>❮</button>
<button class="w3-button w3-hover-none" id='appmlbtn_text'></button>
<button class="w3-button" id='appmlbtn_next'>❯</button>
<button class="w3-button" id='appmlbtn_last'>❯❯</button>
<button class="w3-btn ws-green" id='appmlbtn_query'>Filter</button>
</div>
<div id="appmlmessage"></div>
टेम्पलेट को "inc_listcommands.htm" जैसे उचित नाम वाली फ़ाइल में सहेजें।
एपएमएल-शामिल-एचटीएमएल विशेषता के साथ अपने प्रोटोटाइप में टेम्पलेट शामिल करें :
उदाहरण
<div class="w3-container" appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<table class="w3-table-all">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>