وباکا

آموزش تخصصی برنامه نویسی وب

AppML مخفف زبان مدل سازی برنامه کاربردی(Application Modeling Language) بوده و یک ابزار برای وارد کردن داده ها از اشیاء، فایل ها و پایگاه داده به  صفحه HTML استاتیک است. این ابزار، در صفحات HTML ، بدون نیاز به نصب نرم افزاری خاصی قابل استفاده است. در این مفاله به معرفی AppML پرداخته و روش کار با آن را با ذکر مثال هایی نشان می دهیم.

1- معرفی AppML

AppML به معنای زبان مدل سازی برنامه کاربردی است و ابزاری جالب برای ورود داده ها از اشیاء، فایل ها و پایگاه داده به  صفحه HTML استاتیک است. مهمتر اینکه این ابزار، در صفحات اچ تی ام ال ، بدون نیاز به نصب نرم افزاری خاصی قابل استفاده است . از آنجا که HTML فقط برای توصیف اسناد استاتیک طراحی شده است  وغیر فعال بوده، AppML برای توصیف برنامه های کاربردی وب بسیار مناسب است.

AppML توسعه ای ساخته شده برای برنامه های کاربردی وب است که به HTML  ویژگی های داده ای اضافه کرده و آنرا گسترش می دهد. این توسعه، کنترلرهایی به HTML اضافه کرده تا رفتار داده های آنرا کنترل کنند.  AppML بسیار آسان به درک، و برای توسعه فوق العاده سریع است.

هدف اصلی AppML فراهم کردن داده ها برای صفحات HTML است، این ابزار می تواند داده ها را از متغیرها، فایل ها و بانک های اطلاعاتی دریافت کرده و نمایش دهد.

در ادامه مثال هایی برای نمایش اطلاعاتی دریافتی از منابع زیر آمده است:

  • داده ها از یک شی جاوا اسکریپت
  • داده ها از یک فایل جیسون
  • داده ها از یک برنامه کاربردی با PHP

 

2- استفاده از شی جاوا اسکریپت

AppML از یک شی جاوا اسکریپت استفاده می کند. و معمول ترین راه برای استفاده از آن، جدا کردن داده و HTML از هم است که می توانید داده ها را در یک شی جاوا اسکریپت قرار دهید.

 

<!DOCTYPE html>
<html lang=”en-US”>
<title>Customers</title>
<link rel=”stylesheet” href=”style.css”>
<script src=”appml.js”></script>
<body>
<h1>Customers</h1>
<table appml-data=”dataObj”>
<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>
<script>
var dataObj = {
“records”:[
{“CustomerName”:”Alfreds Futterkiste”,”City”:”Berlin”,”Country”:”Germany”},
{“CustomerName”:”Ana Trujillo Emparedados y helados”,”City”:”México D.F.”,”Country”:”Mexico”},
{“CustomerName”:”Antonio Moreno Taquería”,”City”:”México D.F.”,”Country”:”Mexico”}
]};
</script>
</body>
</html>

3- استفاده از فایل JSON

روش معمول دیگر در AppML ، جدا کردن HTML و داده ها و ذخیره کردن داده ها در یک فایل JSON  (جیسون) است. مثال زیر اطلاعات مشتریان که در یک فایل با فرمت JSON ذخیره شده را باز کرده و بصورت جدولی نشان داده است.

<!DOCTYPE html>
<html lang=”en-US”>
<title>Customers</title>
<link rel=”stylesheet” href=”style.css”>
<script src=”appml.js”></script>
<body>
<h1>Customers</h1>
<table appml-data=”customers.js”>
<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>
</body>
</html>

فایل customers.js حاوی مشخصات کارکنان با فرمت JSON بوده و می تواند بصورت زیر باشد :

{
“records”:[
{“CustomerName”:”Alfreds Futterkiste”,”City”:”Berlin”,”Country”:”Germany”},
{“CustomerName”:”Ana Trujillo Emparedados y helados”,”City”:”México D.F.”,”Country”:”Mexico”},
{“CustomerName”:”Antonio Moreno Taquería”,”City”:”México D.F.”,”Country”:”Mexico”},
{“CustomerName”:”Around the Horn”,”City”:”London”,”Country”:”UK”},
{“CustomerName”:”B’s Beverages”,”City”:”London”,”Country”:”UK”},
{“CustomerName”:”Berglunds snabbköp”,”City”:”Luleå”,”Country”:”Sweden”}
]}

4- استفاده از بانک اطلاعاتی

در AppML  میتوان با زبان های برنامه نویسی سمت سرور مثل پی اچ پی برنامه ای نوشت تا به بانک اطلاعاتی متصل شده، رکوردها را خوانده و با فرمت مناسبی به خروجی بفرستد. سپس صفحه HTML با کمک AppML ، این برنامه را فراخوانی کرده و خروجی آنرا در صفحه نمایش دهد.

<table appml-data=”http://www.w3schools.com/appml/customers.php”>
<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>

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فهرست مطالب