Iniciando com o App Framework 2.0

O Intel® XDK inclui a biblioteca JavaScript App Framework JavaScript*, uma biblioteca extremamente rápida em plataforma cruzada para a criação de Interfaces Gráficas (UI) desenvolvida do zero para aplicações móveis em HTML5. Os estilos de UI desta biblioteca foram desenvolvidos para se adaptar facilmente à sua plataforma alvo (Google Android*, Apple iOS*, Microsoft Windows* 8, e os novos dispositivos RIM Blackberry*), para que você possa dar à sua aplicação um look and feel compatível com o sistema operacional. A biblioteca App Framework também inclui uma biblioteca opcional de query selectors que se beneficia das últimas funcionalidades de HTML5 e CSS3 dos navegadores e suporta seletores válidos de CSS do W3C. A biblioteca de query selector é um subconjunto da popular biblioteca jQuery*, e teve seu desempenho otimizado para dispositivos móveis; se você preferir, você também pode utilizar componentes de UI da biblioteca App Framework com a biblioteca padrão do jQuery, para maximizar as funcionalidades do jQuery.

Site para Download:App Framework 2.0

Quando utilizar o App Framework, se certifique de utilizar apenas seletores válidos do W3C. A UI do App Framework foi criada para aplicativos móveis, portanto ela pode apresentar resultados não desejados em navegadores de desktop.

Criando uma aplicação simples, com apenas uma página:

Vamos iniciar incluindo ao App Framework na seção head de uma página, de uma content delivery network (CDN):

<script src="//cdn.app-framework-software.intel.com/appframework.min.js" type="text/javascript"></script>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Ou da localização do download feito localmente:

<script type="text/javascript" charset="utf-8" src="appframework-2.0/ui/src/appframework.ui.js"></script>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Defina as configurações meta e inclua as folhas de estilo afui.css  e icons.css  para os estilos padrão.

    <head>
        <title>App Framework single page</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <link rel="stylesheet" type="text/css" href="appframework-2.0/css/icons.css" />

        <link rel="stylesheet" type="text/css" href="appframework-2.0/css/afui.css" />

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Dentro do body, defina a div containter com o id="afui". Este é o container principal para a app (o código é mostrado abaixo).

Para esta app simples com apenas uma página, teremos um cabeçalho, um rodapé e um div com algum conteúdo.

Adicionando o cabeçalho:

Use id="header" para criar um cabeçalho e coloque o texto do cabeçalho dentro de uma tag <h1>. Isso vai te dar o estilo padrão para o cabeçalho.

           <div id="header">
                <h1>Single Page App</h1>
            </div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Opcionalmente, adicione um botão para voltar a navegação dentro do cabeçalho.

<div id="header">
                <a id="backButton" href="javascript:;" class="button" style="visibility: hidden;">Back</a>
                <h1>Single Page App</h1>
            </div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Adicionando o conteúdo:

Adicione todo o conteúdo da página na div com o id="content". Usando esta div, garantimos que você poderá expandir ou ajustar automaticamente o espaço no dispositivo.

       <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Adicionando um rodapé:

Um rodapé aparece como uma barra de navegação na parte de baixo da app. Crie uma div com id="navbar". Adicione diversos ícones para navegar para diferentes partes da página ou para outras páginas. Criamos estes ícones de navegação no rodapé : Home, Sketch e Picture.

<div id="navbar">
                <a href="#home" id='navbar_home' class='icon home'>home</a>
                <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a>
                <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a>
 </div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Colocando tudo junto:

<!DOCTYPE html>
<html>
 
    <head>
        <title>App Framework single page</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <link rel="stylesheet" type="text/css" href="appframework-2.0/css/icons.css" />
        <link rel="stylesheet" type="text/css" href="appframework-2.0/css/afui.css" />
     </head>
 
    <body>
        <div id="afui"> 
            <div id="header">
                <a id="backButton" href="javascript:;" class="button" >Back</a>
                <h1>Single Page App</h1>
            </div>
            <div id="content">
                <div id="home">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>
                <div id="sketch">
                    <p>sketch</p>
                </div>
            </div>
           
            <div id="navbar">
                <a href="#home" id='navbar_home' class='icon home'>home</a>
                <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a>
                <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a>
            </div>
        </div>
    </body>

</html>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Aqui está a app mostrada em um dispositivo móvel:

Para aprender mais, visite outros artigos na série:

 
Para obter informações mais completas sobre otimizações do compilador, consulte nosso aviso de otimização.