Arquivos de sites

jQuery – Pegando e atribuindo classes CSS

Assim como é fácil manipular o conteúdo e atributos dos elementos, como nós vimos no capítulo anterior, é igualmente fácil manipular o CSS dos elementos. O jQuery lhe dá acesso fácil para mudança tanto do atributo de estilo, que você manipula usando o método css(), como a(s) classe(s) de um elemento, onde vários métodos diferentes permitem você modificar isso.

Vamos começar olhando a mudança do atributo class (classe). O atributo class recebe um ou vários nomes de classes, que pode ou não referenciar a uma classe CSS definida no seu stylesheet. Geralmente faz, mas você pode de tempos em tempos adicionar nomes de classes aos seus elementos simplesmente para estar apto para alcançar eles facilmente pelo jQuery, já que o jQuery tem um excelente suporte para seleção de elementos baseado nos  nomes da classe.

Eu defini alguns seletores CSS bem simples no meu stylesheet, principalmente para propósitos de teste:

.bold {
        font-weight: bold;
}
.blue {
        color: blue;
}

No seguinte exemplo nós vamos usar três dos métodos mais interessantes relacionados à classe: hasClass(), que checa se um ou vários elementos já tem uma classe específica definida, addClass(), que simplesmente adiciona um nome de classe a um ou vários elementos e o método removeClass(), que  irá… bem, você provavelmente já adivinhou isso.

<a href="javascript:void(0);" onclick="ToggleClass(this);">Toggle class</a>
<script type="text/javascript">
function ToggleClass(sender)
{
        if($(sender).hasClass("bold"))
                $(sender).removeClass("bold");
        else
                $(sender).addClass("bold");
}
</script>

O exemplo é na realidade muito simples. Quando o link é clicado, nós enviamos o próprio link (this) como um parâmetro ao método ToggleClass() que nós temos definido. Nele, nós checamos se o remetente já tem a classe “bold” – se ele tiver nós o removemos, caso contrário nós o adicionamos. Isso é uma coisa muito comum de se fazer, então obviamente o pessoal do jQuery não quer  que nós escrevemos todas essas três linhas de código para isso. É por isso que eles implementaram o método toggleClass(), com o qual nós podemos transformar todo nosso exemplo avima dentro de uma única linha de código:

<a href="javascript:void(0);" onclick="$(this).toggleClass('bold');">Toggle class</a>

Com certeza, nós podemos selecionar multiplos elementos, onde nós podemos adicionar ou remover múltiplas classes, também. Aqui está um exemplo disso:

<div id="divTestArea1">
        <span>Test 1</span><br />
        <div>Test 2</div>
        <b>Test 3</b><br />
</div>
<script type="text/javascript">
$(function()
{
        $("#divTestArea1 span, #divTestArea1 b").addClass("blue");
        $("#divTestArea1 div").addClass("bold blue");
});
</script>

Primeiro nós selecionamos as tags span e a b, a qual nós adicionamos uma única classe para: classe blue. Então nós selecionamos a tags div, que nós adicionamos duas classes, separadas por espaço: classe bold e a blue. O método removeClass() funciona apenas do mesmo jeito, permitindo você especificar várias classes para serem removidas, separadas por espaços.

Fonte: jquery-tutorial.net

Anúncios

jQuery – Introdução ao selectors (seletores) e Usando elementos, IDs e classes

Uma tarefa muito comum quando se está usando JavaScript, é ler e modificar o conteúdo da página. Para fazer isso, você precisa encontrar o(s) elemento(s) que você deseja modificar, e ai é onde o selector no jQuery ajudará você. Com o JavaScript normal, encontrar elementos pode ser extremamente pesado, ao menos que você precise encontrar um único elemento que tem um valor especificado no atributo ID. O jQuery pode ajudar você a encontrar elementos baseado em seus IDs, classes, tipos, atributos, valores de atributos e muito, muito mais. Ele é baseado no selectors do CSS e como você verá através desse tutorial, ele é extremamente poderoso. Quando usamos esse tipo de programa para fazer mudanças em seu site, é importante que você tenha autenticação de dois fatores (two factor authentication (em Inglês)) de modo que o seu site e computador não são compromissados.

Pela razão dessa ser uma tarefa tão comum, o construtor do jQuery vem em várias formas que recebem uma selector query como argumento (parâmetro), permitindo você localizar elementos com uma quantidade bastante limitada de código para uma eficiência ótima. Você pode instanciar o objeto jQuery simplesmente escrevendo jQuery() ou até mais curto usando o nome de atalho do jQuery: $().

Portanto, selecionar um conjunto de elementos é simples assim:

$(<query aqui>)

Com o objeto jQuery retornado, você pode então começar a usar e alterar os elementos que você encontrou.

Fonte

Usando elementos , IDs e classes

O selector #id

Um tipo de selector muito comum é o baseado em ID, que nós vimos no exemplo “Hello, world”. Ele usa o atributo ID de uma tag HTML para localizar o elemento desejado. Um ID deve ser único,então você deve apenas usar esse selectior quando você deseja localizar um único elemento. Para localizar um elemento com um ID específico, escreva um caractere hash (#), seguido pelo ID do elemento que você deseja localizar, assim:

$("#divTest")

Um exemplo disso em uso:

<div id="divTest"></div>
<script type="text/javascript">
$(function()
{
        $("#divTest").text("Test");
});
</script>

Agora, enquanto tiver apenas um único elemento que combina com a nossa query acima, você deve estar ciente que o resultado é uma lista, significando que isso pode conter mais de um elemento, se a query combina com mais de um. Um exemplo disso é combinar todos os elementos quais usam uma ou varias classes CSS.

O selector .class

Elementos com uma classe específica podem ser localizados escrevendo um caractere ponto (.) seguido pelo nome da classe. Aqui vai um exemplo:

<ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
</ul>
<script type="text/javascript">
$(function()
{
        $(".bold").css("font-weight", "bold");
});
</script>

O selector element

Você também pode combinar baseado em elementos nos nomes das tags.

You can also match elements based on their tag names. Por exemplo, você pode combiner todos os links emu ma página assim:

$(“a”)

Ou todas as tags div assim:

$(“div”)

Se você usar um selector de multi-elemento (multi-element), como o selector de classe que nós usamos no exemplo anterior, e nó sabemos que nós estamos procurando por emento de um tipo específico, é uma boa prática especificar o tipo do elemento antes do selector. Não é apenas mais preciso, mas também é mais rápido para o jQuery processar, resultando em sites mais responsivos. Aqui vai uma versão reescrita do exemplo anterior, onde nós usamos esse método:

$("span.bold").css("font-weight", "bold");

Isso combinará todos os elementos span com “bold” como classe. Claro, isso pode ser usado com IDs e praticamente com todos os outros selector também.

Fonte: jquery-tutorial.net / jquery-tutorial.net

Parte 2 – Tutorial: Criando uma aplicação Struts 2 no Eclipse

Sejam bem-vindos a parte 2 da série de 7 partes onde vamos explorar o mundo do framework Struts 2. No artigo anterior nós passamos pelo básico do Struts2, seu Diagrama de Arquitetura, ciclo de vida do processamento das requisições e uma breve comparação do Struts1 e Struts2. Se você não passou no nosso artigo anterior, eu altamente recomendo você fazer isso antes de botar a mão na massa hoje.

Coisa que nós precisamos

Antes de nós começarmos com nosso primeiro exemplo Hello World no Struts 2, nós vamos precisar de algumas ferramentas.

  1. JDK 1.5 ou acima (download)
  2. Tomcat 5.x ou acima ou qualquer outro container (Glassfish, JBoss, Websphere, Weblogic etc) (download)
  3. Eclipse 3.2.x ou acima (download)
  4. Arquivos JAR do Apache Struts2. Segue a lista dos arquivos JAR necessários para essa aplicação.
    • commons-logging-1.0.4.jar
    • freemarker-2.3.8.jar
    • ognl-2.6.11.jar
    • struts2-core-2.1.6.jar
    • xwork-2.1.2.jar

Observe que dependendo da versão utilizada do Struts2, o número da versão dos arquivos JAR acima podem mudar.

Nosso Objetivo

Nosso objetivo é criar uma aplicação básica de Struts2 com uma página de Login. O usuário entrará com a credencial de login(username e senha) e se for autenticado com sucesso ele será redirecionado à uma página de ‘Bem-Vindo’ na qual mostrará a mensagem ” Howdy, <username>…!“. Se o usuário não autenticar, ele será redirecionado de volta para página de login.
struts2-application-login-page

Primeiros Passos

Vamos começar com a nosa primeira aplicação baseada em Struts2.
Abra o Eclipse e vá em File -> New -> Project e selecione Dynamic Web Project na tela New Project.
Dynamic Web Project in Eclipse

Após selecionar Dynamic Web Project, pressione Next.
Eclipse Struts2 Project

Digite o nome do projeto. Por exemplo StrutsHelloWorld. Uma vez que fez isso, selecione o target runtime environment (ex.: Apache Tomcat v6.0). Isso é pra rodar o projeto dentro do ambiente do eclipse. Depois disso clique em Finish.

Uma vez que o projeto está criado, você pode ver essa estrutura no Project Explorer.
Eclipse Project Explorer: Struts2 Example

Agora copie todos os arquivos JAR requeridos no pasta WebContent -> WEB-INF -> lib. Crie essa pasta se ela não existir.
struts2-webinf-jars

Mapeamento o Struts2 no WEB.xml

Como discutido no artigo anterior, o ponto de entrada da aplicação Struts2 será definir o Filter no web.xml. Daqui nós definiremos uma entrada da classe org.apache.struts2.dispatcher.FilterDispatcher no web.xml.

Abra o arquivo web.xml que está abaixo da pasta WEB-INF e copie e cole o seguinte código.

<?xml version="1.0" encoding="UTF-8"?>

<web-app id="WebApp_9" version="2.4"

    xmlns="http://java.sun.com/xml/ns/j2ee"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

    <display-name>Struts2 Application</display-name>

    <filter>

        <filter-name>struts2</filter-name>

        <filter-class>

            org.apache.struts2.dispatcher.FilterDispatcher

        </filter-class>

    </filter>

    <filter-mapping>

        <filter-name>struts2</filter-name>

        <url-pattern>/*</url-pattern>

    </filter-mapping>

    <welcome-file-list>

        <welcome-file>Login.jsp</welcome-file>

    </welcome-file-list>

</web-app>

O código acima no web.xml mapeará o filtro do Struts2 com a url /*. O mapeamento padrão de url para aplicação struts2 será /*.action. Também observe que nós temos que definir Login.jsp como arquivo de boas-vindas.

Observação: O filtro FilterDispatcher está depreciado desde a versão 2.1.3 do  Struts. Se você está utilizando a última versão do Struts2 ( > 2.1.3) utilize a classe StrutsPrepareAndExecuteFilter em vez disso.

<filter>

    <filter-name>struts2</filter-name>

    <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>

</filter>

<filter-mapping>

    <filter-name>struts2</filter-name>

    <url-pattern>/*</url-pattern>

</filter-mapping>

A classe Action

Precisaremos de uma classe Action que irá autenticar nosso usuário e manterá o valor do username e da senha. Para isso vamos criar um pacote net.viralpatel.struts2 na pasta source. Esse pacote conterá o arquivo action.
struts2-source-package

Crie uma classe chamada LoginAction no pacote net.viralpatel.struts2 com o seguinte conteudo.

package net.viralpatel.struts2;

public class LoginAction {

    private String username;

    private String password;

    public String execute() {

        if (this.username.equals("admin") && this.password.equals("admin123")) {

            return "success";

        } else {

            return "error";

        }

    }

    public String getUsername() {

        return username;

    }

    public void setUsername(String username) {

        this.username = username;

    }

    public String getPassword() {

        return password;

    }

    public void setPassword(String password) {

        this.password = password;

    }

}

Observe que, a classe action acima contém dois campos, username e senha qual manterá os valores do formulário e também contem o método execute() que autenticará o usuário. Neste simples exemplo, nós vamos checar se o username admin é e a senha é admin123.

Também observe que diferente da classe Action no Struts1, a classe Action do Struts2 é uma simples classe POJO com os atributos necessários e método.

O método execute() retorna um valor String qual irá determinar a página de resultado. Também, no Struts2 o nome do método não é fixo. Neste exemplo nós devemos definir o método execute(). Você pode querer definir um método authenticate() em vez disso.

O ResourceBundle

ResourceBundle é uma entidade Java muito útil que ajuda a colocar o conteúdo estático fora do arquivo fonte. A maioria das aplicações definem um arquivo resource bundle como ApplicationResources.properties o qual conterá mensagens estáticas como Username e Senha e inclui isso com a aplicação.

ResourceBundle se torna útil quando nós queremos adicionar suporte a internacionalização(I18N) a uma aplicação.

Nós definiremos um arquivo ApplicationResources.properties para nossa aplicação. Esse arquivo de propriedade deve estar presente na pasta WEB-INF/classes quando a fonte for compilada. Portanto criaremos uma pasta source chamada resources e colocar esse arquivo ApplicationResources.properties dentro dela.

Para criar uma pasta source, clique com o botão direito no seu projeto no Project Explorer e selecione New -> Source Folder.
struts2-resource-folder

Especifique o nome da pasta como resources e clique em Finish.

Crie um arquivo ApplicationResources.properties embaixo da pasta resources.
struts-2-application-resources-properties

Copie o sequinte conteúdo dentro do ApplicationResources.properties.

label.username= Username

label.password= Password

label.login= Login

O JSP

Nós vamos criar dois arquivos JSP para renderizar a saída ao usuário. Login.jsp será o ponto de partida da nossa aplicação, no qual conterá um simples formulário de login com username e senha. Em uma autenticação bem sucedida, o usuário será redirecionado à Welcome.jsp que irá mostrar uma simples mensagem de boas vindas.

Crie dois arquivos JSP Login.jsp e Welcome.jsp na pasta WebContent do seu projeto. Copie o seguinte conteúdo dentro deles.

Login.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

<html>

<head>

<title>Struts 2 - Login Application | ViralPatel.net</title>

</head>

<body>

<h2>Struts 2 - Login Application</h2>

<s:actionerror />

<s:form action="login.action" method="post">

    <s:textfield name="username" key="label.username" size="20" />

    <s:password name="password" key="label.password" size="20" />

    <s:submit method="execute" key="label.login" align="center" />

</s:form>

</body>

</html>

Welcome.jsp

<%@ page contentType="text/html; charset=UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>

<html>

<head>

<title>Welcome</title>

</head>

<body>

    <h2>Howdy, <s:property value="username" />...!</h2>

</body>

</html>

Observe que nós usamos a tag <s:> do Struts 2 para renderizar as caixas de texto e labels. Struts2 vem com uma ponderosa biblioteca de tags embutida para renderizar elementos UI com mais eficiência.

O arquivo struts.xml

O Struts2 lê a configuração e a definição de classe de um arquivo XML chamado struts.xml. Esse arquivo é carregado do classpath do projeto. Nós definiremos o arquivo struts.xml na pasta resources. Crie o arquivo struts.xml na pasta resources.
struts2-struts-xml

Copie o seguinte conteúdo dentro do struts.xml.

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC

    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

    <constant name="struts.enable.DynamicMethodInvocation"

        value="false" />

    <constant name="struts.devMode" value="false" />

    <constant name="struts.custom.i18n.resources"

        value="ApplicationResources" />

    <package name="default" extends="struts-default" namespace="/">

        <action name="login"

            class="net.viralpatel.struts2.LoginAction">

            <result name="success">Welcome.jsp</result>

            <result name="error">Login.jsp</result>

        </action>

    </package>

</struts>

Observe que no arquivo de configuração acima, nós temos definido a action Login da nossa aplicação. Dois result paths (caminhos de resultado) estão mapeados com LoginAction dependendo do resultado do método execute(. Se o método execute() retornar sucesso, o usuário será redirecionado para Welcome.jsp se não para Login.jsp.

Também observe que uma Constant é especificada com o nome struts.custom.i18n.resources. Essa constante especifica o arquivo resource bundle que nós criamos nos passos acima. Nós apenas precisamos especificar o nome do arquivo resource bundle sem a extensão (ApplicationResources sem o .properties).

Nosso LoginAction contém o método execute() o qual é o método padrão sendo chamado pelo Struts2. Se o nome do método é diferente, ex.: authenticate(); então devemos especificar o nome do método na tag <action>.

<action name="login" method="authenticate"

    class="net.viralpatel.struts2.LoginAction">

Quase pronto

A aplicação está quase pronta. Você talvez queira rodar a aplicação agora e ver o resultado você mesmo. Eu presumo que você já tenha configurado o Tomcat no eclipse.  Tudo que você precisa fazer:
Abrir a view de Server em Windows -> Show View -> Server. Botão direito nesta view e selecionar New -> Server e adicionar os detalhes do seu servidor.
Para rodar o projeto, botão direito no nome do projeto no Project Explorer e selecione Run as -> Run on Server (Atalho: Alt+Shift+X, R)

Mas ai tem um pequeno problema. Nossa aplicação roda perfeitamente bem até este ponto. Mas então o usuário entra com as credenciais erradas, ela será redirecionada para página de Login. Mas nenhuma mensagem de erro é mostrada. O usuário não sabe oque aconteceu. Uma boa aplicação sempre mostrará mensagens de erro apropriadas ao usuário. Então nós devemos mostrar uma mensagem de erro Invalid Username/Password. Please try again quando a autenticação do usuário falhar.

Toque final

Para adicionar essa funcionalidade, primeiro nós vamos adicionar a mensagem de erro no nosso arquivo ResourceBundle. Abra o ApplicationResources.properties e adicione uma entrada para error.login. O ApplicationResources.properties final parecerá como:

label.username= Username

label.password= Password

label.login= Login

error.login= Invalid Username/Password. Please try again.

Nós também precisamos adicionar lógica no LoginAction para adicionar a mensagem de erro se o usuário não autenticar. Mas ai nós temos um problema. Nossa mensagem de erro está especificada no arquivo ApplicationResources.properties. Nós precisamos especificar a chave error.login no LoginAction e a mensagem deverá aparecer na página JSP.

Para isso nós precisamos implementar a interface com.opensymphony.xwork2.TextProvider que fornece o método getText(). Esse método retorna um valor String do arquivo resource bundle. Nós precisamos apenas passar o valor chave como argumento para o método getText(). A interface TextProvider define vários métodos que nós precisamos implementar a fim de conseguir segurar o método getText(). Mas nós não queremos estragar o nosso código adicionando todos esses métodos que não temos a intenção de usar. Tem um bom jeito de lidar com este problema.

Struts2 vem com uma classe muito útil com.opensymphony.xwork2.ActionSupport. Nós precisamos estender nossa classe LoginAction com esta classe e diretamente usar métodos como o getText(), addActionErrors() e etc. Portanto nós iremos estender a classe LoginAction com a classe ActionSupport e adicionar a lógica para reportar o erro dentro dela. O código final do LoginAction deve se parecer com:

package net.viralpatel.struts2;

import com.opensymphony.xwork2.ActionSupport;

public class LoginAction extends ActionSupport {

    private String username;

    private String password;

    public String execute() {

        if (this.username.equals("admin")

                && this.password.equals("admin123")) {

            return "success";

        } else {

            addActionError(getText("error.login"));

            return "error";

        }

    }

    public String getUsername() {

        return username;

    }

    public void setUsername(String username) {

        this.username = username;

    }

    public String getPassword() {

        return password;

    }

    public void setPassword(String password) {

        this.password = password;

    }

}

E é isso. Nossa primeira aplicação Hello World em Struts2 está pronta.

Isso é tudo pessoal

Execute a aplicação no eclipse e rode-o no seu navegador favorito.
Página de Login
struts2-application-login-page

Página de boas vindas
struts2-welcome-page

Página de Login com erro
struts2-login-page-error

Download do código fonte

Código fonte sem os arquivos JAR (9 KB)
Código fonte com os arquivos JAR (3 MB)

Fonte: viralpatel.net – Viral Patel