{"id":1833,"date":"2003-12-20T16:09:09","date_gmt":"2003-12-20T19:09:09","guid":{"rendered":""},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T03:00:00","slug":"","status":"publish","type":"post","link":"http:\/\/www.charles.pilger.com.br\/blog\/archives\/1833","title":{"rendered":"Ah! Templates!"},"content":{"rendered":"

Uma coisa que me irrita no que se refere a programa\u00e7\u00e3o web em geral, especialmente server side includes, \u00e9 que o HTML \u00e9 misturado com o c\u00f3digo. Assim sendo uma coisa que eu procuro sempre \u00e9 criar um arquivo template onde h\u00e1 algumas strings que ser\u00e3o substituidas. Por exemplo, pegue esse template tirado l\u00e1 do Tableless<\/a> (e substitua o :<\/p>\n

\r\n<!DOCTYPE html PUBLIC \\\"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\\\"\r\n\t\\\"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\\\">\r\n<html xmlns=\\\"http:\/\/www.w3.org\/1999\/xhtml\\\" xml:lang=\\\"pt\\\" lang=\\\"pt\\\">\r\n<meta name=\\\"resource-type\\\" content=\\\"document\\\" \/>\r\n<meta http-equiv=\\\"pragma\\\" content=\\\"no-cache\\\" \/>\r\n<meta name=\\\"revisit-after\\\" content=\\\"1\\\" \/>\r\n<meta name=\\\"classification\\\" content=\\\"Internet\\\" \/>\r\n<meta name=\\\"robots\\\" content=\\\"ALL\\\" \/>\r\n<meta name=\\\"distribution\\\" content=\\\"Global\\\" \/>\r\n<meta name=\\\"rating\\\" content=\\\"General\\\" \/>\r\n<meta name=\\\"author\\\" content=\\\"Diego Alberto Eis, Elcio Luiz Ferreira\\\" \/>\r\n<meta name=\\\"language\\\" content=\\\"pt-br\\\" \/>\r\n<meta name=\\\"doc-class\\\" content=\\\"Completed\\\" \/>\r\n<meta name=\\\"doc-rights\\\" content=\\\"Public\\\" \/>\r\n\r\n<head>\r\n\t<title>_TITULO_<\/title>\r\n\t<style type=\\\"text\/css\\\">\r\n\t<!--\r\n\tbody{\r\n\t\tbackground:#EEF;\r\n\t\tmargin:0px;\r\n\t\tpadding:0px;\r\n\t\tfont-family:arial, verdana, helvetica;\r\n\t\tfont-size:80%;\r\n\t}\r\n\th1{\r\n\t\tbackground:#966;\r\n\t\tpadding:10px;\r\n\t\tmargin:0px;\r\n\t\tcolor:#EEF;\r\n\t}\r\n\t#esquerda{\r\n\t\twidth:150px;\r\n\t\tfloat:left;\r\n\t\tmargin:10px;\r\n\t}\r\n\t#direita{\r\n\t\twidth:150px;\r\n\t\tfloat:right;\r\n\t\tmargin:10px;\r\n\t}\r\n\t#centro{\r\n\t\tmargin:10px 190px;\r\n\t\tpadding:10px;\r\n\t\tborder-top:1px solid black;\r\n\t\tborder-left:1px solid black;\r\n\t\tborder-right:1px solid black;\r\n\t\tborder-bottom:1px solid black;\r\n\t\tbackground:#FFF;\r\n\t}\r\n\t#rodape{\r\n\t\tfont-size:90%;\r\n\t\tcolor:#336;\r\n\t\tpadding:10px 30px;\r\n\t\tborder:1px solid black;\r\n\t}\r\n\t-->\r\n        <\/style>\r\n<\/head>\r\n\r\n<body>\r\n<h1>_CABECALHO_<\/h1>\r\n<div id=\\\"esquerda\\\">\r\n_ESQUERDA_\r\n<\/div>\r\n<div id=\\\"direita\\\">\r\n_DIREITA_\r\n<\/div>\r\n<div id=\\\"centro\\\">\r\n_CENTRO_\r\n<\/div>\r\n<div id=\\\"rodape\\\">\r\n_RODAPE_\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Pois \u00e9, agora pegue esse template a\u00ed, coloque ele na raiz do seu servidor JSP com o nome template.html e use o seguinte c\u00f3digo JSP:<\/p>\n
\r\n<%@page contentType=\\\"text\/html\\\"\r\n        import=\\\"java.io.*, java.util.*\\\"\r\n        errorPage=\\\"ops.jsp\\\"\r\n%>\r\n<%\r\n  String template = \\\"\\\";\r\n  String thisLine = \\\"\\\"; \r\n\r\n  String paginaTitulo    = \\\"Oi Target\\\";\r\n  String paginaCabecalho = \\\"Esse \u00e9 o cabe\u00e7alho\\\";\r\n  String paginaDireita   = \\\"Texto do lado direito da p\u00e1gina\\\";\r\n  String paginaCentro    = \\\"Texto principal da p\u00e1gina\\\";\r\n  String paginaEsquerda  = \\\"Texto do lado esquerdo da p\u00e1gina\\\";\r\n  String paginaRodape    = \\\"Texto de rodap\u00e9\\\";\r\n\r\n  Date dateNow = new Date();\r\n  paginaCentro = paginaCentro + \\\"<br \/>\\\"; \r\n  paginaCentro = paginaCentro + \\\"<br \/>\\\"; \r\n  paginaCentro = paginaCentro + \r\n                 \\\"Agora \u00e9 \\\" + \r\n                 dateNow.getHours() + \r\n                 \\\":\\\" + dateNow.getMinutes(); \r\n\r\n  \/\/ Le o arquivo template\r\n  BufferedReader br = new BufferedReader (\r\n    new FileReader(\r\n          getServletContext().\r\n          getRealPath(\\\"\/template.html\\\"))\r\n  );\r\n  while ((thisLine = br.readLine()) != null) {\r\n   template = template + thisLine;\r\n  }\r\n\r\n  template = template.replaceFirst(\\\"_TITULO_\\\",    paginaTitulo);\r\n  template = template.replaceFirst(\\\"_CABECALHO_\\\", paginaCabecalho);\r\n  template = template.replaceFirst(\\\"_DIREITA_\\\",   paginaDireita);\r\n  template = template.replaceFirst(\\\"_CENTRO_\\\",    paginaCentro);\r\n  template = template.replaceFirst(\\\"_ESQUERDA_\\\",  paginaEsquerda);\r\n  template = template.replaceFirst(\\\"_RODAPE_\\\",    paginaRodape);\r\n%>\r\n<%= template %>\r\n<\/pre>\n
Pronto! Assim temos a interface separada do processamento. Sim, eu sei, que isso \u00e9 uma coisa \u00f3bvia, mas deixa eu ter um hist\u00f3rico da minha aula de JSP, p\u00f4! \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"
Uma coisa que me irrita no que se refere a programa\u00e7\u00e3o web em geral, especialmente server side includes, \u00e9 que o HTML \u00e9 misturado com o c\u00f3digo. Assim sendo uma coisa que eu procuro sempre \u00e9 criar um arquivo template onde h\u00e1 algumas strings que ser\u00e3o substituidas. Por exemplo, pegue esse template tirado l\u00e1 do […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/www.charles.pilger.com.br\/blog\/wp-json\/wp\/v2\/posts\/1833"}],"collection":[{"href":"http:\/\/www.charles.pilger.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.charles.pilger.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.charles.pilger.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.charles.pilger.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1833"}],"version-history":[{"count":0,"href":"http:\/\/www.charles.pilger.com.br\/blog\/wp-json\/wp\/v2\/posts\/1833\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.charles.pilger.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.charles.pilger.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1833"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.charles.pilger.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}