FComponentsHx
Components for haXe targetting flash8 & flash9

& SWFMill

Be careful ! This version is still in progress (until AsWing will be ported to haXe...), so your bug reports are very usefull and welcome !

  1. Introduction
  2. Installation
  3. How to use
  4. Complete example
  5. Skinning
  6. API
  7. TODO
  8. Download

 

1. Introduction :

FComponentsHx is a set of composants for haXe.
It will try to help all developpers that need to build haXe applications using forms with buttons, checkboxes, radiobuttons ...
For now the set has:

The components below are comming soon:

All this components are skinnable, you can make easilly your own design. We'll see later how to do that.
As you can see, FComponents are still in progress, so please, don't hesitate to contact me for information,
for suggestions or to report bugs.

 

2. Installation :

FComponentsHx is a package of classes.
To install it, just copy the directory 'fcomponentshx' where you want and add this directory to the haXe classpath.
For example if you have the classes in 'C:\myClasses\fcomponentshx', you have to add this command to the compiler : '-cp C:\myClasses\fcomponentshx'.
Then you can access all components in your application.

Or, by using haxelib:

haxelib install fcomponentshx
Note: The components work great without any skin. But if you want to add a skin, you have to add '-swf-lib mySkin.swf' to the compiler.
We'll see later about skins ;)

 

3. How to use :

FComponentsHx want to be as simple as possible. Maybe it will be difficult to use the first time but, this document will try to help all people, especially beginners !
Once all installed as seen in §2, you have to:

To make a comboBox, for example, you only have to write this:

movieCBx = new FComboBox ( flash.Lib.current, "Choose a movie", [ "Terminator", "Titanic", "MovieClip" ], [ "terminator", "titanic", null ], { x : 200.0, y : 330.0 }, movieCBxFunction );

That's all ! :)

 

4. Complete example :

To make a form that will report you informations about people playing your game:
Be careful : This example is a complete example with some events and tests, that's why it seems long.

class TestComponents { function new () { // To add your own CSS style: var css = FComponents.css; css.setStyle( "header", { fontFamily : "Arial", fontSize : 15, display : "inline" } ); css.setStyle( "Title", { fontFamily : "Arial", fontStyle : "italic", fontSize : 20, display : "inline" } ); // Main Title Label var titleLabel = new FLabel ( flash.Lib.current, "<title>Questions :</title>", { x : 200.0, y : null } ); // "Choose your hobbies" Label var hobbiesLabel = new FLabel ( flash.Lib.current, "<header>Check your hobbies please :</header>", { x : 200.0, y : 30.0 } ); // Hobbies Checkbuttons var sportCB = new FCheckButton ( flash.Lib.current, "Sport", { x : 200.0, y : 60.0 } ); var computerCB = new FCheckButton ( flash.Lib.current, "Computers", { x : 200.0, y : 80.0 }, true ); var ladiesCB = new FCheckButton ( flash.Lib.current, "Ladies", { x : 300.0, y : 60.0 } ); var jobCB = new FCheckButton ( flash.Lib.current, "My job", { x : 300.0, y : 80.0 } ); // "What's your age" Label var ageLabel = new FLabel ( flash.Lib.current, "<header>How old are you ? :</header>", { x : 200.0, y : 110.0 } ); // Ages RadioButtons var underRB = new FRadioButton ( flash.Lib.current, "Under 18", { x : 200.0, y : 140.0 }, [ "age" ] ); var overRB = new FRadioButton ( flash.Lib.current, "Over 18", { x : 200.0, y : 160.0 }, [ "age" ] ); // "What channel you're looking at" Label var ageLabel = new FLabel ( flash.Lib.current, "<header>What channel do you like looking at ? :</header>", { x : 200.0, y : 190.0 } ); // Channels list var channelLV = new FListView ( flash.Lib.current, [ "Red", "Green", "Blue", "Alpha" ], [ 1, 2, 3, 0 ], { x : 200.0, y : 220.0 } ); // "Choose your best movie" Label var movieLabel = new FLabel ( flash.Lib.current, "<header>Choose your best movie :</header>", { x : 200.0, y : 300.0 } ); // movies ComboBox var movieCBx = new FComboBox ( flash.Lib.current, "Choose a movie", [ "Terminator", "Titanic", "MovieClip" ], [ "terminator", "titanic", null ], { x : 200.0, y : 330.0 } ); // Name InputBox var nameLabel = new FLabel ( flash.Lib.current, "Choose your nickname\n( 10 chars max ) :</header>", { x : 200.0, y : 360.0 } ); var nickTextInput = new FTextInput ( flash.Lib.current, "Nickname", { x : 200.0, y : 390.0 }, 120, 10 ); var secretCB = new FCheckButton ( flash.Lib.current, "Secret", { x : 200.0, y : 410.0 } ); // Submit Button var submitBtn = new FButton ( flash.Lib.current, "<header><b>Submit</b></header>", { x : 350.0, y : 400.0 }, { width : 80.0, height : 30.0 } ); } static function main() { var v = new TestComponents(); } }

This is the result :

5. Skinning :

To make a skin for your component, you need :

The 'Rectangle' allows your pictures to be scaled without deforming the borders.
Take a look at the FButton picture :


Be careful : the first point ( 3, 3 ) represents the ( x, y ) coordinates,
the next two coordinates ( 58, 10 ), give the ( width, height ). Not the ( x, y ) !

This picture is cut into 9 splices.
The top-left, top-right, bottom-left and bottom-right splices will not be deformed by scaling.
The top-center and bottom-center will be scaled by width.
The center-left and center-right splices will be scaled by height.
The center-center part ( here in blue ) will be fully scalled.
In this example, the 'Rectangle' set is : new Rectangle ( 3, 3, 58, 10);

The same example with 'grayGlassSkin':

 

7. TODO :

The next steps are:

8. Download :

You can see the releases at google.code
Go to the download page.

Or, by using haxelib:

haxelib install fcomponentshx