loader image

Como criar uma interface para seu aplicativo mobile usando Framework 7

Atenção: Se você é preguiçoso e não gosta de ler, então não me peça ajuda!!!! Aprenda a ler textos e documentos técnicos, compreender e interpretar passo-a-passos. Rotina esta que faz parte da carreira de qualquer profissional de tecnologia, não importando a área.

O F7 foi introduzido no PhoneGap em 2015 e deste então se tornou um popular framework para desenvolvimento mobile, talvez seja um dos mais organizados frameworks para aplicativos híbridos, fácil de organizar seu conteúdo e utiliza do DOM7 para executar interações JavScript suja a sintaxe é similar ao JQuery. Bons estudos!

 

IMPORTANTE! Use o Brackets.

O F7 necessita obrigatoriamente de Um servidor HTTP. Recomendo o uso do Brackets, que cria este ambiente para você sem a necessidade de instalar outros softwares.

 

Passo-a-passo de como criar uma interface para o seu aplicativo.

Preparando o projeto

  1. Instale o Brackets
  2. Crie uma pasta para o seu projeto. Esta pasta pode ser criada em qualquer local, inclusive dentro de um pen-drive.
  3. Agora, dentro da pasta que você criou para o seu projeto, crie uma subpasta com o nome de www. Esta estrutura de pasta é a recomenda para aplicativos híbridos.
  4. Faça o download do F7 no site oficial. Este tutorial vai usar a versão mais recente até a data da publicação deste artigo, a versão 2.1.3
  5. Descompacte o arquivo baixado e copie a pasta dist para dentro da pasta www criado no passo 3
  6. Renomeie a pasta dist para f7.

 

Programando a página inicial index.html

  1. No Brackets, clique no menu FILE > Open Folder, ou em português; ARQUIVO > Abrir Pasta e aponte para a pasta www criada durante a preparação do projeto. Este passo é importante para que o Brackets simule um servidor HTTP.
  2. Dentro da pasta www, crie um arquivo chamado de index.html
  3. O index.html deve conter o esqueleto básico do F7 disponível na documentação – https://framework7.io/docs/app-layout.html. Copie o código HTML para a sua página index.html
    <!DOCTYPE html>
    <html>
      <head>
        <!-- Required meta tags-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!-- Color theme for statusbar -->
        <meta name="theme-color" content="#2196f3">
        <!-- Your app title -->
        <title>My App</title>
        <!-- Path to Framework7 Library CSS -->
        <link rel="stylesheet" href="path/to/framework7.min.css">
        <!-- Path to your custom app styles-->
        <link rel="stylesheet" href="path/to/my-app.css">
      </head>
      <body>
        <!-- App root element -->
        <div id="app">
          <!-- Statusbar overlay -->
          <div class="statusbar"></div>
    
          <!-- Your main view, should have "view-main" class -->
          <div class="view view-main">
            <!-- Initial Page, "data-name" contains page name -->
            <div data-name="home" class="page">
    
              <!-- Top Navbar -->
              <div class="navbar">
                <div class="navbar-inner">
                  <div class="title">Awesome App</div>
                </div>
              </div>
    
              <!-- Toolbar -->
              <div class="toolbar">
                <div class="toolbar-inner">
                  <!-- Toolbar links -->
                  <a href="#" class="link">Link 1</a>
                  <a href="#" class="link">Link 2</a>
                </div>
              </div>
    
              <!-- Scrollable page content -->
              <div class="page-content">
                <p>Page content goes here</p>
                <!-- Link to another page -->
                <a href="/about/">About app</a>
              </div>
            </div>
          </div>
        </div>
        <!-- Path to Framework7 Library JS-->
        <script type="text/javascript" src="path/to/framework7.min.js"></script>
        <!-- Path to your app js-->
        <script type="text/javascript" src="path/to/my-app.js"></script>
      </body>
    </html>
    
  4. Edite a linha 13 apontando o caminho dos arquivos CSS para a pasta f7 criada durante a preparação do projeto. Ficando:
    <link rel="stylesheet" href="f7/css/framework7.min.css">
    
  5. Exclua a linha 15. O arquivo my-app.css é um arquivo vazio reservado para que você personalize seu próprio CSS, este não o foco desta aula.
  6. Edite as linhas 54 e 56, novamente apontando os arquivos JS para a pasta f7, igual fizemos no passo 4. Ficando:
    <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="f7/js/framework7.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="f7/js/my-app.js"></script>
    

 

Criando o arquivo my-app.js para iniciar o aplicativo

Se você olhar para a pasta js do framework7, verá que o arquivo my-app.js não existe, portanto, teremos que criá-lo. Este arquivo é responsável por carregar as configurações básicas do App.

  1. Crie um novo arquivo no Brackets e salve-o em f7/dist/js/my-app.js.
  2. O conteúdo deste arquivo também está disponível na documentação do f7, veja em https://framework7.io/docs/init-app.html. Dos vários exemplos mostrados nesta página, iremos usar o mais básico que é este:
    var app = new Framework7({
      // App root element
      root: '#app',
      // App Name
      name: 'My App',
      // App id
      id: 'com.myapp.test',
      // Enable swipe panel
      panel: {
        swipe: 'left',
      },
      // Add default routes
      routes: [
        {
          path: '/about/',
          url: 'about.html',
        },
      ],
      // ... other parameters
    });
    
    var mainView = app.views.create('.view-main');
    

    Copie e cole este código para o seu arquivo my-app.js e salve.

 

Grite SÉÉÉÉRGIOOOO bem alto para dar sorte! Vamos testar

Para testar, utilize o LIVE PREVIEW do Brackets. Lembrando que o Brackets deverá carregar um endereço HTTP:// e não FILE://. Se isso não ocorrer, revise o passo 1 do item “Programando a página inicial index.html”.

O resultado, usando o modo de visualização mobile do Chrome (pressione F12 do teclado) será este:

 

Criando as páginas internas

Agora temos que criar novas páginas para o nosso aplicativo. O arquivo my-app.js já possui um exemplo de chamada de uma página chamada about.html. Embora o arquivo tenha o exemplo em seu código, a página about.html na verdade não existe. Propositalmente, deveremos então criá-la para aprendemos a usar o my-app.js.

  1. Crie um novo arquivo no seu brackets, salve-0 na pasta www com o nome de about.html
  2. De acordo com a documentação do F7, todas as páginas devem seguir um outro esqueto mostrado em https://framework7.io/docs/page.html. Utilize este esqueleto no arquivo criado;
    <div class="page" data-name="home">
      <div class="page-content">
        ... scrollable page content goes here ...
      </div>
    </div>
    
  3. Edite o valor do data-name mostrado na linha 1 para data-name=”about”, ficando:
    <div class="page" data-name="about">
    
  4. Teste novamente no Live Preview!

 

Colocando um menu no arquivo about.html

Perceba que ao testar, o arquivo about.html perde o menu. Vocë pode resolver isso facilmente acrescentando o copiando o código do menu do index.html. O código completo ficará assim:

<div class="page" data-name="about">
    
    <!-- Top Navbar, Sempre antes da DIV page-content -->
    <div class="navbar">
        <div class="navbar-inner">
            <div class="title">Awesome App</div>
        </div>
    </div>

    <div class="page-content">
        ... scrollable page content goes here ...
    </div>
</div>

Novamente, faço o teste!

 

Criando uma terceira página, teste.html

Agora vamos ver se você aprendeu a criar novas páginas. Vamos criar uma terceira página chamada de teste.html

  1. Crie um novo arquivo, salve-o dentro da pasta www com o nome de teste.html
  2. Utilize o mesmo esqueleto usado no arquivo about.html para montar o código do teste.html e salve o arquivo em seguida.
  3. Agora, abra o arquivo js/my-app.js e localize o bloco routes:, acrescente neste bloco uma rota para o arquivo teste.html seguindo o mesmo padrão do about.html que já se encontra roteado. Ficando assim;
      // Add default routes
      routes: [
        {
          path: '/about/',
          url: 'about.html',
        },
        {
          path: '/teste/',
          url: 'teste.html',
        },
      ],
    

Perceba então que, para cada página criada você deverá sempre seguir o mesmo padrão de rota no arquivo my-app.js.

Por fim, agora para que o arquivo teste.html seja carregado dentro do index.html será necessário criar um link. Novamente você poderá utilizar o mesmo exemplo já codificado no index.html, ficando;

<!-- Link to another page -->
            <a href="/about/">About app</a><br>
            <a href="/teste/">Teste</a>

E agora? qual o próximo passo?

Agora é hora de desemvolver o seu app, veja as aulas a seguir;

Deixe seu comentário