Flex3 login

Inleiding:
Het is belangrijk dat je deze tutorial stap voor stap door neemt. Vooral voor de beginnende Flex3 programmeur is het erg belangrijk dat je stapsgewijs te werk gaat.
Ik probeer zo duidelijk mogelijk uit te leggen hoe je simpel een goed en leuk login systeem in Flex3 kunt maken.

1. Flex Builder
Om te beginnen zul je de ‘Flex Builder’ van Adobe moeten downloaden en/of installeren. Het is mogelijk om zonder deze builder een applicatie op te zetten, maar ik raad het af.

Wanneer de Flex builder is geinstalleerd en opgestart, kun je eigenlijks vrijwel meteen aan de slag. Om een nieuw project te beginnen klik je op File -> New -> Flex Project (alt - shift - N). Flex maakt nu automatisch de benodigde bestanden voor je aan. Vanaf hier kun je meteen beginnen met uitzoeken van alle mogelijkheden van de Flex Builder.

2. States gebruiken
Het is belangrijk dat je het gebruik van states goed begrijpt. States zijn simpel gezegt pagina’s die toe kunt voegen aan je applicatie.
Klik met je rechtermuis knop op [  ] <Base state>. New State -> Naam: Login -> [x] Set as startstate. Nu heb je je eerste state aangemaakt en deze meteen als ‘’startstate’ ingesteld. Zo heb je aangegeven dat je applicatie bij deze state moet beginnen. Dus elke keer wanneer op je applicatie pagina komt, zul je op de ‘Login’ state terrecht komen.

3. Login Form
Het voordeel van Flex is dat je met een grafische interface gemakkelijk een mooie front-end applicatie kunt maken. Zonder enige actionscript3.0 kennis te hebben, kun je doormiddel van onderdelen op het veld te slepen… een applicatie maken.

Om te beginnen ga je in Design mode beginnen met een Form in het veld te slepen (let op: wel in de login state plaatsen). Deze heb je niet perse nodig, maar omdat we een login systeempje gaan maken… heb ik ervoor gekozen om deze wel te gebruiken. Later in deze tutorial zal ik uitleggen waarom ik hier voor gekozen heb.
Nadat we ons ‘Form’ op de juiste manier hebben uitgelijnd en de juiste grote hebben gegeven, kunnen we de TextInput in het ‘Form’ slepen. Deze moet je een Label naam geven plus het invoer veld een id mee geven.

<mx:Form horizontalCenter="0"
         verticalCenter="-18"
         width="310"
         height="86"
         id="Wc_Form_Login"
         defaultButton="{Wc_Button_Login}">
    <mx:FormItem label="Gebruikersnaam:">
        <mx:TextInput id="Wc_TextInput_Gebruikersnaam"
                      textInput="TextInput_LoginCheck()"/>

    </mx:FormItem>
    <mx:FormItem label="Wachtwoord:">
        <mx:TextInput displayAsPassword="true"
                      id="Wc_TextInput_Wachtwoord"
                      textInput="TextInput_LoginCheck()"/>
    </mx:FormItem>

</mx:Form>

Bij het bovenstaande stukje code kun je zien dat ik ‘TextInput’ id de waarde ‘Wc_TextInput_Gebruikersnaam’ & ‘Wc_TextInput_Wachtwoord’ mee gegeven heb. Het is belangrijk dat je alle onderdelen een uniek id te geven. Zo weet je zeker dat elk onderdeel zijn eigen naam krijgt, waar je later voordeel van hebt.

Vervolgens willen we, wanneer je op enter drukt… dat hij automatisch op de login knop gaat. In een standaard html formuliertje, zal dit automatisch gebeuren. In Flex3 zul je dit zelf aan moeten geven door middel van de defaultButton functie. Dit is een standaard functie binnen flex3 waarmee je aan kunt geven welke butten je naartoe moet gaan wanneer je enter druk. Door middel van het ‘id’ van de button mee te geven, kun je deze functie gebruiken.

<mx:Form horizontalCenter="0"
         verticalCenter="-18"
         width="310"
         height="86"
         id="Wc_Form_Login" 

         defaultButton="{Wc_Button_Login}">

Door middel van de {} tekentjes, kun je aangeven dat je te maken hebt met een ‘id’ van een ander onderdeel.

Vervolgens ga je de login ‘button’ in het veld slepen. Selecteer een positie en geef hem het ‘id’ Wc_Button_Login mee. Deze naam gaven we net mee aan het formuliertje als defaultButton.
Wat je ook meteen wilt doen is de button een zogenaamde ‘click’ event mee te geven. Hiermee kun je actionscript en ac function aanroepen. Wat wij willen is de button gegevens van het formulier, laten door sturen naar een php scriptje… die vervolgens kan controleren of de gebruikersnaam en wachtwoord kloppen.

<mx:Button label="Login !"
           id="Wc_Button_Login"
           enabled="false"
           click="Wc_Http_Service.send();" 

           verticalCenter="25"
           horizontalCenter="105"/>

Door dat we een ‘HTTPService’ mee geven, kunnen we xml doorsturen. Met een <?php $_REQUEST ?> functie in php, kunnen we deze later aanroepen in het script. Wat je vervolgens gaat doen is die HTTPService aanmaken, zodat flex weet wat hij mee moet sturen tijdens de verwerking.

<mx:HTTPService id="Wc_Http_Service"
                result="UserPass_LoginCheck(event)"
                method="post"
                url="http://www.joudomein.nl/Wcustoms_Login_Cpanel.php"
                showBusyCursor="true"
                useProxy="false">
    <mx:request xmlns="">

        <Wc_TextInput_Gebruikersnaam>
           {Wc_TextInput_Gebruikersnaam.text}
        </Wc_TextInput_Gebruikersnaam>
        <Wc_TextInput_Wachtwoord>
           {Wc_TextInput_Wachtwoord.text}
        </Wc_TextInput_Wachtwoord>
    </mx:request>

</mx:HTTPService>

Deze HTTPService is instaat om via de opgegeven url, gegevens door te sturen naar het php bestand.

4. PHP verwerking
Omdat Flex3/Actionscript3.0 geen mogelijkheden bied om direct contact te maken met een bijv. SQL database… zul je dit via php moeten doen. Het volgende .php scriptje haalt de gegevens op, maakt connectie met je database & controleerd of de gegevens correct zijn. De output van deze waardes geeft het systeem in ‘xml’ waardes terug.

<?php
    error_reporting(E_ALL);

    /************************************************/

    /* Authors: Pascal Sopacua & Willem Poortman    */
    /* File: Wcustoms_Login_Cpanel.php              */
    /* Copyright 2008                               */
    /************************************************/

    $db_host        = 'localhost';
    $db_username    = 'USERNAME';
    $db_password    = 'PASSWORD';

    $db_db          = 'DATABASE';

    mysql_connect($db_host, $db_username, $db_password) or die(mysql_error());

    mysql_select_db($db_db) or die(mysql_error());

    //haalt de gegevens op door middel van een $_REQUEST methode
    $wc_cpanel_username = mysql_real_escape_string($_REQUEST['Wc_TextInput_Gebruikersnaam']);

    $wc_cpanel_password = mysql_real_escape_string($_REQUEST['Wc_TextInput_Wachtwoord']);

    $mysql_query = mysql_query("SELECT *
                                FROM gebruikers
                                WHERE gebruikers_naam = '".$wc_cpanel_username."'
                                AND gebruikers_wachtwoord = '".md5($wc_cpanel_password)."'");

    $mysql_results = mysql_num_rows($mysql_query);

    if($mysql_results > 0)
    {

        $mysql_fetch = mysql_fetch_assoc($mysql_query);       
        $wc_cpanel_output = "<loginsuccess>correct</loginsuccess>";       

    }
    else
    {
        $wc_cpanel_output = "<loginsuccess>incorrect</loginsuccess>";   
    }


    echo $wc_cpanel_output; //print de xml terug op het scherm
?>

Actionscript3.0
Nu we via het php script de ‘xml’ op het scherm hebben geprint. Kunnen we met actionscript controleren of er ‘correct’ of ‘incorrect’ is geprint. Wanneer de output correct is, zal het actionscript3.0 de state veranderen naar keuze. Dit kun je doen met de currentState function.

In je mxml bestand voeg je eerste de volgende regel toe, om de actionscript aan te roepen…
<mx:Script source=”Wcustoms_Config_Cpanel.as”/>

Vervolgens maak je een .as bestand aan in de ROOT map van je applicatie. Dit doe je door middel van rechtermuis knop op src map te drukken. New -> ActionScript File

//Library's inladen
import flash.events.Event;
import mx.controls.Alert;
import mx.events.StateChangeEvent;
import mx.rpc.events.ResultEvent;

//Afbeeldingen inladen !!! DEZE ALLEEN INLADEN ALS ICON AANWEZIG IS

[Embed("Icon_Error_Message.png")]  public var Icon_Error_Message:Class;

//Variables inladen
private var error_title:String 		= "Webcustoms.nl"; 	//Error Titles

private var success_title:String 	= "Webcustoms.nl"; 	//Succes Titles

public function UserPass_LoginCheck(evt:ResultEvent):void

{
    if(evt.result.loginsuccess == "correct")
    {
        Alert_Message("Ingelogd !... welkom in uw gebruikers paneel.", "Wc_Success");

        //zet hier de state die jij wilt wanneer login correct is
        currentState = "Wc_States_Application";
     }
     else if(evt.result.loginsuccess == "incorrect")
     {
        Alert_Message("Incorrecte Gebruikersnaam en/of Wachtwoord !", "Wc_Error");
     }
}

Vervolgens heb ik een functie gemaakt waarmee je verschillende soorten error en/of succes meldingen op het scherm kunt toveren. Dit doe je met de volgende functie…

public function Alert_Message(message:String, type:String):void
{
    if(type == "Wc_Error")
    {
        Alert.show(message, error_title, 4, null, null, Icon_Error_Message);
    }
    else if(type == "Wc_Success")
    {
        Alert.show(message, success_title);
    }
}

Conclusie
Dit was mijn eerste flex3 tutorial, en ik denk dat er in de toekomst nog veel meer aan zitten te komen. Ik ben erg tevreden met het systeempje.
In de toekomst zal ik vooral tutorials posten die in combinatie zijn met AMFPHP. Met dit open source systeempje kun je veilig en correct database gegevens door sturen naar je applicatie.

Graag zou ik comments willen ontvangen van de mensen die deze tutorial gevolgd hebben. Zet er vooral bij wat je slecht en goed vond… zodat ik in de toekomst mijn aandacht wat meer op die punten kan besteden.

Voorbeeld: http://cpanel.webcustoms.nl
Gebruikersnaam: demo
Wachtwoord: demo