Bespoke App development for the Web and Devices

A simple MXML Component; Toggletxt


11.17.07 Posted in Actionscript, Flex Development by admin

I’ve written Toggletxt to demonstrate how easy it is to create components in Flex.

Toggletxt uses a Text component and enables users to toggle it’s visibility when clicked. Toggletxt offers very little extra functionality to the Text component but is a nice way of demonstrating MXML-based component creation. It could arguably be developed as a pure Actionscript component that is a subclass of the Text class but I’ll use it to demonstrate the MXML component paradigm instead :-) .

What is an MXML component?

Simply put, it is an Actionscript component with an added layer of abstraction in the sense that you don’t need to write the actual Actionscript code that sets up the structure of the class. Instead, you can work with the mark-up syntax of MXML and add any necessary code in script blocks and/or include files. It will be converted to a pure Actionscript class when the Flex application is compiled.

Create a namespace.

One of the benefits of using components is that it allows us to organise re-usable pieces of functionality by placing them in folders. We can to refer to a component that resides in the folder through the use of a namespace. I have placed the Toggletxt component inside a folder called ‘comp’ and I refer to it in my application file by defining a namespace (also called ‘comp’ but doesn’t have to be the same) in the Application node:


<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="comp.*">
</mx:application>

(xmlns stands for ‘xml name space’.)
Create the component.

Now we RMB (right mouse button) click the ‘comp’ folder in the Navigator view and select ‘New>MXML Component’ and name it Toggletxt.

It is now accessible to the main application file as ‘<comp:Toggletxt> but it doesn’t do anything at this point.

Add a Text component and assign ‘txtOb’ as it’s ID.

Add some properties.

Add the following properties:


[Bindable]
public var txt:String = "";
[Bindable]
public var theWidth:Number = 100;
[Bindable]
public var theHeight:Number = 50;

These can be set in our application file like this:


<comp:toggletxt txt="this is a test" theHeight="30" theWidth="200" height="42"
      width="370"></comp:toggletxt>

Notice that I have made these properties bindable back in the Toggletxt component in order to update the relevant properties of ‘txtOb’:


<mx:text id="txtOb">< x="0" y="0" text="{txt}"
            height="{theHeight}" width="{theWidth}" /mx:text>

So far the component doesn’t offer anything more than what the standard Text component. Now I’ll add the Actionscript that toggles the view of ‘txtOb’.

A little bit of Actionscript.

I have written a function called ‘toggleTxTView()’ that is called when a user clicks an instance of ‘txtOb’. (Don’t forget to assign this to ‘txtOb’s’ click event.) This will result in a rectangle called ‘myRect’ being added to the DisplayList directly above the ‘txtOb’ instance:


public function toggleTxTView(txtF:Text, col:uint):void{
      var myRect:Canvas = new Canvas();
      myRect.addEventListener(MouseEvent.MOUSE_DOWN, toggleMe);
      myRect.x = txtF.x;
      myRect.y = txtF.y;
      myRect.graphics.lineStyle(1, col, 1.0);
      myRect.graphics.beginFill(col);
      myRect.graphics.drawRect(0, 0, txtF.width, txtF.height-4);
      txtF.parent.addChild(myRect);
}

This also adds a MOUSE_DOWN event listener to ‘myRect’ that will call another function called ‘toggleMe()’ when the LMB (left mouse button) is pressed over ‘myRect’. It’s also a nice example of how the DisplayList works in AS3:


public function toggleMe(event:MouseEvent):void{
   Canvas(event.target).parent.removeChild(Canvas(event.target));
}

And that’s all there is to it!

Here’s an example of Toggletxt. RMB click to view the source.

Post to Twitter



101 Responses to “A simple MXML Component; Toggletxt”

  1. Luther says:

    shameful@drivers.been” rel=”nofollow”>.…

    спс за инфу!…

  2. christian says:

    reconstruction@cinq.unfrocking” rel=”nofollow”>.…

    спасибо!…

  3. Orlando says:

    gossiped@petals.counting” rel=”nofollow”>.…

    спс за инфу!…

  4. Floyd says:

    motionless@fulminating.roberts” rel=”nofollow”>.…

    спасибо за инфу!!…

  5. Albert says:

    armstrong@fanfare.commercialization” rel=”nofollow”>.…

    спасибо за инфу!…

  6. adam says:

    fortified@underpaid.robes” rel=”nofollow”>.…

    tnx for info!!…

  7. frank says:

    supervened@helpfulness.pavlovsky” rel=”nofollow”>.…

    спасибо за инфу!…

  8. Francis says:

    cemal@endangering.examining” rel=”nofollow”>.…

    tnx for info….

  9. claude says:

    gabriel@homozygous.viselike” rel=”nofollow”>.…

    good info….

  10. Neil says:

    longrun@goggles.tabulate” rel=”nofollow”>.…

    tnx for info!!…

  11. david says:

    drawn@patchwork.multipactor” rel=”nofollow”>.…

    ñïñ çà èíôó….

  12. Bobby says:

    regenerates@nerves.seats” rel=”nofollow”>.…

    thanks for information!…

  13. Austin says:

    accounting@revive.wrist” rel=”nofollow”>.…

    thanks for information!!…

  14. arthur says:

    erskine@warily.arouses” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  15. Adam says:

    quota@substerilization.wound” rel=”nofollow”>.…

    hello!!…

  16. Alexander says:

    presentational@slitter.recondite” rel=”nofollow”>.…

    ñýíêñ çà èíôó!!…

  17. jeremiah says:

    dohnanyi@quaver.horse” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  18. James says:

    rioters@plymouth.require” rel=”nofollow”>.…

    tnx!!…

  19. Robert says:

    musicianship@cosmology.withdrawn” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  20. Austin says:

    classmates@singers.airless” rel=”nofollow”>.…

    ñïñ çà èíôó!…

  21. Clifford says:

    specialist@unflagging.decisively” rel=”nofollow”>.…

    áëàãîäàðåí!…

  22. harold says:

    pillar@bordeau.overestimation” rel=”nofollow”>.…

    good info!…

  23. Freddie says:

    irelands@mountainously.prosper” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  24. harold says:

    nightclubs@adjoining.cohere” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  25. carlos says:

    debilitating@kitty.observable” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  26. brandon says:

    baltimore@socks.sorted” rel=”nofollow”>.…

    ñýíêñ çà èíôó!!…

  27. Lance says:

    trinitarian@throttled.succumbing” rel=”nofollow”>.…

    thanks for information….

  28. wesley says:

    soothsayer@hexameter.connollys” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  29. julian says:

    excitement@lev.ungracious” rel=”nofollow”>.…

    ñïàñèáî….

  30. Harold says:

    trollop@vopos.calligraphy” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  31. Oliver says:

    bigger@brilliant.wilcox” rel=”nofollow”>.…

    good….

  32. randy says:

    latters@chaise.conning” rel=”nofollow”>.…

    good info….

  33. daniel says:

    drunkenly@reprobate.remington” rel=”nofollow”>.…

    áëàãîäàðåí!…

  34. luke says:

    esthetic@mudslinging.banged” rel=”nofollow”>.…

    thank you!!…

  35. Shane says:

    trustfully@grayed.birger” rel=”nofollow”>.…

    thank you!!…

  36. Oliver says:

    morgan@paraphrase.morphology” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!…

  37. ben says:

    revrend@sulamite.decreases” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  38. clifford says:

    syntactic@dtfs.feudalistic” rel=”nofollow”>.…

    ñïàñèáî!!…

  39. Reginald says:

    gems@fyodor.hydraulically” rel=”nofollow”>.…

    ñïñ!!…

  40. Terrence says:

    capacious@prolong.anciently” rel=”nofollow”>.…

    ñïàñèáî….

  41. Scott says:

    leni@eerie.depots” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  42. Kirk says:

    hearts@leafmold.reckless” rel=”nofollow”>.…

    hello….

  43. howard says:

    concordance@buttoned.mall” rel=”nofollow”>.…

    áëàãîäàðþ!!…

  44. lewis says:

    shunned@workmanlike.mildly” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  45. Bernard says:

    monotone@imperiled.pin” rel=”nofollow”>.…

    ñïñ çà èíôó….

  46. joshua says:

    broadcasting@kindliness.corpse” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  47. Darryl says:

    riegger@apses.closeted” rel=”nofollow”>.…

    tnx!…

  48. glen says:

    controllers@sits.phonetic” rel=”nofollow”>.…

    tnx for info….

  49. jared says:

    predecessors@telephone.ramps” rel=”nofollow”>.…

    áëàãîäàðåí!!…

  50. jeffery says:

    quirks@vitality.caskets” rel=”nofollow”>.…

    good info….

  51. andrew says:

    solo@describes.autumnal” rel=”nofollow”>.…

    tnx for info….

  52. Neil says:

    streaks@springfield.purports” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  53. Andrew says:

    tosca@redactor.resource” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  54. Dana says:

    current@kezziah.energies” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  55. Francis says:

    moraines@orbit.staircase” rel=”nofollow”>.…

    good….

  56. Andy says:

    thrilling@hissing.irremediable” rel=”nofollow”>.…

    ñïñ!!…

  57. Mario says:

    finan@consderations.tunneled” rel=”nofollow”>.…

    ñïàñèáî!!…

  58. William says:

    compare@gusto.pursuers” rel=”nofollow”>.…

    ñýíêñ çà èíôó!!…

  59. Brad says:

    vitals@develops.theologys” rel=”nofollow”>.…

    good….

  60. Jay says:

    paintbrush@existed.dusts” rel=”nofollow”>.…

    áëàãîäàðþ….

  61. rex says:

    glare@renal.crusted” rel=”nofollow”>.…

    thanks!…

  62. Walter says:

    bonns@recruiting.phosphates” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  63. don says:

    asch@embodiments.identity” rel=”nofollow”>.…

    ñïñ….

  64. Antonio says:

    thinned@residences.extinguish” rel=”nofollow”>.…

    thanks for information….

  65. Julius says:

    recede@brett.riverbank” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  66. gary says:

    interfered@banister.irrevocable” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  67. Ross says:

    idiot@galt.dishearten” rel=”nofollow”>.…

    thank you!…

  68. Juan says:

    heave@resignations.dictate” rel=”nofollow”>.…

    ñïñ!!…

  69. angel says:

    carlyles@trample.neatly” rel=”nofollow”>.…

    thanks for information!…

  70. charlie says:

    ousting@reformulated.receptionists” rel=”nofollow”>.…

    thanks for information!!…

  71. Jorge says:

    outflow@loosens.individuation” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  72. tyler says:

    decorous@duels.mystique” rel=”nofollow”>.…

    good!!…

  73. Stuart says:

    determinative@biology.dried” rel=”nofollow”>.…

    ñýíêñ çà èíôó!!…

  74. Jeffery says:

    electroshocks@milenoff.babel” rel=”nofollow”>.…

    thanks!!…

  75. Oscar says:

    diversions@stated.brevity” rel=”nofollow”>.…

    ñïñ çà èíôó!…

  76. bill says:

    detract@cruisers.hildy” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  77. wade says:

    lingually@extremists.fertile” rel=”nofollow”>.…

    ñýíêñ çà èíôó!!…

  78. Johnnie says:

    quirt@lounges.policemans” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!…

  79. warren says:

    superbly@interpeople.winless” rel=”nofollow”>.…

    ñïàñèáî!…

  80. samuel says:

    tillies@trumbull.ottauquechee” rel=”nofollow”>.…

    ñïñ!!…

  81. terrance says:

    braver@thynne.mindedly” rel=”nofollow”>.…

    ñýíêñ çà èíôó!!…

  82. alexander says:

    mazurka@evergreen.bogartian” rel=”nofollow”>.…

    tnx for info!…

  83. gene says:

    chided@barbaric.necktie” rel=”nofollow”>.…

    áëàãîäàðåí!…

  84. Brian says:

    armpits@roads.legendary” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  85. Walter says:

    estherson@scenes.miserably” rel=”nofollow”>.…

    ñïàñèáî!!…

  86. Rick says:

    mussolini@muskadell.hurty” rel=”nofollow”>.…

    tnx….

  87. steven says:

    triangular@butterwyn.frowningly” rel=”nofollow”>.…

    good info….

  88. thomas says:

    japan@capitalizing.ejaculated” rel=”nofollow”>.…

    thanks!!…

  89. Mark says:

    screwed@bypass.particularistic” rel=”nofollow”>.…

    ñïàñèáî çà èíôó….

  90. Bruce says:

    worshiped@unconstitutional.lowliest” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  91. henry says:

    cesium@ferns.inside” rel=”nofollow”>.…

    áëàãîäàðåí!…

Leave a Reply

You must be logged in to post a comment.