Web i tome slično... IvanIlijasic.com » Flex Cookbook

Adobe Cookbooks 2.0

admin — Sat, 26 Sep 2009 09:36:03 +0000

Adobe je tokom proteklog tjedna lansirao novu verziju Cookbook portala. Nova verzija je osim laganog redizajna donijela i neke nove funkcionalnosti. Sada osim slanja programskih rješenja možete i poslati upit za neki problem. U prošloj verziji Cookbooka recepti su bili kategorizirani samo po unaprijed zadanim kategorijama, dok ih je sada moguće pregledavati sistematski po upisanim tagovima. Sustav pretraživanja je poboljšan, dok su autori tekstova sada više došli do izražaja na način da uz svaki recept stoji avatar autora, link na njegov profil ili blog.

Unutar Cookbooka se sada nalaze i tematike o ColdFusionu i Flash Catalystu. Zgodan dodatak je i mogućnost povezivanja recepta s nekim ranijim člancima, tako da se tematike i upiti mogu lakše povezati u cjelinu. Po onome što sam primjetio, čini mi se kako se poradilo i na optimizaciji portala za tražilice. U svakom slučaju, zgodan pomak prema naprijed.

Adobe Cookbooks 2.0

Usporedba: Geometrijski oblici pomoću ActionScripta i Degrafe

admin — Sat, 23 May 2009 15:46:20 +0000

Degrafa je deklarativni grafički framework za Flex. To znači da ne morate kodirati grafičke objekte u Actionscriptu već pomoću Degrafa tagova možete stvarati grafiku. Kada sam prošlo ljeto otkrio Degrafu, prva motivacija mi je bila ugraditi obične geometrijske oblike bez korištenja Shape klase. Nakon nekoliko dana jedan moj kolega, hardcore actionscriptaš je htio vidjeti kako može nabrzinu složiti kvadrat, krug i slične objekte, a da taj kod bude jednostavn i intuitivan. U dvije minute sam mu složio dolje navedeni primjer

Degrafa uistinu nudi puno mogućnosti, no evo i vama na uvid koliko je logičnije stvaranje grafike i geometrije pomoću Degrafe.

       var roundObject:Shape = new Shape();
       var square:Shape = new Shape();
       var circle:Shape = new Shape();
       // pravokutnik
        square.graphics.beginFill(0xFF0000, 0.5);
        square.graphics.drawRect(10, 10, 100, 100);
        square.graphics.endFill();
        // krug
        circle.graphics.beginFill(0x0000FF, 1);
        circle.graphics.drawCircle(170, 60, 50);
        circle.graphics.endFill();
        // zaobljeni pravokutnik
        roundObject.graphics.beginFill(0x00FF00);

        canvasAS.rawChildren.addChild(square);
        canvasAS.rawChildren.addChild(circle);
        roundObject.graphics.moveTo(280, 10);
        roundObject.graphics.curveTo(330, 10, 330, 60);
        roundObject.graphics.curveTo(330, 110, 280, 110);
        roundObject.graphics.curveTo(230, 110, 230, 60);
        roundObject.graphics.curveTo(230, 10, 280, 10);
        roundObject.graphics.endFill();
        canvasAS.rawChildren.addChild(roundObject);
....
....

Više o Degrafi možete saznati na http://www.degrafa.org, a čitav kod ovog primjera možete skinuti ovdje: Degrafa vs. Actionscript

Flex chart komponenta s customa natpisima

admin — Sat, 23 May 2009 15:44:05 +0000

Nedavno je moj kolega htio složiti graf na svom siteu, no nije mogao naći neki dobar besplatni PHP library kako bi skicirao stanje u NBA utrci za najvrijednijeg igrača lige. Stoga sam mu nabrzinu složio jednostavan primjer u Flexu koristeći Flex charting komponente, standardni dio Flex Buildera 3 Pro.

Da vidimo što nam treba da bismo napravili ovakav jedan primjer. Napravit ćemo tri array objekta koje možemo vezati na dataProvidere (obavezno koristiti naredbu [Bindable]). Napravimo LineChart koji će na prilikom inicijalizacije prikazivati broj koševa po utakmici za svakog pojedinog igrača. Na horitonzalnoj x-osi će se prikazati o kojoj je sezoni riječ. Na vertikalnoj osi će se prikazivati vrijednost iz svake pojedine linije na grafu. Linije će biti definirane unutar taga , no treba naglasiti kako se na grafu koristi custom funkcija yAxisLabel kako bi se napravio preuređeni natpis na vertikalnoj osi.

Serije (ajmo ih tako nazvati) u grafu koriste dataProvider koji smo definirali u vertikalnoj osi, ali za svaku od tih serija potrebno je navesti koji element iz objekta array ćemo koristiti kao podatak na horizontalnoj i vertikalnoj osi.

Kada već imamo graf, onda nije loše da imamo i legendu. Legenda će se vezati na graf preko atributa dataProvider, gdje kao vrijednost vežemo objekt “chartPPG”.

Klikom na dodatna dva gumba mijenjamo dataProvidera grafa, pa se na taj način prikazuju drugačije vrijednosti.

Ovdje možete pogledati i uživo kako to izgleda: MVP Race graf

Povezivanje Flex komponenata s vizualnim komponentama pomoću Degrafe

admin — Sat, 23 May 2009 15:42:18 +0000

Flex Builder nam služi kako bismo napravili RIA aplikacije bez mučenja sa HTML kodom i prilagodbom za sve browsere. Ipak, da bismo napravili nekakav dizajnerski dodatak, trebamo ili Photoshop ili Flash. Prošlo proljeće sam otkrio Degrafu i oduševio sam se njenim mogućnostima. Degrafa je Flex framework za stvaranje grafičkih elemenata pomoću tagova ili SVG krivulja, koje možemo napraviti u bilo kojem kvalitetnijem grafičkom alatu.

Za demonstraciju Degrafe napravio sam jedan mali demo. Kolegi sam prije nekoliko tjedana demonstrirao Degrafu. Prvo sam u Illustratoru (alatu koji sam našao kod kolege na laptopu) nacrtao nogometni dres, dodao rubove rukava i horizontalne i vertikalne pruge. Tada sam tu grafiku spasio u SVG formatu i dobio sam sve potrebno za slaganje. U Flex Builderu sam složio sučelje s color pickerima i check boxovima kojima se definira da li će dres imati horizontalne ili vertikalne pruge.

Nakon toga sam na panel dodao Degrafa surface i na nju dodao objekte za definiranje fillova i ruba dresa. Fill objekti su povezani s color pickerima. Da bi se nacrtao dres, iskoristio sam pojedine krivulje iz SVG-a, za rub dresa, rubove rukava i crte na dresu. Malo po malo i složio sam zgodni primjer.

	
		
		
			
			
			
			
		
		
		
			
		
		
		
			
				70.395,195.667 70.395,93.334 61.889,105.336 35.333,84.053 70.395,41.001 108.835,41.001
							127,48.667 145.835,41.001 184.335,41.001 219.396,84.053 192.841,105.336 184,93.334
							184.335,93.334 184.335,195.667
			  
	 		  
			
				216.264,80.157 219.396,84.053 192.841,105.336 190.725,101.587
			
			
				39.07,80.157 36.059,84.053 61.598,105.336 64.609,101.587
			
		
		
		
			
				70.395,41.001 90.395,41.001 90.395,195.667 70.395,195.667
			
			
				108.835,41.001 127,48.667 145.835,41.001 145.835,195.667 108.835,195.667
			
			
				164.335,41.001 184.335,41.001 184.335,195.667 164.335,195.6677
			
		
		
		
			
				70.395,175.667 184.335,175.667 184.335,195.667 70.395,195.667
			
			
				70.395,135.667 184.335,135.667 184.335,155.667 70.395,155.667
			
			
				70.395,95.667 184.335,95.667 184.335,115.667 70.395,115.667
			

		
		
		
			
				70.395,195.667 70.395,93.334 61.889,105.336 35.333,84.053 70.395,41.001 108.835,41.001
							127,48.667 145.835,41.001 184.335,41.001 219.396,84.053 192.841,105.336 184,93.334
							184.335,93.334 184.335,195.667

Primjer funkcionalnosti možete vidjeti na ovom linku: Degrafa dres
Kod primjera: Degrafa dres

Više o Degrafi možete saznati na http://www.degrafa.org

Kako organizirati Flex “snippete”

admin — Sat, 23 May 2009 15:40:34 +0000

Kada razvijate u nekom alatu duže vrijeme, primjetite kako konstantno pišete jedan te isti kod, samo mijenjate ime varijable, klase, metode, parametra. Posljednjih dana sam radio nekoliko manjih Flex/PHP aplikacija i konstantno sam radio manje HTTP servise. U jednom trenutku sam shvatio kako sam napravio 20-tak HTTP servisa koji su svi na isti kalup, a svaki od njih sam pisao iznova. Nakon toga sam se zapitao, pa svaki alat za web development ima neki snippet toolbar. Mora ga imati i Flex. I otkrio sam ga vrlo brzo.

Malo sam odlučio proučiti opcije za update Flex Buildera, otišao sam na Google i vrlo brzo sam pronašao rješenje. Ukoliko želite imati snippet toolbar u svom Flex Builderu, pogledajte ove kratke upute.

1. Idite na Help > Software Updates > Find and Install.

2. Kliknite ‘Search for new features to install’ i pritisnite ‘Next’.

3. Čekirajte ‘Europa Discovery Site’ i pritisnite ‘Finish’.

4. Odaberite najbliži server za download.

5. Pod opcijom’Web and Java Development’ odaberite ‘Web Standard Tools. Kliknite na ‘Selected Required’ kako biste instalirali sve potrebne dodatke za instalaciju Web Standard Tools.

6. Završite instalaciju i resetirajte Flex Builder.

7. Kako bi prikazali Snippet panel idite na izbornik Window > Other Views i na opciji ‘General’ odaberite ‘Snippets’. Novi panel će se prikazati na dnu sučelja. Možete ga slobodno prebaciti uz panel s komponentama, tako da sve svoje ‘drag & drop’ elemente možete imati na jednom mjestu.

8.Napravite desni klik na novom panelu i odaberite ‘Customize’.

9. Svoje snipete možete organizirati u kategorije, recimo kao što su Actionscript kod i NonVisual. Nakon što ste stvorili kategorije snippeta, možete na isti način stvoriti dijelove koda koje ćete višestruko upotrebljavati. Svaki snippet ima svoje ime, opis, predložak i varijable koje ideu u predložak. Varijable se stavljaju na mjesto placeholdera u kodu snippeta.

10. Evo kako izgleda moj snippet za HTTP service, a sastoji se od tri varijable: Id, Url and resultEvent.

Eto, nadam se da ćete na ovaj način povećati efikasnost pisanja koda.

Kako vidjeti ActionScript klase koje generira Flex Builder?

admin — Sat, 23 May 2009 15:37:55 +0000

Dok stvarate MXML kod u Flex Builderu, vaš razvojni alat u pozadini stvara pripremu za generiranje Actionscript koda koji će onda biti kompajliran, a takav kod će Flash Player će znati koristiti za prikaz razvijene aplikacije. Kada stvorite svoj MXML, Flex Builder će kasnije generirati klase koje su nastale na temelju postojeći Actinscript klasa.
Recimo da smo napravili sljedeći testni MXML:


 
 
 
 }
   ]]>


Samim stvaranjem ove aplikacije Flex Builder je od mx.core.Application klase stvorio novu klasu MyTest.
public class MyTest extends mx.core.Application
Ako želite vidjeti što to Flex Builder radi u pozadini, tada je potrebno dodati parametar compileru, kako bi on znao da generirane datoteke ne treba brisati nakon što je SWF stvoren. Idite na project properties > Flex Compiler >  Additional compiler arguments.
Tamo dodajte parametar -keep ili -keep-generated-actionscript. Pokrenite rebuild  projekta i sada bi se trebao pojaviti direktorij generated unutar src direktorija. Tamo se nalazi generirani Actionscript  kod i MyTest-generated.as datoteka.



Povezivanje C# i Actionscript klasa pomoću WebORB-a
admin — Sat, 23 May 2009 15:27:23 +0000
Nakon što ste uspješno instalirali WebORB for .NET i povezali Flex i .NET aplikaciju, trebamo vidjeti kako povezati instancu klase na klijentovom računalu (Actionscript klasa) s klasom na serveru (C# klasa). Kroz kratki tutorial ćete lako pohvatati ovo znanje. Ako dosad niste radili s WebORB-om, pogledajte raniji članak o tome: Povezivanje Flexa i .NET-a pomoću WebORB-a: Hello, World
Idemo napraviti novi class library za WebORB u Visual Studiju. Za predložak projekta ponovno koristite ‘class library for WebORB’. U projektu možete koristiti dolje navedeni kod:
using System;
using System.Collections.Generic;
using System.Text;

namespace FlexWebOrb.ZgFlex
{
    public class UserService
    {
        public WebOrbUser getUserProperties(WebOrbUser user)
        {
            WebOrbUser WebOrbUser = new WebOrbUser();
            WebOrbUser.firstName = user.firstName.ToUpper();
            WebOrbUser.lastName = user.lastName.ToUpper();
            WebOrbUser.age = user.age;

            return WebOrbUser;
        }
    }

    public class WebOrbUser
    {
        public string firstName;
        public string lastName;
        public int age;

    }
}

Kao što možete vidjeti, ovaj servis unutar namespacea sadrži jednostavnu VO (value object) klasu WebOrbUser. Nju ćemo koristiti za mapiranje serverske i klijentske instance klase. U Flex Builderu napravite novi projekt i dodajte WebORB.swc library u projekt te podesite da compiler koristi xml s konfiguracijom servisa (upute možete vidjeti u prethodnom članku). Napravite sljedeću Actionscript klasu:
package org.zgflex.vo
{
  //[RemoteClass(alias="FleFlexWebOrb.ZgFlex.WebOrbUser")]
  public class WebOrbUser
  {
    public var firstName:String;
    public var lastName:String;
    public var age:int;
  }
}

Zakomentirana linija je vrlo bitna jer sadržni alias remote klase u C#. Na taj način će WebORB znati da je poslani objekt mapiran sa C# klasom na serveru. Pogledajte kako izgleda kod Flex aplikacije:



	
	
	
	
		
		
		
		
		
		
		
	
	
		
		
		
		
		
		
	
	
		
	


Klasa UserService na serveru sadrži metodu getUserProperties(WebOrbUser user). Ona dohvataća Flex objekt instance klase WebOrbUser. WebORB zbog zadanog aliasa mapira Actionscript klasu u C# klasu, a metoda radi svoj posao i šalje C# instancu klase Flexu. Radi se obrnuti proces mapiranja te Flex dobiva odgovor u sebi prihvatljivom obliku Actionscript klase. Podaci se prikazuju na desnom panelu aplikacije.

Source aplikacije možete dohvatiti ovdje: Mapiranje C# i Actionscript klasa.



Povezivanje Flexa i .NET-a pomoću WebORB-a: Hello, World
admin — Sat, 23 May 2009 15:26:32 +0000
WebORB je .NET library za povezivanje RIA tehnologija (Flex, AIR, Flash, Ajax, Silverlight) s popularnim serverskim tehnologijama kao što su .NET, PHP, Java, Coldfusion i Ruby at Rails. U ovom primjeru ćete moći vidjeti kako povezati .NET i Flex putem ovog jako dobrog dodatka.
Da bi povezali .NET server-side kod i Flex aplikaciju potrebno je  skinuti WebORB for .NET library sa stranice:  www.themidnightcoders.com/products/weborb-for-net/overview.html. Na dotičnoj stranici možete saznati sve o dotičnom libraryju, a uz njega dobivate upute za instalaciju WebORB-a na vaš IIS server. Informacije o instalaciji dobivate možete naći i na WebORB siteu. Ako postavljate WebORB na lokalni server, tada bi se WebORB aplikacija za nadzor servisa trebala nalaziti na URL-u: http://localhost/weborb30/.
Prilikom instalacije WebORB-a na računalo je instaliran i dodatak za Visual Studio, pomoću kojega se stvaraju WebORB servisi. Nakon instalacije je potrebno stvoriti novi projekt u Visual Studiju, a za predložak aplikacije treba odabrati opciju ‘Class Library with WebORB’. Kada se otvori projekt, onda možete napraviti ovakav kod, u kojemu ćete kreirati dummy Response klasu za odgovor servera klijentu.
using System;
using System.Collections.Generic;
using System.Text;

namespace FleFlexWebOrb.ZgFlex
{
    public class WebOrbConnect
    {
        public Response sayHello(string name)
        {
            Response response = new Response(name);
            return response;
        }

    }

    public class Response
    {
        public string Name;
        public string Greeting;

        public Response(string name)
        {
            this.Name = name;
        }
    }
}

Pokrenite compile/rebuild i dobit ćete nakon toga DLL datoteku  u debug direktoriju. Kopirajte taj DLL u WebOrb\bin direktorij koji se nalazi u direktoriju IIS servera, odakle se pokreće WebORB monitoring aplikacija. Nakon toga će novonastali servis biti dostupan preko WebORB konzole.  (http://localhost/weborb30/weborbconsole.html)
Ako ste to napravili onda idemo napraviti jednostavnu Flex aplikaciju. Napravite novi Flex projekt i dodajte mu WebORB SWC library, koji se nalazi u weborb\weborbassets\wdm direktoriju na IIS-u. Podesite compiler path Flex projekta s dodatkom (lokalni path do services-config.xml):
-services c:\Inetpub\wwwroot\weborb30\web-inf\flex\services-config.xml
Nakon toga napravite dummy aplikaciju:


	
		
	

	
		
	

	
		
		
		
	


Demo aplikacija šalje korisničko ime .NET serverskoj aplikaciji i vraća pozdrav. Komunikacija započinje korištenjem RemoteObject instance koja se spaja na .NET klasu i metoda sayHello prima parametar Name te vraća objekt tipa Response našoj Flex aplikaciji. Na ovom primjeru možete temeljiti vaše buduće Flex/.NET aplikacije.



Napravite knjigu gostiju pomoću Flexa, AMFPHP-a i PHP-a
admin — Sat, 23 May 2009 15:24:03 +0000
Dakle, naučili ste kako se koristi AMFPHP, znate kako dohvatiti podatke iz MySQL-a. Onda Vam ne bi trebao biti problem složiti jednostavni guestbook. Za to je potrebna jednostavna forma za unos, onda recimo jedan  DataGrid za prikaz podataka i AMFPHP servis koji će primiti podatke i poslati sve komentare našem Flex klijentu.

Dakle, imate Flex formu u koju će korisnik upisati svoj komentar. Za potrebe pohrane tih informacija trebamo Actionscript klasu. Klasa će biti definirana unutar package-a org.zgflex. Bitno je, kao i u svim primjerima rada s AMFPHP-om, navesti Remote alias klase:

package org.zgflex
{
 [RemoteClass(alias="org.zgflex.Comment")]
 [Bindable]
 public class Comment
 {
    public var id:int;
    public var name:String;
    public var title:String;
    public var email:String;
    public var comment:String;
  }
}
Istu takvu PHP klasu je potrebno složiti na serveru.
class Comment { 
   public $id;
   public $name;
   public $title;
   public $email;
   public $comment;
   var $_explicitType = "org.zgflex.Comment";
}
?>
PHP servis treba imati dvije metode, jednu za pospremanje komentara u MySQL bazu podataka, a drugi koji će dohvatiti sve pohranjene komentare.
    public function getAllPosts()
    function sendComment($comment)
I ostaje nam samo nakon toga upogoniti Flex. Prilikom pritiska na gumb forme podaci se šalju na server, a ukoliko je komentar uredno pohranjen u bazu podataka, pokrenut će se zahtjev za dohvat svih upisanih postova i oni će se pospremiti u DataGrid. Dolje možete vidjeti kako izgleda kod RemoteObject instance koja zove PHP server.
    
        
        
     


Ovdje možete dohvatiti kod opisanog primjera: PHP Flex Guestbook



Popunite vrijednosti komponenti pomoću AMFPHP-a
admin — Sat, 23 May 2009 15:22:08 +0000
Nakon što ste napravili svoj prvi pravi primjer korištenja Flexa i PHP-a korištenjem AMF protokola, onda je vrijeme  da vidimo kako možemo popuniti vrijednosti nekih Flex komponenti dohvatom podataka sa servera iz MySQL baze. Ovaj kratki primjer se nadovezuje na raniji tekst – Započnite koristiti AMFPHP.

U ovom primjeru ćete pomoću PHP upita dohvatiti niz podataka koji će biti posebno formatiran za Flex ComboBox, nakon toga ćete odabirom određene momčadi (opet je primjer s podacima o nogometnim momčadima) popuniti podatke o igračima momčadi unutar DataGrida, pozivom metode RemoteObjecta koja je opet povezana AMF protokolom na PHP server. Dolje navedena PHP metoda dohvaća listu momčadi, s time da su podaci u arrayu postavljeni tako da se ComboBox popuni prilikom dohvata niza sa servera (zato se dobivaju vrijednosti label i data).
    public function getTeamsList()
    {
        $sql = 'SELECT     id data,
                        title label
                FROM     team
                ORDER by title ASC';

        $result = mysql_query($sql, $this->_db);
     
        $teams = array();
     
        while ($row = mysql_fetch_object($result)) {
            $teams[] = array('data' => $row->data, 'label' => $row->label);
        }
     
        mysql_free_result($result);
        return $teams;     
    } 

Priča će se dalje nastaviti tako što ćete moći odabirom retka u DataGridu vidjeti podatke o tom igraču u Flex Label objektima, a nakon toga ćete iz druge padajuće liste moći transferirati igrača u neki drugi klub. Povratnom informacijom sa servera ćete dobiti promjenu ekrana, tako što će prelaskom igrača u npr. Chelsea, Flex aplikacija pozvati dohvat svih igrača iz tog novog kluba.

Demo opisane aplikacije možete skinuti ovdje: Popunite vrijednosti Flex komponenata pomoću AMFPHP-a