Guide för första Flex projektet i Flash Builder 4

 

Denna nybörjarguide för flashutvecklare går igenom hur du skapar ditt första Flex projekt i Flash Builder 4. Vi kommer att skapa en applikation som skriver ut "Hello World" på skärmen. Du behöver ingen tidigare erfarenhet av Flash, ActionScript 3.0 eller Flex för att ta del av denna guide.

Denna artikel beskriver hur man skapar ett Flex projekt i Flash Builder 4. Är du istället intresserad av hur man skapar ett ActionScript projekt i Flash Builder 4 så hittar du en guide om det här.

Du behöver programmet Flash Builder 4 från Adobe för att kunna följa med i denna artikel. Om du inte redan har detta program kan du hämta en 30 dagars gratis version på Adobes hemsida. Installera och starta programmet.

Efter att du har startat Flash Builder är det dags att skapa ditt första Flex projekt. Längst upp till vänster i programmet har du en meny. Klick på File som finns längst till vänster i menyraden, välj New i menyn som fälls ut och välj därefter Flex Project i nästa meny som fälls ut åt höger.

Flex menu tree

När du har gjort detta kommer ett nytt fönster att öppnas. I det översta textfältet i detta fönster skriver du in namnet på dit projekt. Jag har valt namnet HelloWorld för mitt projekt. Vi kan lämna övriga inställningar som de är och klickar istället på Finish, längst ner till höger.

Flex project wizard

Därefter kommer projektet att skapas åt oss och filen Main.mxml öppnas. Detta är huvudfilen för vårt projekt. I slutet på filen letar vi upp </fx:Declarations/> och </s:Application/>. Mellan dessa skriver vi till <s:Label text="Hello World" />. Label är ett textobjekt som vi vill visa på skärmen och text anger strängen som vi vill visa i textojektet, i vårt fall Hello World.

<?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" minWidth="955" minHeight="600">
   <fx:Declarations>
      <!-- Place non-visual elements (e.g., services, value objects) here -->
   </fx:Declarations>
   <s:Label text="Hello World" />
</s:Application>

Det var allt som behövdes för att skapa vår första flex applikation som visar texten Hello World på skärmen. Nu återstår bara att köra applikationen. Detta gör vi genom att klicka på Run-knappen Run button i knapp panelen längst upp i Flash Builder fönstret. Eftersom vi inte har sparat Main.mxml sen vi lade till textobjektet så kommer Flash Builder fråga om vi vill spara innan vi kör applikationen. Klicka på OK. Nu kommer ett webbläsarfönster att öppnas och om allt har gått rätt så kommer du att se Hello World i fönstret. Du har precis skapat ditt första Flex projekt med Flash Builder 4. Grattis! Vill du läsa fler guider för flashutvecklare hittar du det här.

Behöver ni hjälp av en rutinerad frilansande flashutvecklare eller en Flash konsult? Tveka i så fall inte att höra av er till mig här. Vill ni veta mer om vad jag har att erbjuda som frilansande flashutvecklare så kan ni läsa mer här.