Přejít k navigační liště

Zdroják » PHP » Jak na to: Spojení Flex 4 a PHP ve Flash Builderu 4

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

Články PHP, Různé

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.

Komentáře

Subscribe
Upozornit na
guest
19 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
rooobertek

Ak niečo nenávidím, tak je to flash a flex. Kvôli troške „skrášlenia“ je obetovaný procesor aj použiteľnosť. Neviem, možno sa dajú robiť aj použiteľné flexové hovadinky, ale zatiaľ som sa stretol iba s prípadom, kedy ma to iba nasr*lo. Napríklad nemôžem tam používať koliečko na myši tak, ako by som ho mohol používať napríklad v iframe (iframe je evil, ale furt lepšie ako flash). Klávesnica tiež nie je použiteľná tak, ako mám ja nastavené v operačnom systéme a prehliadači. Musím sa prispôsobiť predstavám tvorcu aplikácie o spôsobe ovládania. A to sa mi sakramentsky nepáči.

Bohužiaľ, programujem aplikáciu, do ktorej sa snažia narvať čo najviac flexu, takže sa mi článok hodí. Díky :)

Safason

Na Flash Player 10.1 se opravdu těšíme … :-)

Pavel Šimek

Ta věcná kritika (výkon, klávesnice, nastavení podle prohlížeče…) je oprávněná. To jsou řešitelné problémy.

Ale k tomu „musím se přizpůsobit představám tvůrce aplikace o způsobu ovládání“ bych řekl – proč ne? :) Vždy se někomu přizpůsobujete. Buď autorovi OS nebo autorovi aplikace, resp. nějakého frameworku. Co je lepší – aby combo box na jednom OS vypadal ve všech aplikacích stejně nebo aby combo box v jedné aplikaci vypadal na různých OS stejně? O tom se dá asi diskutovat donekonečna. :)

rooobertek

Jednoznačne by to malo byť podľa nastavení usera v OS a prehliadači. Keby to tak nebolo, tak sa bežný user musí učiť pracovať s novým interfaceom pokaždé, ako navštívi novú stránku. To je nemysliteľné.

Martin Malý

Zato teď jsou webové aplikace ovládané jednotně, až z toho zrak přechází, a nikdo se nic učit nemusí, jste chtěl říct…?

Omlouvám se za jedovatost, ale právě mám za sebou hodinový boj s UI Facebooku. Mohu zodpovědně prohlásit, že ačkoli bylo ovládání přesně podle prohlížeče, tak ta aplikace (Facebook) se chová naprosto jinak než jiné webové aplikace. Tedy přesně to co píšete: Na každé stránce se musí „user“ učit pracovat s novým rozhraním.

Chaos, který TEĎ ve světě UI webových aplikací panuje, je srovnatelný snad jen s érou DOSových aplikací.

dc

facebook je dobry priklad totalne otrasneho UI. Osobne nechapem ako sa tak neprehladna aplikacia mohla stat tak popularna. Alebo pre beznych ne pocitacovo zatazenych ludi je to pochopitelne a len my mame skresleny pohlad ?

Pavel Šimek

A to ještě (možná) neznáte jeho API. ;-)

Pavel Šimek

V době, kdy uživatel často přechází mezi různými zařízeními (počítač v práci, doma, notebook, mobily, TV) je mi bližší přesně opačný přístup, který razí cross-platform technologie. To znamená aby aplikace vypadala všude stejně. Samozřejmě je nutný určitý stupeň standardizace, a o to se právě snaží frameworky jako je Flex.

Kacer

No, neviem, tomuto by som velmi neveril, ved to vobec nema osetrene sql injections! alebo mi nieco uniklo?

none_

Pokud jde o zabezpeceni samotneho Flex, resi se to zcela jednoduse a prehledne a to nastavenim validatoru, ktere umozni zadani jen nami definovanych znaku do inputu. Je jich nekolik moznych druhu od jednoduchych StringValidator, po RegExpValidator…

Ovsem zabezpeceni na strane php by samozrejme melo byt taky…

petrik

Nevíte proč mi nefunguje v ukázkové aplikaci čeština (ve vstupních polích) ?

klikus

No nedávno jsme se tady na rootu o tom bavili. Jedná se pravděpodobně u tu letitou chybu flash playeru – neumí na linuxu pracovat s unicode. Lepši dát od flash ruce pryč, a nebo se smířit stím, že na linuxu je to zcela nepoužitelné (pužitelné snad jako přehravač videa) a počítat stím, že ty flash aplikace můžou běžet pouze na windows.

Pavel Šimek

No to by byla škoda. Tom Krcha přislíbil, že (poté, co se úspěšně přimluvil za global error handling) se přimluví za bug s češtinou v transparent módu (důležité např. pro Facebook aplikace), což by bylo ideální spojit s:
– unicode na Linuxu
– lokalizace systémových textů Flash Playeru v závislosti na nastavení browseru

vks

myslím si, že je docela drzost, že se někdo pokusil něco pojmenovat flex, když to není ten bráška bizonů a jaků…

když něco hledám o flexu, tak mi všechny vyhledavače pořád strkají tyhle hovadiny; jako by nebylo dost jiných TLA a „FLA“ (jako four-letter acronyms)

proč neumí udělat unikátní název…
(nevím kam tenhle zoufalý výkřik do tmy psát, tak se omlouvám za OT)

Borek Bernard

Zkus hledat „Adobe Flex“.

TAP

Funguje to krásně s Ascii, když se snažím dostat z SQL něco v UTF8(i dalších kódováních)píše to :

Try encoding the response suitably before sending it. e.g. If a database column contains UTF-8 characters then use utf8_encode() to encode its value before returning it from the operation.

Poraďte pls kam to utf8_encode()vec­pat. Asi do php že? Já se s tím při svých schopnostech budu drbkat dva dny :-)

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.