Framework7 é um popular framework CSS para aplicações mobile híbridas, ou seja, funciona e praticamente em qualquer dispositivo com Android e iOS.
Para utilizar o Framework7 no Intel XDK devemos usar o gerenciador de dependências do Bower, presente no Intel XDK.
- Inicie um novo projeto HTML 5 + Cordova no seu Intel XDK.
- Agora acesse as configurações do seu projeto e procure pelo menu Bower Managed Libraries.
- Utilize o campo de busca para encontrar o Framework7 e clique em Install após localizá-lo.
- Clique em Install e aguarde a finalização da instalação, o resultado será este;
Importante: É importante conhecer a estrutura de arquivos gerado pelo brower, todas as referências que faremos ao Framework7 dentro da nossa aplicação deverão apontar para o caminho bower_components/framework7/dist/
Criando a primeira aplicação.
Para a nossa primeira aplicação vamos usar como base o exemplo mostrado no próprio site da Framework7 disponível em https://framework7.io/get-started/
- Edite o arquivo index.html. Localize a linha
<link rel="stylesheet" href="css/app.css">
Substitua esta linha pelos CSS dos Framework7 que são;
<!-- estilo com inspiração no iOS --> <link rel="stylesheet" href="bower_components/framework7/dist/css/framework7.ios.min.css"> <!-- cores e estilos --> <link rel="stylesheet" href="bower_components/framework7/dist/css/framework7.ios.colors.min.css"> <!-- Seu CSS personalizado, caso queira ter um! --> <link rel="stylesheet" href="bower_components/framework7/dist/css/my-app.css">
- Agora substitua todo o conteúdo do <body></body> por este;
<body> <!-- Status bar overlay for full screen mode (PhoneGap) --> <div class="statusbar-overlay"></div> <!-- Panels overlay--> <div class="panel-overlay"></div> <!-- Left panel with reveal effect--> <div class="panel panel-left panel-reveal"> <div class="content-block"> <p>Left panel content goes here</p> </div> </div> <!-- Views --> <div class="views"> <!-- Your main view, should have "view-main" class --> <div class="view view-main"> <!-- Top Navbar--> <div class="navbar"> <div class="navbar-inner"> <!-- We need cool sliding animation on title element, so we have additional "sliding" class --> <div class="center sliding">Awesome App</div> <div class="right"> <!-- Right link contains only icon - additional "icon-only" class Additional "open-panel" class tells app to open panel when we click on this link --> <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a> </div> </div> </div> <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes--> <div class="pages navbar-through toolbar-through"> <!-- Page, "data-page" contains page name --> <div data-page="index" class="page"> <!-- Scrollable page content --> <div class="page-content"> <p>Page content goes here</p> <!-- Link to another page --> <a href="about.html">About app</a> </div> </div> </div> <!-- Bottom 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> </div> </div> <!-- Path to Framework7 Library JS--> <script type="text/javascript" src="bower_components/framework7/dist/js/framework7.min.js"></script> <!-- Path to your app js--> <script type="text/javascript" src="bower_components/framework7/dist/js/my-app.js"></script> </body> - Pronto! Fácil né? Agora é só emular a sua aplicação, o resultado será este (clique na imagem para executar o GIF)
Criando uma segunda página para a aplicação.
Lembro mais uma vez que este exemplo é exatamente o mesmo mostrado na documentação do Framework7, certo? Eu estou apenas alterando o caminho dos arquivos respeitando a estrutura do Bower.
Então vamos agora partir para a criação da nossa segunda página, a about.html
Crie um novo arquivo nomeador de about.html com o seguinte conteúdo;
<!-- Não precisamos de layout completo neste arquivo porque esta página será analisada com o Ajax. Este é código suficiente .navbar e .page -> --> <!-- Top Navbar--> <div class="navbar"> <div class="navbar-inner"> <div class="left"> <a href="#" class="back link"> <i class="icon icon-back"></i> <span>Back</span> </a> </div> <div class="center sliding">About</div> <div class="right"> <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a> </div> </div> </div> <div class="pages"> <div data-page="about" class="page"> <div class="page-content"> <div class="content-block"> <p>Here is About page!</p> <p>Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.</p> </div> </div> </div> </div>
O resultado da simulação será este;
Agora sim, nossa aplicação está ganhando forma! Daqui em diante é explorar a documentação do Framework7 e descobrir os seus recursos e