Wiki

Clone wiki

amarok3 / Templates

Os arquivos de views usados no amarok sao templates de SMARTY

A tag padrao do Smarty foi modificada pra nao conflitar com o Angular e nem os Js da pagina. Fica livre a transicao de informacoes do PHP e o Js script da Pagina.

como usar um layout da web ou entender como funciona , tah aqui Envio de temas e templates

Um Otimo exemplo disse eh para usar funcoes ajax na pagina seu template deve sempre ter a Tag Tag padrao SMARTY : {? ... ?} Os templates devem comecar do body os includes de css devem vir em seguida, logo apos o html , e no rodape o js global. Por padrao vem carregados : Jquery , Twitter Bootstrap e AngularJs.

index.tpl

#!html
<body>
    <!-- Main stylesheets -->
    <link href="{?$css?}main.css" rel="stylesheet" type="text/css"> 

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">{?$nome_site?}</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="home">Home</a></li>
              <li><a href="conectar">Conectar</a></li>
              <li><a href="forms">Forms</a></li>
              <li><a href="contato">Contato</a></li>
              <li><a href="logoff">Logoff</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
    <div class="container">
     {?include file=$partial?}  
    </div> <!-- /container -->
    <script type="text/javascript" src="{?$js?}exemplo.js"></script>

     <script type="text/javascript">
        // document ready function
        $(document).ready(function() {
            console.log("javascript aqui");
        });
    </script>
</body>
deve ter um formulario de login ou boas vindas no caso esse template tem um menu de navegacao

_home.tpl

#!html

<!--pode ter listagem de entidades do sistema. -->
<script>
    function ExemploListCtrl($scope) {
        {?carregar entidade="usuario" nome="zezinho"?}
        {?lista entidade="grupo" nome="grupos"?}  
    }
</script>
<div class="container" style="padding-top: 60px" ng-controller="ExemploListCtrl">
Filtro: <input ng-model="query">
    <ul>
        <li ng-repeat="grupo in grupos | filter:query">
            {{grupo.NOME}}
            <p>{{grupo.DESCRICAO}}</p>
        </li>
    </ul>

        ..{{zezinho.NOME}}..
        <br>
        Filtro: <input ng-model="usuario.NOME">
        <ul>
        <li ng-repeat="endereco in usuario.ENDERECO">
            <p>{{endereco}}</p>
        </li>
    </ul>
</div>

Aqui carregamos do servidor {? ... ?}os dados de um usuario ou uma listagem de grupos e usamos elas na paina como se fossem um objeto json , repare que p fpreach eh uma tag html e nao uma class ou id.

Updated