gc - redeRIA | Agregador de noticias, artigos, tutoriais Flex, Flash, JavaFX, AJAX e Rich internet applications em geral!

Dez 21

Cacoo – Ferramenta de diagramação colaborativa online

Escrito por Erko Bridee em 1, 2.0, 2009, 4, 6, action, Adobe, Adobe Flex, Air, api, AR, blog, busca, C#, chrome, class, Desenvolvimento, err, Ferramenta, Flex, framework, gc, Google, html, ide, IE, image, int, Java, mg, O, on, procura, produtividade, RIA, Ria’s Geral, S+S, site, web @ 12 21st, 2011 | via http://blog.erkobridee.com | Sem comentários

Ontem, estava procurando uma ferramenta para desenhar diagramas, que me desse mais op??es de diagramas e fosse mais flexivel do que todas as demais ferramentas que j? havia utilizado at? o momento. Realizando uma busca no Google acabei encontrando a Cacoo.

Site | Google Chrome Web Store

At? o presente momento, utilizando a ferramenta, gostei da facilidade de uso e da quantidade de elementos gr?ficos dispon?veis para utilizar nos diagramas, est? atendendo bem a minha necessidade de cria??o de diagramas.

Veja também:

Nov 9

Conhecendo o LESS. The Dynamic Stylesheet.

Escrito por DClick Team em 1, 2.0, 4, 6, Adobe, Air, app, apple, AR, back, BI, browser, C#, class, classe, classes, código, css, css3, Curso, Cursos, custom, dados, demo, Desenvolvedor, Desenvolvimento, Desenvolvimento Web, Design, Destaque, Dica, Diversos, Documentação, dynamic, empresas, err, erro, error, Estilo, exemplo, Exemplos, for, function, gc, Google, html, html5, ide, IE, if, int, Java, Javascript, kit, layout, menu, Microsoft, MIX, NaN, O, on, Opinião, Outros, padrão, problema, problemas, programação, prova, pt, referencia, RIA, Ria’s Geral, RoR, S+S, Sem categoria, site, tag, TAT, Twitter, UI, uint, Utilidades, Ved, web, zend @ 11 9th, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários

Twitter!

Como todos devem ter percebido, nos últimos meses o CSS3 e o HTML5 tem ganho um grande destaque no desenvolvimento web. Grandes empresas como o Google, Microsoft, Adobe e Apple estão apoiando fortemente o desenvolvimento web utilizando WebStandards. Caso você já conheça algo sobre CSS, provavelmente deve saber como é complicado a organização desses documentos em um projeto de médio ou grande porte. Dado esses problemas conhecidos, foram surgindo os chamados pré-processadores de CSS, que viabilizam a criação de documentos de estilo, adicionando novas funcionalidades.

Hoje vamos conhecer o LESS, The Dynamic Stylesheet Language. O objetivo dessa biblioteca em javascript é prover uma série de funcionalidades para as, usualmente criadas a mão, folhas de estilos. Recursos tais como, variáveis, mixins (Multiple Inheritance, Traits), mixins parametrizáveis, funções, namespaces, importação, etc. Vamos aprender como utilizar os principais recursos dessa biblioteca em um projeto e como aproveitar o melhor dessa biblioteca para organizar corretamente nossas folhas de estilo.

Variables

As variáveis ajudam-nos a definir valores que podem ser utilizados em diversas regras do nosso CSS. Elas possuem escopo assim como em uma linguagem de programação orientada a objetos, trocando em miúdos:

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

// Arquivo stylesheet.less
// Essa variável foi definida no escopo do arquivo, logo, todas as regras do arquivo podem acessar seu valor.
@siteBackgroundColor: #FF3300; // Laranja

h1
// A variável headingColor foi criada no escopo da regra h1, logo, apenas ela e outras regras criadas dentro
// do mesmo escopo tem acesso ao seu valor.
@headingColor: #333333; // Cinza

// Isto significa que, se criarmos uma outra regra chamada &.mainTitle
// Observe o uso do &.classe, isso copia a regra pai e associa uma classe, o output disso seria exatamente h1.mainTitle
&.mainTitle
// Como essa regra esta contida na regra h1, podemos acessar o valor da variável headingColor.
color: @headingColor;

}

h2
// Se tentarmos acessar o valor nessa regra, que não encontra-se contida na regra h1, receberemos um erro da biblioteca
// informando que a variável headingColor não encontra-se definida.
color: @headingColor; // Brrrrrr! Error.

O que é interessante no uso de variáveis é a reutilização e organização. Imagine uma design guideline onde existem RGBs específicos a serem seguidos, essas cores poderiam ser definidas em um documento chamado color_variables.less e adicionados ao nosso arquivo principal utilizando a clausula @import.

@Import – Importando outros arquivos

Quando um arquivo LESS é importado, todas as suas variáveis e mixins são adicionados ao arquivo principal. Os escopos serão mantidos e a extensão .less é opcional.

@import “lib.less”
@import “lib”

É possível utilizar pastas nas clausulas de @import:

@import “where/is/my/stylesheet.less”
@import “where/is/my/stylesheet”

Mixins

No LESS, mixis são como uma espécie de classe CSS que pode ser reutilizada em diversas outras regras. Quando utilizadas, todas as propriedades definidas no mixin são adicionadas a regra onde a mesma foi adicionada, caso um mixin mude, todas as regras que o referenciam serão também modificadas.

Imagine o conceito de mixin como classes CSS orientadas a objeto, o que é interessante do mixin é que temos aqui algo como uma herança múltipla, caso uma mesma instrução seja declarada em mixins diferentes, e esses mixins adicionados a uma regra, o mixin declarado por último terá vantagem na construção final do CSS da regra onde foi adicionado.

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

.bordered
border-top: dotted 1px black;
border-bottom: solid 2px black;

// Declaramos agora uma regra qualquer que fará uso do nosso mixin.
div.someDiv
.bordered; // Simples assim, adicionamos todas as propriedades contidas no mixin em nossa regra.

div.anotherDiv
.bordered; // A mesmas propriedades serão adicionadas nessa regra.

Quando modificarmos o mixin .bordered, todos os elementos que o estão utilizando serão modificados. Reutilização!
Vamos para um exemplo mais usável para exemplificar como é um mixin parametrizável.

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

// Bordas arredondadas cross-browser.
// Observe que utilizamos algo parecido com uma função de javascript para declararmos nosso mixin.
// A notação de variável deve ser adicionada (@radius), com isso, criamos uma variável chamada “radius” no escopo
// do mixin que poderá ser utilizada apenas internamente pelo método.
// Observe também que declaramos um valor padrão para o parâmetro, de 5px.
.border-radius( @radius: 5px )

// Repare que utilizamos a mesma variável para todas as regras.
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;

// Para utilizarmos a regra, seguimos o mesmo padrão
div.someDiv
.border-radius; // Nesse caso estaremos utilizando o valor padrão de 5px.

div.anotherDiv
.border-radius(10px); // Nessa aplicação, modificamos o valor da propriedade para 10px.

É importante destacar que um mixin pode conter diversos parâmetros. Isso pode ser feito da seguinte forma:

1
2
3
4
5
6

// Declaramos um novo mixin
.border-radius-and-color( @radius: 5px, @borderColor: #000000 )

.border-radius( @radius ); // Observe que aqui reutilizei o mixin previamente definido. Composição de mixins.
border: 2px solid @borderColor; // Adicionamos agora a cor para a borda.

Nested Rules

Com o LESS você pode criar suas regras de CSS utilizando uma espécie de hierarquia. Vamos ver como isso funciona na prática.

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

// Dado o CSS abaixo
div#header #menu
…
rules

div#header #menu li a
…
more rules

div#header #topNav
…
another rules

Com o LESS, o mesmo CSS acima poderia ser escrito da seguinte forma:

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

// Como utilizar hierarquia com Less
div#header
#menu
ul
li

}
}

#topNav

}

Depois de processado, o CSS será exatamente igual. Você não precisa utilizar esse esquema de hierarquia caso não queira, é importante lembrar que o LESS é apenas uma extensão do CSS, se for de desejo do desenvolvedor, podemos escrever um código LESS sem usar nenhum recurso especial, como se fosse um CSS tradicional.

Operations

Com o LESS o seu CSS sabe fazer contas. Qualquer número, cor ou variável pode ser utilizada em uma operação aritmética.
Ele sabe identificar quando estamos utilizando uma cor ou um número, por exemplo:

1
2
3
4
5
6
7

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

Assim como no javascript, é possível também utilizar parênteses nas suas operações:

1	width: (@var + 5) * 2;

Color Functions

Na minha opinião um dos recursos mais úteis durante o desenvolvimento de uma aplicação. Podemos efetuar operações em cima de RGBs, por exemplo, imagine que o layout do seu website foi criado baseado-se em apenas uma cor, utilizando diversos tons dessa cor. Com o LESS é possível utilizar métodos pré-definidos como lighten, saturate, darken, fadein, fadeout e spin. Esses métodos retornam sempre um RGB que pode ser utilizado em seu LESS. Vejamos alguns exemplos:

1
2
3
4
5
6
7
8
9

@base: #f04615;

.class
// Saturo em 5% a cor base.
color: saturate(@base, 5%);

// Utilizo a cor base 25% mais clara
background-color: lighten(@base, 25%);

É possível também extrair informações de uma determinada cor para ser utilizada em outra.
Isso é feito a partir dos métodos hue, saturation e lightness.

1
2
3

hue(@color); // retorna o valor do canal ‘hue’ da cor @color
saturation(@color); // retorna o valor do canal ‘saturation’ da cor @color
lightness(@color); // retorna o valor do canal ‘lightness’ da cor @color

Namespaces

Em dado momento necessitamos organizar uma série de mixins e variáveis. Para isto podemos utilizar um conceito presente no LESS chamado Namespaces. Assim como em linguagens de programação orientadas a objetos, que possuem o conceito de pacotes, os namespaces fornecem encapsulação para nossas folhas de estilo. Isso pode ser implementado facilmente utilizando a mesma notação de ID do CSS tradicional. Vejamos.

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

#bundle

.button ()

display: block;
border: 1px solid black;
background-color: grey;
&:hover background-color: white
}
.tab …
.citation …
}

Verifique que acima, criamos um mixin chamado button dentro do namespace bundle. Para o utilizarmos devemos fazer da seguinte forma:

1
2
3
4

#header a
color: orange;
#bundle > .button; // Estamos acessando o namespace ‘bundle’ e fazendo uma chamada para o mixin ‘button’.

Uma utilização muito comum dos namespaces é na criação de pequenas bibliotecas de utilidades. Imagine que sua empresa pode possuir uma série de arquivos LESS, e em um determinado projeto você necessita de acesso a esses mixins, variáveis, etc. Organizar seus documentos com namespaces fácilita a visualização e localização de uma determinada instrução no seu documento LESS, como por exemplo, um mixin customizado que pode ser facilmente encontrado a partir da sua indicação de namespace.

1
2
3

someRule
#dclick > .border-radius(10px);

Conclusão

Como podemos ver, o LESS facilita uma série de tarefas que são praticamente impossíveis de serem efetuadas pelo CSS tradicional.
Aconselho a todos que tenham interesse em se aprofundar mais na biblioteca a conhecer o website (http://lesscss.org/). Lá você poderá encontrar a documentação com maior riqueza de informações também poderá ver alguns exemplos de código que não foram abordados nesse post.

Qualquer dúvida, sinta-se a vontade e envie-nos um comentário!
Abraço!

Out 3

Adobe MAX 2011 – Isso sim é experiência

Escrito por DClick Team em 1, 2.0, 4, Adobe, Adobe Max, Aplicativos, AR, blog, C#, class, cliente, Desenvolvimento, for, gc, html, html5, IE, if, image, int, Mercado, mg, novidade, Novidades, O, on, Ria’s Geral, S+S, TAT, Twitter, UI, Vídeo, XP @ 10 3rd, 2011 | via http://blog.dclick.com.br/pt/ | Sem comentários

Twitter!

Mais uma vez a DClick está presente na Adobe MAX. Desta vez com 4 integrantes: Eduardo Horvath, Eduardo Malendéz, Rogério Martinelli e eu

Estou muito curioso este ano não para ver as novidades, mas para ver como a Adobe vai se posicionar no mercado. O marketing em cima do html5 foi muito forte e já percebemos isso em nossos clientes. Por outro lado, a Adobe é a única empresa que tem uma plataforma para desenvolvimento de aplicativos móveis para os OSs mais usados no mercado. Vamos ver.

Por hora, vejam o vídeo da “festa” que teve ontem. Eu gosto de música, mas nunca fui e nem sei como é o trabalho de um DJ, mas confesso que fiquei com vontade de ser ou apenas “brincar” um pouco.

Out 2

Exemplo do novo PivotViewer do Silverlight 5 apresentado no TechEd Brasil 2011

Escrito por Kelps Sousa em .NET, 1, 2.0, 3.5, 4, 6, AR, BI, blog, C#, código, código fonte, dados, deepZoom, Download, Excel, exemplo, Exemplos, fonte, for, gc, Google, html, IE, image, lista, live, map, mg, News, novidade, Novidades, O, on, Palestra, Palestras, RIA, Ria’s Geral, S+S, SDK, silverlight, Tech, TechEd, tool, tv, Twitter @ 10 2nd, 2011 | via http://kelps-sousa.blogspot.com/ | 1 comentário

Na palestra de Silverlight 5 que apresentei este ano com Rodrigo Kono no TechEd Brasil, mostramos a nova versão do PivotViewer que vem no SDK do Silverlight 5.

Esta nova versão tem diversas melhorias, principalmente no que diz respeito ? forma de montar e utilizar a coleção de dados. Nesta nova versão não é mais necessário pré-processar a coleção usando Excel ou DeepZoom Composer e praticamente tudo pode ser feito usando Binding.

Abaixo tem um link para fazer download do código fonte do exemplo que apresentamos. Para usar este exemplo é necessário ter instalado o Tools do Silverlight 5 RC. Em breve vou publicar novos posts com mais detalhes sobre esta e outras novidades do Silverlight 5, mas por enquanto, aproveitem este exemplo.

PivotViewerSample.zip

Jul 28

Estratégia para lidar com callbacks assíncronos em Silverlight

Escrito por Kelps Sousa em .NET, 1, 4, 6, action, AR, back, BI, blog, C#, class, classe, código, dados, demo, Desenvolvedor, desenvolvedores, Desenvolvimento, Download, err, erro, error, event, Evento, Eventos, exemplo, for, framework, gc, Google, html, IE, if, int, LOB, lógica, map, mg, MSDN, NaN, News, O, on, problema, Projetos, pt, RIA, Ria’s Geral, RoR, S+S, silverlight, Silverlight 4, string, tag, TAT, Tutorial, Twitter, UI, Ved, web, Web Service, web services, WebClient, XP @ 07 28th, 2011 | via http://kelps-sousa.blogspot.com/ | Sem comentários

Recentemente, conversando com alguns desenvolvedores no trabalho e verificando algumas perguntas publicadas nos fóruns do MSDN, eu notei que ainda há uma dificuldade muito grande tanto de compreensão quanto de implementação para trabalhar com métodos assincronos. Isso se torna um problema particularmente importante em aplicações Silverlight pois todas as chamadas a web services, RIA services, web requests, etc são obrigatoriamente feitos de forma assincrona, não havendo opções para executar essas mesmas operações da forma sincrona e linear ? qual a maioria dos desenvolvedores está acostumada.

Acontece que desenvolvimento assincrono não é difícil e, depois que você aprende e se acostuma, você acaba percebendo que suas aplicações passam a funcionar muito melhor. Sim, não vou argumentar aqui contra o fato de que é necessário se acostumar e que começo seja realmente algo estranho, mas posso garantir que demora pouco tempo para se acostumar e os benefícios são muitos.

Há muitas abordagens e estratégias possíveis para desenvolvimento assíncrono e eu vou apresentar aqui uma delas que é bem simples e que eu usei em praticamente todos os projetos Silverlight em dos quais participei. Essa abordagem não envolve o uso de nenhum framework ou biblioteca externa e pode ser utilizada tranquilamente também em projetos que não sejam Silverlight.

Digamos que você precisa obter o html de uma página web por algum motivo. Uma forma de fazer isso seria criando uma nova instância de WebClient, assinando o evento DownloadStringCompleted e depois chamando o método DownloadString passando a url. Ok, não é difícil, mas é um código repetitivo que poderia facilmente ser reaproveitado ao invés de ser copiado por toda sua aplicação em todo lugar onde você precisar fazer download de uma página. O que eu costumo fazer para esse tipo de chamada é criar um método estático em uma classe utilitária e simplesmente chamar esse método passando, nesse caso, minha url e um ponteiro de callback. É mais fácil mostrar:

public static void HttpGet(string url, Action<string, Exception> callback)     if (!string.IsNullOrWhiteSpace(url))         var client = new WebClient();        client.DownloadStringCompleted += (sender, e) =>             if (callback != null)                 callback(e.Result, e.Error);

        };        client.DownloadStringAsync(new Uri(url));    }}

Quais são as vantagens desse método:

para executá-lo não é necessário instanciar nenhuma classe
é facil de reutilizar
permite que a lógica da minha aplicação fique um pouco mais simples, já que não me obriga a assinar nenhum evento no meu código

Para executar esse método, eu posso usar 2 abordagens.

Abordagem 1 – Delegar o retorno para outro método. Nessa abordagem eu chamo o método HttpGet passando a url desejada e o ponteiro de um método que será executado quando o request for concluído.

private void LoadData()     HttpGet("http://kelps.net", DataLoaded);

private void DataLoaded(string data, Exception error)     if (error == null)         //utiliza os dados retornados na variável "data"

}

Abordagem 2 – Utilizar uma expressão lambda para criar um método anônimo inline no meu código, ao invés de criar uma função separada apenas para processar os dados retornados.

HttpGet("http://twitter.com/kelps", (data, error) =>     if (error == null)         //utiliza os dados retornados na variável "data"

});

A única diferença de funcionamento entre as 2 abordagens acima é que na segunda seria possível utilizar variáveis que estiverem no mesmo escopo da chamada que está sendo feita, ao passo que na primeira seria necessário que essas variáveis fossem globais da classe para que isso funcione. Nos projetos em que trabalho eu costumo utilizar ambas as abordagens, de acordo com o que faz mais sentido em cada situação. Expressões lambda são bem concisas e compactas, mas são claras para qualquer desenvolvedor.

Este foi apenas um pequeno exemplo de como trabalhar com chamadas assincronas sem ficar se perdendo com assinaturas e liberação de eventos. Há outras formas mais complexas e robustas de lidar com isso mas a minha intenção hoje era simplesmente mostrar como dá pra trabalhar de forma simples com código assíncrono, mesmo sem utilizar nenhuma biblioteca externa.

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.

Mar 7

TextArea com Linhas.

Escrito por Felipe Borella em 1, 2009, 4, 6, Adobe, app, AR, back, bar, Blend, blog, Blogs, boolean, break, chrome, class, classe, classes, Componente, components, control, err, event, EventListener, events, exemplo, flash, Flex, fonts, for, function, gc, html, ide, IE, if, int, internet, label, layout, library, MXML, NaN, Number, O, on, override, pt, Ria’s Geral, Scroll, spark, state, string, strings, Stroke, TAT, UI, UML, update, XML, XP @ 03 7th, 2011 | via http://www.fborella.com.br/blog/ | Sem comentários

Daeee galera!
Esse port é para mostra um Skin bacana que catei na internet.
Original em http://flexdevtips.blogspot.com/2010/07/spark-textarea-with-line-numbers.html

Vamos ao Skin:

xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 xmlns:mx="library://ns.adobe.com/flex/mx"
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
			 creationComplete="created(event)"
			 alpha.disabled="0.5"
			 blendMode="normal">
?
	<fx:Metadata>
		[CDATA[
		[HostComponent("spark.components.TextArea")]
		]]>
	fx:Metadata>
?
	<fx:Script fb:purpose="styling">
		private var lineBreakChanged:Boolean;
?
		private var paddingChanged:Boolean;
?
		private var verticalAlignChanged:Boolean;
?
		/* Define the skin elements that should not be colorized.
		For text area, the skin itself is colorized but the individual parts are not. */
		static private const exclusions:Array = ["background", "scroller"];
?
		/**
		 * @private
		 */
		override public function get colorizeExclusions():Array {
			return exclusions;
		}
?
		/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
		static private const contentFill:Array = ["bgFill"];
?
		/**
		 *  @private
		 */
		override public function get contentItems():Array {
			return contentFill
		}
		;
?
		/**
		 *  @private
		 */
		override protected function commitProperties():void {
			super.commitProperties();
?
			if (lineBreakChanged) {
				updateStringStyle("lineBreak");
				lineBreakChanged = false;
?
				if (textDisplay != null) {
					if (getStyle("lineBreak") == "explicit") {
						if (textDisplay.percentWidth == 100) {
							textDisplay.width = NaN;
						}
					} else if (textDisplay.percentWidth != 100) {
						textDisplay.percentWidth = 100;
					}
				}
			}
			if (paddingChanged) {
				updatePadding();
				paddingChanged = false;
			}
			if (verticalAlignChanged) {
				updateStringStyle("verticalAlign");
				verticalAlignChanged = false;
			}
		}
?
		/**
		 * @private
		 */
		override protected function initializationComplete():void {
			useChromeColor = true;
			super.initializationComplete();
		}
?
		/**
		 *  @private
		 */
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			if (getStyle("borderVisible") == true) {
				border.visible = true;
				shadow.visible = true;
				background.left = background.top = background.right = background.bottom = 1;
				scroller.left = scroller.top = scroller.right = scroller.bottom = 1;
			} else {
				border.visible = false;
				shadow.visible = false;
				background.left = background.top = background.right = background.bottom = 0;
				scroller.left = scroller.top = scroller.right = scroller.bottom = 0;
			}
?
			borderStroke.color = getStyle("borderColor");
			borderStroke.alpha = getStyle("borderAlpha");
?
			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}
?
		/**
		 *  @private
		 */
		private function updatePadding():void {
			if (!textDisplay)
				return;
?
			// Push padding styles into the textDisplay
			var padding:Number;
?
			padding = getStyle("paddingLeft");
			if (textDisplay.getStyle("paddingLeft") != padding)
				textDisplay.setStyle("paddingLeft", padding);
?
			padding = getStyle("paddingTop");
			if (textDisplay.getStyle("paddingTop") != padding)
				textDisplay.setStyle("paddingTop", padding);
?
			padding = getStyle("paddingRight");
			if (textDisplay.getStyle("paddingRight") != padding)
				textDisplay.setStyle("paddingRight", padding);
?
			padding = getStyle("paddingBottom");
			if (textDisplay.getStyle("paddingBottom") != padding)
				textDisplay.setStyle("paddingBottom", padding);
		}
?
		/**
		 *  @private
		 */
		private function updateStringStyle(styleName:String):void {
			if (!textDisplay)
				return;
?
			// Push style into the textDisplay
			var style:String;
?
			style = getStyle(styleName);
			if (textDisplay.getStyle(styleName) != style) {
				textDisplay.setStyle(styleName, style);
			}
		}
?
		/**
		 *  @private
		 */
		override public function styleChanged(styleProp:String):void {
			var allStyles:Boolean = !styleProp || styleProp == "styleName";
?
			super.styleChanged(styleProp);
?
			if (allStyles || styleProp.indexOf("lineBreak") == 0) {
				lineBreakChanged = true;
				invalidateProperties();
			}
			if (allStyles || styleProp.indexOf("padding") == 0) {
				paddingChanged = true;
				invalidateProperties();
			}
			if (allStyles || styleProp.indexOf("verticalAlign") == 0) {
				verticalAlignChanged = true;
				invalidateProperties();
			}
		}
	fx:Script>
?
	<fx:Script>
		[CDATA[
			import mx.events.FlexEvent;
?
			/**
			 * @private
			 */
			private static const focusExclusions:Array = ["textDisplay"];
?
			/**
			 *  @private
			 */
			override public function get focusSkinExclusions():Array {
				return focusExclusions;
			}
?
			protected function created(event:FlexEvent):void {
				updateLineNumbers(event);
				hostComponent.addEventListener(FlexEvent.UPDATE_COMPLETE, updateLineNumbers, false, 0, true);
			}
?
			private var _lines:int = 0;
?
			private function updateLineNumbers(event:Event):void {
				var lines:int = textDisplay.mx_internal::textContainerManager.numLines;
				if (lines != _lines) {
					var old:int = _lines;
					this._lines = lines;
					var diff:int = lines - old;
					var linesString:String;
					var i:int;
					if (diff > 0) {
						linesString = lineNumbersLabel.text;
						for (i = old + 1; i <= _lines; i++) {
							if (i > 1) {
								linesString += "n";
							}
							linesString += i.toString(10);
						}
					} else {
						linesString = "";
						for (i = 1; i <= _lines; i++) {
							if (i > 1) {
								linesString += "n";
							}
							linesString += i.toString(10);
						}
					}
					lineNumbersLabel.text = linesString;
				}
			}
		]]>
	fx:Script>
?
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
	s:states>
?
	
	
	<s:Rect id="border"
			bottom="0"
			left="0"
			right="0"
			top="0">
		<s:stroke>
			
			<s:SolidColorStroke id="borderStroke"
								weight="1"/>
		s:stroke>
	s:Rect>
?
	
	
	
		
			
			
		
	
?
	
	
	
		
			
		
	
?
	
	
		
			
				
			
			
			
				
					
				
			
			
				
					
				
			
		
?
		
			
			
		
	
?

E ao Uso do mesmo no componente

xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
	<fx:Declarations>
?
	fx:Declarations>
?
	<s:TextArea width="400" height="200" skinClass="br.com.fborella.SkinTextArea">
	s:TextArea>
s:Application>

Lembre-se de colocar o arquivo no seu pacore e ajustar o mesmo no skinClass

Exemplo:

Abraço

Felipe

Jan 19

O Adobe Flex

Escrito por SamuelFacchinello em .NET, 1, 4, 6, Adobe, Adobe Flex, Air, Animações, app, AR, BI, blog, Blogs, C#, chrome, comunicação, Dica, Dicas, Download, efeito, efeitos, empresas, err, exemplo, Exemplos, explorer, Ferramenta, firefox, flash, flash builder, Flex, for, free, gc, Google, grátis, html, ide, IE, int, interface, internet, Java, labs, mg, Microsoft, O, on, online, Pessoal, PHP, player, Plugin, produto, programação, RIA, Ria’s Geral, S+S, serviço, Serviços, TAT, Tech, Tema, Teste, Treinamento, Tutoriais, UI, Vídeo, Vídeos, web, Webservice, window, windows, XML, XP @ 01 19th, 2011 | via http://desenvolvendoemflex.blogspot.com/ | Sem comentários

Olá!!

Bom, vamos começar do começo!!! Aqui vou explicar um pouco sobre o Adobe Flex e suas maravilhas.
Començando…

O que é o Adobe FLEX??

É uma linguagem de programação baseada na plataforma Flash da Adobe (mas não se engane, o Flex não é para fazer animações com “linha de tempo”, Adobe Flex é para fazer Sistemas Web).

Hoje, o flex não é uma ferramenta muito conhecida entre as empresas que utilizam sistemas na web, mas isso já está mudando, graças a empresas e/ou pessoas que estudam mais e mais para sempre inovar com seus produtos e serviços.

O que o Flex tem de bom?

O Flex é famoso pela sua rica interface gráfica, pela sua facilidade de aprendizado, também pela facilidade de comunicação com outras linguagens (JAVA, PHP, etc) seja por Xml, WebService, RemoteObject, etc. Ele tem efeitos e transições que deixam o usuário final maravilhado com a interface das aplicações desenvolvidas com essa ferramenta.

Como começo??

É muito fácil de aprender a desenvolver em Flex, para começar você deve fazer o download do Flash Builder (versão teste por 60 dias) aqui (você também pode solicitar uma licença estudante para não comerciais aqui).
É só instalar e começar a se divertir.
*Para rodar as aplicações desenvolvidas em Flex, precisa de um navegador (firefox, chrome, ie, opera, etc) e o plugin do FlashPlayer instalado.
A própria Adobe disponibiliza um treinamento grátis (em inglês) das funções básicas do Flex, esses vídeos podem ser visto aqui.

Exemplos de aplicações

A muitos exemplos espalhados pela internet, mas existe o Tour de Flex que pode ser instalado logo abaixo (versão em AIR) ou então clicar aqui e ver a versão online.

Conclusão

A principio é isso pessoal, em breve novos posts com dicas e tutoriais.
Qualquer dúvida é só entrar em contato.

Abraço, Obrigado.

Dez 11

Usando a classe ObjectUtil no Adobe Flex

Escrito por Leonardo França em .NET, 1, 2009, 4, 6, action, Actionscript, ActionScript 3, Actionscript 3.0, Adobe, Adobe Air, Adobe Flex, api, Aplicativos, app, AR, BI, boolean, class, classe, comparação, custom, Desenvolvimento, Download, event, events, exemplo, Exemplos, flash, Flash Platform, Flex, for, framework, function, fundo, gc, handle, html, IE, if, image, int, label, library, mg, MXML, NaN, Number, O, on, Outros, PHP, platform, player, print, pt, reference, RIA, Ria’s Geral, spark, string, strings, TextInput, UI, utils, Widget, XML @ 12 11th, 2010 | via http://www.leonardofranca.com.br | Sem comentários

O Adobe Flex [bb] é um framework feito para criação de aplicativos RIA com a Flash Platform e que pela sua facilidade vem se tornando muito popular nos ultimos anos. Há classe chamada ObjectUtil, uma classe estática com uma serie de métodos para ajudar e agilizar no desenvolvimento de suas aplicações. Vou mostrar alguns exemplos dos métodos que mais utilizo.

numericCompare é um método usado para comparar dois números, retorna 0 se os dois são nulos ou iguais, 1 se o primeiro parametro for maior que o segundo e -1 se o segundo parametro for maior que o primeiro. Veja um exemplo:

PLAIN TEXT

MXML:

“1.0″ encoding=“utf-8″?>
xmlns:fx=“http://ns.adobe.com/mxml/2009″
? ? ? ? ? ? ? ?xmlns:s=“library://ns.adobe.com/flex/spark”
? ? ? ? ? ? ? ?xmlns:mx=“library://ns.adobe.com/flex/mx” minWidth=“955″ minHeight=“600″>
? ? >
? ? ? ?
? ? >
? ? >
? ? ? ? [CDATA[
? ? ? ? ? ? import mx.utils.ObjectUtil;
? ? ? ? ? ?
? ? ? ? ? ? private function isNumbersEqual(number1:Number,number2:Number):Boolean
? ? ? ? ? ? {
? ? ? ? ? ? ? ? var retorno:Boolean = false;
? ? ? ? ? ? ? ? var isEqual:int = ObjectUtil.numericCompare(number1,number2);
? ? ? ? ? ? ? ? if(isEqual == 0)
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? retorno = true;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return retorno;
? ? ? ? ? ? }
?
? ? ? ? ? ? protected function button1_clickHandler(event:MouseEvent):void
? ? ? ? ? ? {
? ? ? ? ? ? ? ? if(isNumbersEqual(Number(t1.text),Number(t2.text)))
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? lb.text = "Numbers are equals!";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? lb.text = "Numbers are not equals!";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ]]>
? ? >
? ? id=“t1″ x=“10″ y=“10″/>
? ? id=“t2″ x=“146″ y=“10″/>
? ? x=“282″ y=“10″ label=“Compare” click=“button1_clickHandler(event)”/>
? ? id=“lb” x=“363″ y=“19″/>
>

compare é um método usado para comparar dois objetos. Ele usa um algoritimo para ir o mais profundo possivel no objeto e suas propriedades. Veja um exemplo:

PLAIN TEXT

MXML:

“1.0″ encoding=“utf-8″?>
xmlns:fx=“http://ns.adobe.com/mxml/2009″
? ? ? ? ? ? ? ?xmlns:s=“library://ns.adobe.com/flex/spark”
? ? ? ? ? ? ? ?xmlns:mx=“library://ns.adobe.com/flex/mx” minWidth=“955″ minHeight=“600″ creationComplete=“application1_creationCompleteHandler(event)”>
? ? >
? ? ? ?
? ? >
? ? >
? ? ? ? [CDATA[
? ? ? ? ? ? import mx.events.FlexEvent;
? ? ? ? ? ? import mx.utils.ObjectUtil;
? ? ? ? ? ?
? ? ? ? ? ? private function isObjectEqual(obj1:Object,obj2:Object):Boolean
? ? ? ? ? ? {
? ? ? ? ? ? ? ? var retorno:Boolean = false;
? ? ? ? ? ? ? ? var isEqual:int = ObjectUtil.compare(obj1,obj2);
? ? ? ? ? ? ? ? if(isEqual == 0)
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? retorno = true;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return retorno;
? ? ? ? ? ? }
? ? ? ? ? ?
? ? ? ? ? ? protected function application1_creationCompleteHandler(event:FlexEvent):void
? ? ? ? ? ? {
? ? ? ? ? ? ? ? var a:Object = {name:"Leo", info:[1,2,3]};
? ? ? ? ? ? ? ? var b:Object = {name:“Leo”, info:[1,2,2]};
? ? ? ? ? ? ? ? if(isObjectEqual(a,b))
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? lb.text = “Objects are equals!”;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? lb.text = “Objects are not equals!”;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ]]>
? ? >
? ? id=“lb” x=“0″ y=“19″/>
>

dateCompare Trabalhar com datas sempre gera um pouco de trabalho, pois você sempre tem que fazer uma serie de verificações, modificar formatos etc. Temos um método para comparação de datas que pode ser muito util e agilizar seu trabalho. Segue o mesmo esquema dos demais, retorna 0 se datas iguais, 1 se a primeira é maior que a segunda e -1 se a segunda é maior que a primeira. Veja um exemplo:

PLAIN TEXT

MXML:

“1.0″ encoding=“utf-8″?>
xmlns:fx=“http://ns.adobe.com/mxml/2009″
? ? ? ? ? ? ? ?xmlns:s=“library://ns.adobe.com/flex/spark”
? ? ? ? ? ? ? ?xmlns:mx=“library://ns.adobe.com/flex/mx” minWidth=“955″ minHeight=“600″>
? ? >
? ? ? ?
? ? >
? ? >
? ? ? ? [CDATA[
? ? ? ? ? ? import mx.utils.ObjectUtil;
? ? ? ? ? ?
? ? ? ? ? ? private function isDateEqual(dt1:Date,dt2:Date):Boolean
? ? ? ? ? ? {
? ? ? ? ? ? ? ? var retorno:Boolean = false;
? ? ? ? ? ? ? ? var isEqual:int = ObjectUtil.dateCompare(dt1,dt2);
? ? ? ? ? ? ? ? if(isEqual == 0)
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? retorno = true;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return retorno;
? ? ? ? ? ? }
?
? ? ? ? ? ? protected function button1_clickHandler(event:MouseEvent):void
? ? ? ? ? ? {
? ? ? ? ? ? ? ? if(isDateEqual(dt1.selectedDate,dt2.selectedDate))
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? lb.text = "Date are equals!";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? lb.text = "Date are not equals!";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ]]>
? ? >
? ? id=“dt1″ x=“10″ y=“10″/>
? ? id=“dt2″ x=“113″ y=“10″/>
? ? x=“216″ y=“12″ label=“Compare” click=“button1_clickHandler(event)”/>
? ? id=“lb” x=“297″ y=“21″/>
>

stringCompare é usado para comparar duas strings, um detalhe é que existe um terceiro parametro boolean para dizer se a comparação sera feita diferenciando letras maiusculas de minusculas ou não. Veja um exemplo:

PLAIN TEXT

MXML:

“1.0″ encoding=“utf-8″?>
xmlns:fx=“http://ns.adobe.com/mxml/2009″
? ? ? ? ? ? ? ?xmlns:s=“library://ns.adobe.com/flex/spark”
? ? ? ? ? ? ? ?xmlns:mx=“library://ns.adobe.com/flex/mx” minWidth=“955″ minHeight=“600″>
? ? >
? ? ? ?
? ? >
? ? >
? ? ? ? [CDATA[
? ? ? ? ? ? import mx.utils.ObjectUtil;
? ? ? ? ? ?
? ? ? ? ? ? private function isStringsEqual(str1:String,str2:String):Boolean
? ? ? ? ? ? {
? ? ? ? ? ? ? ? var retorno:Boolean = false;
? ? ? ? ? ? ? ? var isEqual:int = ObjectUtil.stringCompare(str1,str2,true);
? ? ? ? ? ? ? ? if(isEqual == 0)
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? retorno = true;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return retorno;
? ? ? ? ? ? }
?
? ? ? ? ? ? protected function button1_clickHandler(event:MouseEvent):void
? ? ? ? ? ? {
? ? ? ? ? ? ? ? if(isStringsEqual(t1.text,t2.text))
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? lb.text = "Strings are equals!";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? lb.text = "Strings are not equals!";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ]]>
? ? >
? ? id=“t1″ x=“10″ y=“10″/>
? ? id=“t2″ x=“146″ y=“10″/>
? ? x=“282″ y=“10″ label=“Compare” click=“button1_clickHandler(event)”/>
? ? id=“lb” x=“363″ y=“19″/>
>

toString funciona mais ou menos como o print_r do PHP, torna legivel um objeto e toda sua estrutura hierarquica. Veja um exemplo:

PLAIN TEXT

MXML:

“1.0″ encoding=“utf-8″?>
xmlns:fx=“http://ns.adobe.com/mxml/2009″
? ? ? ? ? ? ? ?xmlns:s=“library://ns.adobe.com/flex/spark”
? ? ? ? ? ? ? ?xmlns:mx=“library://ns.adobe.com/flex/mx” minWidth=“955″ minHeight=“600″ creationComplete=“application1_creationCompleteHandler(event)”>
? ? >
? ? ? ?
? ? >
? ? >
? ? ? ? [CDATA[
? ? ? ? ? ? import mx.events.FlexEvent;
? ? ? ? ? ? import mx.utils.ObjectUtil;
?
? ? ? ? ? ? protected function application1_creationCompleteHandler(event:FlexEvent):void
? ? ? ? ? ? {
? ? ? ? ? ? ? ? var a:Object = {name:"Bob", info:[1,2,3]};
? ? ? ? ? ? ? ? var b:Object = {name:“Alice”, info:a};
? ? ? ? ? ? ? ? trace(b);
? ? ? ? ? ? ? ? trace(ObjectUtil.toString(b));
? ? ? ? ? ? ? ? //output in console
? ? ? ? ? ? ? ? /*
? ? ? ? ? ? ? ? first trace
? ? ? ? ? ? ? ? [object Object]
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? second trace
? ? ? ? ? ? ? ? (Object)#0
? ? ? ? ? ? ? ? info = (Object)#1
? ? ? ? ? ? ? ? info = (Array)#2
? ? ? ? ? ? ? ? [0] 1
? ? ? ? ? ? ? ? [1] 2
? ? ? ? ? ? ? ? [2] 3
? ? ? ? ? ? ? ? name = “Bob”
? ? ? ? ? ? ? ? name = “Alice”
? ? ? ? ? ? ? ? */
? ? ? ? ? ? }
? ? ? ? ]]>
? ? >
>

copy é usado para fazer uma cópia de um objeto usando um algoritimo de serialização nativa do Flash. Player. Muito útil para se trabalhar com objetos customizados e coleções.

DOWNLOAD SOURCE

Veja outros métodos:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/utils/ObjectUtil.html
ActionScript 3.0 Reference for the Adobe Flash Platform

Nov 24

UX Specialist – Links para “entrar na profissão”

Escrito por DClick Team em 1, 2009, 4, 6, action, api, app, AR, arte, Artigo, Artigos, as2, BI, blog, Blogs, Blueprint, business, camp, Carreira, case, collection, Curso, Cursos, custom, Design, designer, Dica, Download, DRE, email, engine, err, erro, error, event, events, Experience Design, for, futuro, gc, git, Google, handle, HCI, html, ide, Ideas, IE, if, int, interface, Introdução, Links, lista, live, LOB, Mac, Mate, mg, MIX, motion, O, on, online, oop, PHP, POO, print, produto, pt, research, rest, RIA, Ria’s Geral, RoR, Sem categoria, site, social, spark, Sun, tag, TAT, team, Tech, Tecnologia, Tema, tool, try, Tutorial, Twitter, UI, user experience, utf8, UX, Ved, Vídeo, vs, web, web design, Wordpress, Workshop, XP, yahoo @ 11 24th, 2010 | via http://blog.dclick.com.br/pt/ | Sem comentários

What the hell is UX, e IxD – Design de Interação, abordagem direta uma galera tem me perguntado sobre a carreira de UX Specialist, o que é, o que deixa de ser, onde encontra-se material, etc.

Vou resumir, ou tentar.

UX Specialist é o indivíduo especializado em User Experience, a essa altura você deve dizer “você está de brincadeira comigo…”, mas não poderia deixar de enfatizar isso, já que, quando falo especialista, é especialista mesmo, é alguém que entende o assunto, não é apenas um termo.
Portanto, sem entrar no mérito da profissão, já que não existe faculdade para formar especialistas em UX, e muito menos cursos sobre o assunto. Os profissionais vem de diversas áreas do design, mas quando falamos em usuário temos que pensar em algo muito peculiar, INTERFACES, a maioria esmagadora vem do segmento de design de interfaces e do estudo em IxD.

Se em um futuro próximo eu ver de acordo com a perguntas dos leitores que há ainda falta de entendimento em relação a esse tema eu posso postar o que é essa carreira em alguns dos seus detalhes, por hora vou municiar vocês com material, muito material, links e mais links para você encontrar o que quiser a respeito de User Experience, mas já aviso, em português não tem coisa boa, não significativa, mas com esforço você encontra, portanto terá que ser em inglês, e se, teu inglês não está lá aquelas coisas faz um esforcinho e pede ajuda ao titio Google, garanto que vai valer a pena.

De quebra, vou dar um Help com um vídeo de introdução muito interessante… do Don Norman, (@becknovaes gosta muito dos conceitos desse especialista), acho o velhinho simpático e com uma bagagem invejável, o vídeo tem legenda em português, vale a pena.

Don Norman: 3 maneiras pelas quais o design te faz feliz

Você vai perceber nos links abaixo que haverá temas relacionados a IxD, IA, etc, entender todos esses assuntos fazem parte do papel de UX Specialist.

Isso não significa que eu concordo com todos os pontos de vistas de todo esse conteúdo, isso é material de investigação, de estudo. Eu tenho minhas próprias convicções sobre essa matéria User Experience, devido a meus anos de trabalho na área, pelas milhares de tentativas de erros e acertos.

Espero que com esse material você encontre o que precisa para largar de vez esse tema ou amar.

UX BOOKS

UX Primer

The Design of Everyday Things by Don Norman
Don’t Make Me Think by Steve Krug
Não me faça pensar, Steve Krug o mesmo de cima só que em português

Design Thinking

Sketching User Experiences by Bill Buxton
Emotional Design: Why We Love (or Hate) Everyday Things by Don Norman
The Inmates Are Running the Asylum by Alan Cooper

.

Strategy

Subject To Change by Peter Merholz, Todd Wilkens, Brandon Schauer, and David Verba

Process

The Elements of User Experience by Jesse James Garrett
About Face 3 by Alan Cooper, Robert Reimann, and David Cronin
A Project Guide to UX Design by Russ Unger and Carolyn Chandler

.

Principles

Designing for the Social Web by Joshua Porter
Designing Interfaces by Jenifer Tidwell
Designing Visual Interfaces by Kevin Mullet
Information Architecture for the World Wide Web (the Polar Bear book) by Louis Rosenfeld and Peter Morville
Information Architecture: Blueprints for the Web by Christina Wodtke and Austin Govella
Designing Web Navigation by James Kalbach
Web Form Design by Luke Wroblewski

.

Activities

Usability Engineering by Jakob Nielsen
Handbook of Usability Testing by Jeffrey Rubin and Dana Chisnell
Observing the User Experience by Mike Kuniavsky

.

Documentation

Communicating Design by Dan Brown

.

Extra Credit

Set Phasers on Stun: And Other True Tales of Design, Technology, and Human Error by S. M. Casey

.

UX BLOGS

Konigi by Michael AngelesTips, tools and techniques for being a better user experience designer
Disambiguity by Leisa ReicheltThe ins and outs of designing a product with an existing, and passionate, community
EverydayUX by Alex RainertA fresh look at the world around us through UX-tinted glasses
Graphpaper by Christopher FaheyCritical analysis of some of the toughest issues facing UX designers today
inspireUX by Catriona CornettCubical-wall worthy quotations from a variety of practitioners on how and why to create positive user experiences
Bokardo – Social Design by Joshua PorterFor everything you need to consider when designing socially-focused stuff
Logic + Emotion by David ArmanoReusable visualizations and valuable synthesis at the intersection of user experience design, marketing and business
Putting People First by ExperientiaA great resource for all things UX from around the globe
Brain Sparks by User Interface Engineering (UIE)Inside the brilliant minds of user research pioneer Jared Spool and his team
Design for Service by Jeff HowardInsights into all the ways companies need to be communicating with their customers, outside of their websites
UX Booth by Redd Horrocks, Matthew Kammerer, David Leggett, and Andrew Maier

.

UX PUBLICATIONS

Boxes and ArrowsJournal dedicated to discussing, improving and promoting the work of the information architecture community
interactionsMagazine including timely articles, stories, and content related to the interactions between experiences, people, and technology, published by the Association for Computing Machinery
UXmattersInsights and inspiration for the user experience community written by many distinguished practitioners
Core77Industrial Design content and community site – articles, discussions, interviews and resources

.

LOCAL EVENTS

.

ORGANIZATIONS

.

MAILING LISTS

.

WEBINARS

UIE’s Virtual SeminarsA monthly series of online seminars giving you the chance to hear the latest perspectives in the world of design from the field’s premier experts.
$129 each. 90 minutes.
Rosenfeld Media’s Future Practice WebinarsThe cutting edge of contemporary user experience research and design methods and practices.
$99 each. 60 minutes.
Adaptive Path’s Virtual Seminars$129 each. 75 minutes.
Smart Experience online material

.

WORKSHOPS

UIE RoadshowIn this full-day, in-depth seminar you’ll discover the key experience-design factors, analyze your team’s strengths and weaknesses, create an experience vision, and learn the role of delight.
AdaptivePath’s UX IntensiveThis four-day workshop series is for experienced professionals wanting to take their practice to the next level.
Cooper U A practical collection of courses that help product team members improve their effectiveness from early planning all the way through implementation.

.

CONFERENCES

Inspirational

Good Experience Live (GEL)A conference and community exploring good experience in all its forms — in business, art, society, technology, and life.
IDEA ConferenceThe world’s foremost thinkers and practitioners sharing the big ideas that inspire, along with practical solutions for the ways people’s lives and systems are converging to affect society.
Adaptive Path’s Managing Experience (Mx)Thought leaders from major corporations show you how smart and visionary management will help you successfully compete in a difficult economy.

.

Practical

UIE’s User Interface Conference Examining the biggest issues in the world of web design, information architecture, and usability.
NN/g’s Usability Week A three-day usability camp, a three-day intensive session on interaction design, and several specialized, day-long tutorials on core usability topics. Come for as few or as many days as you want.
UPA Tutorials, workshops, Experienced Practitioners program, then two and a half days packed with presentations, Idea Markets, and opportunities to network with other user experience professionals.

.

Mixed

IxDA Interaction Conference Three days of inspirational and tactical sessions geared at anyone who practices Interaction Design, as well as a day of pre-conference workshops.
IA Summit The premier gathering place for information architects and other user experience professionals. Two days of pre-conference sessions, two keynotes and over 50 presentations.
Adaptive Path’s UX Week A mix of inspiring talks from recognized thought leaders and hands-on workshops delivering takeaway skills, this event delivers for user experience professionals at all levels — directors, managers, and practitioners.
UIE’s Web App Summit The four-day Summit includes two days of intensive full-day workshops and two more days of featured presentations from world-renown experts, to give you fresh perspectives and new insights on today’s web app design challenges.
UX Australia 3-day user experience design conference, with inspiring and practical presentations, covering a range of topics about how to design great experiences for people.
UX London A unique three-day event combining inspirational talks with in-depth workshops presented by some of the industry’s biggest names.

.

Academic

ACM’s CHI The premier international conference for the field of human-computer interaction.

.

SCHOOLING

Human Computer Interaction

Human Computer Interaction Institute at Carnegie Mellon University
(where I received a bachelor’s and master’s degree)
Master of Science in Information – HCI Specialization at University of Michigan
Full list of HCI degree programs

.

Interaction Design

Master of Design in Interaction Design at Carnegie Mellon University
Master of Fine Arts in Interaction Design at School of Visual Arts
(starting fall 2009)
Undergraduate minor in Interaction Design at Savannah College of Art and Design
http://www.designdeinteracao.com.br/ Puc de Minas
Pós na FIT de Design de Interação Curso recente criado na Faculdade Impacta de Tecnologia – SP capital

.

Misc

Interactive Telecommunications Program at NYU’s Tisch School of the Arts
Institute of Design at Illinois Institute of Technology

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath

« Entradas anteriores |