Using Flex (Eclipse) Help as Standalone mode

You might find it useful to launch Flex Builder (as Eclipse plugin) help in a standalone mode by launching help in a mode that uses a standalone help server installed with the IDE.

To start standalone help, at the command line execute the following :

java -classpath C:\eclipse-SDK-3.2.1-win32\eclipse\plugins\org.eclipse.help.base_3.2.2.R322_v20061207.jar org.eclipse.help.standalone.Infocenter -command start -eclipsehome C:\eclipse-SDK-3.2.1-win32\eclipse -port 4567 -noexec

Open the web browser and goto http://localhost:4567/help/index.jsp

To stop standalone help, at the command line execute the following :

java -classpath C:\eclipse-SDK-3.2.1-win32\eclipse\plugins\org.eclipse.help.base_3.2.2.R322_v20061207.jar org.eclipse.help.standalone.Infocenter -command shutdown -eclipsehome C:\eclipse-SDK-3.2.1-win32\eclipse -port 4567 -noexec

Note :

After you shut down the help server, links in the help browser will be unavailable until you restart the server.

Set Eclipse home path to eclipse folder, and make sure to specify a correct the org.eclipse.help.base jar library version depending on your Eclipse version. Then put in a source port number - here I’ve used 4567 (manual config).

Externalize Font with font subset, font weight and font style at the same time

You have a flash / flex application where you want to allow users to customize the text formatting, font style / font weight for some text box. So you would provide a small set of fonts which would all get embedded into the swf.

If we working with external fonts in Actionscript 3.0, the external font must have a class definition for allowing the Font class and ApplicationDomain to detect and register it. We can produce class definition for the external font  with embed tag in Flex or Font symbol in Flash library. 

In Flash CS3 you can create a font symbol in the library, and export it for ActionScript. But with this way if you embed the font in the library then flash automatically embeds all available characters. So the compiled external font swf size will increased and bloated the load-time with unused fonts. This was the largest issues especially if we working with Asian fonts. You can find more informations about it in this nice article

With Flex 3.0 and mxmlc (Flex SDK 2-3) there’s the embed metatag where you can even define font character ranges which should be embedded for reducing compiled external font swf size:

1. [Embed(source='font.ttf', fontName='Font Name', unicodeRange='U+0021-U+0021, ... , U+2122-U+2122')]

or with this tag :

1. [Embed(source='font.ttf', fontName='Font Name', fontWeight='bold', fontStyle='italic')]

Another nice article here

Unfortunatelly if we combining subset tag (unicodeRange) with fontWeight / fontStyle tag will cause a Flex compile error. I hope in Flex 4 this issue fixed.

This article explain the same approach, but it need to add extra font family (Bold or Italic) at specific font but Flex will still treat them as separate fonts.

 

All the examples (both Flash CS3 or Flex 3.0) I’ve seen so far only address the loading of one font either in regular weight or bold, but not one (subset characters ranges) fonts with regular, weight, italic or bold-italic at the same time. And it seem very difficult for export one (subset characters ranges) font as external font, (ie loading the font from an external swf) and change font weight / font style at runtime in loader (main app) swf.

Luckily I was able make something worked, here what I did :

1. Embed font in FLA file with instance textfield at the stage (Benefit: we can make subset of required glyphs only, and font style/weight). We need create four instances textfield (Regular, Bold, Italic and Bold-Italic texfield) and publish the swf for each font, (ie. Verdana_Style.swf for Verdana). In this step the published swf doesn’t contain class definition yet. So we can not import it at runtime.
   
2. Transcoding the published swf (also give a class definition) with Flex 3.0 compiler with Embed metatag and publish to final external swf font (i.e Verdana.swf)
   package
   {
    import flash.display.Sprite;
    import flash.text.Font;                         
   
   public class Verdana extends Sprite
    {
   
   [Embed(source='library/fontstyle/Verdana_Style.swf', fontName='Verdana')]
      public static var regular:Class;
   
   [Embed(source='library/fontstyle/Verdana_Style.swf', fontName='Verdana', fontWeight='bold')]
      public static var bold:Class;
   
   [Embed(source='library/fontstyle/Verdana_Style.swf', fontName='Verdana', fontStyle='italic')]
      public static var italic:Class;
   
   [Embed(source='library/fontstyle/Verdana_Style.swf', fontName='Verdana', fontWeight='bold', fontStyle='italic')]
      public static var boldItalic:Class;
   
   public function Verdana()
      {
        super();
   
     Font.registerFont ( regular );
        Font.registerFont ( bold );
        Font.registerFont ( italic );
        Font.registerFont ( boldItalic );
      }
   
   }
   }
3. Import the final external swf font at runtime to main application.
   Here the simple actionscript 3.0 with Lithos Pro Regular font demo.
   package {
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.URLRequest;
    import flash.text.*;    
   
   public class DemoExternalFontSimple extends Sprite
    {
      public static const FONT_NAME:String = 'Lithos Pro Regular';
      public static const FONT_LIB:String = "LithosProRegular.swf";
   
   public function DemoExternalFontSimple ()
      {
        loadFont ('fontlib/'+FONT_LIB);
      }
   
   private function loadFont ( url:String ) : void
      {
        var loader:Loader = new Loader ();
        loader.contentLoaderInfo.addEventListener ( Event.COMPLETE, fontLoaded );
        loader.load (new URLRequest ( url));
      }
   
   private function fontLoaded ( event:Event ) : void
      {
        drawText();
      }
    }
   }
      public function drawText () : void
      {
        var tf:TextField = new TextField ();
        tf.defaultTextFormat = new TextFormat (FONT_NAME, 16, 0);
        tf.embedFonts = true;
        tf.antiAliasType = AntiAliasType.ADVANCED;
        tf.autoSize = TextFieldAutoSize.LEFT;
        tf.text = FONT_NAME + " Regular was here...:;*&^% ";
        tf.selectable = false;
        tf.rotation = 1;
        tf.x = 10;
        tf.y = 10
   
   var tf2:TextField = new TextField ();
        tf2.defaultTextFormat = new TextFormat (FONT_NAME, 16, 0, true);
        tf2.embedFonts = true;
        tf2.antiAliasType = AntiAliasType.ADVANCED;
        tf2.autoSize = TextFieldAutoSize.LEFT;
        tf2.text = FONT_NAME + " Bold was here...:;*&^% ";
        tf2.selectable = false;
        tf2.rotation = 1
        tf2.x = 10;
        tf2.y = 50
   
   var tf3:TextField = new TextField ();
        tf3.defaultTextFormat = new TextFormat (FONT_NAME, 16, 0, false, true);
        tf3.embedFonts = true;
        tf3.antiAliasType = AntiAliasType.ADVANCED;
        tf3.autoSize = TextFieldAutoSize.LEFT;
        tf3.text = FONT_NAME + " Italic was here...:;*&^% ";
        tf3.selectable = false;
        tf3.x = 10;
        tf3.y = 100
   
   var tf4:TextField = new TextField ();
        tf4.defaultTextFormat = new TextFormat(FONT_NAME, 16, 0, true, true);
        tf4.embedFonts = true;
        tf4.antiAliasType = AntiAliasType.ADVANCED;
        tf4.autoSize = TextFieldAutoSize.LEFT;
        tf4.text = FONT_NAME + " Bold Italic was here...:;*&^% ";
        tf4.selectable = false;
        tf4.x = 10;
        tf4.y = 150;
   
   addChild(tf);
        addChild(tf2);
        addChild(tf3);
        addChild(tf4);
      }

Merapi: Alpha Code Released!

Well, Merapi has been a long time in the making, but on July 14th, 2008 the initial Merapi Alpha release candidate has been distributed to the Merapi Alpha community of users.

Last evening Adam packaged up first Alpha RC 1 Build! It seems to be bug free and functioning rather nicely!

Read more : http://merapiproject.net/

Buzzword, Awesome online web processor..

A nice Flex application for word processing over web has been released on http://buzzword.acrobat.com.

I spent a little time today for playing around it and found some nice features. It provide capabilities such importing a *.doc files, and successful for rendering table, enable history operation (undo, redo), and other rich text processing operations.

Other good thing about it that Adobe has a whole set of Development APIs that can be used in Flex/AIR to provide such capabilities into our applications.

Blogged with the Flock Browser

Looking Flex Developer

Sangat sulit untuk mencari Flex Developer pada saat ini. Terutama sekali disebabkan umur Teknologi Flex masih sangat muda.

Bagi anda yang belum pernah mendengar tentang Flex bisa saya jelaskan sedikit, Flex adalah aplikasi framework opensources yang berguna untuk pembuatan Rich Internet Application (RIA). Aplikasi ini berjalan di web diatas platform Flash Player, atau bisa juga berjalan di desktop diatas platform Adobe AIR.

Terminologi RIA sendiri sudah santer beberapa tahun sebelum tahun 2000, saya tidak bermaksud panjang lebar tentang RIA dan penjabarannya dalam bahasa Indonesia. Juga tidak menuliskan lebih dalam tentang Flex. Anda bisa mencari lebih lanjut tentang teknologi Flex ini lewat search engine.

Secara keseluruhan Framework Flex dianggap powerful dalam pengembangan aplikasi web dan mudah pakai untuk segi "user experience" yang menjadi standar dalam industri Web 2.0.

Mempelajari Flex sangatlah mudah bagi developer/programmer aplikasi yang berasal dari Java, C#, C++, VB, Delphi dan dari bidang pemrogramman lain yang terbiasa dengan konsep component/class.
Kunci dari kemudahan itu lebih disebabkan karena developer yang sudah terbiasa dalam pengembangan berorientasi object / class/ component akan lebih mudah memahami konsep Framework Flex yang sejatinya merupakan kumpulan object /component dalam satu package raksasa framework actionscript yang berjalan di Flash Platform.

Seiring dengan kedewasaan web yang bergerak menuju era Web 2/3.0, RIA dan SOA (Services Oriented Architecture), Flex menjadi salah satu kandidat (lainnya JavaFX, GWT, Silverlight Platform) yang semakin diminati dipasar masa depan.
Permintaan yang meningkat pesat dalam waktu singkat terhadap developer Flex tidak diimbangi dengan tersedianya developer Flex dalam jumlah yang mencukupi menyebabkan developer Flex yang berpengalaman masih sulit dicari.

Hal ini menyebabkan adanya pergerakan dalam jumlah luar biasa dari developer Java yang memperluas keterampilannya ke teknologi ini. Bisa diperhatikan di pasar dunia (terutama Amerika) banyak perusahaan besar yang lebih memilih mencari developer Flex yang mempunyai riwayat bagus dalam skill Java.

Kebanyakan developer Java berpendapat mempelajari Object Oriented di Actionscript dan UI markup language (MXML) seperti ber-rekreasi di taman baru. Kalaupun ada tantangan yang muncul (bagi mereka) adalah dalam urusan design. Karena developer bahasa Java, C# dan bahasa Object Oriented lainnya adalah murni developer dan untuk urusan design, animasi di Flash merupakan hal lain bagi mereka. Tetapi dengan teknologi di Flex ini memungkinkan kedua skill tadi menjadi saling berkaitan erat.

Terdapat jutaan developer Flex saat ini tapi masih belum mencukupi kebutuhan pasar. Keadaan ini persis sama yang dialami Java diakhir 90-an. Sehingga komunitas Flex dunia perlu memenuhinya dengan merekrut tenaga siap pakai yang berasal dari bidang lain, salah satu caranya dengan porting kemudian mengajak mereka mempelajari Flex. Kira-kira terdapat 5-10 juta developer diluar sana yang pantas menjadi kandidat. Kemudian membuat team Flex yang mantap ditempat anda.

Bila anda sudah merasa cukup sebagai Flex Developer yang berasal dari Actionscript Coder / Flash Developer dan sudah siap masuk ke medan ini perlu anda perhatikan beberapa fakta :

"Kebanyakan Team - team besar Flex Developer bukan berasal murni dari komunitas Flash."

Contohnya Buzzword Virtual Ubiquity. Team ini tidak mempunyai pengalaman sama sekali di Flex apalagi di Flash. Kebanyakan mereka developer tangguh di C dan C++ untuk pengembangan aplikasi desktop. Nasib mereka berawal dari kenekatan porting ke Flex sewaktu Flex 2 masih Beta 2. Berawal dari sekedar menulis prototype aplikasi editor document, kemudian memantapkan diri mengembangkan
sebuah editor dokumen online lengkap. Saat ini team mereka adalah salah satu yang terdepan dalam penerapan Flex. Ini ditunjang oleh pemahaman dan pengetahuan yang sangat mendalam dan berpengalaman di bidang Object Oriented Development.

Kemudian Yahoo Web Messenger, team ini juga tidak mempunyai pengalaman sama sekali di Flex / Flash sebelumnya. Tetapi aplikasi instant messenger di web yang dikembangkan berasal dari Yahoo Messenger yang di-porting ke protokol flash.net.Socket di Actionscript 3.0.

Masih banyak lagi seperti Farata System, Cynergy System, Google Map API, Twitter dan lainnya yang digawangi orang-orang yang sudah matang sebelum menyeberang ke Flex. Kuncinya adalah mereka sudah sangat paham tentang Design Pattern dan skill lainnya yang diperlukan untuk mempelajari Flex, juga terdapat faktor penting lain yaitu keterampilan dan pengalaman-pengalaman tertentu yang sulit diajarkan langsung dan cuma bisa didapatkan di proyek nyata selama bertahun-tahun sebelumnya.

Bila anda merasa sangat tertarik di Flex dan Flash Platform, dan ingin berkiprah total di bidang ini, paling tidak ada beberapa yang perlu diperhatikan :

Pengembangan Component, paling tidak anda sudah terbiasa berurusan dengan pembuatan component di Flex, karena sebagian besar bergaul di Flex melulu ke component. Biasakan akrab dengan createChildren(), commitProperties(), measure(), updateDisplayList() sampai ke urusan packaging swc, dan lain-lain.

Desktop Application Development, ini tidak perlu geek banget, tapi setidaknya anda sudah tahu kalau Flex sebagai applikasi RIA mampu menyiapkan diri pada keadaan online/offline. Desktop Development sedikit banyak juga diperlukan dalam pengembangan Aplikasi AIR.

OOP Skills - Classes, Interface, Composition, Inheritance, hierarki Object di Flex termasuk DisplayObject dan Container.

Development/ Design / Architecture Pattern, Konsep Framework, MVC dll.

Other Languages, seperti Java, C, C++. C# dll untuk memperluas wawasan dan memudahkan anda porting third party API/ algorithma yang available ke actionscript.

CSS Design, Skinning , Animations, Easing dan Effects, bisa jadi salah satu wilayah yang abu-abu di Flex, jarang developer murni berurusan disini. Bila anda enjoy dengan design dan interactive content mungkin cocok menjadi sub-spesialisasi disini.

Tidak alergi dengan Konsep lingkungan Enterprise. Sebisa mungkin perbanyaklah pengetahuan tentang konsep Enterprise di Flex, siapa tahu nasib anda dimasa depan lebih baik, sehingga terdampar di perusahaan bule yang berlevel enterprise. Di linkungan ini dari sekarang sudah harus membiasakan diri dengan Test Driven Development (TDD) seperti FlexUnit framework, Continuous Integration (CI), Version Control, Localization framework, Messaging Services (AMF3, XML, SOAP, HTTP, RTMP / RTMPF) sampai ke SOA kalau perlu. [Gak apa- apa namanya juga belajar.. :)].

Loving Flash Player, ini mutlak karena irama pergerakkan Flex tergantung dengan feature-feature di Flash Player terbaru, sehingga dengan intens mengikuti perkembangan Flash Player anda tahu di Flex versi berapa Runtime Shared Library(RSL) available, Framework Cache, Protocol RTMPF, UDP, Peer2peer Protocol, Sound Channel improvenment, Native 3D effect, dan lainnya. Memang tidak perlu mengikuti semuanya, paling tidak kita tetap focus ke spesialisasi kita, tapi dengan sedikit banyak tahu perkembangan Flash Player terbaru siapa tahu anda menjadi Pioneer untuk daerah baru yang belum terjamah Flex di platform Flash, seperti yang di alami oleh Ribbit dengan VoIP-nya pada saat Flash Player 9 di release.

Sampai saat ini Flash Player sudah mencapai versi 10 dengan installer kurang dari 2MB tetapi sudah mampu menggerakkan framework setangguh Flex. Dengan melihat kecepatan koneksi di jaman UMTS ini bila installer Flash Player dimaafkan melebihi 3MB mestinya anda jangan cuma meletakkan satu kaki di platform [ini]..