Arquivo da tag: web

Personalizando Select com JQuery

Muitas vezes nos deparamos com situações que exigem o uso da propriedade select em algum projeto web. As vezes o projeto exige dos programadores que o select seja mais elaborado ou diferenciado.
Nos padrões do HTML temos um select com poucas alternativas de customização, o que, em muitos casos não vem acalhar com as nossas reais necessidades de personalização.
Quando tudo esta difícil na web aparece o JQuery para resolver a nossa vida. O plugin Custom Select trás toda a flexibilidade para adaptarmos o nosso select da forma que for necessário.

Exemplo do select no código HTML:

<select name="dormitorios"  title="Exemplo:">
    <option value="1">1 exemplar</option>
    <option value="2">2 exemplar </option>
    <option value="3">3 exemplar </option>
    <option value="4">4 exemplar </option>
    <option value="5">5 exemplar </option>
</select>

Vamos para a configuração:

1 – Baixar a biblioteca principal do JQuery  jquery.tools.min.js

2 -Baixar o plugin jquery.customselect.js

3 – Chamar os arquivos js em seu html:

<script type="text/javascript" src="/path/to/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.customselect.js"></script>

4 – Inserir em seu código HTML a função que executa o nosso plugin;

<script type="text/javascript">
$(document).ready(function(){
    $('#select').SelectCustomizer();
});
</script>

 

CSS do select

Propriedade 1 – _iconselect

Vai ser a primeira parte do nosso select, onde se localizarão configurações como: tamanho da fonte, tipo de fonte, background do campo, entre outros.

Esta propriedade _iconselect é um sufixo gerado pelo próprio plugin.

Ex: A sua configuração no CSS ficará assim:

select_iconselect {
...
}

Propriedade 2 – _options

Esta propriedade é responsável pela configuração da nossa caixa de itens, ou seja, propriedades como tamanho da caixa, barra de rolagem entre outras. A propriedade no código CSS ficará assim:

select_options {
...
}

 

Propriedade 3 – selectwrapper e selectfooter

Esta propriedade vai configurar todos os itens do nosso select em associação com outras propriedades.

Aqui vai alguns códigos que serão relacionados com essa propriedade para a personalização do nosso select no CSS:

.selectwrapper {…}
.selectwrapper .selectitems{...}
.selectwrapper .last{...}
.selectwrapper .selectitems span{...}
.selectwrapper .hoverclass {...}
.selectwrapper .selectedclass {…}

Também temos a propriedade selectfooter que como o próprio nome induz, faz referencia a configurações do nosso rodapé, da caixa de itens.
No código CSS ficará assim:

.selectfooter {…}

Abaixo a imagem de um select personalizado:

OBS: Lembrando que estas propriedades são geradas automaticamente pelo nosso plugin. Por isso não incluímos nem uma dessas classes ao nosso HTML, apenas a propriedade select em sua forma natural.

Spring IDE no Eclipse

Nesse Post mostrarei duas formas de ter o plugin Spring IDE no Eclipse:

Primeira forma é baixando a IDE já com suporte nativo:

SpringSource Tool Suite (STS) é uma IDE baseada no Eclipse com plugins pré-instalados que fornece recursos valiosos para os desenvolvedores Spring. Além do suporte para o framework Spring core, STS também oferece editores visuais, validadores, Painel do Spring para outros projetos como Spring ROO, Grails, Groovy, Gradle, tcServer, e Insight Spring.

O plugin principal para STS é Spring IDE, que fornece as características fundamentais de ferramentas Spring.  STS  vem pré-configurado com muitos outros plugins, como M2Eclipse  para  Maven,  Web Tools Platform (WTP), Data Tools Platform (DTP), AspectJ  Development Tools (AJDT) e ferramentas JUnit. Já vem incluso também a edição de desenvolvedor do vFabric tc Server, o substituto para o Apache Tomcat, que vem otimizada para Spring.
STS está disponível a partir do site SpringSource:
http://www.springsource.com/developer/sts

Após o download é só proceder à instalação:

Mac OS:

É preciso montar a imagem de disco, clicando duas vezes sobre o arquivo dmg baixado. Abra o volume chamado ‘SpringSource’ e ​​dê um duplo clique no instalador para iniciar a instalação. Siga as instruções na tela para concluir a instalação.

Windows:

Dê um duplo clique no instalador para iniciar o processo de instalação. Siga as instruções na tela para concluir a instalação.
Se você baixou o arquivo ZIP, não use o utilitário de extração que vem com o Windows isso está causando problemas durante a extração. Em vez disso,use o utilitário livre 7-Zip, recomendado no próprio site.

Linux:

Uma vez baixado, iniciar a instalação, executando o seguinte comando em um terminal:

sh nomeDoArquivoBaixado.sh

Maiores informações referentes à instalação podem ser encontradas no próprio site.

Segunda forma, baixando o plugin Eclipse IDE:

O plugin prove facilidades para o uso de Spring. Possui auto complete para os xmls de configuração do Spring, módulo visual para o Spring Web Flow, navegação entre os beans do Spring, e visualização de recursos AOP.

Instalação:

No Eclipse, clique em “Help –> Install New Software…”para abrir a caixa de diálogo de instalação do plugin.

No segundo passo clique no botão Add. da imagem acima, na tela que abrirá digite “Spring IDE” sem as aspas no campo name, e “http://springide.org/updatesite” no campo Location e clique em OK.

 

Aguarde o Eclipse buscar os softwares, depois selecione apenas os campos acima e clique em Next, após isso basta aceitar os termos e aguardar pelo fim da instalação.

Para gerenciar os sites dos plugins clique em Help -> Install New Software …  Clicando no link “Available Software Sites” você vai ver os sites dos plugins configurados no momento.

Fonte: http://www.springsource.com/developer/sts

Disponibilizando ViewScope para Spring

spring e jsf

Quem trabalha com JSF sabe que existem escopos para seus Managed Beans, e que eles devem ser bem definidos conforme o papel de cada Managed Bean na aplicação. Esse tal de “escopo” define o tempo de vida desse objeto(o Managed Bean) dentro da aplicação.

A partir do JSF 2.0 foi implementado um novo tipo de escopo, chamado de ViewScope. Este novo escopo veio para suprir a necessidade de se ter um tempo de vida dos Managed Beans um pouco maior do que o Request e menor que o Session. O uso do ViewScope é muito recomendado pois evita que um ManagedBean fique instanciado durante a sessão inteira do usuário(caso do SessionScope) mesmo que não esteja mais sendo usado, e possibilita guardar dados enquanto o usuário não troca de página(UIViewRoot), mesmo utilizando requisições ajax(o que não é possível com o RequestScope).

Grande parte das aplicações possuem frameworks, como o Spring, para gerenciar seus Beans. Logicamente, devem ser utilizadas as configurações do framework para o gerenciamento dos mesmos. No caso do Spring, (ainda) não existe um escopo com a mesma lógica do ViewScope do JSF, mas como todo bom framework, pode-se customizar um tipo de escopo e fazer uso dele normalmente na aplicação. É claro que para isso é necessário implementá-lo.

Na empresa onde trabalho utilizamos Spring e tivemos a necessidade de modificar alguns escopos de Session para View. Encontramos um post(em inglês) que fala sobre isso e exemplifica como implementar e disponibilizar um “ViewScope” para o Spring.

Segue aí os passos para implementar seu ViewScope para o Spring.

1. Implementar a classe responsável pelo gerenciamento dos Beans:

import java.util.Map;

import javax.faces.context.FacesContext;

import org.springframework.beans.factory.ObjectFactory;
import org.springframework.beans.factory.config.Scope;
import org.springframework.web.context.request.FacesRequestAttributes;

public class ViewScope implements Scope {

	public static final String VIEW_SCOPE_CALLBACKS = "viewScope.callbacks";

	public synchronized Object get(String name, ObjectFactory<?> objectFactory) {
		Object instance = getViewMap().get(name);
		if (instance == null) {
			instance = objectFactory.getObject();
			getViewMap().put(name, instance);
		}
		return instance;
	}

	public Object remove(String name) {
		Object instance = getViewMap().remove(name);
		if (instance != null) {
			Map<String, Runnable> callbacks = (Map<String, Runnable>) getViewMap().get(VIEW_SCOPE_CALLBACKS);
			if (callbacks != null) {
				callbacks.remove(name);
			}
		}
		return instance;
	}

	public void registerDestructionCallback(String name, Runnable runnable) {
		Map<String, Runnable> callbacks = (Map<String, Runnable>) getViewMap().get(VIEW_SCOPE_CALLBACKS);
		if (callbacks != null) {
			callbacks.put(name, runnable);
		}
	}

	public Object resolveContextualObject(String name) {
		FacesContext facesContext = FacesContext.getCurrentInstance();
		FacesRequestAttributes facesRequestAttributes = new FacesRequestAttributes(facesContext);
		return facesRequestAttributes.resolveReference(name);
	}

	public String getConversationId() {
		FacesContext facesContext = FacesContext.getCurrentInstance();
		FacesRequestAttributes facesRequestAttributes = new FacesRequestAttributes(facesContext);
		return facesRequestAttributes.getSessionId() + "-" + facesContext.getViewRoot().getViewId();
	}

	private Map<String, Object> getViewMap() {
		return FacesContext.getCurrentInstance().getViewRoot().getViewMap();
	}
}

2. Para poder “destruir” o Bean é necessário colocá-lo em algum local em que seja possível recuperá-lo posteriormente. A classe acima implementa o método registerDestructionCallback, responsável por registrar uma chamada de destruição ao Bean. Essa chamada será armazenada no viewMap da ViewRoot(nossa página que será mostrada), dentro de um Map para que possamos acessá-lo através de uma chave que será o nome do Bean. Graças ao mecanismo de Listeners, conseguimos inserir um novo objeto(no nosso caso um novo Map) dentro do viewMap da página.

Com a implementação da classe abaixo estaremos tratando de dois eventos simultaneamente: assim que o viewMap é construído(na inicialização da página ou PostConstructViewMapEvent) inserimos nosso “repositório” de Beans com ViewScope e seus respectivos destrutores, que será utilizado pelo método registerDestructionCallback, e pouco antes dele ser destruído(PreDestroyViewMapEvent) resgatamos os Beans com ViewScope inseridos no nosso “repositório” criado anteriormente e chamamos seus destrutores.

import java.util.HashMap;
import java.util.Map;

import javax.faces.component.UIViewRoot;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.PostConstructViewMapEvent;
import javax.faces.event.PreDestroyViewMapEvent;
import javax.faces.event.SystemEvent;
import javax.faces.event.ViewMapListener;

public class ViewScopeCallbackRegistrer implements ViewMapListener {

	public void processEvent(SystemEvent event) throws AbortProcessingException {
		if (event instanceof PostConstructViewMapEvent) {
			PostConstructViewMapEvent viewMapEvent = (PostConstructViewMapEvent) event;
			UIViewRoot viewRoot = (UIViewRoot) viewMapEvent.getComponent();
			viewRoot.getViewMap().put(ViewScope.VIEW_SCOPE_CALLBACKS, new HashMap<String, Runnable>());
		} else if (event instanceof PreDestroyViewMapEvent) {
			PreDestroyViewMapEvent viewMapEvent = (PreDestroyViewMapEvent) event;
			UIViewRoot viewRoot = (UIViewRoot) viewMapEvent.getComponent();
			Map<String, Runnable> callbacks = (Map<String, Runnable>) viewRoot.getViewMap().get(ViewScope.VIEW_SCOPE_CALLBACKS);
			if (callbacks != null) {
				for (Runnable c : callbacks.values()) {
					c.run();
				}
				callbacks.clear();
			}
		}
	}

	public boolean isListenerForSource(Object source) {
		return source instanceof UIViewRoot;
	}
}

3. Disponibilizar a nossa classe ViewScope para o Spring, inserindo o código abaixo no seu applicationContext.xml:

<bean class="org.springframework.beans.factory.config.CustomScopeConfigurer">
    <property name="scopes">
        <map>
            <entry key="view">
                <bean class="seupackage.ViewScope"/>
            </entry>
        </map>
    </property>
</bean>

4. Registrar nossa classe ViewScopeCallbackRegistrer nos listeners do Faces, inserindo o código abaixo no faces-config.xml:

<system-event-listener>
    <system-event-listener-class>seuPackage.ViewScopeCallbackRegistrer</system-event-listener-class>
    <system-event-class>javax.faces.event.PostConstructViewMapEvent</system-event-class>
    <source-class>javax.faces.component.UIViewRoot</source-class>
</system-event-listener>

<system-event-listener>
    <system-event-listener-class>seuPackage.ViewScopeCallbackRegistrer</system-event-listener-class>
    <system-event-class>javax.faces.event.PreDestroyViewMapEvent</system-event-class>
    <source-class>javax.faces.component.UIViewRoot</source-class>
</system-event-listener>

Basta agora utilizar a anotação @Scope(“view”) sobre seus Managed Beans e eles passarão a ter o comportamento do @ViewScope, mas agora gerenciados pelo Spring.

Bons códigos!!!

Fonte: http://www.harezmi.com.tr/spring-view-scope-for-jsf-2-users/

Aptana, o substituto do Dreamweaver para Linux

Quem utiliza Linux para trabalhar com Web Design sabe que um grande problema é encontrar um IDE que tenha suporte as várias linguagens de desenvolvimento de páginas web. Essa dificuldade é ainda maior quando se conhece o Dreamweaver, que é um excelente ambiente de desenvolvimento web. No entanto, o Aptana é um IDE que tentará diminuir essa grave lacuna no Linux.
O Aptana é um IDE multi-plataforma open-source baseada no Eclipse e que suporta uma grande quantidade de linguagens de programação web. É compatível com as seguintes linguagens: CSS, HTML, JavaScript, PHP, Ruby on Rails, Adobe Air e muito mais, bastando, para isso, instalar o plugin apropriado.

Instalação

Comece fazendo o download no site abaixo:

http://www.aptana.com/studio/download

Depois do download descompacte o arquivo, será necessário dar permissão de execução ao programa, para isso clique com o botão direito do mouse sobre o arquivo “AptanaStudio” no menu suspenso escolha “propriedades”, agora na página que abrir navegue até a aba permissões e selecione o campo “permitir execução do arquivo como um programa”, ai é só executar o programa, basta dar duplo clique no ficheiro “AptanaStudio”.

Crie um atalho para o Aptana

Para não precisar ir toda vez até a pasta do programa para executar o Aptana vamos criar um atalho no Menu do Painel do Gnome, acesse o menu Sistema->Preferências->Menu Principal. Na janela que abrir, selecione a secção onde quer adicionar o programa (aconselho a secção Desenvolvimento) e clique no botão “Novo Item”. Na nova janela deverá preencher da seguinte forma:

  • Nome: “Aptana Studio”
  • Comando: Clique no botão “Navegar” e navegue até ao ficheiro “AptanaStudio” referido acima.
  • Comentário: “IDE para WebDesign”