tutoriais mais recente desenvolvimento web
 

AppML Dados


O principal objetivo do appML é fornecer dados para páginas HTML.


Conectando appML de Dados

  • appML pode exibir dados de variáveis
  • appML pode exibir dados de arquivos
  • appML pode exibir dados de bancos de dados

appML Usando um JavaScript Object

uma maneira comum para separar HTML e Dados, é armazenar os dados em um objeto JavaScript.

Exemplo

<table appml-data=" dataObj ">
<tr>
  <th>Customer</th>
  <th>City</th>
  <th>Country</th>
</tr>
<tr appml-repeat="records">
  <td>{{CustomerName}}</td>
  <td>{{City}}</td>
  <td>{{Country}}</td>
</tr>
</table>

<script>
var dataObj = {
"records":[
{"CustomerName":"alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"ana Trujillo Emparedados y helados","City":"Mexico D.F.","Country":"Mexico"},
{"CustomerName":"antonio Moreno Taqueria","City":"Mexico D.F.","Country":"Mexico"},
{"CustomerName":"around the Horn","City":"London","Country":"UK"},
{"CustomerName":"B's Beverages","City":"London","Country":"UK"},
{"CustomerName":"Berglunds snabbkop","City":"Lulea","Country":"Sweden"},
{"CustomerName":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
{"CustomerName":"Blondel pere et fils","City":"Strasbourg","Country":"France"},
{"CustomerName":"Bolido Comidas preparadas","City":"Madrid","Country":"Spain"},
{"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
{"CustomerName":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Cactus Comidas para llevar","City":"Buenos aires","Country":"argentina"},
{"CustomerName":"Centro comercial Moctezuma","City":"Mexico D.F.","Country":"Mexico"},
{"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
{"CustomerName":"Comercio Mineiro","City":"Sao Paulo","Country":"Brazil"}
]};
</script>
Tente você mesmo "

appML Usando um arquivo JSON

Outra forma comum para separar HTML e Dados, é armazenar os dados em um arquivo JSON:

customers.js

{
"records":[
{"CustomerName":"alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"ana Trujillo Emparedados y helados","City":"Mexico D.F.","Country":"Mexico"},
{"CustomerName":"antonio Moreno Taqueria","City":"Mexico D.F.","Country":"Mexico"},
{"CustomerName":"around the Horn","City":"London","Country":"UK"},
{"CustomerName":"B's Beverages","City":"London","Country":"UK"},
{"CustomerName":"Berglunds snabbkop","City":"Lulea","Country":"Sweden"},
{"CustomerName":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
{"CustomerName":"Blondel pere et fils","City":"Strasbourg","Country":"France"},
{"CustomerName":"Bolido Comidas preparadas","City":"Madrid","Country":"Spain"},
{"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
{"CustomerName":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Cactus Comidas para llevar","City":"Buenos aires","Country":"argentina"},
{"CustomerName":"Centro comercial Moctezuma","City":"Mexico D.F.","Country":"Mexico"},
{"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
{"CustomerName":"Comercio Mineiro","City":"Sao Paulo","Country":"Brazil"}
]
}

Com appML, você pode especificar um arquivo JSON como fonte de dados na appml-data atributo:

Exemplo

<table appml-data="customers.js ">
<tr>
  <th>Customer</th>
  <th>City</th>
  <th>Country</th>
</tr>
<tr appml-repeat="records">
  <td>{{CustomerName}}</td>
  <td>{{City}}</td>
  <td>{{Country}}</td>
</tr>
</table>
Tente você mesmo "

appML Usando um banco de dados

Com uma pequena ajuda de um servidor web, você pode alimentar a sua aplicação com dados SQL.

Este exemplo usa PHP para ler dados de um banco de dados MySQL:

Exemplo

<table appml-data=" http://www.w3ii.com/appml/customers.php" >
<tr>
  <th>Customer</th>
  <th>City</th>
  <th>Country</th>
</tr>
<tr appml-repeat="records">
  <td>{{CustomerName}}</td>
  <td>{{City}}</td>
  <td>{{Country}}</td>
</tr>
</table>
Tente você mesmo "

Este exemplo usa .NET para ler dados de um banco de dados SQL Server:

Exemplo

<table appml-data=" http://www.w3ii.com/appml/customers.aspx" >
<tr>
  <th>Customer</th>
  <th>City</th>
  <th>Country</th>
</tr>
<tr appml-repeat="records">
  <td>{{CustomerName}}</td>
  <td>{{City}}</td>
  <td>{{Country}}</td>
</tr>
</table>
Tente você mesmo "

The Power of appML

Você está prestes a descobrir o poder da appML.

appML pode fornecer dados, controladores e modelos para:

  • Super-fácil o desenvolvimento de aplicações HTML
  • Super-fácil modelagem, prototipagem e teste

Você pode colocar como muitas aplicações appML que quiser dentro de uma página HTML.

não appML não interferir com outras partes da página.

Você tem HTML completa, CSS e JavaScript liberdade.

appML pode ser usado para desenvolver aplicativos CRUD web grande escala.

CRUD: C reate, R ead, L pdate, D elete.

Para descobrir o poder da appML: Ver um appML demonstração .