Encja: &{{nazwa}};
Kod: {{kodh}}
Aplikacja jest prostym przykładem zastosowania języka modelowania aplikacji AppML (Application Modeling Language). Ważne elementy kodu aplikacji zostały wyróżnione w kodzie HTML i JS.
Do strony dołączony jest skrypt:
<script src='https://www.w3schools.com/appml/2.0.3/appml.js'></script>
Dane (nazwy i kody szesnastkowe encji) są zapisane w pliku encje.js w postaci obiektu JavaScript:
{'encje':[ {'nazwa':'amp','kodh':'x26','encja':'&'}, {'nazwa':'lt','kodh':'x3C','encja':'<'}, {'nazwa':'gt','kodh':'x3E','encja':'>'}, {'nazwa':'apos','kodh':'x27','encja':'''}, {'nazwa':'alpha','kodh':'x03B1','encja':'α'}, {'nazwa':'beta','kodh':'x03B2','encja':'β'}, {'nazwa':'gamma','kodh':'x03B3','encja':'γ'}, {'nazwa':'delta','kodh':'x03B4','encja':'δ'}, {'nazwa':'larr','kodh':'x2190','encja':'←'}, {'nazwa':'uarr','kodh':'x2191','encja':'↑'}, {'nazwa':'rarr','kodh':'x2192','encja':'→'}, {'nazwa':'darr','kodh':'x2193','encja':'↓'} ] }
Fragment kodu HTML aplikacji:
<div appml-data='encje.js'> <div appml-repeat='encje' style='float:left; margin-bottom: 25px;'> <p>Encja: <em>&{{nazwa}};</em></p> <p>Kod: {{kodh}}</p> <div class='encja'>{{encja}}</div> </div> </div>
oraz stylu CSS:
.encja { width: 150px; padding: 25px; font-size: 144px; text-align: center; float: left; border: solid 0px black; border-radius: 10px; margin: 5px; background-color: aliceblue; } div > p { text-align: center; font-family: verdana; }