Jak na to: Spojení Flex 4 a PHP ve Flash Builderu 4

Vytvoření Flexového uživatelského rozhraní pro PHP backend je se Zend_AMF a novým panelem Data/Services otázka chvilky. Podívejme se, jak v několika krocích vytvořit nástroj pro vyhledávání a úpravu nalezených prvků v MySQL databázi. Pro zvládnutí tutoriálu stačí minimální znalosti Flexu a PHP.

Aplikace, kterou si vytvoříme ve Flexu 4, bude používat PHP backend s MySQL databází. Ukážeme si ten nejjednodušší a nejnovější přístup pro práci s daty ve Flexu. V podstatě je to jen na několik kliknutí. Ty vygenerují potřebný kód, který ve velké míře používá třídu RemoteObject pro práci s datovým protokolem AMF.

Tento tutoriál vám poskytne základ pro práci s daty ve Flexu 4 – pro pochopení hlubších možností propojení Flexu a PHP doporučuji článek Mihaie Corlana Flex for PHP developers [en].

Upozornění: Flash Builder 4 se nachází v druhé betě, která vyšla začátkem října 2009 na konferenci Adobe MAX, to znamená, že některé věci se nemusí chovat přesně jak očekáváte. Přesto jsme se rozhodli vám nabídnout tutoriál s ukázkou postupu právě v těch nejčerstvějších nástrojích.

Použitý software

  • HTTP, PHP 5, MySQL 5 server (např. pro Mac MAMP, pro Win WAMP)
  • Flash Builder 4 Beta 2
  • Flash Player 10 (součástí instalace Flash Builderu 4)
  • volitelně Zend Framework (v případě, že jej nemáte, ho Flash Builder 4 sám nainstaluje)

Ukázka výsledné aplikace (zdrojový kód lze zobrazit pomocí View Source v kontextovém menu aplikace)

Zdrojové soubory

  • Flex a PHP (jen pro kontrolu, pro tento tutoriál není potřeba, vše si vytvoříme v průběhu lekce)
  • Databáze zaměstnanců v SQL (je potřeba, budeme v ní vyhledávat)

Flex podporuje řadu protokolů pro komunikaci se serverem. My pro náš příklad použijeme konkrétně nativní AMF (Action Message Format). AMF je binární protokol s otevřenou specifikací, který se používá zejména pro vzdálené volání procedur (RPC). Umí přenášet i komplexní datové typy – tzn. že můžete přenášet objekty, pole objektů, obecné pole bajtů (obrázek, audio, video…) či úplně vlastní typy (struktury). Je komprimovaný, navržený velmi úsporně pro přenos dat, a jeho parsování zabere výrazně méně času než u XML či JSON.

Implementace AMF protokolu existuje pro většinu jazyků:

  • Ruby on Rails (RubyAMF, WebOrb)
  • Python (PyAMF, DjangoAMF)
  • Java (BlazeDS, LiveCycle DS, OpenAMF…)
  • .NET (WebOrb, AMF.NET)
  • PHP (Zend_AMF)
  • Perl (AMF::Perl)
  • … a další, viz AMF na Wikipedii

Pro porovnání výkonnosti AMF versus AJAX, JSON, XML doporučuji tyto dva odkazy:

Data/Services

Flash Builder 4 uvedl jako novinku panel Data/Services, který usnadňuje práci s datovými službami postavených na Web Services, PHP, ColdFusion či Java. Samozřejmě lze Flexové aplikace připojovat i na jiné backendy (Ruby, .NET, Python…).

Panel Data/Services značně zrychluje celkový vývoj RIA aplikací. Spravuje spojení s daty a odděluje kód pro práci se službami od vašeho kódu. Tento přístup vám umožní vytvořit např. RIA E-shop do několika dnů i s administrací.

Současně s Data/Services je k dispozici nový panel Network Monitor pro ladění a sledování požadavků a přenosu dat mezi klientem a serverem.

Krok 1 – Vytvoření projektu ve Flash Builderu 4

File → New → Flex Project

Flex a PHP - nove

Zadáme název projektu „ZdrojakFlexPHP“, vybereme Application server type „PHP“ a klikneme na Next.

Ujistíme se, že náš HTTP server běží, nastavíme Web root, což je root složka pro umístění webů na serveru. Také nastavíme Root URL  – adresa směřující do Web rootu – a klikneme na Validate Configuration.

Compiled Flex application location necháme ve výchozím nastavení a klikneme na Finish.

Flex a PHP - nove

Pokud nemáte na svém serveru nainstalované Zend_AMF, Flash Builder 4 vám nabídne možnost instalace. Klikněte na OK.

Flex a PHP - Zend

Vygeneruje se nám následující kód. Blok Declarations bude obsahovat služby.

<?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/halo" minWidth="1024" minHeight="768">
   <fx:Declarations>
      <!-- Place non-visual elements (e.g., services, value objects) here -->
   </fx:Declarations>
</s:Application>

Krok 2 – Přidání datové služby

V panelu Data/Services klikneme na Connect to Data/Service.

Flex a PHP

Zvolíme PHP a dáme Next.

Flex a PHP krok 2

Klikneme na Generate sample PHP class.

PHP a FlexB4

Flash Builder 4 umožňuje vytvořit PHP backend třídu bez nutnosti psaní kódu. Jednoduše se připojí k databázi, zvolíte cílovou tabulku a automaticky se vygeneruje třída se všemi základními funkcemi dle metodiky CRUD (Create Read Update Delete). Tento krok výrazně zjednodušuje celkové propojení a zvládne jej i grafik, který si navrhne grafiku a vytvoří prototyp v nástroji Flash Catalyst.

Vyplníme naše přístupové údaje. Klikneme na Connect to Database – načtou se dostupné tabulky. Vybereme tabulku employees. Primary key emp_no by se měl vybrat automaticky. Dáme OK.

PHP a FlexB4

Flash Builder 4 nás upozorní přes Security Information na případné bezpečnostní kroky, které bychom měli v produkční verzi zajistit. My klikneme na OK.

PHP a FlexB4

Po kliknutí na Next se nám na další obrazovce vypíše seznam dostupných funkcí služby včetně návratových typů. Klikneme na Finish.

PHP a FlexB4

V panelu Data/Services přibyla služba EmployeesService a na serveru se vygeneroval kód EmployeesServi­ce.php (ve složce services), obsahující následující funkce:

  • __construct – připojení k databázi
  • getAllIEmployees – vrátí všechny zaměstnance
  • getEmployeesByID – vrátí jednoho zaměstnance
  • createEmployees – vytvoří zaměstnance
  • updateEmployees – upraví zaměstnance
  • deleteEmployees – smaže zaměstnance
  • count – vrátí počet zaměstnanců
  • getEmployees_paged – vrátí všechny zaměstnance s podporou stránkování (úsporné načítání pouze těch dat, která uživatel vidí, podporuje ListPaged komponenta Flexu 4 – tzv. „nekonečný“ scroll, scrollujete a prvky se načítají za běhu)

Veškerý kód je připraven k okamžitému použití.

Pro náš příklad však funkci getAllEmployees v EmployeesSer­vice.php mírně upravíme, aby umožňovala prohledávat databázi dle daného parametru $q.

public function getAllEmployees($q) {

    $sql = "SELECT * FROM $this->tablename WHERE first_name LIKE '%$q%' OR last_name LIKE '%$q%' OR email_address LIKE '%$q%'";


    $stmt = mysqli_prepare($this->connection,$sql);

    $this->throwExceptionOnError();

    mysqli_stmt_execute($stmt);
    $this->throwExceptionOnError();

    $rows = array();

    mysqli_stmt_bind_result($stmt, $row->emp_no, $row->birth_date, $row->first_name, $row->last_name, $row->gender, $row->hire_date, $row->phone_no, $row->email_address, $row->job_title);

    while (mysqli_stmt_fetch($stmt)) {
      $rows[] = $row;
      $row = new stdClass();
      mysqli_stmt_bind_result($stmt, $row->emp_no, $row->birth_date, $row->first_name, $row->last_name, $row->gender, $row->hire_date, $row->phone_no, $row->email_address, $row->job_title);
    }

    mysqli_stmt_free_result($stmt);
    mysqli_close($this->connection);

    return $rows;
}

Tím jsme na straně PHP hotovi.

Přesuneme se do Flash Builderu a obnovíme službu pomocí tlačítka Refresh. Tím se nám znovu načtou provedené úpravy. Funkce getAllEmployees by měla nyní přijímat parametr q : Object pro hledaný řetězec.

PHP a FlexB4

Po obnovení ještě musíme nastavit správný návratový typ. Vyvoláme kontextové menu na getAllEmployees, zvolíme Configure Return Type -> Use an existing data type a z drop-down boxu vybereme pole zaměstnanců – Employees[].

Chcete se naučit o PHP víc?

Akademie Root.cz pořádá školení Kurz programování v PHP5. Jednodenní kurz programování v PHP 5 je určen všem webovým vývojářům, kteří se chtějí do hloubky seznámit a sžít s programovacím jazykem PHP ve verzi 5. První část kurzu je zaměřena na nový objektový model se všemi jeho vlastnostmi, ošetření chyb pomocí výjimek a efektivní využití těchto konceptů. Druhá část je zaměřena na nové knihovny PHP 5, především pro práci s databázemi, XML a objekty. Pozornost je věnována i zajištění kompatibility s PHP 4, přechodu z této verze a výhledu na PHP 6. Máte zájem o jiné školení? Napište nám!

Krok 3 – sestavení Flexového UI pro vyhledávání a propojení na datovou službu

Rozmístíme komponenty List, TextInput a Button dle obrázku a přiřadíme jim tyto id: listSearch, txtSearch, btnSearch

Flex a PHP - nove

Pomocí drag-and-drop přetáhneme funkci getAlllEmployees z Data/Services panelu na Button (btnSearch) – přímo v Design view. Tato akce vygeneruje handler a volání služby. Místo q budeme předávat funkci txtSearch.text

protected function btnSearch_clickHandler(event:MouseEvent):void
{
    getAllEmployeesResult.token = employeesService.getAllEmployees(txtSearch.text);
}

Výsledek vyhledávání musíme ještě propojit se seznamem listSearch pomocí parametru dataProvider. Složené závorky znamenají binding – když se [Bindable] proměnná změní, změny se automaticky projeví/distri­buují. Současně nastavíme labelField na last_name. Co se týče zobrazovaní prvků v seznamu – lze více kouzlit pomocí labelFunction a itemRenderer – doporučuji prozkoumat. Také si všimněte, že pracujeme s lastResult – neboli poslední výsledek daného volání.

<s:List x="10" y="40" width="280" height="329" id="listSearch" dataProvider="{getAllEmployeesResult.lastResult}" labelField="last_name"></s:List>

Aplikaci můžeme otestovat, zdali dělá, co bylo cílem. Měla by vypadat následovně:

PHP a FlexB4

Krok 4 – Editace položek

V panelu Data/Services vyvoláme kontextové menu na typu Employee a zvolíme Generate Form

PHP a FlexB4

Ponecháme Make form editable zaškrtnuté a dáme Next.

Flex a PHP - nove

Vybereme jen položky, které chceme ve formuláři zobrazit/editovat a dáme Finish.

Flex a PHP - nove

Vytvoří se nám formulář, který posuneme napravo od komponent. Přidáme tlačítko Uložit (btnSave) a první tlačítko přejmenujeme na Vyhledat.

Flex a PHP

Podobným způsobem jako předtím přidáme na List (listSearch) handler pro událost On change.

Flex a PHP

Při výběru položky ze seznamu se nastaví proměnná employee na její hodnotu. Výsledný kód bude tedy vypadat:

protected function listSearch_selectionChangedHandler(event:IndexChangedEvent):void

{
    employee = listSearch.selectedItem;
}

Krok 5 – Uložení položky

Na tlačítko btnSave přetáhneme z Data/Services panelu funkci updateItem(item:Ob­ject). Proměnnou item nahradíme za employee a máme díky obousměrnému (two-way) bindingu hotovou plnohodnotnou editaci položky. Handler tedy bude vypadat takto:

protected function btnSave_clickHandler(event:MouseEvent):void
{
    updateItemResult.token = zamestnanci.updateItem(employee);
}

Náhled finální aplikace:

Flex a PHP - zbytek

Kód finální aplikace by měl být velmi podobný kódu, který je k dispozici v souboru s kompletním zdrojovým kódem (Flex a PHP – viz odkaz na začátku článku).

Pokud se chcete o vývoji v Adobe Flex 4 dozvědět víc, přijďte na přednášku autora tohoto článku, která nese název Realtime RIA aplikace pro Facebook + Adobe Flex 4, a proběhne v rámci konference WebExpo 2009 v sobotu 17. října od 15:30.

Závěr

Jak jsme si ukázali, vytvoření vazby mezi PHP backendem a frontendem ve Flash Builderu opravdu není s novou verzí Flash Builderu žádná magie. Jednoduchý projekt pro vzdálenou správu databáze získáme opravdu jen jednoduchým „naklikáním“ požadovaných vlastností, naprostou většinu kódu za nás vygeneruje FB. Pro vývojáře, jejichž nejcennějším statkem je čas, jde o neocenitelnou pomoc, která je dokáže zbavit netvůrčí stereotypní práce.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 19

Přehled komentářů

rooobertek flex
Tom Krcha Re: flex
Safason Re: flex
Pavel Šimek Re: flex
rooobertek Re: flex
Martin Malý Re: flex
dc Re: flex
Pavel Šimek Re: flex
Pavel Šimek Re: flex
Kacer SQL Injection
Tom Krcha Re: SQL Injection
none_ Re: SQL Injection
petrik ukázka aplikace
klikus Re: ukázka aplikace
Pavel Šimek Re: ukázka aplikace
Tom Krcha Re: ukázka aplikace
vks flex
Borek Bernard Re: flex
TAP jak na češtinu?
Zdroj: https://www.zdrojak.cz/?p=3090