이 장에서는 웹 애플리케이션의 프로토 타입을 구축 할 것입니다.
하는 HTML 프로토 타입을 만들기
첫째, 당신의 마음에 드는 CSS를 사용하여, 괜찮은 HTML 프로토 타입을 만들 수 있습니다.
우리는이 예에서 부트 스트랩 사용하고 있습니다 :
예
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<body>
<div class="container">
<h1>Customers</h1>
<table class="table table-striped
table-bordered">
<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>
»스스로를보십시오 {{...}}은 미래의 데이터에 대한 자리 표시 자입니다.
AppML 추가
당신이 HTML 프로토 타입을 만든 후에는 AppML을 추가 할 수 있습니다 :
예
<!DOCTYPE html>
<html lang="en-US">
<title>Customers</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3ii.com/appml/2.0.3/appml.js"></script>
<script src="http://www.w3ii.com/appml/2.0.3/appml_sql.js"></script>
<body>
<div class="container" appml-data="customers.js" >
<h1>Customers</h1>
<table class="table table-striped
table-bordered">
<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>
»스스로를보십시오 AppML 추가 :
<스크립트 SRC = "http://www.w3ii.com/appml/2.0.3/appml.js">
로컬 WebSQL 데이터베이스를 추가 :
<스크립트 SRC = "http://www.w3ii.com/appml/2.0.3/appml_sql.js">
데이터 소스를 정의합니다 :
appml 데이터 = "customers.js"
기록의 각 레코드에 대해 반복되는 HTML 요소를 정의합니다 :
appml_repeat = "기록"
그것은 간단하게 같은 로컬 데이터와 함께 시작하려면 customers.js 데이터베이스에 연결하기 전에.
AppML 모델 만들기
데이터베이스를 사용할 수 있도록하기 위해, 당신은 AppML 데이터베이스 모델이 필요합니다 :
proto_customers.js
{
"rowsperpage" : 10,
"database" : {
"connection"
: "localmysql",
"sql" : "Select * from Customers",
"orderby"
: "CustomerName",
}로컬 데이터베이스가없는 경우, 당신은 웹 SQL 데이터베이스를 생성하기 위해 AppML 모델을 사용할 수 있습니다.
하나의 레코드가있는 테이블을 만들려면이 같은 모델을 사용 proto_customers_single.js를 .
로컬 데이터베이스를 만들기 IE 나 파이어 폭스에서 작동하지 않습니다. 크롬이나 사파리를 사용합니다.
응용 프로그램에서 모델을 사용합니다. ? 지역 모델 = proto_customers_single에 데이터 소스를 변경합니다 :
예
<div appml-data=" local?model=proto_customers_single ">
<h1>Customers</h1>
<table class="table table-striped
table-bordered">
<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> »스스로를보십시오 여러 레코드와 로컬 데이터베이스 만들기
여러 레코드가있는 테이블을 만들려면이 같은 모델을 사용 proto_customers_all.js를 .
지역? 모델 = proto_customers_all에 데이터 소스를 변경
예
<div appml-data=" local?model=proto_customers_all ">
<h1>Customers</h1>
<table class="table table-striped
table-bordered">
<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="btn-group" role="toolbar" style="margin-bottom:10px;">
<button id='appmlbtn_first' type="button"
class="btn btn-default">
<span class="glyphicon
glyphicon-fast-backward"></span></button>
<button id='appmlbtn_previous'
type="button" class="btn btn-default">
<span class="glyphicon
glyphicon-backward"></span></button>
<button id='appmlbtn_text'
type="button" class="btn btn-default disabled"></button>
<button
id='appmlbtn_next' type="button" class="btn btn-default">
<span
class="glyphicon glyphicon-forward"></span></button>
<button id='appmlbtn_last' type="button" class="btn btn-default">
<span class="glyphicon glyphicon-fast-forward"></span></button>
<button id='appmlbtn_query' type="button"
class="btn btn-primary">
<span class="glyphicon
glyphicon-search"></span> Filter</button>
</div>
<div
id="appmlmessage"></div>
같은 적절한 이름을 가진 파일의 템플릿을 저장 "inc_listcommands.htm" .
속성을 가진 프로토 타입의 템플릿을 포함 appml-포함-HTML을 :
예
<div appml-data="local?model=proto_customers_all">
<h1>Customers</h1>
<div
appml-include-html="inc_listcommands.htm" ></div>
<table
class="table table-striped table-bordered">
<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> »스스로를보십시오