Intel XDK – Deixando as dependências do modo design

Please log in or register to like posts.
News
Intel XDK

     O Intel XDK vem sendo uma ótima ferramenta, suprindo a necessidade de desenvolvimento móvel e otimizando uso de plugins e demais ferramentas relacionadas ao código. Mas um ponto importante na evolução como programador e na qualidade final do produto é deixando de usar o modo design.

Principais motivos:

  1. Código mais limpo legível
  2. Evita conflito em futuras reedições de código
  3. Domínio total do projeto em questão
  4. Editores de texto sem limitação de plugins (tendo em vista que a versão do brackets no xdk limita a adesão de plugins )

 

Por onde começar ?

 

     Vamos entender como intel xdk cria as páginas e subpáginas:

<body>
<div class=”upage vertical-col left” id=”mainpage”>
<div id=”uib_page_1″ class=”upage-content vertical-col left “></div>
<div id=”uib_page_2″ class=”upage-content vertical-col left hidden“></div>
</div>
<div class=”upage vertical-col left hidden” id=”page”>
<div id=”uib_page_3″ class=”upage-content vertical-col left “></div>
<div id=”uib_page_4″ class=”upage-content vertical-col left hidden“></div>
</div>
</body>

Os trechos destacados em negrito, sugerem as respectivas “divs” que definem as páginas e subpáginas do programa. Vale destacar que a página principal (upage) mainpage não carrega a classe hidden, a ausência dessa classe define que essa é a página principal, logo as demais devem todas conte-la, a mesma coisa com a subpágina (upage-content), a subpágina que não conter a classe hidden é o conteúdo que será exibido ao acessar aquela página, do mesmo jeito, todas as demais subpáginas dentro daquela página deverão conte-la.

E como eu navego entre as páginas ?

Vamos entender como o javascript navega entre as páginas e subpáginas :

/* button #btn3 */
$(document).on(“click”, “#btn3”, function(evt)
{
           activate_subpage(“#uib_page_3”);
});
/* button #btn4 */
$(document).on(“click”, “#btn4”, function(evt)
{
activate_subpage(“#uib_page_4”);
});
/* button #btn1 */
$(document).on(“click”, “#btn1”, function(evt)
{
           activate_page(“#mainpage”);
});
/* button #btn2 */
$(document).on(“click”, “#btn2”, function(evt)
{
           activate_page(“#page”);
});

 

Os trechos destacados em negrito, sugerem que os respectivos “activate” que definem as navegações entre páginas e subpáginas do programa. Quando chamamos a função de navegação (activate_page) navegamos propriamente para dentro dessa página, mas a subpágina que é exibida pode variar. Como assim ?

Pois bem, a navegação por páginas chama a subpágina que não tem a propriedade hidden associada a ela, o problema é que a subpágina com hidden varia de acordo com as navegações entre subpáginas, por exemplo:

<div id=”uib_page_3″ class=”upage-content vertical-col left “></div>
<div id=”uib_page_4″ class=”upage-content vertical-col left hidden“></div>

Se navegarmos pelo comando activate_page(“#page”) o que veremos será o conteúdo da subpágina “uib_page_3” que não tem atribuída classe hidden e nesse momento vai fazer as demais subpáginas de “page” receberem hidden, mas suponhamos que nós queremos ver o conteúdo da segunda subpágina, então usaremos o activate_subpage(“#uib_page_4”) o curioso aqui é que se continuarmos navegando e decidirmos regressar a “page” pelo comando activate_page(“#page”), o que veremos desta vez será o conteúdo da subpágina “uib_page_4” e não a original (uib_page_3), isso porque quando se navegou especificadamente entre uma subpágina ele tornar está a nova subpágina principal daquela página!

Deixe-me ver se entendi tudo !

Posso agora criar divs que serão minha página e minha subpágina lhes atribuindo upage e upage-content, também posso criar demais páginas e subpáginas contanto que estas contenham amais a classe hidden, já a navegação ficará a par do activate_page(“#NOME_DA_PÁGINA”), mas se meu destino for especifico dentro daquela página é melhor usar activate_pagesub(“#NOME_DA_SUBPÁGINA”) e assim posso criar minhas próprias páginas de estilo e métodos de onclick (entre outros) para navegações, é isso ?

 

Exatamente, agora comece a empregar seus conhecimentos de web!

Contamos com o seu apoio

Site do Ano 2015 - TekZoom.com.br
Site do Ano 2015 – TekZoom.com.br

Tekers, fomos selecionados para concorrer como Site do Ano 2015 na Categoria Educação do prêmio mantido pelo pessoal da MetrixLab e chegou a hora de pedir o seu apoio neste incrível concurso.

O seu voto é muito importante e não leva mais que 3 minutos. Gosta do nosso conteúdo? Quer ver o TekZoom cada vez mais ativo e com novidades frequentes? Então nos ajude, será um prazer te-lo em nossa família Teker 🙂

Clique aqui para votar

Curta este artigo :)

4 comments on “Intel XDK – Deixando as dependências do modo design

Deixe uma resposta