Hello Everbody,
Hoje iremos começar já a desenhar a aplicação no Adobe Flex, então para iniciar-mos, crie um novo projeto no Flex chamado MTBRanking, para quem não tem conhecimento no Flex Builder ainda, basta clicar em File/New/Flex Project, em Project name, digite MTBRanking, escolha a pasta onde sua aplicação irá ser criada (é importante que esteja na pasta pública do Apache, isso poderá mudar dependendo de cada ambiente que você esteja usando, poderá ser htdocs ou apenas www), clique no botão Finish.
Ok agora com a nova aplicação criada, adicione um VDividedBox, defina as propriedades de X e Y como 0 (zero) e Width e Height como 100%.
Agora dentro do VDividedBox, adicione um Panel e um ViewStack, automáticamente o Flex irá colocar um abaixo do outro, agora vamos ‘dar nome aos bois’ só para ficar mais fácil de identificar-mos os objetos na aplicação, neste caso, defina o ID do Panel = ‘panelTime’ e o ID do ViewStack = ‘vsDados’, também defina o width dos dois componentes = ‘100%’, e o Title do panelTime = ‘CRONOMETRAGEM’, o código deverá estar dessa forma:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:VDividedBox width="100%" height="100%"> <mx:Panel id="panelTime" width="100%" height="200" layout="absolute" title="CRONOMETRAGEM"> </mx:Panel> <mx:ViewStack x="22" y="296" id="vsDados" width="100%" height="100"> <mx:Canvas label="View 1" width="100%" height="100%"> </mx:Canvas> </mx:ViewStack> </mx:VDividedBox> </mx:Application>
Agora, adicione dentro do panelTime um Label, e defina as seguintes propriedades para ele:
ID = labelCronometro
text = ‘00:00:00′
fontSize = ‘100′
horizontalCenter = ‘0′
verticalCenter = ‘0′
Agora arraste para dentro do ViewStack 4 LinkButtons, defina a propriedade fontSize=’20′ para todos os quatro, e na sequencia configure cada um da seguinte forma:
LinkButton1 -> label=”Cadastro de Categorias”, x=”10″, y=”10″
LinkButton2 -> label=”Cadastro de Ciclistas”, x=”10″, y=”53″
LinkButton3 -> label=”Registrar Tempo”, x=”394″, y=”10″
LinkButton4 -> label=”Resultado”, x=”394″, y=”53″
O código final da aplicação tem que estar dessa maneira:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:VDividedBox width="100%" height="100%"> <mx:Panel id="panelTime" width="100%" height="200" layout="absolute" title="CRONOMETRAGEM"> <mx:Label id="labelCronometro" text="00:00:00" fontSize="100" horizontalCenter="0" verticalCenter="0"/> </mx:Panel> <mx:ViewStack x="22" y="296" id="vsDados" width="100%" height="100"> <mx:Canvas label="View 1" width="100%" height="100%"> <mx:LinkButton x="10" y="10" label="Cadastro de Categorias" fontSize="20"/> <mx:LinkButton x="10" y="53" label="Cadastro de Ciclistas" fontSize="20"/> <mx:LinkButton x="394" y="10" label="Registrar Tempo" fontSize="20"/> <mx:LinkButton x="394" y="53" label="Resultado" fontSize="20"/> </mx:Canvas> </mx:ViewStack> </mx:VDividedBox> </mx:Application>
Por enquanto é só pessoal, essa próxima semana estarei dando continuidade a aplicação.
Forte abraço





Últimos Comentários