ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
AppML. Уроки для начинающих

AppML Прототип


В этом разделе мы создадим прототип веб-приложения.


Создать HTML прототип

Сначала создайте достойный HTML прототип, используя свой любимый CSS.

В этом примере мы использовали фреймворк W3.CSS:

Пример

<!DOCTYPE html>
<html lang="ru">

<title>Клиенты</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>

<div class="w3-container">
<h1>Клиенты</h1>
<table class="w3-table-all">
  <tr>
    <th>Клиент</th>
    <th>Город</th>
    <th>Страна</th>
  </tr>
  <tr>
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
  </tr>
</table>
</div>

</body>
</html>
Попробуйте сами »

{{ ... }} Заполнители для будущих данных.


Добавить AppML

После того, как вы создали HTML прототип, вы можете добавить AppML:

Пример

<!DOCTYPE html>
<html lang="ru">
<title>Клиенты</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>Клиенты</h1>
<table class="w3-table-all">
  <tr>
    <th>Клиент</th>
    <th>Город</th>
    <th>Страна</th>
  </tr>
  <tr appml-repeat="records">
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
  </tr>
</table>
</div>

</body>
</html>
Попробуйте сами »

Добавить AppML:

<script src="https://www.w3schools.com/appml/2.0.3/appml.js">

Добавить локальную базу данных WebSQL:

<script src="https://www.w3schools.com/appml/2.0.3/appml_sql.js">

Определите источник данных:

appml-data="customers.js"

Определите элемент HTML, который будет повторяться для каждой записи в записях:

appml_repeat="records"

Чтобы упростить задачу, начните с локальных данных, например customers.js перед подключением к базе данных.


Создать AppML модель

Чтобы иметь возможность использовать базу данных, вам понадобится модель базы данных AppML:

proto_customers.js

{
"rowsperpage" : 10,
"database" : {
"connection" : "localmysql",
"sql" : "Select * from Customers",
"orderby" : "CustomerName",
}

Если у вас нет локальной базы данных, вы можете использовать модель AppML для создания базы данных Web SQL.

Чтобы создать таблицу с одной записью, используйте такую модель: proto_customers_single.js.

Создание локальной базы данных не работает в IE или Firefox. Используйте Chrome или Safari.

Используйте модель в своем приложении. Измените источник данных на local?model=proto_customers_single:

Пример

<div class="w3-container" appml-data="local?model=proto_customers_single">
<h1>Клиенты</h1>
<table class="w3-table-all">
  <tr>
    <th>Клиент</th>
    <th>Город</th>
    <th>Страна</th>
  </tr>
  <tr appml-repeat="records">
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
  </tr>
</table>
</div>
Попробуйте сами »

Создание локальной базы данных с несколькими записями

Чтобы создать таблицу с несколькими записями, используйте такую модель: proto_customers_all.js.

Измените источник данных на local?model=proto_customers_all

Пример

<div class="w3-container" appml-data="local?model=proto_customers_all">
<h1>Клиенты</h1>
<table class="w3-table-all">
  <tr>
    <th>Клиент</th>
    <th>Город</th>
    <th>Страна</th>
  </tr>
  <tr appml-repeat="records">
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
  <td>{{Country}}</td>
  </tr>
</table>
</div>
Попробуйте сами »

Добавить шаблон навигации

Предположим, вы хотите, чтобы все ваши приложения имели общую панель навигации:

Создайте для него HTML-шаблон:

inc_listcommands.html

<div class="w3-bar w3-border w3-section">
<button class="w3-button" id='appmlbtn_first'>&#10094;&#10094;</button>
<button class="w3-button" id='appmlbtn_previous'>&#10094;</button>
<button class="w3-button w3-hover-none" id='appmlbtn_text'></button>
<button class="w3-button" id='appmlbtn_next'>&#10095;</button>
<button class="w3-button" id='appmlbtn_last'>&#10095;&#10095;</button>
<button class="w3-button w3-green" id='appmlbtn_query'>Filter</button>
</div>

<div id="appmlmessage"></div>

Сохраните шаблон в файле с собственным именем, например "inc_listcommands.html".

Включите шаблон в свой прототип с атрибутом appml-include-html:

Пример

<div class="w3-container" appml-data="local?model=proto_customers_all">
<h1>Клиенты</h1>
<div appml-include-html="inc_listcommands.html"></div>

<table class="w3-table-all">
  <tr>
    <th>Клиент</th>
    <th>Город</th>
    <th>Страна</th>
  </tr>
  <tr appml-repeat="records">
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
  </tr>
</table>
</div>
Попробуйте сами »