Dez 13

Multiple Views com Spring Web MVC

Escrito por DClick Team em .NET, 1, 2.0, 3.5, 4, 6, action, apache, app, Apresentação, AR, Arquitetura, arte, auto, BI, C#, case, class, classe, cliente, código, control, conversor, dados, Design, development, dispatch, Diversos, Documentação, err, exemplo, Ferramenta, Flex, for, framework, Frameworks, Google, handle, html, ide, IE, if, int, interface, internet, j2ee, Java, JSF, library, map, mvc, NaN, O, on, Outros, padrão, Projetos, pt, rest, RIA, Ria’s Geral, S+S, Sem categoria, servidor, site, Software, Spring, SpringFramework, state, string, strings, Sun, tag, TAT, Tecnologia, Tema, tv, Twitter, UI, uint, web, XML, XP @ 12 13th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários

Twitter!

Uma das vantagens de utilizar a arquitetura do Spring para implementar projetos Web, é fazer uso do Sprin-WEB-MVC. Quem já usou sabe que isso é uma vantagem a se considerar quando for feita a escolha das tecnologias e frameworks que serão utilizados no projeto.
Spring WEB-MVC é uma abstração poderosa para a camada de apresentação, tornando muito flexível o uso de diferentes tipos de tecnologias no frnt-end da aplicação.
Veremos uma dessas abstrações que ajudam a modularizar e simplificar nosso trabalho do lado do servidor: Views.

Conceito de Views

Toda requisição que segue para o WEB-MVC passa pelo DispatcherServlet do spring. A partir daí, o container se responsabiliza por delegar a chamada para o controller correto, baseando-se nas configurações de sua aplicação.
Depois que a chamada é tratada pelo controller, o spring manda a resposta correspondente atrelada a uma View. Uma View é um descritor da forma com que os dados vão ser apresentados na interface, podendo ser JSP, JSF, JSon, XML, etc., ou até mesmo uma forma de encapsular os dados específica da sua aplicação.
O poder das Views está justamente no fato de ser apenas uma descrição de como os dados serão apresentados, portanto desconecta-se completamente da aplicação, e pode ser aproveitada em outras ocasiões por outros sistemas.
Uma View no Spring nada mais é do que uma interface Java que descreve o tipo do conteúdo, e é responsável por renderizar a requisição:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

/*
* Copyright 2002-2008 the original author or authors.
*
* Licensed under the Apache License, Version 2.0 (the “License”);
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an “AS IS” BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package org.springframework.web.servlet;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* MVC View for a web interaction. Implementations are responsible for rendering
* content, and exposing the model. A single view exposes multiple model attributes.
*
*

This class and the MVC approach associated with it is discussed in Chapter 12 of
* Expert One-On-One J2EE Design and Development
* by Rod Johnson (Wrox, 2002).
*
*

View implementations may differ widely. An obvious implementation would be
* JSP-based. Other implementations might be XSLT-based, or use an HTML generation library.
* This interface is designed to avoid restricting the range of possible implementations.
*
*

Views should be beans. They are likely to be instantiated as beans by a ViewResolver.
* As this interface is stateless, view implementations should be thread-safe.
*
* @author Rod Johnson
* @author Arjen Poutsma
* @see org.springframework.web.servlet.view.AbstractView
* @see org.springframework.web.servlet.view.InternalResourceView
*/
public interface View

/**
* Name of the @link HttpServletRequest attribute that contains the response status code.
*

Note: This attribute is not required to be supported by all
* View implementations.
*/
String RESPONSE_STATUS_ATTRIBUTE = View.class.getName() + “.responseStatus”;

/**
* Return the content type of the view, if predetermined.
*

Can be used to check the content type upfront,
* before the actual rendering process.
* @return the content type String (optionally including a character set),
* or

null

if not predetermined.
*/
String getContentType();

/**
* Render the view given the specified model.
*

The first step will be preparing the request: In the JSP case,
* this would mean setting model objects as request attributes.
* The second step will be the actual rendering of the view,
* for example including the JSP via a RequestDispatcher.
* @param model Map with name Strings as keys and corresponding model
* objects as values (Map can also be

null

in case of empty model)
* @param request current HTTP request
* @param response HTTP response we are building
* @throws Exception if rendering failed
*/
void render(Map model, HttpServletRequest request, HttpServletResponse response) throws Exception;

}

Todo o código e JavaDoc está no projeto do Spring.

JSon e XML

Vamos criar um exemplo de controller com duas views diferentes: JSon e XML. JSon e Xml são os formatos mais comuns na Web, por isso vamos ver uma das maneiras de devolvê-las em nossos contrllers.
Não vou entrar no detalhe de como configurar os controllers da sua aplicação para funcionar com o Spring-WEB-MVC, pois não é o intuito deste post, e existe bastante documentação disponível na internet sobre o assunto.

A maneira que escolhi para o exemplo, foi deixar a resposta padrão da servlet como XML, e criar uma alternativa de view em JSon. Você pode configurar como quiser a ordem e o padrão de view da sua aplicação, essa escolha serve apenas para ilustar como lidar com os dois casos.
Comece criando alguma classe de domínio para servir de resposta do nosso controller:

1
2
3
4
5
6
7
8
9
10

public class Exemplo
private String nome;

public String getNome()
return nome;

public void setNome(String nome)
this.nome = nome;

}

Agora vamos criar um Controller para devolver nosso objeto de domínio:

1
2
3
4
5
6
7
8
9
10
11
12

@Controller
public class ExemploController

@RequestMapping(“/exemplo/xml”)
@ResponseBody
public Exemplo testando()
Exemplo ret = new Exemplo();
ret.setNome(“xml”);
return ret;

}

Agora temos uma servlet que responderá por “//exemplo/xml” devolvendo a instância de exemplo que acabamos de criar no método.
Vamos configurar agora nosso ‘empacotador’ de XML para torná-lo formato padrão da aplicação. No arquivo de beans do Spring crie os seguintes beans:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

class=“org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter”>
name=“messageConverters”>
>
bean=“marshallingHttpMessageConverter” />
>
>
>

class=“org.springframework.oxm.xstream.XStreamMarshaller”
id=“xmlMarshaller”>
name=“aliases”>
>
key=“exemplo”>Exemplo
>
>
>
>

id=“marshallingHttpMessageConverter”
class=“org.springframework.http.converter.xml.MarshallingHttpMessageConverter”>
name=“marshaller” ref=“xmlMarshaller” />
name=“unmarshaller” ref=“xmlMarshaller” />
>

O que fizemos foi criar um “marshaller” de XML que usa o XStream para converter ‘de’ e ‘para’ XML. Também mapeamos nossa classe de domínio para o alias “exemplo”. Feito isso basta criar um bean que representa os conversores de mensagens do Spring, nesse caso ‘messageConverters’, e associar o conversor de XML nele.
Pronto! Agora que temos as configurações necessárias para criar XML, e anotamos nosso método do controller com ‘@ResponseBody’, o padrão do Spring será devolver o XML que representa a entidade de domínio criada:

1
2
3

>
>xml>
>

Para criar a view de JSon agora, vamos fazer de maneira diferente. Comece criando um bean em seu arquivo do Spring que representa a View de JSon:

1
2
3

id=“jsonview”
class=“org.springframework.web.servlet.view.json.MappingJacksonJsonView”>
>

Note que precisamos da dependência do ‘Jackson’ no classpath do nosso projeto, que está disponível no site do projeto ou até mesmo no repositório do maven.
Agora em nosso controler, vamos adicionar a dependência da view que acabamos de criar, e adicionar o método que tratará a requisição em JSon:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

private View jsonview;

@Autowired
@Qualifier(“jsonview”)
public void setJsonview(View jsonview)
this.jsonview = jsonview;

@RequestMapping(“/exemplo/json”)
public ModelAndView testandoJson()
Exemplo ret = new Exemplo();
ret.setNome(“json”);
return new ModelAndView(this.jsonview, “response”, ret);

Repare que não precisamos da anotação ‘@ResponseBody’, e que ao invés de devolver um ‘Exemplo’ estamos devolvendo o ModelAndView do SpringWEBMVC.
Para que a resposta chegue no formato correto, basta mandar a view de JSon que criamos junto com o ModelAndView, e o objeto de domínio. Dessa forma temos a resposta que esperamos:

1
2
3
4

“response”:
“nome”:”json”

}

Conclusão

Para a moda REST que está tomando força nos últimos tempos, as múltiplas views do Spring é uma ótima ferramenta para fazer parte dessa onda, e ainda prover diferentes maneiras de seu servidor se comunicar com diversos tipos de dispositivos e aplicações clientes, sem comprometer código com regras de negócio.

Espero ter sido útil, e qualquer dúvida, crítica ou comentário são sempre bem vindos.

Por @Gust4v0_H4xx0r

Dez 5

Play Framework – alta produtividade em Java

Escrito por Erko Bridee em .NET, 1, 2.0, 4, 6, action, Adobe, Adobe Flex, apache, api, AR, Arquitetura, BI, blog, browser, C#, case, class, cliente, Componente, Componentes, control, Controles, CRUD, css, Curso, Cursos, dados, Desenvolvedor, desenvolvedores, Desenvolvimento, Desktop, Dica, Download, Eclipse, email, engine, err, erro, exemplo, Exemplos, Flex, Flexmania, for, framework, Frameworks, gae, Geral, git, Google, Hibernate, html, ide, IE, if, image, imagens, int, internet, Java, JPA, Links, mg, mvc, novidade, Novidades, O, on, Outros, produtividade, rails, rest, RIA, Ria’s Geral, ruby, ruby on rails, S+S, server, servidor, site, state, tag, TAT, Tema, template, Teste, Tree, Tutorial, UI, UX, Ved, web, Web Service, XML, XP @ 12 5th, 2011 | via http://blog.erkobridee.com | Sem comentários

O Play ? um framework open source para aplica??es web, escrito em Java, que possibilita o desenvolvimento de aplica??es web que seguem o padr?o MVC. Tem por objetivo otimizar a produtividade do desenvolvedor atrav?s do uso de configura??o sobre conven??o (CoC). Com recompila??o feita durante a execu??o da aplica??o, e caso ocorra algum erro, o respectivo ? exibido no browser, indicando a linha do erro.

Aten??o: o objetivo desse post ? realizar uma vis?o geral do que se trat? o Play Framework que temos ouvidos os coment?rios na internet.

O Play Framework torna o desenvolvimento de aplica??es Java e Scala uma tarefa f?cil para o desenvolvedor.

Site: Play Framework

Descubra uma alternativa limpa e leve para as atuais aplica??es Java Enterprise. O Play ? focado na produtividade do desenvolvedor e tem por alvo a arquitetura RESTFul.

Apesar do Play ter sido escrito em Java, ele suporta a linguagem Scala desde a vers?o 1.1 (hoje[Dezembro/2011] est? na vers?o 1.2.4). Este ano a empresa Typesafe (respons?vel pela linguagem Scala), anunciou a aquisi??o do Play Framework e este ser? mantido pela empresa. Uma das novidades relacionado a este anuncio ? que a vers?o 2.0 o n?cleo do Play Framework est? sendo totalmente reescrito em Scala.

Um v?deo para uma breve apresenta??o do Play Framework: Desenvolcendo uma aplica??o web em 10 minutos

Motiva??o

O Play foi muito inspirado no Ruby on Rails e Django. Um desenvolvedor familiarizado com qualquer um desses 2, ir? se sentir em casa.

Algo que ? fato, Ruby on Rails e Django s?o produtivos, ent?o por que n?o ter o mesmo n?vel de produtividade com java?

O Play utiliza do poder das aplica??es Java, por?m sem o “sofrimento” necess?rio para o desenvolvimento de aplica??es centradas no modelo Java Enterprise. Libertando das metodologias e ideologias relacionadas ao desenvolvimento de aplica??es Java EE, o Play prove para os desenvolvedores uma maneira f?cil e elegante de trabalhar, visando o aumento da produtividade.

Caso voc? queria, basta um editor de c?digo e ser? mais que o suficiente para o desenvolvimento de aplica??es, chega a ser incr?vel pensar que conseguiremos desenvolver aplica??es Java Web sem a necessidade de um IDE (Eclipse, Netbeans, …), mas vale lembrar, que estas IDE's ainda possuem seus atrat?vos e auxiliam em nossa produtividade.

Apesar de que as aplica??es desenvolvidas com o Play, foram projetadas para executar dentro do JBoss Netty Web Server, as aplica??es podem ser empacotadas em arquivos WAR e distribu?das para outros servidores de aplica??es Java EE (ex.: Apache Tomcat).

Maiores diferen?as com os demais frameworks

Stateless: o Play ? totalmente RESTful – n?o existe conex?o por sess?o Java EE. Isto torna o Play muito mais escal?vel que os demais frameworks.

Sem configura??o: realizar o download, descompactar e desenvolver.

F?cil ida e volta: sem necessidade de deploy no servidor de aplica??o, apenas edite o c?digo e atualize o browser.

Teste unit?rio integrado: suportes nativos para JUnit e Selenium.

API elegante: raramente um desenvolvedor ter? a necessidade de importar alguma lib. O Play j? disponibiliza a maioria dos recursos necess?rios para o desenvolvimento de uma aplica??o.

M?todos est?ticos: todos os controles de entrada e m?todos de neg?cio s?o declarados como est?ticos. E isto ? de fato bem diferente o que vemos nos demais frameworks Java.

I/O Ass?ncrona: atrav?s do uso do servidor web JBoss Netty, o Play consegue disponibilizar e tratar uma enorme quantidade de requisi??es ass?ncronas.

Arquitetura Modular: assim como Rail e Django, o Play utiliza o conceito de m?dulos. O que possibilida um meio elegante e simples de expandir o core do Play.

M?dulo CRUD: f?cil constru??o de UI administrativas com pouco c?digo.

M?dulo Scala: disponibiliza um suporte completo para Scala.

Componentes

O Play utiliza massivamente algumas bibliotecas populares:

JBoss Netty para o servidor web.
Hibernate para a camada de dados.
Groovy para a os templates.
O compilador do Eclipse para atualiza??o da aplica??o sem necessidade de realizar um deploy da aplica??o para testar as altera??es (hot-reloading).
Apache Ivy para gerencimanto de dependencias.

Funcionalidades presentes no n?cleo do Play:

Um framework RESTful limpo e leve.
CRUD: um m?dulo para simplicifar a edi??o de modelos de objetos.
Secure: um m?dulo para habilitar um sistema de autentifica??o de usu?rios.
Um framework de valida??o baseado em anota??es.
Um Job Scheduler (agendamento de tarefas).
Suporte para emails SMTP de maneira simples.
Suporte para JSON e XML.
Uma camada de persist?ncia baseada em JPA.
Uma base de dados embutida para r?pido deploy e testes da aplica??o.
Um framework completo para realiza??o de testes.
Funcionalidade para upload de arquivos.
Suporte para m?ltiplos ambientes de desenvolvimento.
Uma poderosa engine de templates baseadas em Groovy com templates, hierarquias e tags.
Arquitetura modular, que possibilita criar novas funcionalidades para o n?cleo facilmente.
Suporte para OpenID e clientes de Web Service.

Links ?teis

Informa??es a mais da Wikipedia

Overview do Play Framework 1.2.4

Documenta??o Play Framework 1.2.4

A documenta??o foi algo que achei interessante, me parece bem completa com bastante exemplos e informa??es de como utilizar as funcionalidades presentes no Play Framework.

Suporte para a linguagem Scala

Utilize a IDE de sua prefer?ncia (Eclipse, Netbeans, …)

Se por um acaso voc? utilize o Sublime Text 2, veja esse suporte para este editor de c?digo [github]

Reposit?rio de M?dulos

Dentre eles temos: MongoDB, GAE, Gera??o de PDF, GWT, SASS e SCSS, entre outros.

E agora?

Bom agora que j? temos uma boa id?ia do que se trata o Play Framework ? baixar e come?ar a testar e ver se na pr?tica ele ? bom mesmo.

Hora de fazer o download, instalar e colocar a m?o no c?digo: Tutorial para seguir e ver uma aplica??o do in?cio at? o “fim”

Eu particularmente ainda possuo algumas quest?es em aberto para descobrir as respostas, dentre elas est? uma: - Como ? que eu utilizo o Play Framework em um projeto com uma equipe? At? o momento s? tenho visto casos onde s?o apresentados desenvolvimetno de aplica??es r?pidas, por?m com um ?nico desenvolvedor…

No meu caso eu vou atr?s dessa reposta.

Veja também:

Nov 25

Voltando ao mundo HTML+JS e agora?

Escrito por Erko Bridee em 1, 2.0, 2009, 3d, 4, 6, action, Adobe, Adobe Flex, Air, api, aplicacao, app, AR, Arquitetura, auto, back, BI, blog, browser, C#, chrome, css, css3, Curso, Cursos, dados, demo, Desenvolvimento, Design, Dica, err, Excel, firefox, flash, Flex, fonte, fonts, for, git, Google, html, html5, ide, IE, if, int, Java, Javascript, JQuery, layout, Linux, Livro, Mate, Mercado, mg, mvc, NaN, novidade, Novidades, O, on, Pessoal, Projetos, pt, RIA, Ria’s Geral, S+S, tag, TAT, Tema, Twitter, UI, UX, vs, web, web design, XP @ 11 25th, 2011 | via http://blog.erkobridee.com | Sem comentários

N?o adianta chorar o leite derramado, depois que a Adobe lan?ou as ?ltimas not?cias vemos que o mercado indo de vez para o HTML5 e n?o adianta reclamar, daqui para frente mais projetos ir?o demandar conhecimentos em HTML5 (novas tags), Javascript e sobre as novidades do CSS3.

Voltando ao mundo HTML teremos que voltar inevit?velmente ao uso do Javascript, mas ao menos a boa not?cia hoje ? que diferente de anos atr?s temos dispon?veis boas bibliotecas javascript para nos ajudar na dif?cil tarefa de fazer uma aplica??o (que tente) funcionar em todos os principais web browsers do mercado (Google Chrome, Mozilla Firefox e o tem?vel IE)

Quanto ao Javascript, hoje pelo que tenho visto ? quase imposs?vel se falar em javascript sem associar ao JQuery, que ajuda muito a criar um c?digo mais limpo e organizado e at? podemos dizer, sofrer menos com o uso do javascript.

Sobre Javascript e JQuery recomendo os respectivos materiais para observar:

The JQuery Essentials

Aos que ficaram interessados pelo JQuery o @bielversallini mandou uma dica muito boa de curso web de JQuery, o jQuery Air, tamb?m jQuery Fundamentals e Livro fundamentos de jQuery 100% traduzido para pt-BR

jQuery Proven Performance Tips & Tricks, 2011

Confesso que desanimei ao ver esta apresenta??o, pois basicamente todos os recursos que gostei no JQuery s?o os mais lentos e recomendados para que n?o sejam usados a menos que n?o haja outra alternativa ou extremamente necess?rios.

jQuery & Responsive Web Design

Excelente dica de como projetar uma p?gina/sistema que se adeque as dimens?es dispon?veis (por alguns este recurso ? chamado de layout fuido/adaptativo). Como estou falando sobre layout recomendo olhar tambem o Knockout.js que possui recursos interessantes para auxiliar na defini??o da view.

Agora para falar a verdade mesmo o melhor material sobre desenvolvimento HTML+JS que vi que o autor foi real e sincero sobre o tema ? o respectivo abaixo:

Taking JavaScript Seriously (feat. Backbone.js)

Como ? dito nos slides, o javascript n?o ? a melhor linguagem do mercado, ela foi escrita em 10 dias, possui muitas defici?ncias, mas temos que aprender pois n?o temos nenhuma outra op??o.

Outro detalhe que me chamou aten??o e achei muito ?til foi a apresenta??o do Backbone.js como uma alternativa para suprir a necessidade de organizar o c?digo em algo que tenta ser o mais pr?ximo poss?vel do MVC.

Mas e sobre arquitetura aplica??es de larga escala? Bom recomendo observar este material abaixo, o qual indica as boas prat?cas de mercado e atuais recursos dispon?veis:

Large-scale JavaScript Application Architecture

Cheguei at? esta apresenta??o atrav?s deste post.

Aten??o este texto a seguir expressa minha oponi?o pessoal

Sinceramente esta apresenta??o foi o santo gral da agonia, pois para mim se trata de uma regress?o tecnol?gica brutal, irei mudar esta minha opini?o no dia em que, eu consiga ter uma arquitetura com um mesmo n?vel que possuo hoje com Adobe Flex + Swiz, como a descrevi neste post, quando este dia chegar (se ? que vai) irei dizer que podemos ent?o come?ar a pensar em utilizar o HTML+JS para solu??es corporativas.

E vamos a luta, retornando ao velho mundo do HTML, por alguns chamados de revolucion?rio mundo do HTML5…

Veja também:

Nov 16

Spring 3.1 RC1 – @Configuration

Escrito por DClick Team em 1, 2.0, 4, 6, action, app, AR, auto, bar, BI, blog, busca, C#, case, class, classe, classes, código, components, configuração, err, erro, error, exemplo, for, framework, Google, IE, if, int, Java, lite, map, mudanças, mvc, NaN, O, on, Plugin, refresh, rest, RIA, Ria’s Geral, RoR, S+S, Sem categoria, Spring, SpringFramework, string, Sun, super(), tag, TAT, Teste, Twitter, UI, uint, web, XML @ 11 16th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários

Twitter!

Spring @Configuration

O que há de novo

Para habilitar certas funcionalidades do Spring que envolvem AOP, era preciso escrever tags XML como por exemplo context:component-scan para especificar os pacotes em que o Spring pode buscar por beans anotados com @Component, @Repository ou @Service.
Na versão 3.1 foram disponibilizadas as mesmas funcionalidades via anotação. São elas:

1
2
3
4
5
6
7
8

org.springframework.context.annotation.Configuration
org.springframework.context.annotation.ComponentScan
org.springframework.context.annotation.EnableLoadTimeWeaving
org.springframework.context.annotation.EnableAspectJAutoProxy
org.springframework.scheduling.annotation.EnableScheduling
org.springframework.scheduling.annotation.EnableAsync
org.springframework.transaction.annotation.EnableTransactionManagement
org.springframework.web.servlet.config.annotation.EnableWebMvc

Vamos abordar o caso básico, pois o resto é bem similar.

@ComponentScan

Caso você ainda não esteja familiarizado com as configurações por anotaçãoo, vamos ao básico.
Comece criando uma classe que representará seu container de beans, e a anote com @configuration:

1
2
3
4

@Configuration
public class TestConfiguration

Nesta classe estarão os beans que o container irá instanciar e deixar a nossa disposição.
Para iniciar o container vamos criar um test (JUnit 4) que instancia o contexto:

1
2
3
4
5
6
7
8
9
10
11

public class ConfigurationTestCase

@Test
public void testConfigurationBeans()

AnnotationConfigApplicationContext ctx = new AnnotationConfigApplicationContext();
ctx.register(TestConfiguration.class);
ctx.refresh();

}

Aqui criamos um container do tipo AnnotationConfigApplicationContext e registramos nossa classe de configuração nele. Repare que é possível registrar mais classes, e portanto disponibilizar mais beans no container.
Agora vamos criar nosso bean de teste:

1
2
3
4
5
6
7
8
9
10
11
12
13

public class GenericBean

private String testProperty;

public GenericBean(String testProperty)
super();
this.testProperty = testProperty;

public String getTestProperty()
return testProperty;

}

Vamos criar os métodos em nossa classe de configuração que instanciam nosso bean de duas maneiras diferentes:

1
2
3
4
5
6
7
8
9

@Bean(name = “testBean”)
public GenericBean genericTestBean()
return new GenericBean(“test”);

@Bean(name = “otherBean”)
public GenericBean genericOtherBean()
return new GenericBean(“other”);

Repare que a única diferença entre os dois é a String que passamos como parâmetro.
Agora que temos 2 beans diferentes em nosso container, vamos criar os testes para verificar o comportamento do Spring. Abaixo da inicialização do contexto, vamos adicionar as seguintes linhas:

1
2
3
4
5
6
7
8
9

GenericBean testBean = ctx.getBean(“testBean”, GenericBean.class);

Assert.assertNotNull(testBean);
Assert.assertEquals(“test”, testBean.getTestProperty());

GenericBean otherBean = ctx.getBean(“otherBean”, GenericBean.class);

Assert.assertNotNull(otherBean);
Assert.assertEquals(“other”, otherBean.getTestProperty());

Aqui estamos garantindo que nossos dois beans diferentes estarão no contexto como esperado.
Antes de rodar o teste, será necessário adicionar a dependência do CGLib ao seu projeto. Caso você esteja usando o maven, basta adicionar a seguinte dependência>

GeSHi Error: GeSHi could not find the language text (using path C:Program Fileswampwwwblogwp-contentpluginsig_syntax_hilitegeshi) (code 2)

Pronto, com isso temos o suficiente pra deixar a barra do JUnit verde. Vamos agora adicionar o @ComponentScan.
Em nossa classe de configuração (poderia ser qualquer outra registrada no contexto) adiciona a seguinte anotação:

1
2
3

@Configuration
@ComponentScan(“br.com.dclick.tentativas.configuration.beans”)
public class TestConfiguration

No meu caso meu bean está dentro do pacote br.com.dclick.tentativas.configuration.beans e portanto basta eu alterá-lo adicionando o seguinte código:

1
2
3
4
5
6
7
8

@Component(“componentBean”)
public class GenericBean

private String testProperty;

public GenericBean()
this.testProperty = “component”;

Dessa forma posso criar mais um teste e verificar que o bean está vindo corretamente:

1
2
3
4

GenericBean componentBean = ctx.getBean(“componentBean”, GenericBean.class);

Assert.assertNotNull(componentBean);
Assert.assertEquals(“component”, componentBean.getTestProperty());

Rode o teste e deixa o JUnit feliz.
A única coisa a se ter cuidado aqui, é que com @ComponentScan, você não pode mapear o diretório da própria classe de configuração.

Demais Configurações

Daqui em diante basta anotar suas classes de configuração com as configurações que você deseja ativar, como por exemplo @EnableAsync que permite que os beans rodem de maneira assíncrona com a anotação @Async.

Brinque um pouco com as outras anotações. Acredito que vale o esforço, pois esse tipo de configuração permite abandonar um pouco os arquivos XML e tornam mais fácil o refactor dos beans, afinal teremos erros de compilação com as mudanças de código.

Por enquanto é isso, qualquer dúvida mande nos comentários que responderei assim que possível.

Por @Gust4v0_H4xx0r

Out 17

2 vagas para desenvolvedor Flex sênior

Escrito por Fabio da Silva em 1, 2.0, 4, 6, Air, AR, BI, blog, Blogs, C#, Desenvolvedor, desenvolvedores, Desenvolvimento, Flex, framework, Google, IE, int, mg, mvc, O, Office, on, Ria’s Geral, Tech, Tecnologia, UI, Vagas, Ved, web @ 10 17th, 2011 | via http://fabiophx.blogspot.com | Sem comentários

A Integritas Tecnologia oferece 2 vagas para desenvolvedores sênior, em tempo integral para um projeto Flex, modalidade home office.

Requisitos:
1) conhecimento de algum framework MVC, de preferência, Swiz.
2) desenvolvimento de aplicações Web e AIR

Por favor, enviem currículos para rh@integritas.com.br .

Mai 21

Comparando ASP.net WebForms e ASP.net MVC

Escrito por Vinícius Sandim em .NET, 1, 2.0, 3.5, 3d, 3g, 4, 6, action, Ajax, app, AR, Arquitetura, Asp.Net, back, Banco de Dados, BI, browser, C#, C#.net, class, classe, classes, cliente, código, código fonte, comparação, Componente, Componentes, control, CRUD, css, dados, Desktop, developer, Download, Drag And Drop, err, event, Exemplos, explorer, Ferramenta, Flex, fonte, for, framework, function, gae, gc, html, ide, IE, if, int, Java, Javascript, JQuery, Links, lista, map, menu, mg, mtv, mvc, O, on, Partilha, Pessoal, portal, Projetos, pt, RIA, Ria’s Geral, S+S, server, site, SQL Server, state, tag, TAT, template, tv, UI, uint, UX, Visual Studio, vs, web, xhtml, XML, XP @ 05 21st, 2011 | via http://www.viniciussandim.com | 1 comentário

Eu confesso que nunca me interessei em desenvolver sites e muito menos aplicações web utilizando ASP.net, sempre achei que a metodologia “drag and drop” que o Web Forms nos proporciona não funciona legal na web, pois ela gera muito “lixo” para o navegador, e isso é crucial em uma WebAPP.

Portanto, desde que migrei de desktop (Delphi 7) para web, tenho trabalhado com o nosso querido Flex no Front End e o C#.net no Back End. Mas desde que o ASP.net MVC foi lançado, tenho acompanhado de perto a sua evolução, e confesso que ele tem me agradado bastante.

Para não perder o costume, venho hoje compartilhar com vocês um pouco do que tenho estudado, este post faz uma comparação de um projeto idêntico criado usando as duas metodologias.

Então chega de conversa e vamos ao que interessa:

As ferramentas que utilizei para criar os projetos foram:
• SQL Server 2008 Express
• Visual Web Developer Express 2010
• Framework ASP.net MVC 2.0

O projeto acessa uma base de dados com apenas uma tabela, com a seguinte estrutura:

Tabela

Não utilizei nenhum framework ORM, fiz o mapeamento das entidades manualmente, usando as classes nativas do Framework. (SqlConnection, SqlCommand e SqlDataReader).

Quando criei os projetos, utilizei os templates do prório Visual Web Developer:

CriandoProjeto

Para o projeto Web Forms, usei ASP.NET Web Application.
Para o projeto MVC usei: ASP.NET MVC 2 Web Application.

É claro que não vou fazer um passo a passo de como criar o projeto, o foco deste post não é isso, mas depois de pronto, nosso Solution Explorer do projeto WebForms ficará assim:

SolutionForms

Já o projeto MVC, tem uma estrutura um pouco maior, porque ele trabalha completamente “tipado”, temos as classes Model, Controller e View, como manda o figurino:

SolutionMVC

Certo, agora vamos ao objetivo, quando executo o projeto WebForms e acesso a página de clientes, o Framework gera este código HTML:

"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"http://www.w3.org/1999/xhtml" xml:lang="en">


"../Styles/Site.css" rel="stylesheet" type="text/css" />
"post" action="default.aspx" id="ctl01">
class="aspNetHidden">
"hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
"hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
"hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ZhpEPEbRGaEf3wxNFvEkKLAz6ze4Y1776/kxLQ+oQoJx5Ew6ZrkBOLulNNEfu2T+c9uFRH7RTl5UUrZ3A1gK1BMKQc174Sha+0Wt5wmfhTKcGIb1YUgfoyjwcO8TYaR3U3o3l/07IemJNiwmeH8cM7BzSKkWiBTRuwjyI6u7VHlH7TyWLCMw0bneQ8edbb2YBMnGslvv7YSjWb5RdYMIjhu77ZE4CwQwK75UxHI1QZUgHjIaNP7MrZpoxi+tQbCBVW9Lc3jZCq0gbouSkWw7epm9WZknpiH5T68BTGirDfP4BfUZygsyB6aHmrpdN47pKJz7kFH78soAuE4Yd1NWNk9mHK+6ErcoVe3EkH8ycfXm51UwzkwNp2XRdr2s2AANsWpDdxNhyDTo2Mia2/YrPGirUzqV62RWlVWpS/KBwBpdtSLlYVnLaU6eJyjrJhqXxKzTa8b3F1av8h40cX5teT+0odXAWB3E2GcrE9XGfwa1ACk5QQlFsh+UplF/dEuzes6UBjJd9LQS7kPVabfzs/y8L3BRsK0Rtb0i1unXfHMuq3eVg/XQGnwb9uEhL5EdHjniskkoUzQh1T2yJfPwajrjxU06M5Ba43Soj8pk03isqi4tBqBllPVkv13Hyz8eapd85VejaO+3CUqXVr3J9/3MvZWjNcA2QOef7H4xKmtVExbxingFQqj5K5appmJReVczk8/HLCOnLD+Wa5/7CKWTj/OucQgIgPYnGEpzMZUlKJZFLAeFfwwkR2XVZcyyCoYWjK2pJX5zuCXMVkMxKCCuWjVvtl3GPfUkz1nsgP/Jtyq7vSdiXdGE/qxV8yRGJN5h4MlvVOfYq2gKspcNIZzwCzVCidhdoY8SYjnz+qyIXmXxXD3VkF2XGbcId86i/qOkwOyk9UcAS8iR+Es/MkQg7WximaQQji+o67grOaE=" />






class="aspNetHidden">
"hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
"hidden" name="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="J0z-AYjFMhWT0kpqMD21gr0HoEKRmyw5_w3a37YYi27BAPn9DepNebG_20nPZ-VajOl1_KCPnab6uApAzjeQe7rOkN95u7baMYMKLA59Jpw1" />
"hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="IRcnHy6RQ1JCPCa5l/6k5JvtDNRbcbaJH7wDUCh/MVtgwLHo5W/iwGkTGRYeZHjYgqrWjjGjzZQvt+FJuMho2GE+Qf3syKzyeGXquF9a/Ws577KUO6oFdTWrhmsBXMMh" />

class="page">
class="header">
class="title">
                    My ASP.NET Application                

class="loginDisplay">

                        [ "../Account/Login.aspx" id="HeadLoginView_HeadLoginStatus">Log In ]
class="clear hideSkiplink">                "#NavigationMenu_SkipLink">"Skip Navigation Links" src="/WebResource.axd?d=xFBnuqKYnqgWTzzLZBOde45ezhDnXgdvOgtOQCvZwJw6xfKBic_vxFOBRotUqhEobwKQWWgbNXfNYvZsldu9uZj6j6aYf49eocT9vsEpgtM1&t=634356288728593750" width="0" height="0" style="border-width:0px;" />
class="menu" id="NavigationMenu">
class="level1">
class="level1" href="../Default.aspx">Home
class="level1" href="../About.aspx">About



"NavigationMenu_SkipLink">            

class="main">

        Listagem Completa de Clientes    

    

    

"0" rules="all" border="1" id="MainContent_GridView1" style="border-collapse:collapse;">

"col">Id_Cliente
"col">Nome
"col">CPF
"col">RG
"col">Idade
"col"> 
"col"> 


17
Jo?o
123.123.123-12
12.312.123-1
30
"Edita.aspx?Id_Cliente=17">Editar


                    "return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_0" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl02$LinkButton1','')">Excluir                


19
Jos?
444.444.444-44
44.444.444-4
21
"Edita.aspx?Id_Cliente=19">Editar
                    "return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_1" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl03$LinkButton1','')">Excluir



18
Maria
999.999.999-99
99.999.999-9
35
"Edita.aspx?Id_Cliente=18">Editar
                    "return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_2" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl04$LinkButton1','')">Excluir                





"submit" name="ctl00$MainContent$btnInserir" value="Inserir novo cliente" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$btnInserir", "", false, "", "Insere.aspx", false, false))" id="MainContent_btnInserir" />    

class="clear">

class="footer">

"col">Id_Cliente	"col">Nome	"col">CPF	"col">RG	"col">Idade	"col">	"col">
17	Jo?o	123.123.123-12	12.312.123-1	30	"Edita.aspx?Id_Cliente=17">Editar	"return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_0" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl02$LinkButton1','')">Excluir
19	Jos?	444.444.444-44	44.444.444-4	21	"Edita.aspx?Id_Cliente=19">Editar	"return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_1" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl03$LinkButton1','')">Excluir
18	Maria	999.999.999-99	99.999.999-9	35	"Edita.aspx?Id_Cliente=18">Editar	"return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_2" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl04$LinkButton1','')">Excluir

Dêem uma olhada em quanto código os componentes criam. É muita coisa, imaginem isso em um grande portal? Americanas.com gerando este código? Meio inviável não? Aproveito para destacar o código gerado pelo ViewState, herói e vilão do Web Forms.

Agora vamos comparar a mesma página gerada pelo projeto MVC:

"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"http://www.w3.org/1999/xhtml">

    Index


"Content/Site.css" rel="stylesheet" type="text/css" />


class="page">
"header">
"title">
My MVC Application

"logindisplay">

        [ "/Account/LogOn">Log On ]
"menucontainer">
"menu">
"/">Home
"/Home/About">About


"main">
Listagem completa de clientes:


                Código            
                Nome            
                CPF            


                RG            
                Idade            





                30            
                Jo?o            
                123.123.123-12            
                12.312.123-1            
                30            
                "/Cliente/Edit?Id_Cliente=30">Editar |                "/Cliente/Delete?Id_Cliente=30" onclick="return confirm('Tem certeza?');">Excluir |            


                32            
                Jos?            
                444.444.444-44            
                44.444.444-4            
                21            
                "/Cliente/Edit?Id_Cliente=32">Editar |                "/Cliente/Delete?Id_Cliente=32" onclick="return confirm('Tem certeza?');">Excluir |            


                31            
                Maria            
                999.999.999-99            
                99.999.999-9            
                35            
                "/Cliente/Edit?Id_Cliente=31">Editar |                "/Cliente/Delete?Id_Cliente=31" onclick="return confirm('Tem certeza?');">Excluir |            



        "/Cliente/Create">Novo cliente...    
"footer">

Código	Nome	CPF	RG	Idade
30	Jo?o	123.123.123-12	12.312.123-1	30	"/Cliente/Edit?Id_Cliente=30">Editar \| "/Cliente/Delete?Id_Cliente=30" onclick="return confirm('Tem certeza?');">Excluir \|
32	Jos?	444.444.444-44	44.444.444-4	21	"/Cliente/Edit?Id_Cliente=32">Editar \| "/Cliente/Delete?Id_Cliente=32" onclick="return confirm('Tem certeza?');">Excluir \|
31	Maria	999.999.999-99	99.999.999-9	35	"/Cliente/Edit?Id_Cliente=31">Editar \| "/Cliente/Delete?Id_Cliente=31" onclick="return confirm('Tem certeza?');">Excluir \|

O que acham? As duas páginas fazem exatamente a mesma coisa, no entato o MVC gera beeeem menos código.

Bom pessoal, essa é apenas uma das vantagens do MVC, posso destacar outras:

Controle total do código que será enviado ao navegador;
Arquitetura em camadas, códigos completamente separados;
Classes que auxiliam a geração do HTML para o browser de acordo com as ações do Controlador, sem lixo!;
Facilidade de se implementar Ajax (de verdade) no seu projeto.
Integração com o Jquery usando classes do Framework;

Bom é isso, vou me despedindo, mas antes deixo o código fonte dos dois projetos disponíveis para download.

Mai 20

Desenvolvedores Flex / Java – Home Office

Escrito por Fabio da Silva em 1, 2.0, 3.5, 4, 6, Air, AR, BI, Blazeds, blog, Blogs, C#, Desenvolvedor, desenvolvedores, Flex, Flex 4, framework, Google, Hibernate, IE, int, Java, mg, mvc, O, Office, on, Ria’s Geral, Spring, Tech, Tecnologia, UI, Ved @ 05 20th, 2011 | via http://fabiophx.blogspot.com | Sem comentários

A Integritas Tecnologia – Open Solutions está contratando 3 a 4 desenvolvedores Flex/Java, para trabalho em tempo integral, com horário flexível, para início em meados de Junho, via home office, na modalidade PJ.

Requisitos:
1) conhecimento de um framework Flex MVC, especialmente Cairgorm 3
2) conhecimento do framework BlazeDS, para integração Flex/Java
3) Flex 4
4) Spring + Hibernate

Por favor, enviem currículo para: rh@integritas.com.br

Mai 19

10 coisas que um bom programador flex deve saber

Escrito por Daniel Schmitz em .NET, 1, 2.0, 2009, 3.5, 4, 6, action, Action Script, Actionscript, ActionScript 3, Actionscript 3.0, Actionscript3, Adobe, Air, api, Aplicativos, Apresentação, AR, Arquitetura, arte, Artigo, as3, BI, Bindable, blog, bug, builder 4, C#, Cairngorm, class, classe, classes, código, código fonte, Componente, Componentes, components, control, Controles, css, Curso, Cursos, custom, dados, Data Binding, DataGrid, Debug, demo, desempenho, Desenvolvedor, desenvolvedores, Design, developer, development, dispatch, dispatchEvent, DRE, empresas, err, Estilo, event, EventListener, Evento, Eventos, eventos customizados, events, Excel, explorer, Ferramenta, flash, flash builder, Flash Builder 4, Flash Player, Flex, Flex 3, Flex 4, Flex Examples, fonte, for, framework, Frameworks, Google, Gráfico, handle, html, HTTPService, ide, IE, if, int, interface, Java, layout, lista, live, Livro, lógica, map, Mate, MAX 2009, mvc, MXML, O, on, oop, opensource, Outros, player, polimorfismo, problema, problemas, programação, Projetos, pt, RIA, Ria’s Geral, ruby, S+S, site, skins, Sun, tag, TAT, Tech, Tecnologia, tv, UI, uint, utf8, Ved, Vídeo, vs, web, Webservice, XML, XP @ 05 19th, 2011 | via http://flex.etc.br | Sem comentários

Esta é uma tradução do seguinte artigo: 10 Things A Good Flex Developer Should Know

Para ser um bom programador Flex é preciso mais que simplesmente saber como usar alguns componentes nativos do Flex. É preciso muito mais.

Aqui está minha contribuição sobre o assunto… juntamente com alguns recursos ou algumas palavras-chave que você poderá pesquisar facilmente através do Google.

Por favor, comente no blog se você achar que esqueci algo (o que é inevitável) ou se quiser sugerir alguns recursos interessantes que devo acrescentar.

1- Programação orientada a Objetos (OO)

O Flex se baseia na linguagem ActionScript3, que é totalmente orientada a objetos. Embora não seja um conceito fácil de aprender, programação orientada a objeto é um pré-requisito para aprender Flex. Se já possui experiência com OO (Java, C#, Ruby, etc), então você está pronto. Se não, você precisará pegar um livro sobre OO e começar a aprender o mais rápido possível.

· Head First Java (Java? Sim, Eu sei. Mas confie em mim.)

· Object-oriented programming with ActionScript 3.0

Nota: Alguns de vocês poderão perguntar – “O que são padrões de projetos?”. Vamos dar um passo de cada vez? Preocupe-se em entender classes e objetos, interfaces, herança, composição, polimorfismo, encapsulamento, etc. Só então considere estudar padrões de projetos. De fato, se eu escrever um post intitulado “10 coisas que um GRANDE programador Flex deve saber”, padrões de projeto estará nessa lista.

2- ActionScript/MXML

ActionScript é a linguagem de programação usada juntamente com MXML para criar aplicações Flex. MXML é uma linguagem de marcação baseada em XML. Cada tag MXML é mapeada diretamente para uma classe ActionScript correspondente. MXML é usado pelos desenvolvedores Flex principalmente para apresentar a interface do usuário, enquanto que, o ActionScript é usado para a lógica de negócio. Com exceções, é claro.

O Framework Flex inclui centenas de classes ActionScript e interfaces usadas para desenvolver aplicações Flex. Seu nível de habilidade como um desenvolvedor Flex está diretamente ligado ao seu conhecimento em relação ao ActionScript e MXML.

· Flex in a Week

· Tour De Flex

· Essential ActionScript 3.0

Nota: Fique ? vontade com a API do Flex. Como um desenvolvedor Flex, você vai usá-la diariamente.

3- Debugging

Boa parte do tempo de qualquer programador é gasto no debugging. Obviamente, é necessário debugar para rastrear a causa de bugs. No entanto, também é uma ótima maneira de conhecer o código fonte.

Felizmente, existem muitas ferramentas disponíveis para ajudá-lo com o trabalho de debugging. Invista algum tempo para aprender essas ferramentas. Seu investimento irá proporcionar retorno imediato.

· Flash Builder 4.5 Debugger

· De MonsterDebugger

· Kap Inspect

4- Programação orientada a eventos

Aplicações Flex são orientadas a eventos. Toda ação é o resultado de um evento assíncrono.

Como um desenvolvedor Flex, você deve saber como responder a eventos e como criar e disparar eventos. Para isso, é necessária uma sólida compreensão da arquitetura de eventos do Flex, incluindo familiaridade com os seguintes conceitos:

· Eventos nativos (Flash Player ou Framework de eventos Flex)

· Eventos customizados (Eventos criados pelo desenvolvedor, que estende a classe Event ou uma de suas subclasses)

· Disparar eventos, propagação de eventos (ver classe EventDispatcher e seu método dispatchEvent)

· Event listeners, event handlers (ver classe EventDispatcher e seus métodos addEventListener e removeEventListener)

· Fases do evento (capture, target & bubbling phases; target vs. currentTarget)

· Objetos do evento, tipos de eventos (ver classe Event e subclasses)

· Comportamento do evento default (ver classe Event e subclasses e seu método preventDefault)

5- Data binding

Aparentemente, data binding é um “no brainer”[1]. É só vincular o valor de uma propriedade ao valor de outra propriedade usando chaves. Quando o valor da propriedade de origem for alterado, o valor da propriedade de destino também é alterado.

No entanto, existe uma sobrecarga associada ao uso indiscriminado de data binding, podendo haver implicações no desempenho. Uma sólida compreensão de data binding ajudará a determinar quando é apropriado o seu uso e quando não é.

· Flex Tips – Using Bindable Metadata Events

· Michael Labriola’s presentation entitled Diving in the Data Binding Waters

6- Item renderers

Uma característica de uma aplicação Flex bem projetada é a apresentação dos dados de uma forma visualmente atraente. O Flex oferece uma série de controles baseados em listas (DataGrid, List, TileList, HorizontalList, etc) responsável pela apresentação dos dados. Portanto, pode-se personalizar a exibição dos dados com a ajuda de item renderers.

Você irá consumir muito tempo trabalhando com item renderers. Então é melhor saber bem como ele funciona.

· Flex Examples – Item Renderers in Practice

· A Deep Dive into Flex 4 Lists and Layouts

7- Acesso remoto a dados

Você conhece muitas aplicações que não interagem com os dados? Eu também não. Saiba como recuperar dados através de HTTPServive, WebService e RemoteObject. A arquitetura do framework Flex também poderá ajudá-lo com isso (ver #9).

· Retrieving and handling data with HTTPService

· Retrieving and handling data with WebService

· Retrieving and handling data with RemoteObject

8- Styling / Skinning

Não vamos nos esquecer que o Flex é uma tecnologia de interface e, como tal, certamente há expectativas em relação ao design. Como um desenvolvedor Flex, você deve ser capaz de personalizar a aparência de seus aplicativos usando estilos CSS, gráficos e/ou skins.

Com o Flex 4, não há mais desculpas. Use um pouco do seu tempo para conhecer de uma vez o lado direito do seu cérebro. É uma excelente mudança de paradigma, e vai ajudá-lo a diferenciar-se dos outros desenvolvedores Flex.

· Flex Style Explorer

· ScaleNine

· Introduction to Flex: Part 3 – Styles & Skins

9- Pelo menos um framework de arquitetura Flex

A maioria dos frameworks de arquitetura Flex impõe uma separação de camadas através da implementação do MVC (model-view-controller). Além disso, esses mesmos frameworks especificam como seu código deve ser organizado dentro do projeto Flex.

Embora muitos argumentariam que os frameworks são desnecessários, acredito que os desenvolvedores Flex se beneficiam em muitos aspectos da experiência de usá-los. Basta assistir ? s técnicas (boas ou más) empregadas por um framework para resolver problemas complexos de arquitetura. Isso contribuirá para seu crescimento como um desenvolvedor Flex.

Além disso, é difícil negar o fato de que a experiência com framework aumentará substancialmente o seu valor comercial como um desenvolvedor Flex. Jesse Warden me disse recentemente “Existem poucas empresas que não usam frameworks, mas isso é raro. Queiramos ou não, está na ‘moda’”. Eu concordo com Jesse.

· Cairngorm

· Parsley

· PureMVC

· Mate

· Swiz

· Robotlegs

10- Ciclo de vida de componentes e display list

Eu não estava convencido da necessidade de aprender o ciclo de vida de componentes Flex ou da display list até que escrevi o meu primeiro componente customizado (na verdade foi um componente semi-customizado que se estendia do componente Canvas). Até essa época eu usava componentes nativos do Flex, usando apenas o MXML enquanto que a display list era renderizada para mim. Em nenhuma vez tive que usar os métodos addChild, createChildren ou commitProperties, e usava o evento creatiomComplete para tudo.

Meu primeiro componente customizado usava uma quantidade enorme de eventos assíncronos, e eu não poderia prever a ordem em que cada evento seria disparado. Só depois que eu aprendi os métodos e variáveis do ciclo de vida dos componentes do Flex que eu pude ter um certo controle.

Estes métodos do ciclo de vida estão lá para serem usados. Saiba como funcionam e use-os para o seu benefício. Sua vida será mais fácil e você perderá menos cabelos.

· Colin Moock’s Lost ActionScript Weekend – The Display List

· Creating New Components in Flex 3

· Diving Deep with the Flex Component Lifecycle

· Understanding the Flex 3 Component and Framework Lifecycle

[1] Expressão americana usada para algo que requer pouco esforço mental ou inteligência para realizar ou compreender

Mai 13

JavaScriptMVC

Escrito por Fábio Batista da Silva em 1, 2.0, 6, action, Ajax, Aplicativos, app, AR, back, backend, BI, C#, class, classe, classes, código, Componente, Componentes, configuração, control, CRUD, css, dados, demo, Desenvolvimento, Design Patterns, development, Dica, dispatchEvent, Download, email, err, erro, error, Estilo, event, Evento, Eventos, Ferramenta, Flex, fonte, for, Formulário, formulario de contato, framework, function, gestão, git, Google, html, html5, IE, if, image, int, Java, Javascript, JQuery, label, labs, lista, map, mg, mvc, O, on, padrão, PHP, Plugin, pt, rails, RIA, Ria’s Geral, RoR, S+S, serviço, Serviços, string, tag, TAT, Tecnologia, template, Teste, tv, UI, uint, update, UX, web @ 05 13th, 2011 | via http://www.flexria.com.br/home | Sem comentários

Olá,

Com a chegada eminente do HTML5 e outras tecnologias baseadas em javascript como MongoDB e node.js
tenho deixado o Flex o meio de lado e me dedicado um pouco mais ao javascript.
Porem fica a questão, Como ter um front-end com a mesma performance, escalabilidade e desacoplamento que o flex permite ?
Realmente nesses termos ainda não encontrei nada que me proporcione o que o Flex proporciona.

Nesse Post vou falar um pouco sobre Framework JavaScriptMVC
Me perece uma das melhores alternativas para manter um frond-end JavaScript/HTML

JavaScriptMVC é formado por uma seria de ferramentas para construção de aplicativos JavaScript e consiste nos seguintes componentes:

StealJS -Gestão de Dependência
FuncUnit – Testes Unitários
jQueryMX – Biblioteca de Componentes
DocumentJS – Geração de JSDoc

O JavaScriptMVC pode ser utilizado com qualquer back-end , java,php,rails, etc…
Ele pode ser instalado baixando diretamente aqui ou instalando cada componente individualmente atreves do github.

Os componentes devem ficar nas raiz do diretório web da sua aplicação, nesse caso a pasta public.
Então as estrutura da aplicação fica assim.

public
  /documentjs
  /funcunit
  /jquery
  /steal
  /js

O JavaScriptMVC tem ferramentas de geração de código para auxiliar na criação da aplicação.
Vamos começar criando a aplicação pelo terminal, então o JavaScriptMVC vai gerar toda a estrutura do projeto.

    cd path-to-application/public/
   ./js jquery/generate/app contacts

Assim como o rails o JavaScriptMVC possui scaffolds que podem gerar seu CRUD.
Para isso basta executar o comando scaffold passando como parâmetro o nome do modelo.
Os nomes das classes seguem o seguinte padrão : ..
então temos o model “Contacts.Models.Contact”

     ./js jquery/generate/scaffold Contacts.Models.Contact

O JavaScriptMVC vai gerar o controlador, modelos, views e testes unitários da aplicação.
Porem o único arquivo que sera incluído na aplicação é o steal.js ele é responsável por gerenciar as dependências da aplicação.
No ambiente de desenvolvimento ele vai incluir individualmente todos os controladores, modelos, etc..

 type='text/javascript'  src='../steal/steal.js?contacts,development'>>

O parâmetro “?contacts” na tag de inclusão indica o nome do arquivo de configuração que tem o mesmo nome da aplicação nesse caso contacts.js
nele ficam mapeados todas dependências do projeto que serão gerenciadas pelo StealJS
contacts/contacts.js – Arquivo de configuração

steal.plugins(
    'jquery/controller',
    'jquery/controller/subscribe',
    'jquery/view/ejs',
    'jquery/controller/view',
    'jquery/model',
    'jquery/lang/json',
    'jquery/dom/form_params')

.css('contacts')

.resources()
.models('contact')
.controllers('contact')
.views();

Depois de fazer uma refatoração a aplicação ficou assim :

contacts/view/contact/contacts.html – Tela inicial da aplicação

>
    >
        >JS - MVC>
         type='text/javascript'  src='../steal/steal.production.js?contacts'>>
    >
    >
        
 id='contacts'>
            
>Contacts>
            
 id='contact'>>
        >
    >
>

contacts/view/contact/list_view.ejs – Template para a listagem de contatos


 class="link">
     href="javascript://" class='text_button create' >Create>
    
/>
>

 class="table">
    
>
        
>
            
>Name>
            
>E-Mail>
            
> >
        >
    >
    
>
        <%for(var i = 0; i < contacts.length ; i++)%>
        
 <%= contacts[i]%>>
            
><%= contacts[i].name%>>
            
><%= contacts[i].email%>>
            
 class="last">
                 href='javascript://' class='edit'>edit>%>
    >
>

contacts/view/contact/list_view.ejs – Template para o formulario de contatos


 <%= contact%> >
    
 action="#" class="form">
        
>
             class="label">Name>
            
 type="text" class="text_field" id="name" name="name" value="<%= contact.name%>" />
             class="label">E-Mail>
            
 type="text" class="text_field" id="email" name="email" value="<%= contact.email%>" />
        >
        
 class="link">
             href="javascript://" class="text_button save">Save>
             href="javascript://" class="text_button cancel">Cancel>
        >
    >
>

contacts/models/contact.js – Classe ‘Contacts.Models.Contact’ Reponsavel pela abstração do acesso aos serviços

$.Model.extend('Application.Models.Contact',
/* @Static */

    /**
     * Service url.
     */
    url: 'http://localhost/patho-to-app/contacts/',

    /**
     * Recupera os dados dos contacts do serviço no backend.
     * @param Object params
     * @param Function success
     * @param Function error
     */
    findAll: function( params, success, error )
        $.ajax(
            url     : this.url,
            type    : 'get',
            dataType: 'json',
            data    : params,
            success : this.callback(['wrapMany',success]),
            error   : error
        );
    },
    /**
     * Cria um novo contacto
     * @param Object attrs
     * @param Function success
     * @param Function error
     */
    create: function( attrs, success, error )
        $.ajax(
            url     : this.url + 'save',
            type    : 'post',
            dataType: 'json',
            error   : error,
            success : success,
            data    : contact:attrs
        });
    }
    /**
     * Altera os dados de um contacto
     * @param String id
     * @param Object attrs
     * @param Function success
     * @param Function error
    */
    update: function( id, attrs, success, error )
        $.ajax(
            url     : this.url + 'save',
            type    : 'post',
            dataType: 'json',
            data    : contact:attrs,
            success : success,
            error   : error
        });
    },
    /**
     * Remove um contacto
     * @param String id
     * @param Function success
     * @param Function error
     */
    destroy: function( id, success, error )
        $.ajax(
            url     : this.url + 'destroy/id/'+id,
            type    : 'post',
            dataType: 'json',
            error   : error,
            success : success
        );
    },
},
);

contacts/controllers/contact_controller.js – Classe ‘Contacts.Controllers.Contact’ Responde a eventos da view e do modelo

$.Controller.extend('Contacts.Controllers.Contact',onDocument: true,

     /**
     * Função chamada quando a página é carregada
     */
     load: function()
        this.findAll();
     ,

     /**
     * Função que renderiza a listagem de contatos apartir do template /contacts/views/list_view.ejs
     * @param Array contacts
     */
     listView: function( contacts )
        $('#contact').html(this.view('list_view', contacts:contacts ));
     },

     /**
     * Função que renderiza o formulario de contatos apartir do template /contacts/views/form_view.ejs
     * @param Contacts.Models.Contact contact
     */
     formView: function(contact)
        $('#contact').html(this.view('form_view', contact:contact));
     },

     /**
     * Função que lista os contatos atraves do model e renderiza a tela quando obtem resultado
     */
     findAll: function(){
        Contacts.Models.Contact.findAll(, this.callback('listView'));
     },

    /**
     * Listener para o evento 'click' no link create
     */
    '.create click': function()
        // cria um novo contato e monta o formulario
        var contact = new Contacts.Models.Contact();
        this.formView(contact);
    ,

     /**
     * Listener para o evento 'click' no link edit
     * @param jQuery el
     */
    '.edit click': function( el )
        // Recupera o contato selecionado e monta o formulario
        var contact = el.closest('.contact').model();
        this.formView(contact);
    ,

     /**
     * Listener para o evento 'click' no link destroy
     * @param jQuery el
     */
    '.destroy click': function( el )
        if(confirm("Are you sure you want to destroy?"))
            // Recupera o contato selecionado e o remove
            var contact = el.closest('.contact').model();
            contact.destroy();
        
     },

    /**
     * Listener para o evento 'click' no link save
     * @param jQuery el
     */
    '.save click': function(el)
        // Recupera o contato selecionado
        var contact = el.closest('.contact').model();
        // Recupera os dados do formulario
        var attrs   = $('.form').formParams();
        // Atualiza os dados no "objeto"
        contact.attrs(attrs);
        // Salva
        contact.save();      	// a função save é erdada do objeto Model
                               // ela verifica se o objeto ja existe e chama o metodo create ou update
    ,

    /**
     * Listener para o evento 'click' no link cancel
     */
    '.cancel click': function()
        this.findAll();
    ,

    /**
     * Listener para o evento 'created' disparado pelo "objeto" Contacts.Models.Contact
     * @param String called
     * @param Event contact
     */
    'contact.created subscribe': function( called, contact )
        this.findAll();
    ,

    /**
     * Listener para o evento 'updated' disparado pelo "objeto" Contacts.Models.Contact
     * @param String called
     * @param Event contact
     */
    'contact.updated subscribe': function( called, contact )
        this.findAll();
    ,

     /**
     * Listener para o evento 'destroyed' disparado pelo "objeto" Contacts.Models.Contact
     * @param String called
     * @param Event contact
     */
    "contact.destroyed subscribe": function(called, contact)
        this.findAll();
     
});

Agora antes de colocar a aplicação em ambiente de produção podemos compactar todos os arquivos .js e .css gerando uma versão final.

 ./js contacts/scripts/build.js

O StealJS utiliza o Google Closure para compactar todos os arquivos
e gerar arquivos compactados/concatenados que serão usados em produção contacts/production.js e contacts/production.css .

Com isso reduzimos todos os arquivos da aplicação, estilos, plugins, etc.. são reduzidos a apenas um arquivo .js e um arquivo .css.
E para mudar as configuração do ambiente temos apelas que mudar o tag de inclusão do StealJS

<script type='text/javascript'  src='../steal/steal.production.js?contacts'>script>

Esse foi apenas uma pequena amostra do JavaScriptMVC.
Com essa estrutura ele nos permite construir grandes aplicações de forma modular
com um bom ambiente de teste, velocidade no desenvolvimento e performance no ambiente de produção.

Essa aplicação esta rodando aqui : http://flexria.com.br/labs/js-mvc/
E os fontes estão disponíveis no github : https://github.com/FabioBatSilva/js-mvc

Abraço e até a próxima….