Tpicos Especiais em Desenvolvimento para Web MAC 0416

Tópicos Especiais em Desenvolvimento para Web MAC 0416 e MAC 5855 Tópicos Especiais em Desenvolvimento para Web Tecnologias Básicas para o Desenvolvimento para Web Marco A. Gerosa gerosa@ime. usp. br Marco A. Gerosa 1 / 52 1

Tópicos Especiais em Desenvolvimento para Web Aplicação Web = Sistema de Software cuja interface é acessível via um navegador Web. Marco A. Gerosa 2 / 52 2

Tópicos Especiais em Desenvolvimento para Web Requisição cliente-servidor Páginas Estáticas https: //esjug. dev. java. net/files/documents/1646/41943/Intro. Web. pdf Marco A. Gerosa 3 / 52 3

Tópicos Especiais em Desenvolvimento para Web Requisição cliente-servidor Páginas Dinâmicas https: //esjug. dev. java. net/files/documents/1646/41943/Intro. Web. pdf Marco A. Gerosa 4 / 52 4

Tópicos Especiais em Desenvolvimento para Web Arquitetura Sistema de Arquivos Cliente Servidor BD Servidor de Banco de Dados Marco A. Gerosa 5 / 52 5

Tópicos Especiais em Desenvolvimento para Web Servlets https: //esjug. dev. java. net/files/documents/1646/41943/Intro. Web. pdf Marco A. Gerosa 6 / 52 6

Tópicos Especiais em Desenvolvimento para Web Exemplos de Containers Web para Java • • Tomcat JBoss Glassfish Jetty Web. Sphere Weblogic Etc. Marco A. Gerosa 7 / 52 7

Tópicos Especiais em Desenvolvimento para Web XHTML Marco A. Gerosa 8 / 52 8

Tópicos Especiais em Desenvolvimento para Web HTML • • • Hyper. Text Markup Language É uma extensão do padrão SGML <etiqueta>. . . </etiqueta> Editores WYSIWYG HTML 1. 0 (1993) HTML 2. 0 (1995) HTML 3. 2 (1997) HTML 4. 01 (1999) HTML 5. 0 draft (2008) Tim Berners-Lee • Estrutura básica: • HTML – HEAD – BODY Marco A. Gerosa 9 / 52 9

Tópicos Especiais em Desenvolvimento para Web Exemplo <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/strict. dtd"> <html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!!</p> </body> </html> Marco A. Gerosa 10 / 52 10

Tópicos Especiais em Desenvolvimento para Web TAGs • Estruturais – <h 1>, <h 2>, <p>, <table> etc. • Apresentação – <b>, <i>, <u> etc. – * Se tornaram obsoletas com o uso de CSS • Hiperlink – <a> • Uso de atributos – <span id="an. Id" class="a. Class" style="color: blue; " title="Hypertext Markup Language">HTML</span> Marco A. Gerosa 11 / 52 11

Tópicos Especiais em Desenvolvimento para Web Representação de caracteres especiais • • • & → & < → < > → > " → " ' → ' Lista completa: – http: //en. wikipedia. org/wiki/List_of_XML_and_HTML_character_entity_re ferences Marco A. Gerosa 12 / 52 12

Tópicos Especiais em Desenvolvimento para Web XHTML • Versão do HTML com regras de validação mais rígidas, seguindo o estilo do XML – – Ordem das tags Case sensitive (todas as tags passam a ser caixa baixa) Todas as tags devem ser fechadas Todos os atributos devem estar entre aspas simples ou duplas • A intenção é melhorar a acessibilidade (modificação dinâmica da página para vários dispositivos), a padronização entre renderizações, o processamento automatizado (uso de parsers usuais de XML), processamento e renderização mais rápidos • Permite o uso de outros padrões baseados em XML como Math. ML e Scalable Vector Graphics • Tira de uso diversas tags referentes à formatação, pois objetiva separar estrutura de aparência, que é tratada pelo CSS Marco A. Gerosa 13 / 52 13

Tópicos Especiais em Desenvolvimento para Web Exemplo <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 1//EN“ "http: //www. w 3. org/TR/xhtml 11/DTD/xhtml 11. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml" version="XHTML 1. 2" xml: lang="en"> <head></head> <body> <form> <fieldset> <legend>Dados pra Cadastro</legend> <label for="nome">Nome: </label> <input type="text" name="nome" id="nome" /> <label for="tipo">Tipo: </label> <input type="text" name="tipo" id="tipo" /> <label for="data">Data: </label> <input type="text" name="data" id="data" /> <input type="submit" value="enviar" class="botao" /> </fieldset> </form> </body> </html> Marco A. Gerosa 14 / 52 <style> form fieldset { float: left; margin-right: 7 px; width: 40%; border: solid black 1 px; padding: 3%; margin-bottom: 10 px; } form label { display: block; font-size: 11 px; } (. . . ) </style> 14

Tópicos Especiais em Desenvolvimento para Web Versões • XHTML 1. 0 (2000) – Strict – Transitional – Utilizado para facilitar a transição de páginas mais antigas – Frameset – Permite criar framesets (prática desistimulada) • XHTML 1. 1 (2001) – Vários outros elementos foram removidos nesta versão • Validador – http: //validator. w 3. org/ – https: //addons. mozilla. org/pt-BR/firefox/addon/249 • OBS: Espera-se no trabalho que as páginas desenvolvidas sejam plenamente compatíveis com o padrão XHTML 1. 1 Marco A. Gerosa 15 / 52 15

Tópicos Especiais em Desenvolvimento para Web Alguns erros comuns • Não fechar todas as tags – – Incorrect: Correct: Incorrect: <p>This is a paragraph. <p>This is another paragraph. Correct: <p>This is a paragraph. </p><p>This is another paragraph. </p> • Não alinhar corretamente os elementos – Incorrect: <em><strong>This is some text. </em></strong> – Correct: <em><strong>This is some text. </strong></em> • Não colocar aspas nos atributos – Incorrect: <td rowspan=3> – Correct: <td rowspan="3"> • Uso do & – Incorrect: <title>Cars & Trucks</title> – Correct: <title>Cars & Trucks</title> • Tags em maiúsculo – Incorrect: <BODY><P ID="ONE">The Best Page Ever</P></BODY> – Correct: <body><p id="ONE">The Best Page Ever</p></body> • Uso de atributos sem valor associado – Incorrect: <textarea readonly>READ-ONLY</textarea> – Correct: <textarea readonly="readonly">READ-ONLY</textarea> Marco A. Gerosa 16 / 52 16

Tópicos Especiais em Desenvolvimento para Web Tags básicas do (X)HTML • •  comentário <h 1> a <h 6> cabeçalhos <p> parágrafo <a href=“endereço”> hiperlink <img src=“caminho” width=“xx” height=“yy” /> imagem salto de linha <hr /> linha horizontal Listas – <ul> ou <ol> listas ordenadas e não ordenadas – <li> item de uma lista • Tabelas – – – <table summary=“. . . ”> <caption> <thead> <tr> <th> <tbody><tr><td> <tfoot> <tr> <th> – * Summary e caption auxiliam usuários com problema de visão – Os atributos rowspam e colspam são usados para expandir uma célula Marco A. Gerosa 17 / 52 17

Tópicos Especiais em Desenvolvimento para Web Exemplo de tabela 1 <? xml version = "1. 0" encoding = "utf-8"? > 2 <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" 3 "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> 4 5  6  7 <html xmlns = "http: //www. w 3. org/1999/xhtml"> 8 <head> 9 <title>Tables</title> 10 </head> 11 12 <body> 13 <h 1>Table Example Page</h 1> 14 15 <table border = "1"> 16 <caption>Here is a more complex sample table. </caption> 17 18 <thead> 19  20  21 <tr> 22  23 <th rowspan = "2"> 24 <img src = "camel. gif" width = "205" 25 height = "167" alt = "Picture of a camel" /> 26 </th> 27 28  29 <th colspan = "4"> 30 <h 1>Camelid comparison</h 1> 31 <p>Approximate as of 6/2007</p> 32 </th> 33 </tr> 34 <tr> 35 <th># of Humps</th> 36 <th>Indigenous region</th> Marco 18 37 A. Gerosa <th>Spits? </th> / 52 18

Tópicos Especiais em Desenvolvimento para Web Formulários • • • <form method=“get / post” action=“url”> <input type=“hidden” name=“xxx” value=“xxx” /> <input type=“submit” value=“xxx” /> <input type=“reset” value=“xxx” /> <input type=“text” name=“xxx” size=“n” maxlength=“n” /> <textarea name=“xxx” rows=“n” cols=“n”> <input type=“password” name=“xxx” /> <input type=“checkbox” name=“xxx” value=“xxx” /> <input type=“radio” name=“xxx” value=“xxx” /> <select name=“xxx”> – <option> • <label> Marco A. Gerosa 19 / 52 19

Tópicos Especiais em Desenvolvimento para Web Exemplo de formulário 1 <? xml version = "1. 0" encoding = "utf-8"? > 2 <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" 3 "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> 4 5  6  7 <html xmlns = "http: //www. w 3. org/1999/xhtml"> 8 <head> 9 <title>More Forms</title> 10 </head> 11 12 <body> 13 <h 1>Feedback Form</h 1> 14 <p>Please fill out this form to help 15 us improve our site. </p> 16 17 <form method = "post" action = ""> 18 <p> 19 <input type = "hidden" name = "recipient" 20 value = "deitel@deitel. com" /> 21 <input type = "hidden" name = "subject" 22 value = "Feedback Form" /> 23 <input type = "hidden" name = "redirect" 24 value = "main. html" /> 25 </p> 26 27 <p><label>Name: 28 <input name = "name" type = "text" size = "25" /> 29 </label></p> 30 Marco A. Gerosa 20 / 52 31  20

Tópicos Especiais em Desenvolvimento para Web Outros recursos • Criação de hiperlink interno – <a href=“#nome_id”> – <a href=“endereco#nome_id”> – <h 1 id=“nome”> • Ênfase – – <strong> normalmente mostrado em negrito <em> normalmente mostrado em itálico <sub> subscrito <sup> superescrito • Meta-informação (no cabeçalho da página) – <meta name=“keywords” content=“x, y, . . . , z” /> – <meta name=“description” content=“bla bla” /> – * São úteis para mecanismos de busca Marco A. Gerosa 21 / 52 21

Tópicos Especiais em Desenvolvimento para Web CSS Marco A. Gerosa 22 / 52 22

Tópicos Especiais em Desenvolvimento para Web CSS • • • Cascading Style Sheets Separa a apresentação da estrutura do documento Possibilita reusar a padronização visual nas diversas páginas Validador do CSS: http: //jigsaw. w 3. org/css-validator Estilo inline <p style=“font-size: 20 pt; color: #6666 ff”>. . </p> • Folha de estilo incorporada <head> <style type = "text/css"> em { font-weight: bold; color: black } h 1 { font-family: tahoma, helvetica, sans-serif } p { font-size: 12 pt; font-family: arial, sans-serif }. special { color: #6666 ff } </style> Classe de estilo </head> • Folha de estilo externa <link rel=“stylesheet” type=“text/css” href=“caminho” /> OBS: Uniformiza e otimiza o carregamento das páginas (cache) Marco A. Gerosa 23 / 52 23

Tópicos Especiais em Desenvolvimento para Web Algumas propriedades comuns • color (#RRGGBB ou valores pré-definidos como yellow, blue etc. ) • font-size (valor ou xxsmall, x-small, smaller, medium, larger, x-large, xx-large) – Os valores relativos são adaptados a cada dispositivo • font-weight (normal, bolder, lighter ou valores múltiplos de 100) • text-decoration (none, underline, overline, line-through, blink) • font-style (none, italic, oblique) • text-ident (recua a primeira linha do parágrafo) • text-align (left, center, right) • OBS: Várias propriedades são herdadas de um elemento para seus elementos-descendentes Marco A. Gerosa 24 / 52 24

Tópicos Especiais em Desenvolvimento para Web Algumas maneiras de declarar • Classes de elementos específicos – a. nodec { text-decoration: none } • Pseudoclasse – a: hover { text-decoration: underline } • Elementos filhos – li em { font-weight: bold } – ul ul { font-size: . 8 em } • Aplicações em mais de uma classe – h 1, em { text-decoration: underline } • Tamanhos – – – 20 px (pixels) 150% (porcentagem). 8 em (altura do M maiúsculo). 8 ex (altura do x minúsculo) in (polegadas), cm (centímetros), mm (milímetros), pt (1/72 in) OBS: Tamanhos relativos facilitam a portabilidade para dispositivos móveis etc. Marco A. Gerosa 25 / 52 25

Tópicos Especiais em Desenvolvimento para Web Posicionamento <head> <title>Absolute Positioning</title> <style type = "text/css">. bgimg { position: absolute; top: 0 px; left: 0 px; z-index: 1 }. fgimg { position: absolute; top: 25 px; left: 100 px; z-index: 2 }. text { position: absolute; top: 25 px; left: 100 px; z-index: 3; font-size: 20 pt; font-family: tahoma, geneva, sans-serif } </style> </head> <body> <p><img src = "bgimg. gif" class = "bgimg" alt = "First positioned image" /></p> O posicionamento absoluto é em relação ao elemento-pai o relativo é em relação ao último elemento <p><img src = "fgimg. gif" class = "fgimg" alt = "Second positioned image" /></p> <p class = "text">Positioned Text</p> </body> Antigamente utilizava-se tabelas para diagramação Marco A. Gerosa 26 / 52 26

Tópicos Especiais em Desenvolvimento para Web Fundo de tela body { background-image: url(logo. gif); background-position: bottom right; background-repeat: no-repeat; //repeat, repeat-x, repeat-y background-attachment: fixed; // ou scroll background-color: #eeeeee } Marco A. Gerosa 27 / 52 27

Tópicos Especiais em Desenvolvimento para Web Dimensões de um elemento <div style = "width: 20%">Here is some text that goes in a box which is set to stretch across twenty percent of the width of the screen. </div> <div style = "width: 80%; text-align: center"> Here is some CENTERED text that goes in a box which is set to stretch across eighty percent of the width of the screen. </div> <div style = "width: 20%; height: 150 px; overflow: scroll"> This box is only twenty percent of the width and has a fixed height. What do we do if it overflows? Set the overflow property to scroll!</div> Marco A. Gerosa 28 / 52 28

Tópicos Especiais em Desenvolvimento para Web Bordas <head> <style type = "text/css"> div { text-align: center; width: 50%; position: relative; left: 25%; border-width: 4 px }. medium { border-width: medium }. thin { border-width: thin }. solid { border-style: solid }. double { border-style: double }. groove { border-style: groove }. inset { border-style: inset }. outset { border-style: outset }. dashed { border-style: dashed }. red { border-color: red }. blue { border-color: blue } </style></head> <body> <div class = "solid">Solid border</div><hr /> <div class = "double">Double border</div><hr /> <div class = "groove">Groove border</div><hr /> <div class = "inset">Inset border</div><hr /> <div class = "dashed">Dashed border</div><hr /> <div class = "thin red solid">Thin Red Solid border</div><hr /> <div class = "medium blue outset">Medium Blue Outset border</div> Marco A. Gerosa 29 / 52 29

Tópicos Especiais em Desenvolvimento para Web Exemplo de diagramação <style type = "text/css"> div. heading { background-color: #bbddff; text-align: center; font-family: arial, helvetica, sans-serif; padding: . 2 em } p { text-align: justify; font-family: verdana, geneva, sans-serif; margin: . 5 em } div. floated { background-color: #eeeeee; font-size: 1. 5 em; font-family: arial, helvetica, sans-serif; padding: . 2 em; margin-left: . 5 em; margin-bottom: . 5 em; float: right; text-align: right; width: 50% } div. section { border: 1 px solid #bbddff } </style> </head><body> <div class = "heading"><img src = "deitel. png" alt = "Deitel" /> </div> <div class = "section"> <div class = "floated">Corporate Training and Publishing</div> <p>Deitel & Associates, Inc. is an (. . . )</p> </div> <div class = "section"> <div class = "floated">Leading-Edge Programming Textbooks</div> <p>Through its publishing (. . . )</p> </div> Marco A. Gerosa 30 / 52 30

Tópicos Especiais em Desenvolvimento para Web Tipos de mídia • Possibilita definir exibições diferentes para mídia (all, screen, print, handheld, braille, aural etc. ) • Ex: @media all { body { background-color: #4488 aa } h 1 { font-family: verdana, helvetica, sans-serif; color: #aaffcc } p { font-size: 12 pt; color: white; font-family: arial, sans-serif } } /* end @media all declaration. */ @media print Fundo branco, fonte com serifa, { tamanho maior body { background-color: white } h 1 { color: #008844} p { font-size: 14 pt; color: #4488 aa; font-family: "times new roman", times, serif } Marco A. Gerosa 31 / 52 31

Tópicos Especiais em Desenvolvimento para Web Exemplo de um menu com CSS <style type = "text/css"> body { font-family: arial, sans-serif } div. menu { font-weight: bold; color: white; border: 2 px solid #225599; text-align: center; width: 10 em; background-color: #225599 } div. menu: hover a { display: block } div. menu a { display: none; border-top: 2 px solid #225599; background-color: white; width: 10 em; text-decoration: none; color: black } div. menu a: hover { background-color: #dfeeff } </style> <div class = "menu">Menu <a href = "#">Home</a> <a href = "#">News</a> <a href = "#">Articles</a> <a href = "#">Blog</a> <a href = "#">Contact</a> </div> Marco A. Gerosa 32 / 52 32

Tópicos Especiais em Desenvolvimento para Web Java. Script Marco A. Gerosa 33 / 52 33

Tópicos Especiais em Desenvolvimento para Web Java. Script • Foi desenvolvida pela Netscape em 1995. No final de 1995, a versão 1. 0 foi colocada no Netscape versão 2. 0. • Linguagem interpretada • Fracamente tipada • Orientada a objetos • Limitações. É possível ler e gravar arquivos? • Problemas de compatibilidade entre browsers Marco A. Gerosa 34 / 52 34

Tópicos Especiais em Desenvolvimento para Web Tipos de dados e operadores Number + (soma) - (subtração) * (multiplic ação) / (divisão) % (resto da divisão) ++ (increment o +1) -(decrement o – 1) Boolean String && (e) || (ou) ! (negação) + (concatena ção) OBS: Strings podem ser delimitadas por aspas simples ou duplas. Podem ser usados para evitar caracteres de escape: document. write( "<h 1 style = "color: magenta">" ); document. write( "<h 1 style = 'color: magenta'>" ); Marco A. Gerosa 35 / 52 35

Tópicos Especiais em Desenvolvimento para Web Inserção de código Java. Script no XHTML • • • <SCRIPT Language=“Java. Script”> //<![CDATA[ comandos //]]> </SCRIPT> • Ou • <script type="text/javascript" src="/script/site. js"></script> Marco A. Gerosa 36 / 52 36

$Tópicos Especiais em Desenvolvimento para Web Funções function nome_da_função (parâmetros) { linhas de código$

Tópicos Especiais em Desenvolvimento para Web Funções function nome_da_função (parâmetros) { linhas de código } Exemplo: function soma (a, b) { return a+b; } Para chamar a função: x = soma(2, 4); <a href=“javascript: nome_função( )”> <input type=“button” on. Click=“nome_função( )”> Marco A. Gerosa 37 / 52 37

Tópicos Especiais em Desenvolvimento para Web Algumas funções e objetos úteis • • • • alert(valor) parse. Int(x), parse. Float(y) window. open(. . . ) window. prompt(. . . ) set. Timeout set. Interval eval(codigo) Objeto Math Classe Date Objeto window Objeto document Objeto navigator Objeto screen Marco A. Gerosa 38 / 52 38

Tópicos Especiais em Desenvolvimento para Web Exemplo <? xml version = "1. 0" encoding = "utf-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd">  <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> <title>A First Program in Java. Script</title> <script type = "text/javascript"> //<![CDATA[ document. writeln( "<h 1>Welcome to Java. Script Programming!</h 1>" ); //]]> </script> </head><body></body> </html> Marco A. Gerosa 39 / 52 39

Tópicos Especiais em Desenvolvimento para Web Atenção! A saída é interpretada pelo browser • document. writeln( "<h 1>Welcome to Java. Script" + "<br />Programming!</h 1>" ); • window. alert( "Welcome ton. Java. Scriptn. Programming!" ); Marco A. Gerosa 40 / 52 40

Tópicos Especiais em Desenvolvimento para Web Arrays e Matrizes • var a = new Array (10); // cria um Array de 10 posições • var b = new Array (elem 1, elem 2, elem 3, . . . ); • • • var a = new Array(3); a[0] = new Array(7); a[1] = new Array(7); a[2] = new Array(7); a[0][2] = “Marco”; Marco A. Gerosa 41 / 52 41

Tópicos Especiais em Desenvolvimento para Web Eventos Evento: Aplicado em: Ocorre quando, on. Blur elementos de formulário e janelas o foco de algum elemento é retirado. on. Focus elementos de formulários e em janelas o usuário ativa um determinado campo tipo text em um formulário ou janela. on. Change campos de seleção, campos e áreas de texto o valor de determinado elemento é alterado por ação do próprio usuário. on. Load Corpo do documento uma página é carregada pelo programa de navegação. on. Unload corpo do documento o usuário sai da página, fechando o browser ou mudando de página. on. Submit formulários o botão de envio de dados é acionado, normalmente por intermédio do ponteiro do mouse. on. Click Botões (de forma geral), campos e áreas de texto o ponteiro do mouse é acionado sobre qualquer elemento de um formulário ou link em uma página. on. Mouse. Over Links o ponteiro do mouse é posicionado sobre um determinado link. on. Mouse. Out links e áreas preestabelecidas o ponteiro do mouse é movido para fora de um link ou área de imagem preestabelecida. on. Mouse. Down documentos, botões e links o botão do mouse é acionado. on. Mouse. Up Botões, links e documentos o botão do mouse é liberado. Marco A. Gerosa 42 / 52 42

Tópicos Especiais em Desenvolvimento para Web Árvore DOM • element = document. get. Element. By. Id(“id”) • document. get. Element. By. Id(“id”). value • Algumas propriedades e funções de um elemento: – – – parent. Node insert. Before() append. Child() replace. Child() remove. Child() • Modificação dinâmica de propriedades – Ex: document. body. style. background. Color = “#0 F 0000”; • Coleções Marco A. Gerosa 43 / 52 43

Tópicos Especiais em Desenvolvimento para Web Servlets Marco A. Gerosa 44 / 52 44

Tópicos Especiais em Desenvolvimento para Web Tomcat • Projeto Jakarta –Apache Software Foundation; • http: //jakarta. apache. org/tomcat/; • $CATALINA_HOME/ – – – bin/ scripts de startup/shutdown; conf/ arquivos de configuração; logs/ arquivos de log; shared/ classes e JARs compartilhados; webapps/ aplicações web. • Configuração principal no arquivo server. xml Marco A. Gerosa 45 / 52 45

Tópicos Especiais em Desenvolvimento para Web Estrutura de uma aplicação Web Java • As aplicações são componentes plugáveis nos containers de execução • aplicacao. Web/ – WEB-INF/ • classes/ • lib/ • web. xml – index. html – [. . . ] • Pode ser compactada num arquivo WAR; • Os servlets são mapeados em URLs no arquivo web. xml Marco A. Gerosa 46 / 52 46

Tópicos Especiais em Desenvolvimento para Web Modelo MVC - Páginas web (JSP, HTML, etc. ) cuidam da parte visual; - Servlet central faz o controle mediante configuração; - Ações manipulam classes de lógica de negócio (modelo). https: //esjug. dev. java. net/files/documents/1646/41943/Intro. Web. pdf Marco A. Gerosa 47 / 52 47

Tópicos Especiais em Desenvolvimento para Web Frameworks MVC • Action Framework , Barracuda , Bento , Bishop , Cameleon , Canyamo , Cassandra , Chiba , Cocoon , Dinamica , Dovetail , Echo , Expresso , Folium , Genie , Helma , Jacquard , Jaffa , Japple , JATO , JBanana , Jeenius , JFormular , JPublish , j. Statemachine , Jucas , JWAA , JWarp , j. Zonic , Macaw , Maverick , Melati , Millstone , My. Faces , Nacho , Niggle , Open. Emcee , OXF , RIFE , Scope , Shocks , Smile , SOFIA , Spring MVC , Struts , Tapestry , Tea. Servlet , Turbine , Verge , Warfare , Web. On. Swing , Web. Work , wing. S , Xoplon, etc. Marco A. Gerosa 48 / 52 48

Tópicos Especiais em Desenvolvimento para Web Exemplo Servlet public class Hello. Servlet extends Http. Servlet { Protected void do. Get(Http. Servlet. Request request, Http. Servlet. Response response) throws Servlet. Exception, IOException { response. set. Content. Type("text/html"); Print. Writer out = response. get. Writer(); String param = request. get. Parameter("nome"); out. println(“<HTML><HEAD>. . . </HEAD><BODY>. . . </BODY></HTML >”); out. close(); } protected void do. Post(Http. Servlet. Request request, Http. Servlet. Response response) throws Servlet. Exception, IOException { //. . } Marco A. Gerosa 49 / 52 49

Tópicos Especiais em Desenvolvimento para Web Exemplo de mapeamento <servlet> <servlet-name>hello. Servlet</servlet-name> <servlet-class>exemplo. Hello. Servlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>hello. Servlet</servlet-name> <url-pattern>/servlets/hello</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index. html</welcome-file> </welcome-file-list> Marco A. Gerosa 50 / 52 50

Tópicos Especiais em Desenvolvimento para Web JSP • Página HTML com código Java embutido entre as tags <% e %> • O container compilas as páginas JSP transformando-as em Servlets e mapeando-as automaticamente. • Não deve ser usada para colocar a lógica da aplicação Marco A. Gerosa 51 / 52 51

Tópicos Especiais em Desenvolvimento para Web Referências • Deitel, P. J. & Deitel, H. M. (2008), Ajax, Rich Internet Applications e Desenvolvimento Web para Programadores. • Wikipedia • Vitori Souza (2005) Introdução ao Desenvolvimento Web em Java, disponível em https: //esjug. dev. java. net/files/documents/1646/41943/Intro. We b. pdf Marco A. Gerosa 52 / 52 52