Segunda<\/div>\r\n <h1>Esta aba \u00e9 a segunda<\/h1>\r\n Caso queira ir para a primeira, \r\n pode clicar <a href='javascript:mTabNav.showTab(\"vwPrincipal\")'>aqui<\/a>\r\n <\/div>\r\n\r\n

Terceira<\/div>\r\n <h1>Esta \u00e9 a terceira aba<\/h1>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n\r\n\r\n mTabNav.init();\r\n<\/pre>\n

Deste ponto em diante, assumiremos que voc\u00ea colocou este exemplo na \/var\/www\/testeAbas<\/em><\/p>\n

Como sempre, o anterior \u00e9 um exemplo imperfeito mas completamente funcional.\u00a0 Mais uma vez, partimos do suposto que o YeAPF est\u00e1 instalada na \/var\/www\/YeAPF<\/em>.\u00a0\u00a0 Se voc\u00ea colocou este exemplo na pasta \/var\/www\/testeAbas<\/em> e o chamou abas.html, voc\u00ea pode ver o resultado em http:\/\/localhost\/testeAbas\/abas.html<\/a> .<\/p>\n

<\/p>\n

Cada div<\/em> da classe tbTab<\/em> cont\u00e9m uma p\u00e1gina a ser visualizada.\u00a0 O objeto universal mTabNav()<\/em> \u00e9 o respons\u00e1vel por gerenciar as abas.\u00a0 Ele precisa ser inicializado\u00a0mTabNav.init()\u00a0<\/em> para um correto funcionamento, por\u00e9m, caso n\u00e3o tenha sido inicializado, ele far\u00e1 o procedimento de inicializa\u00e7\u00e3o na primeira chamada.<\/p>\n

No topo da p\u00e1gina colocamos dois bot\u00f5es para navegar entre as abas.\u00a0 Estes chamam dois procedimentos do mTabNav()<\/em> o showNext()<\/em> para mostrar a seguinte aba e o showPrior()<\/em> para mostrar a anterior.\u00a0 Caso queira ir para uma aba espec\u00edfica, \u00e9 s\u00f3 usar showTab() <\/em>como fizemos na segunda aba.\u00a0 Isto feito, vai da inventiva do programador usar o mTabNav()<\/em> para produzir seu aplicativo todavia, vamos construir um nos seguintes passos.<\/p>\n

2) Listando dados numa aba<\/h2>\nPartiremos do suposto que voc\u00ea j\u00e1 tem o YeAPF configurado em uma pasta por ter seguido o tutorial dos primeiros passos com YeAPF<\/a>. O que vamos fazer, \u00e9 de fato aplicar este outro tutorial (Preenchendo listas de op\u00e7\u00f5es e tabelas)<\/a> que nos ensina como preencher tabelas HTML com dados vindos de um servidor SQL.<\/p>\n
Resumindo, coloque\u00a0 o configure.php<\/em>, o query.php<\/em>, o yeapf.db.ini<\/em> e o e_body.xml<\/em> que vem na distribui\u00e7\u00e3o do YeAPF na mesma pasta em que criou o abas.html<\/em> logo acima.\u00a0 Ap\u00f3s isso pode modificar o yeapf.db.ini<\/em> e rodar o configure.php<\/em> ou tamb\u00e9m pode s\u00f3 copiar o sgug.ini<\/em> do outro aplicativo feito anteriormente para esta pasta; isso vai conectar esta pasta com seu banco de dados.<\/p>\n
Se tudo tiver dado certo, voc\u00ea ter\u00e1 um script chamado yeapf.php<\/strong><\/em> criado na sua pasta pelo configure.php<\/p>\n
Agora vamos criar um script autores.php<\/em> que vai responder \u00e0s nossas requisi\u00e7\u00f5es.<\/p>\n
<?php\r\n function qautores($a) {\r\n $useColNames = true;\r\n $countLimit=20;\r\n $ret='';\r\n\r\n if ($a == 'listarAutores') {\r\n $ret = \"select * from autores\";\r\n }\r\n\r\n xq_produceReturnLines($ret, $useColNames, $countLimit);\r\n }\r\n?><\/pre>\n
Podemos ver se este script est\u00e1 funcionando corretamente, chamando ele pelo navegador: http:\/\/localhost\/testeAbas\/query.php?s=autores&a=listarAutores<\/a>.\u00a0 A sa\u00edda ser\u00e1 um XML contendo a lista dos autores.<\/p>\n
Caso tenha dado errado: 1) verifique a URL e veja se ele \u00e9 o adequado para sua pasta.\u00a0 2) verifique se tem o e_body.xml<\/em>, o query.php<\/em> e o autores.php<\/em> na pasta. 3) Verifique se quando rodou o configure.php, ele funcionou certinho, ou seja, ele deve ter mostrado um quadro verde e criado o yeapf.php<\/em>.\u00a0 Caso mesmo assim n\u00e3o tenha conseguido, tente seguir de novo o ‘Primeiros passos’ adaptando para sua realidade.<\/p>\n
Agora vamos criar um arquivo index.html<\/em> para ter nossas abas e o ponto de entrada de nosso aplicativo.<\/p>\n
<\/p>\n
\/YeAPF\/yloader.js<\/a>\r\n\r\n<style>\r\n .tnTabTitle { font-size: 24px; };\r\n .tnTab { height: 100%; }\r\n<\/style>\r\n\r\n<body>\r\n
\r\n
\r\n
\r\n
\r\n \r\n <\/div>\r\n
\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n
\r\n
Autores<\/div>\r\n <table id='tbl_autores'><\/table>\r\n <\/div>\r\n\r\n
\r\n
Obras<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n\r\nhttp:\/\/autores.js<\/a><\/pre>\n
Observe que estamos seguindo a recomenda\u00e7\u00e3o de Crockford<\/a> e carregamos o script ao final e n\u00e3o ao inicio.\u00a0 Repare tamb\u00e9m a exist\u00eancia de uma tabela vazia em uma das abas chamada tbl_autores<\/em>.<\/p>\n
Agora, criemos o autores.js <\/em>que por agora o deixaremos na mesma pasta do index.html<\/em> mas pode coloc\u00e1-lo em outro lugar.\u00a0 S\u00f3 lembre de corrigir a pasta na hora da carga.<\/p>\n
function preencherListaAutores() {\r\n ycomm.invoke(\r\n 'autores', \/* subject *\/\r\n 'listarAutores', \/* action *\/\r\n { \/* other data (in this case, empty) *\/\r\n },\r\n function (status, error, data) { \/* calllback function *\/\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (error)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 alert(error)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 else\r\n ycomm.dom.fillElement('tbl_autores',\r\n data,\r\n {\r\n idFieldName: 'codigo',\r\n columns: ['nome', \r\n 'localNascimento', \r\n 'estiloPrincipal']\r\n }\r\n );\r\n }\r\n );\r\n}\r\n\r\nmTabNav.init();\r\npreencherListaAutores();<\/pre>\n
Agora podemos testar nosso projeto e ver que a lista \u00e9 preenchida dentro da aba correspondente.<\/p>\n
O funcionamento \u00e9 bem simples e de compreens\u00e3o direta: Chamamos desde o cliente (no caso, html\/js) o ycomm.invoke() que se encarrega de enviar a solicita\u00e7\u00e3o ao servidor (no caso, autores.php).\u00a0 Este por sua vez empacota o resultado em um XML que \u00e9 recebido pelo YeAPF do lado do cliente que por sua vez chama \u00e0 rotina de callback indicada.\u00a0 Neste caso, \u00e9 uma fun\u00e7\u00e3o an\u00f4nima embutida na pr\u00f3rpia chamada.<\/p>\n
O programador deve ter em conta que esta rotina s\u00f3 vai ser chamada ap\u00f3s os dados chegarem do servidor.\u00a0 Isso quer dizer que logo ap\u00f3s a fun\u00e7\u00e3o preencherListaAutores() ser chamada, a tabela ainda n\u00e3o tem os dados.\u00a0 Isso \u00e9 assim porque por padr\u00e3o, o invoke s\u00f3 chama o Ajax de forma ass\u00edncrona.<\/p>\n
3) Acrescentando links aos elementos da tabela.<\/h2>\n
Uma tabela com dados \u00e9 interessante, mas ela se torna realmente \u00fatil quando conseguimos interatuar com ela.<\/p>\n
Finalizaremos este post criando links para cada item da tabela. Este post s\u00f3 nos mostrar\u00e1 o nome do autor por meio da fun\u00e7\u00e3o alert()<\/em> do javascript.\u00a0 Um post posterior nos mostrar\u00e1 como editar dados, eliminar, enfim, o restante do CRUD<\/a>.<\/p>\n
Repare que na hora de montar os dados na tabela, indicamos \u00e0 ycomm.fillElement()<\/em> que nosso campo chave \u00e9 chamado de ‘codigo<\/strong>‘ por meio de idFieldName: ‘codigo’<\/em><\/p>\n
Este \u00e9 um ponto muito importante para depois podermos recuperar o restante da informa\u00e7\u00e3o.\u00a0 Todavia, acrescentaremos alguns dados junto com a chave para que n\u00e3o tenhamos que ir at\u00e9 o servidor para puxar mais informa\u00e7\u00e3o.\u00a0 Modifique o seu autores.js para que a carga de dados fique da seguinte forma:<\/p>\n
ycomm.dom.fillElement('tbl_autores',\r\n data,\r\n {\r\n idFieldName: 'codigo',\r\n inplaceData: ['nome'],\r\n html: '<a href=\"javascript:editarAutor(%(rowid))\">'\r\n +'%(nome)<\/a>'\r\n }\r\n);<\/pre>\n
Repare que a edenta\u00e7\u00e3o foi sacrificada em beneficio da legibilidade.<\/p>\n
Foi acrescentada uma entrada inplaceData<\/strong> na hora da chamada. Tamb\u00e9m tenha por bem reparar que em lugar de indicar as colunas em um vetor, agora temos c\u00f3digo html expressado como string. Veja que podemos mencionar os nomes dos campos por meio do macro %()<\/em> dentro da string.\u00a0 Isso far\u00e1 com que a cada linha esse espa\u00e7o seja preenchido com o campo correspondente.\u00a0 Ora com rowid<\/em> ora com nome<\/em>.\u00a0 Aceite que rowid<\/em> \u00e9 s\u00f3 um n\u00famero sequencial que serve s\u00f3 para referenciar os dados recebidos do servidor.\u00a0 E finalmente, observe que h\u00e1 uma fun\u00e7\u00e3o ainda n\u00e3o declarada chamada editarAutor()<\/em>.<\/p>\n
Accrescentemos ent\u00e3o a fun\u00e7\u00e3o editarAutor()<\/em> ao autores.js da seguinte maneira:<\/p>\n
function editarAutor(nroLinha) {\r\n \/* C\u00f3digo associado \u00e0 linha da qual me chamaram *\/\r\n var codigo = ycomm.dom.getTableRowId('tbl_autores', nroLinha);\r\n \/* Nome do autor que est\u00e1 embutido na linha como dados *\/\r\n var nome = ycomm.dom.getTableInplaceData('tbl_autores', nroLinha, 'nome');\r\n \/* Mostramos ao usu\u00e1rio a linha, o c\u00f3digo e o nome do autor *\/\r\n window.alert(\"Voc\u00ea est\u00e1 querendo editar a linha {0}\\nQue tem o autor {1}:{2}\".format(nroLinha, codigo, nome));\r\n}<\/pre>\n
Feito isso, seu aplicativo agora mostrar\u00e1 links em cada autor, e ao usu\u00e1rio clicar neles, lhe ser\u00e1 mostrada o numero da linha, o c\u00f3digo (chave no banco de dados) e o nome do autor.<\/p>\n
Com isso encerramos um novo degrau no desenvolvimento YeAPF.<\/p>\n
Como tarefa, construa o aplicativo passo a passo novamente em pasta separada.\u00a0 Eis aqui um pequeno guia de como proceder:<\/p>\n
\n
Fa\u00e7a download do YeAPF mais recente clicando aqui<\/a><\/li>\n
Crie uma pasta sob sua www.<\/li>\n
Coloque nela o configure.php e o yeapf.db.ini do esqueleto da distribui\u00e7\u00e3o.<\/li>\n
Modifique o yeapf.db.ini para conectar-se com seu banco de dados.<\/li>\n
Crie um index.html com as abas usando a classe tnContainer<\/em> e tnTab<\/em> para identificar o contenedor e as abas internas ao contendor.<\/li>\n
Acrescente uma rotina de carga no final do seu HTML para carregar o autores.js<\/em><\/li>\n
Crie o autores.js <\/em> e o autores.php<\/em> para responder aos eventos criados.<\/li>\n<\/ol>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Aplicativos que usam s\u00f3 uma p\u00e1gina t\u00eam um lugar assegurado no desenvolvimento de software atual e futuro. Bem feitos s\u00e3o elegantes e f\u00e1ceis de manter. Tamb\u00e9m s\u00e3o uma m\u00e3o na roda na hora de fazer um aplicativo que funcione tanto em desktop como em mobile. Para construirmos um aplicativo com essas caracter\u00edsticas, precisamos primeiro, ter […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[49,8],"tags":[33,32,35,34],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5O6UV-1t","jetpack-related-posts":[{"id":370,"url":"http:\/\/www.yeapf.com\/wp\/?p=370","url_meta":{"origin":91,"position":0},"title":"Reagindo a mudan\u00e7as de abas","date":"novembro 29, 2017","format":false,"excerpt":"As abas s\u00e3o o dispositivo que o YeAPF entrega para um desenvolvedor poder construir aplicativo \"mono-p\u00e1gina\" como os usados em aplicativos Web de \u00faltima gera\u00e7\u00e3o ou em dispositivos m\u00f3veis. S\u00e3o elas as que nos permitem uma mudan\u00e7a r\u00e1pida na tela sem que por isso seja necess\u00e1rio carrega-las do servidor j\u00e1\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":184,"url":"http:\/\/www.yeapf.com\/wp\/?p=184","url_meta":{"origin":91,"position":1},"title":"Exemplo - web01 - OnePage YeAPF Web Application","date":"dezembro 26, 2014","format":false,"excerpt":"Esta \u00e9 uma das continua\u00e7\u00f5es deste artigo. Por que criar aplicativos mono p\u00e1gina? Bom, a grande virtude de um aplicativo mono p\u00e1gina \u00e9 que tudo o que voc\u00ea precisar est\u00e1 pronto assim que o usu\u00e1rio carregou a p\u00e1gina inicial e caso sejam necess\u00e1rias mais p\u00e1ginas, formul\u00e1rios, tabelas elas tamb\u00e9m podem\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"https:\/\/i2.wp.com\/www.yeapf.com\/wp\/wp-content\/uploads\/2019\/05\/office-932926_1920.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334,"url":"http:\/\/www.yeapf.com\/wp\/?p=334","url_meta":{"origin":91,"position":2},"title":"Usando a bancada de desenvolvimento para criar p\u00e1ginas com YeAPF","date":"fevereiro 8, 2017","format":false,"excerpt":"Um aplicativo que vem na distribui\u00e7\u00e3o 0.8.x do YeAPF \u00e9 o workbench ou bancada. Este artigo foi escrito na vers\u00e3o 0.8.54 do YeAPF, ent\u00e3o se est\u00e1 com uma difernte, podem haver mudan\u00e7as. Workbench ou\u00a0bancada permite ao programador construir seu aplicativo como se fossem telas separadas e depois junt\u00e1-las para formar\u2026","rel":"","context":"Em "Yet Another PHP Framework"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/yeapf.com\/wp\/wp-content\/uploads\/2017\/02\/workbench-01-300x283.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":254,"url":"http:\/\/www.yeapf.com\/wp\/?p=254","url_meta":{"origin":91,"position":3},"title":"Login para aplicativos YeAPF","date":"janeiro 16, 2016","format":false,"excerpt":"Uma das coisas necess\u00e1rias no desenvolvimento de um aplicativo \u00e9 uma telinha de login. \u00c9 uma bem sucedida entrada a que gera o par\u00e2metro contextual\u00a0u que \u00e9 essencial para a seguran\u00e7a do trip\u00e9 s-u-a do YeAPF. Voc\u00ea precisar\u00e1 uma tela de login que chamaremos neste exemplo de f_login.html, umas modifica\u00e7\u00f5es\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":455,"url":"http:\/\/www.yeapf.com\/wp\/?p=455","url_meta":{"origin":91,"position":4},"title":"Como instalar YeAPF?","date":"agosto 3, 2018","format":false,"excerpt":"Voc\u00ea n\u00e3o precisa instalar YeAPF. O que sim \u00e9 bom ter instalado s\u00e3o as ferramentas dele. Mas antes disso, \u00e9 bom deixar claro como funciona ele sem instalar. A todos os efeitos, vamos supor que voc\u00ea fez download da \u00faltima vers\u00e3o do YeAPF e o colocou na pasta ~\/Downloads\/YeAPF\/ e\u2026","rel":"","context":"Em "Yet Another PHP Framework"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":454,"url":"http:\/\/www.yeapf.com\/wp\/?p=454","url_meta":{"origin":91,"position":5},"title":"Node + Electron + YeAPF","date":"agosto 3, 2018","format":false,"excerpt":"Saladas s\u00e3o boas. Por isso o t\u00edtulo mistura tr\u00eas coisas que j\u00e1 sozinhas s\u00e3o boas. O node te permite escrever aplicativos do lado do servidor ou do cliente usando a mesma linguagem: JavaScript. Neste vamos usa-lo para criar um aplicativo do lado cliente com t\u00e9cnicas de web (HTML5, CSS3 e\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"https:\/\/i2.wp.com\/www.yeapf.com\/wp\/wp-content\/uploads\/2018\/08\/Mixed-Green-Salad-with-Eggs-3-930x543.jpg?resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/91"}],"collection":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=91"}],"version-history":[{"count":24,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/91\/revisions"}],"predecessor-version":[{"id":518,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/91\/revisions\/518"}],"wp:attachment":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=91"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=91"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

3) Acrescentando links aos elementos da tabela.<\/h2>\nUma tabela com dados \u00e9 interessante, mas ela se torna realmente \u00fatil quando conseguimos interatuar com ela.<\/p>\n