![\"\"](\"https:\/\/i2.wp.com\/www.yeapf.com\/wp\/wp-content\/uploads\/2019\/08\/girl-wathcing-binoculars.jpeg?fit=640%2C383\")
YeAPF! tem um gestor de abas bem simples de usar que permite construir um SPA (Single Page Application) com muita facilidade.<\/p>\n\n\n\n
Tendo v\u00e1rias abas, uma coisa que quase com certeza vai querer fazer \u00e9 responder dinamicamente a essa mudan\u00e7a atualizando – por exemplo – o conte\u00fado de algum campo ou coisa assim.<\/p>\n\n\n\n
Digamos que no seu HTML tem a seguinte estrutura de abas:<\/p>\n\n\n\n
<div class=tnContainer>\n <div class=tnTab id=vw_boas_vindas>\n <img id=imagemBoasVindas>\n <\/div>\n <div class=tnTab id=vw_cadastro>\n <form ...>\n ...\n <\/form>\n <\/div>\n <div class=tnTab id=vw_listagem>\n <table ...>\n <\/table>\n <\/div>\n<\/div><\/pre>\n\n\n\nE imaginemos tamb\u00e9m que cada vez que voc\u00ea envia o usu\u00e1rio a sua tela de boas vindas quer mudar a imagem de uma lista que seu aplicativo tem.<\/p>\n\n\n\n
Seu javascript ficaria assim:<\/p>\n\n\n\n
\/* lista de imagens *\/\nvar imagens = [\"rio.jpg\", \"montanha.jpg\", \"deserto.png\", \"cascata.jpeg\"];\n\/* indice da imagem atual *\/\nvar imagemAtual = 0;\n\nfunction monitorarMudancaAba() {\n \/* verifico se a aba mostrada \u00e9 a de boas-vindas *\/\n if (mTabNav.currentTab().id==\"vw_boas_vindas\") {\n \/* calculo o seguinte indice da imagem *\/\n imagemAtual = (imagemAtual + 1) % imagens.length;\n \/* altero a imagem a ser mostrada *\/\n y$(\"imagemBoasVindas\").src=\"img\/\"+imagens[imagemAtual++];\n }\n}\n\nfunction inicializacao() {\n \/* adiciono um gestor de eventos do objeto window *\/\n window.addEventListener('tabshow', monitorarMudancaAba);\n}\n\n\/* indico ao YeAPF! para chamar a rotina de inicializa\u00e7\u00e3o assim que estiver tudo pronto *\/\naddOnLoadManager(inicializacao);<\/pre>\n\n\n\nCom isso, toda vez que a aba for alterada, h\u00e1 um monitoramento sobre essa mudan\u00e7a e uma altera\u00e7\u00e3o da imagem de boas vindas que era o objetivo procurado.<\/p>\n\n\n\n
Obvio que sua criatividade vai levar este simples exemplo a n\u00edveis maiores.<\/p>\n","protected":false},"excerpt":{"rendered":"
YeAPF! tem um gestor de abas bem simples de usar que permite construir um SPA (Single Page Application) com muita facilidade. Tendo v\u00e1rias abas, uma coisa que quase com certeza vai querer fazer \u00e9 responder dinamicamente a essa mudan\u00e7a atualizando – por exemplo – o conte\u00fado de algum campo ou coisa assim. Digamos que no […]<\/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":[1],"tags":[],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5O6UV-8Z","jetpack-related-posts":[{"id":91,"url":"http:\/\/www.yeapf.com\/wp\/?p=91","url_meta":{"origin":557,"position":0},"title":"Aplicativos mono p\u00e1gina","date":"mar\u00e7o 14, 2014","format":false,"excerpt":"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\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":370,"url":"http:\/\/www.yeapf.com\/wp\/?p=370","url_meta":{"origin":557,"position":1},"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":22,"url":"http:\/\/www.yeapf.com\/wp\/?p=22","url_meta":{"origin":557,"position":2},"title":"Arrastando e soltando","date":"fevereiro 20, 2014","format":false,"excerpt":"As interfaces gr\u00e1ficas facilitam a vida do usu\u00e1rio... e complicam a do programador.\u00a0 Sou da ideia que a solu\u00e7\u00e3o de qualquer problema por vias computacionais tem um certo \"peso\" que precisa ser distribu\u00eddo hora carregando mais o usu\u00e1rio ora carregando mais a equipe de programa\u00e7\u00e3o.\u00a0 Quando melhor for o servi\u00e7o\u2026","rel":"","context":"Post similar","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":419,"url":"http:\/\/www.yeapf.com\/wp\/?p=419","url_meta":{"origin":557,"position":3},"title":"Evitando que o waitIcon pisque","date":"junho 22, 2018","format":false,"excerpt":"Esses dias tive que alterar um sistema para mostrar mais dados numa tabela. Como j\u00e1 sabem, n\u00e3o podemos trazer uma tabela inteira para a tela a n\u00e3o ser que ela seja pequena. Com tabelas acima de 30, 50 registros a hist\u00f3ria muda e precisamos segmentar a puxada. Com YeAPF isso\u2026","rel":"","context":"Em "Yet Another PHP Framework"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":276,"url":"http:\/\/www.yeapf.com\/wp\/?p=276","url_meta":{"origin":557,"position":4},"title":"Template BootStrap3 usando YeAPF e abas","date":"fevereiro 3, 2016","format":false,"excerpt":"Obrigado por vir! Este \u00e9 apenas um pequeno exemplo integrando BootStrap3 e YeAPF. Qualquer vers\u00e3o da serie 0.8.x do YeAPF deve poder ser utilizada aqui, mas estamos usando especificamente a 0.8.47 Inclui as fontes e o css na distribui\u00e7\u00e3o porque na minha magra experi\u00eancia, os servidores cdn mais atrapalham do\u2026","rel":"","context":"Em "Yet Another PHP Framework"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":60,"url":"http:\/\/www.yeapf.com\/wp\/?p=60","url_meta":{"origin":557,"position":5},"title":"Um calend\u00e1rio simples com YeAPF","date":"mar\u00e7o 29, 2014","format":false,"excerpt":"Pense em qualquer tipo de aplicativo e em algum momento voc\u00ea vai ter que representar o fluxo do tempo no mesmo.\u00a0 Mais especificamente, quase sempre vai ter que ter algum tipo de agenda ou planificador temporal. O exemplo de hoje pretende introduzir o jeito de fazer um calend\u00e1rio com YeAPF\u2026","rel":"","context":"Em \"getCellContent\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/557"}],"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=557"}],"version-history":[{"count":2,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/557\/revisions"}],"predecessor-version":[{"id":560,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/557\/revisions\/560"}],"wp:attachment":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=557"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}