Flex + PSD Layout = Free online Blog, Implementando o layout

www.msdevstudio.com
omo tin!a "alado no post Flex + PSD Layout + msdevstudio = "ree online #log no meu #log, $%
tin!a criado o layout em p!otos!op, &ue agora disponi#ili'o a&ui para download &ue $%
contem todos os layers com a devida separa()o por grupos * p!otos!op S+ ,.
- primeiro passo a "a'er depois do layout "eito . separar os layers de imagem relamente
necess%rios &ue n)o possam ser "eitos atrave' do "lex, resumindo s)o todos os layers de
imagem com e"eitos.
/amos come(ar por exportar o topo, "undo e logo, para isso vamos ocultar os grupos0
1Bullets
12extos
13rid Images
1Logo
e deixar apenas o grupo Layout visivel como mostra a imagem0
dentro do grupo layout vamos ocultar o layer "undo e o topo4"undo "icando com as pe(as do
nosso layout separadas em "undo transparente, e vamos proceder 5 separa()o do layout, para
isso escol!emos o 6ectangular 7ar&ee 2ool *tecla 7,, e selecionar a area do topo, sem
interromper o seu conteudo, depois de seleccionado, carreguem nas teclas S8IF2+26L+ para
copiar o conteudo dos layers todos nessa selec()o, e carregem nas teclas 26L+9 para criar
uma nova imagem, &ue estar% de"inida $% com as medidas da sel()o, clicam em -: e carregam
nas teclas 62L+/, e voil%, t;m o vosso topo numa s< imagem.
/amos repetir estas opera(=es para o "undo e para o lado direito, tendo no "inal + areas em +
imagems, como nas imagens em #aixo0
Imagem topo0
Imagem direita0
e imagem "undo0
9otem &ue a &ualidade a&ui apresentada no documento n)o . a mesma, muito menos o seu
aspecto...
/amos ent)o guardar as imagens optimi'adas para we#, clicando nas teclas0
S8IF2+26L+>L2+S e escol!am do lado direito em present o P931?@ com o AAtransparencyAA
seleccionado. 3uardem as + imagens como topo, "undo e rig!t numa pasta assets.
-cultem agora o grupo layout, e colo&uem visi#ilidade no grupo logo, seleccionem com o
mar&uee tool *7, a areado logo, depois copiem *S8IF2+62L+,, criem uma nova imagem
*62L+9, e depois 62L+/, de seguida *S8IF2+62L+>L2+S, e salvem em png1?@ transparente
como nome de logo na mesma pasta assets.
>gora vamos ao grupo de #ullets, ocultem o grupo logo e metam visi#ilidade no grupo Bullets,
seleccionem o icon 6SS com o mar&uee tool *m, e "a(am o mesmo processo guardando como
nome de imagem rss0
7ar&uee 1B S8IF2+62L+ 1B 62L+9 1B 62L+/ 1B 62L+S8IF2+>L2+S 1B P931?@ 1B rss.png
Fa(am a mesma opera()o para apenas um icon de coment%rios *layer ?C, e apenas um para o
incon de calend%rio em #ranco *layer calendar4#ranco,, e salvem estes "ic!eiros com os nomes
comments e calend respectivamente.
D "inalmente temos o nosso layout pronto para ser utili'ado no "lex.
/amos ao "lex criar um novo pro$ecto com o nome AAtesteFlexBlogAA para $% n)o escol!emos
&ual&uer tipologia de servidor.
/amos copiar a pasta assets para a nossa pasta src na directoria do
nosso pro$ecto, "icando a sua estrutura como na imagem ao lado0
9)o vou estar a explicar passo a passo como inserir os nossos assets no pro$ecto, vou apenas
mostrar todo o c<digo $% com o layout implementado...
> nossa implementa()o do layout ser% muito simples e #em r%pida, usei as imagens como
em#ed para &ue n)o existam "al!as ao carregar o layout.
Dst% tam#.m dividida em duas partes, o testFlexBlog.mxml contendo a nossa aplica()o
completa e o layout.css &ue contem a "ol!a de estilo do nosso aplicativo, para de"inir as cores
da linE#ar, datagrid e a aplica()o em si.
7ais 5 "rente iremos $untar mais algumas declara(=es neste layout.css
Para $% "i&uem com o c<digo do nosso layout terminado em "lex e ve$am como o c<digo .
simples...
Dnt)o a&ui vai o c<digo usado0
testeFlexBlog.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="ttp:!!""".ado#e.com!$00%!mxml" la&out="a#solute">
<mx:'t&le source="la&out.css" !>
<mx:(anvas "idt="800" eigt=")00" ori*ontal(enter="0" vertical(enter="0"
#order(olor="+010101">
<mx:,mage top="0" ori*ontal(enter="0"
source="-.m#ed/source=assets!topo.png0"!>
<mx:,mage source="-.m#ed/source=assets!fundo.png0" ori*ontal(enter="0"
#ottom="0"!>
<mx:,mage source="-.m#ed/source=assets!rigt.png0" rigt="%" top="11)"
eigt="2%$"!>
<mx:,mage source="-.m#ed/source=assets!logo.png0"
ori*ontal(enter="-$$$" top="2$"!>
<mx:,mage x="%3$" &="2$" source="-.m#ed/source=assets!rss.png0"!>
<mx:4ie"'tac5 id="vie"stac51" "idt="1)8" eigt="228"
ori*ontal(enter="-130" top="12$">
<mx:(anvas la#el="678." "idt="1009" eigt="1009">
<mx::a#el text=";:7<" "idt="11)" eigt="18"
font=eigt="#old" font'i*e="1$" color="+01)3;0" top="1" ori*ontal(enter="-1$8"!>
<mx:>ata<rid x="?" &="$)" "idt="1%1" eigt="203"
#order(olor="+020202">
<mx:columns>
<mx:>ata<rid(olumn eader@ext="Altimos
artigos..." !>
<!mx:columns>
<!mx:>ata<rid>
<!mx:(anvas>
<mx:(anvas la#el="A;7A@" "idt="1009" eigt="1009">
<!mx:(anvas>
<mx:(anvas la#el="B:.C" "idt="1009" eigt="1009">
<!mx:(anvas>
<mx:(anvas la#el="@A@7D,A:'" "idt="1009" eigt="1009">
<!mx:(anvas>
<mx:(anvas la#el=">7=E:7A>'" "idt="1009" eigt="1009">
<!mx:(anvas>
<!mx:4ie"'tac5>
<mx::in5;ar dataFrovider="vie"stac51" ori*ontal(enter="181" top="100">
<!mx::in5;ar>
<mx::a#el text=">7=E:7A>'" "idt="11)" eigt="18" font=eigt="#old"
font'i*e="1$" color="+01)3;0" top="1?0" ori*ontal(enter="%?"!>
<mx::a#el text="F7'@ D7::" "idt="11)" eigt="18" font=eigt="#old"
font'i*e="1$" color="+01)3;0" top="111" ori*ontal(enter="%?"!>
<mx:>ata<rid x="203" &="1)1" "idt="1%3" eigt="1?%"
#order't&le="solid" #order(olor="+010101">
<mx:columns>
<mx:>ata<rid(olumn eader@ext="ArGuivo" "idt="100"
dataBield="col1"!>
<mx:>ata<rid(olumn eader@ext="Eotas" "idt="$00"
dataBield="col$"!>
<mx:>ata<rid(olumn eader@ext=">load" "idt="%3"
dataBield="col1"!>
<!mx:columns>
<!mx:>ata<rid>
<mx:>ata<rid x="203" &="1?1" "idt="1%3" eigt="$$?"
#order't&le="solid" #order(olor="+010101">
<mx:columns>
<mx:>ata<rid(olumn eader@ext="Artigos recentes"
"idt="100" dataBield="col1"!>
<mx:>ata<rid(olumn eader@ext="" dataBield="col$"
"idt="%3"!>
<!mx:columns>
<!mx:>ata<rid>
<!mx:(anvas>
<!mx:Application>
layout.css:
/* CSS file */
Application H
#ac5ground(olor: +000000I
#ac5ground<radient(olors: +111111J +111111I
teme(olor: +333333I
color: +ffffffI
K
:in5;ar H
#order't&le: noneI
roll7ver(olor: +111111I
selection(olor: +%%%%%%I
color: +00%%ffI
textDoll7ver(olor: +ffffffI
text'elected(olor: +ffffffI
disa#led(olor: +ccccccI
drop'ado".na#led: falseI
drop'ado"(olor: +330000I
K
>ata<rid H
#ac5ground(olor: +111111I
alternating,tem(olors: +111111J +000000I
eader(olors: +111111J +000000I
ori*ontal<rid:ines: falseI
ori*ontal<rid:ine(olor: +ccccccI
vertical<rid:ines: falseI
useDoll7ver: falseI
roll7ver(olor: +11%%33I
textDoll7ver(olor: +ffffffI
selection(olor: +333333I
color: +ffffffI
text'elected(olor: +330000I
drop'ado".na#led: falseI
eader't&leEame: "m&data<rid6eader't&le"I
K
.m&data<rid6eader't&le H
color: +ffffffI
K
omo podem ver a implementa()o n)o . assim t)o complicada como isso, e d% ao nosso
aplicativo um aspecto muito limpo e simples &ue . o &ue se pretende a &uando de uma
aplica()o.
- &ue vou proceder agora . 5 utili'a()o do am"p!p para comunicar com a #ase de dados do
meu #log para devolver o &ue pretendo para as instan(ias da min!a aplica()o, como vou usar
#ases de dados do wordpress "acilmente pode ser implantado em &ual&uer outro #log
wordpress.
> estrutura &ue pretendo apresentar pode ser vista pelos items dos menus &ue colo&uei na
linE#ar, apresentando no viewstacE dos ultimos +FG topicos por extenso na na categoria 8-7D,
na categoria "lex ser)o apresentados os ultimos + posts &ue "oram colocados na categoria Flex,
o mesmo se passar% com 2utoriais. Dm Downloads e >cerca ser% apresentada as in"orma(=es
das paginas >cerca e Downloads do meu #log *actualmente sem pagina acerca,.
Fi&uem ent)o com o aspecto do nosso layout em "lex, $% com as datagridAs0
-ra ent)o a&ui est% o nosso layout completamente implementado em "lex, numa aplica()o &ue
pouco mais imagens ir% levar, apenas com ?HIE#, ou se$a, contando com &ue a "rameworE
ocupe cerca de ?JJE# mais ?GE# da runtime temos o nosso layout incorporado no "lex com
cerca de I?E#... Bom, agora n)o t;m desculpa para n)o a#usarem do P!otos!op ou do
FireworEs ou, gratuitamente, do 3I7P para contruirem o layout da vossa aplica()o.
omo podem ver, da importa()o do p!otos!op para o "lex, &uase nada se perdeu, ali%s,
algumas coisas at. "icaram mais limpas.
9a ultima parte do meu tutorial A>do#e "lex a partir do 'eroA irei terminar esta aplica()o e
mostrar todo o c<digo &ue ser% envolvido no "lex, "a'endo &ue o os seguidores do meu tutorial
consigam "a'er a sua primeira aplica()o completa.
7%rio Santos
!ttp0FFwww.msdevstudio.com