방법이 쉬운 단계에서 AppML 응용 프로그램을 빌드합니다.
1. HTML과 CSS를 사용하여 페이지 만들기
HTML
<!DOCTYPE html>
<html lang="en-US">
<link rel="stylesheet" href="style.css">
<title>Customers</title>
<body>
<h1>Customers</h1>
<table>
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</body>
</html>
»스스로를보십시오 은 {{}} 괄호 AppML 데이터에 대한 자리 표시 자입니다.
CSS
body {
font: 14px Verdana, sans-serif;
}
h1 {
color: #996600;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid grey;
padding: 5px;
text-align: left;
}
table
tr:nth-child(odd) {
background-color: #f1f1f1;
}
자신의 좋아하는 스타일 시트로 CSS를 교체하시기 바랍니다.
2. AppML 추가
페이지에 데이터를 추가 할 AppML를 사용하여
예
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="style.css">
<script src="http://www.w3ii.com/appml/2.0.3/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> »스스로를보십시오 AppML는 설명했다 :
<스크립트 SRC = "는 http://www.w3ii.com/appml/2.0.3/appml.js는"> 페이지에 AppML를 추가합니다.
appml 데이터 = "customers.js는"AppML 데이터 연결 (customers.js) 있는 HTML로 element (<table>) .
이 경우 우리는 JSON 파일을 사용하고 있습니다 : customers.js를
appml-반복 = "기록"은 HTML 엘리먼트 반복 (<tr>) 각 항목 (records) 데이터 객체에있다.
은 {{}} 괄호 AppML 데이터에 대한 자리 표시 자입니다.