AppML – wprowadzanie danych do HTML

Wpis ten ma na celu przedstawić jedno z narzędzi JavaScript, pozwalające w łatwy sposób dostarczać i wyświetlać dane na stronach internetowych: AppML

1. Co to jest AppML?

AppML oznacza język modelowania aplikacji. Może działać na dowolnej stronie HTML, bez instalacji. Pozwala w łatwy sposób wprowadzić dane do aplikacji HTML z obiektów JavaScript, plików lub baz danych.

2. Przykład wykorzystania

Aby móc korzystać z AppML, musimy dołączyć do naszej strony skrypt https://www.w3schools.com/appml/2.0.3/appml.js

Załóżmy, że mamy następujący plik z danymi zapisanymi jako obiekt w pliku js o nazwie baza.js:

{"wpisy":[
{"imie":"Jan Kowalski","miasto":"Warszawa","kraj":"Polska"},
{"imie":"Johny English","miasto":"Londyn","kraj":"Wielka Brytania"},
{"imie":"April Ryan","miasto":"Nowy Jork","kraj":"USA"}
]
}

Tak może wyglądać szablon naszego dokumentu html:

<!DOCTYPE html>
<html lang="pl">
<script src="https://www.w3schools.com/appml/2.0.3/appml.js"></script>
<body>
<table appml-data="baza.js">
<tr>
<th>Imię</th>
<th>Miasto</th>
<th>Kraj</th>
</tr>
<tr appml-repeat="wpisy">
<td>{{imie}}</td>
<td>{{miasto}}</td>
<td>{{kraj}}</td>
</tr>
</table>
</body>
</html>

Po otworzeniu pliku w przeglądarce zobaczymy tabelkę z uzupełnionymi danymi z pliku baza.js czyli takie coś:

Imię Miasto Kraj
Jan Kowalski Warszawa Polska
Johny English Londyn Wielka Brytania
April Ryan Nowy Jork USA

3. Podsumowanie

Jak widać, jest to proste narzędzie, ale z naprawdę olbrzymi możliwościami! Jeszcze nie miałem okazji sam go używać, ale kto wie, może w niedalekiej przyszłości… 🙂

Wpis został oparty o artykuł ze strony https://www.w3schools.com/appml/default.asp

Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close