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
- Instale o Brackets
- Crie uma pasta para o seu projeto. Esta pasta pode ser criada em qualquer local, inclusive dentro de um pen-drive.
- 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.
- 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
- Descompacte o arquivo baixado e copie a pasta dist para dentro da pasta www criado no passo 3
- Renomeie a pasta dist para f7.
Programando a página inicial index.html
- 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.
- Dentro da pasta www, crie um arquivo chamado de index.html
- 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> - 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">
- 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.
- 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.
- Crie um novo arquivo no Brackets e salve-o em f7/dist/js/my-app.js.
- 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.
- Crie um novo arquivo no seu brackets, salve-0 na pasta www com o nome de about.html
- 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> - Edite o valor do data-name mostrado na linha 1 para data-name=”about”, ficando:
<div class="page" data-name="about">
- 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
- Crie um novo arquivo, salve-o dentro da pasta www com o nome de teste.html
- Utilize o mesmo esqueleto usado no arquivo about.html para montar o código do teste.html e salve o arquivo em seguida.
- 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;
