AppML 양식
이 장에서는 데이터베이스에 대해 입력 양식을 구성하는 방법을 보여줍니다.
이 페이지의 예에서는 로컬 SQL 데이터베이스를 사용합니다.
로컬 SQL 데이터베이스는 IE 또는 Firefox에서 작동하지 않습니다. 크롬이나 사파리를 이용하세요.
양식 모델 만들기
model_customersform.js
{
"database" : {
"connection" : "localmysql",
"maintable" : "Customers",
"keyfield" : "CustomerID",
"sql" : "SELECT * FROM Customers"},
"updateItems" : [
{"item" :
"CustomerName"},
{"item" : "Address"},
{"item" : "PostalCode"},
{"item" : "City"},
{"item" : "Country"}]
}
HTML 양식 만들기
이전 장에서는 데이터베이스의 레코드를 나열하기 위한 응용 프로그램을 만들었습니다.
이제 페이지에 양식 애플리케이션을 추가합니다.
HTML 양식
<div id="Form01" class="w3-container w3-light-grey w3-padding-large
w3-margin-bottom" appml-data="local?model=model_customersform">
<p>
<label for="customername">Customer:</label>
<input id="customername"
class="w3-input w3-border">
</p>
<p>
<label
for="address">Address:</label>
<input id="address" class="w3-input
w3-border">
</p>
<p>
<label for="city">City:</label>
<input
id="city" class="w3-input w3-border">
</p>
<p>
<label
for="postalcode">Postal Code:</label>
<input id="postalcode"
class="w3-input w3-border">
</p>
<p>
<label for="country">Country:</label>
<input id="country"
class="w3-input w3-border">
</p>
</div>
HTML 양식 설명
appml-data="local?model=model_customersform" 은 양식에 대한 AppML 애플리케이션을 정의합니다.
HTML 양식 명령 만들기
좋아하는 스타일 시트를 사용하고(부트스트랩 사용) 원하는 양식 명령을 만듭니다.
inc_formcommands.htm
<span onclick="document.getElementById('Form01').style.display='none'"
class="w3-button w3-xlarge w3-right">×</span>
<div
class="w3-bar w3-border w3-white">
<button
onclick="appml('Form01').newRecord();" class="w3-btn">New</button>
<button onclick="appml('Form01').saveRecord();" class="w3-btn
w3-green">Save</button>
<button onclick="appml('Form01').deleteRecord();"
class="w3-btn">Delete</button>
</div>
<div id="appmlmessage"
class="w3-container w3-pale-yellow w3-padding" style="display:none;">
<span onclick="this.parentNode.style.display='none';" class="w3-button
w3-xlarge w3-right">×</span>
<div id="message"></div>
</div>
양식 명령 포함
양식에 양식 명령을 포함합니다.
HTML 양식
<div id="Form01" class="w3-container w3-light-grey w3-padding-large
w3-margin-bottom" appml-data="local?model=model_customersform">
<div appml-include-html="inc_formcommands.htm"></div>
<p>
<label for="customername">Customer:</label>
<input
id="customername" class="w3-input w3-border">
</p>
<p>
<label
for="address">Address:</label>
<input id="address" class="w3-input
w3-border">
</p>
<p>
<label for="city">City:</label>
<input
id="city" class="w3-input w3-border">
</p>
<p>
<label
for="postalcode">Postal Code:</label>
<input id="postalcode"
class="w3-input w3-border">
</p>
<p>
<label for="country">Country:</label>
<input id="country"
class="w3-input w3-border">
</p>
</div>
테이블에 클릭 가능한 열 추가
이전 장에서는 데이터베이스의 레코드를 나열하기 위한 응용 프로그램을 만들었습니다.
이제 테이블에 새 열을 추가합니다.
HTML 소스
<div appml-data="local?model=model_customerslist">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<div appml-include-html="inc_filter.htm"></div>
<table
class="w3-table-all">
<tr>
<th></th>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr appml-repeat="records">
<td style="cursor:pointer;width:34px;"
onclick="appml('Form01').run({{CustomerID}})">✎</td>
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
</div>
onclick 이벤트(새 열에서)는 id="Form01"인 HTML 요소에 있는 AppML 애플리케이션을 실행하기 위한 호출을 트리거합니다.
- appml('Form01') 은 AppML 애플리케이션을 반환합니다.
- run({{CustomerID}}) 은 CustomerID를 매개변수로 사용하여 애플리케이션을 실행합니다.
마지막으로 양식 숨기기
양식에 스타일을 추가하여 보이지 않게 합니다.
HTML
<div id="Form01" appml-data="local?model=model_customersform"
appml-controller="myFormController"
class="jumbotron" style="display:none">
양식이 로드되어 데이터를 표시할 준비가 된 경우에만 양식을 표시하려면 양식에 컨트롤러를 추가하십시오.
제어 장치
<script>
function myFormController($appml) {
if ($appml.message ==
"ready") {return -1;}
if ($appml.message == "loaded") {
document.getElementById("Form01").style.display="";
}
}
</script>