Jan 12
Flex – FlexTypeTester
The FlextypeTester is a small Flex based tool for comparing different type settings. You can set some common paramters for a sample text. These settings are applied automatically and allow a direct comparison of different settings.
The application layout is based on a canvas arrangement. The two setting panels themselves are encapsulated in a component that is integrated in the main MXML file. Event handling is done with inline ActionScript code manipulating the result type.
?xml version="1.0" encoding="UTF-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:component="*" creationComplete="setText()">
<mx :Style source="style.css"/>
</mx><mx :Script>
public function setText():void{
settingOne.textArea.text = textAreaInput.text;
settingTwo.textArea.text = textAreaInput.text;
}
</mx>
<mx :Canvas width="100%" height="100%">
<mx :Canvas x="0" y="0" width="100%" height="75" styleName="header"/>
<mx :Label text="FlexTypeTester" x="50" y="40" styleName="headline"/>
<mx :Label text="v1.0" x="220" y="52" styleName="labelWhite"/>
<mx :Canvas x="0" y="76" width="100%" height="175" styleName="panel"/>
<mx :Label text="Sample Text" x="50" y="80" styleName="labelWhite"/>
</mx><mx :TextArea id="textAreaInput" x="50" y="100" width="400" height="80" change="setText()">
</mx><mx :text>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus tortor odio, aliquet vel, convallis id, volutpat tempus, tortor. Sed faucibus consequat quam. Nulla varius feugiat nunc. Curabitur eleifend varius neque. In libero. Nulla orci neque, suscipit in, adipiscing ut, fermentum sit amet.
</mx>
<mx :TextArea id="textAreaDesctiption" x="475" y="100" width="375" height="80" styleName="description" editable="false">
</mx><mx :text>
The FlexTypeTester is a small tool that allows you to compare different text settings. Enter or paste a sample text in the textarea. Choose your settings from below. Parameters are automatically applied.
</mx>
<mx :Label text="Settings one" x="50" y="190" styleName="labelWhite"/>
<component :Settings id="settingOne" x="50" y="210"/>
<mx :Label text="Settings two" x="450" y="190" styleName="labelWhite"/>
<component :Settings id="settingTwo" x="450" y="210"/>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:component="*" creationComplete="setText()">
<mx :Style source="style.css"/>
</mx><mx :Script>
public function setText():void{
settingOne.textArea.text = textAreaInput.text;
settingTwo.textArea.text = textAreaInput.text;
}
</mx>
<mx :Canvas width="100%" height="100%">
<mx :Canvas x="0" y="0" width="100%" height="75" styleName="header"/>
<mx :Label text="FlexTypeTester" x="50" y="40" styleName="headline"/>
<mx :Label text="v1.0" x="220" y="52" styleName="labelWhite"/>
<mx :Canvas x="0" y="76" width="100%" height="175" styleName="panel"/>
<mx :Label text="Sample Text" x="50" y="80" styleName="labelWhite"/>
</mx><mx :TextArea id="textAreaInput" x="50" y="100" width="400" height="80" change="setText()">
</mx><mx :text>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus tortor odio, aliquet vel, convallis id, volutpat tempus, tortor. Sed faucibus consequat quam. Nulla varius feugiat nunc. Curabitur eleifend varius neque. In libero. Nulla orci neque, suscipit in, adipiscing ut, fermentum sit amet.
</mx>
<mx :TextArea id="textAreaDesctiption" x="475" y="100" width="375" height="80" styleName="description" editable="false">
</mx><mx :text>
The FlexTypeTester is a small tool that allows you to compare different text settings. Enter or paste a sample text in the textarea. Choose your settings from below. Parameters are automatically applied.
</mx>
<mx :Label text="Settings one" x="50" y="190" styleName="labelWhite"/>
<component :Settings id="settingOne" x="50" y="210"/>
<mx :Label text="Settings two" x="450" y="190" styleName="labelWhite"/>
<component :Settings id="settingTwo" x="450" y="210"/>
Watch the FlexTypeTester or the sources: Flex TypeTester application
Comments are closed.