Guide för första Flex mobilprojekt, Flash Builder 4.5

 

Denna guide för nybörjare kommer att lära dig hur du skapar dit första Flex Mobile Project i Flash Builder 4.5. Vi kommer att skapa en enkel applikation som skriver ut Hello World på den mobila enhetens skärm. Du behöver ingen tidigare erfarenhet av Flash, ActionScript 3.0 eller Flex för att kunna följa med i denna introduktion till utveckling för mobiltelefoner och surfplattor. Du kommer lära dig hur du skapar kod som kan köras på både Android och iPhone / iPad enheter.

Denna guide beskriver hur man skapar ett Flex Mobile Project i Flash Builder 4.5. Om du letar efter en guide för hur man skapar ett ActionScript Mobile Project i Flash Builder så kommer du snart att kunna hitta det här med.

Till att börja med behöver du programmet Flash Builder 4.5 från Adobe. Om du inte har detta program på din dator så kan du ladda ner en 60 dagars gratis testversion från Adobes hemsida. Installera och starta programmet.

När du har startat programmet så är det dags att dit första Flex Mobile Project. Längst upp till vänster i programmet så hittar du en menyrad. Lokalisera File och klicka på den. Välj sen New i menyn som öppnas nedåt och därefter Flex Mobile Project i menyn som öppnas åt höger.

Flex meny träd

Detta kommer att öppna fönstret Create a Flex Mobile AIR Project som hjälper dig att skapa projektet. Ange ett namn på dit projekt i det första textfältet Project name. Jag valde HelloWorldMobileFlex som projektnamn. Vi kan lämna övriga inställningar som de är. Klicka på Next längst ner i fönstret.

Flex projekt skapar hjälp

Nästa fönster är nytt för Flash Builder 4.5 och det är här som du anger inställningar som är specifika för mobila enheter. Först har vi Target platforms, här kan du välja vilken eller vilka plattformar du vill utveckla din app för. BlackBerry Table OS och Google Android finns med i Flash Builder 4.5. Om du saknar Apple iOS så behöver du ladda ner den senaste versionen av Flash Builder. Apple iOS blev tillgänglig i Flash Builder 4.5.1. Jag lämnar alla tre markerade så kan vi utveckla appar som fungerar att köra på alla tre plattformarna.

Nästa inställning är Application Template. Här kan du välja mellan tre olika mallar för hur din app ska vara uppbyggd. Vi kan välja mellan en blank mall, Blank, en vy baserad, View-Based Application och slutligen en app som är baserad på flikar, Tabbed Application. Jag lämnar den på standardvalet View-Based Application. För denna mall får du ange en titel på första vyn som visas när appen startar. Jag ändra denna till Hello World View.

Bredvid fliken Application Template finns två flikar till, Permissions och Platform Settings. Vi behöver inte ändra något där i denna guide så jag hoppar över dem.

Längst ner i fönstret finns Application settings med tre val

  • Automatically reorient. Om denna är vald så anpassar kommer din app automatiskt att rotera och anpassa sig till hur användaren håller telefonen. Porträtt eller landskaps vy.
  • Full screen. Om denna är vald så kommer appen att visas i fullskärm och därmed dölja statusbaren längs upp i telefonen.
  • Automatically scale application for different screen densities. Om denna är vald så kommer din app att automatiskt skala om sig och anpassa sig efter storleken och punkttätheten på användarens mobilskärm.
  • För att göra det enkelt lämnar jag alla tre med deras standardinställningar. Klicka på Finish längst ner till höger i fönstret.

    Flex project wizard mobile settings

    Detta kommer att skapa projektet och öppna två filer åt dig. Vi kommer att arbeta i den andra av dem, HelloWorldMobileFlexHellloWorldView.mxml, Flex har redan skapat följande kod åt oss:

    <?xml version="1.0" encoding="utf-8"?>
    <s:View 
    	title="Helllo World View"
    	xmlns:fx="http://ns.adobe.com/mxml/2009" 
    	xmlns:s="library://ns.adobe.com/flex/spark">
    	<fx:Declarations>
    		<!-- Place non-visual elements (e.g., services, value objects) here -->
    	</fx:Declarations>
    </s:View>

    Notera raden title="Hello World View", detta är titeln som vi angav tidigare. Om vi körde applikationen nu skulle vi bara se en titelbar med Hello World View i sig. Låt oss lägga till något mer innan vi testar att köra vår app. Låt oss skriva Hello World på mobiltelefonens skärm. Det gör vi genom att lägga till följande kod näst längs ner i filen:

    <s:Label text="Hello World" />

    Vår kod ser nu alltså ut enligt följande:

    <?xml version="1.0" encoding="utf-8"?>
    <s:View 
    	title="Helllo World View"
    	xmlns:fx="http://ns.adobe.com/mxml/2009" 
    	xmlns:s="library://ns.adobe.com/flex/spark">
    	<fx:Declarations>
    		<!-- Place non-visual elements (e.g., services, value objects) here -->
    	</fx:Declarations>
    	<s:Label text="Hello World" />
    </s:View>

    Nu är vi redo att testa vår app. Klicka på Run button Run button. Då kommer fönstret Run Configurations att öppnas eftersom detta är första gången som vi kör detta projekt. Vi börjar med att köra projektet på datorn på en simulerad mobil enhet. Jag har valt Google Android under Target platform och Google Nexus One som enheten som ska simuleras. Detta är alla val vi behöver göra. Klicka nu på Run längs ner till höger i fönstret för att testa appen på den simulerade enheten.

    Run Configurations

    Om allt har gjorts rätt så ska du nu se följande fönster på din dator.

    Running the app on desktop

    Du har nu skapat din första mobila applikation för en Android telefon eller platta. Men låt oss nu testa med en riktig Android telefon istället för en simulerad på datorn. För att följa med i resten av guiden behöver du en Android Telefon eller Android surfplatta med minst version 2.2 av Android även kallad Froyo.

    Innan vi kan testa på en Android telefon måste vi tillåta USB debugging i telefonen. Du hittar denna inställning under Settings > Applications > Development och markera USB debugging där. När detta är gjort kan du ansluta din Android telefon med en USB kabel till datorn.

    I Flash Builder klickar du sen på den lilla svarat pilen bredvid Run knappen Run button arrow. och väljer sedan Run Configurations i i menyn som öppnas. (Klicka inte bara på Run knappen som tidigare).

    Ändra Launch method till On device i fönstret som öppnas. Klicka sedan på Run längst ner till höger i fönstret för att köra appen på din Android telefon eller Android platta.

    Nedan ser du mitt resultat när jag testar appen på en Samsung Galaxy S2.

    Running the app on a device

    Om det inte fungerar kan det bero på att du inte har rätt drivrutiner installerade på din dator för att ansluta till telefonen. För mer information om detta kan du klicka på länken Device Connection Help som du hittar i Run Configurations window som du använt ovan.