Pseudo-Console using Flex 3
Today I’ll show you a way to realize a console-like component in Flex 3 (3.4). This is really a personal way to handle the problem, I can’t garantee it is a best practice, I can garantee it works.
Let’s move forward…
The first file is the Main.mxml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mc="org.dierrelabs.components.*" > <mx:Script> <![CDATA[ import org.dierrelabs.components.Command; import org.dierrelabs.components.Response; private function retrieveInfo(event:Event):void { terminal.addChild( new Response() ); terminal.addChild( new Command() ); } ]]> </mx:Script> <mx:Style> .mainConsole { backgroundColor: "0x000000"; } </mx:Style> <mx:Panel styleName="mainConsole" width="600" height="400" title="Terminal" > <mx:VBox> <mx:VBox id="terminal" creationComplete="terminal.addEventListener(Command.NEW_COMMAND, retrieveInfo, true, 0, true );" > <mc:Command /> </mx:VBox> </mx:VBox> </mx:Panel> </mx:Application> |
Lines 6-7: we’re importing our custom components. “Command” is where we insert the input and “Response” is where we show the output. I know, a lot of fantasy in my naming skill.
Lines 9-13 and line 26: it’s a classic example of managing bubble events (this is my post ). The “retrieveInfo” function just add 2 new child in the VBox “terminal” because in this tutorial we’re not actually processing the input. It is executed when the event NEW_COMMAND is triggered inside the “Command” components. We add a listener to the father component “terminal” when the “terminal” itself is created ( creationComplete )
Not let’s see one of the two components: Response.mxml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <?xml version="1.0" encoding="utf-8"?> <mx:HBox creationCompleteEffect="{fade}" xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import <a href="tag/flash/" title="flash">flash</a>.events.Event; public static const NEW_COMMAND:String = "NewCommand"; private function sendCommand():void { command.enabled = false; dispatchEvent(new Event( NEW_COMMAND ) ); } private function deleteCommand(e:Event):void { if( e.currentTarget.enabled ) command.text = ""; } ]]> </mx:Script> <mx:Style> @font-face { src: local("Segoe Print"); fontFamily: Segoe; } .someText { fontFamily: Segoe; color: "0xFFFFFF"; } .someTextInput { fontFamily: Segoe; color: "0xFFFFFF"; backgroundColor: "0x000000"; backgroundDisabledColor: "0x000001"; borderThickness: 0; borderColor: "0x000000"; borderStyle: none; disabledColor: "0xFFFFFF"; focusAlpha: "0.0"; } </mx:Style> <!-- This is the Fade effect to use in the addedEffect event --> <mx:Fade id="fade" duration="700" alphaFrom="0.0" alphaTo="1.0" /> <mx:Text styleName="someText" text="consolehost:#" /> <mx:TextInput id="command" styleName="someTextInput" text="Here..." click="deleteCommand(event)" enter="sendCommand()" /> </mx:HBox> |
Line 21-43: the assumption is this is a tutorial. The StyleSheet should be located in an independent file because it is used by both components. THIS IS A BAD PRACTICE, it’s just for the sake of this tutorial.
So, what about this style? Well the coloring part is not really what matters here because the real thing is the font embedding. Why is that? Because the mx:Text is a dynamic text (meaning we can change it, da!) and if we do not embed the font used then we can use the fade effect on it. It is really simple. This is the syntax declaration:
1 2 3 4 5 6 7 | @font-face { src: url("location") | local("name"); fontFamily: alias; [fontStyle: normal | italic | oblique;] [fontWeight: normal | bold | heavy;] [advancedAntiAliasing: true | false;] } |
I’ve used FlashDevelop in a Windows Seven enviroment so I0ve used the keyword local which is the system name of the fonts we want. If you’re using Flex Builder Alpha on a linux machine I think you should use the url keyword giving the exact location of the *.ttf file.
You should also notice that the backgroundDisabledColor in the .someTextInput class is “0×000001″ and not “0×000000″. Why? There is a freakin’ bug.
Line 3-19: the actionscripting (is that even a word?!?) part. The “sendCommand” function is triggered when the user hit the enter key. It disables the TextInput (remember we’re making a console so you can’t change a command already processed) and the send the signal to the VBox in Main.mxml (look at line 26 in Main.mxml).
The “deleteCommand” function is used to not delete a command after we processed that command. It will be clear in the running example.
Let’s look at the last file: Respond.mxml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <?xml version="1.0" encoding="utf-8"?> <mx:HBox addedEffect="Fade" xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Style> @font-face { src: local("Segoe Print"); fontFamily: Segoe; } .someText { fontFamily: Segoe; color: "0xFFFFFF"; } .someTextInput { fontFamily: Segoe; color: "0xFFFFFF"; backgroundColor: "0x000000"; borderThickness: 0; borderColor: "0x000000"; borderStyle: none; disabledColor: "0xFFFFFF"; focusAlpha: "0.0"; backgroundDisabledColor: "0x000000"; } </mx:Style> <mx:Text styleName="someText" id="response" > <mx:htmlText> <![CDATA[ Prova <br/> CIAO ]]> </mx:htmlText> </mx:Text> </mx:HBox> |
There’is not really much to say about it. It’s just the container where we will render our output.
And now look at the running example:
I repeat: this is not a BEST PRACTICE, so feel free to contribute because I’m learning too.
