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

AppML Как работает


Как создать приложение AppML за 2 простых шага.


1. Создать страницу, используя HTML и CSS

HTML

<!DOCTYPE html>
<html lang="ru">
<link rel="stylesheet" href="style.css">
<title>Клиенты</title>
<body>

<h1>Клиенты</h1>

<table>
<tr>
  <th>Клиент</th>
  <th>Город</th>
  <th>Страна</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="ru">
<title>Клиенты</title>
<link rel="stylesheet" href="style.css">
<script src="https://w3schoolsrus.github.io/appml/2.0.3/appml.js"></script>
<body>

<h1>Клиенты</h1>

<table appml-data="https://www.w3schools.com/appml/customers.js">
<tr>
  <th>Клиент</th>
  <th>Город</th>
  <th>Страна</th>
</tr>
<tr appml-repeat="records">
  <td>{{CustomerName}}</td>
  <td>{{City}}</td>
  <td>{{Country}}</td>
</tr>
</table>

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

AppML Объяснение:

<script src="https://www.w3schools.com/appml/2.0.3/appml.js"> добавьте AppML на вашу страницу.

appml-data="customers.js" связывает данные AppML (customers.js) с HTML элементом (<table>).

В данном случае мы использовали файл JSON: customers.js

appml-repeat="records" повторяет HTML элемент (<tr>) для каждого элемента (записи) в объекте данных.

Скобки {{ }} являются заполнителями для данных AppML.