As Flex / AIR applications go, this is very basic. We’re using the default WindowedApplication because it’s easy, adding a transparent-backgrounded png image to the stage, and a small ActionScript function, which positions the window in the centre of the users’ main screen.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" title="My Splash Screen" cornerRadius="0"
showFlexChrome="false" height="280" width="500"
applicationComplete="init();">
<mx:Script>
<![CDATA[
private function init():void {
var splashScreen:NativeWindow = this.nativeWindow;
splashScreen.x = (Screen.mainScreen.visibleBounds.width -
splashScreen.width) / 2;
splashScreen.y = (Screen.mainScreen.visibleBounds.height -
splashScreen.height) / 2;
}
]]>
</mx:Script>
<mx:Image x="0" y="0" source="images/splash/splash-bg.png" width="100%"
height="100%" creationCompleteEffect="Fade"
click="NativeApplication.nativeApplication.exit();"/>
<mx:Label text="Click on the box to close the application."
horizontalCenter="0" verticalCenter="0"/>
</mx:WindowedApplication>
The main things to note are that:
- Our WindowedApplication has a cornerRadius of 0 – which removes the default rounded corners effect so we can use squared corners on our image.
- To make things more pretty I’ve added a Fade effect to the image on creationComplete. - Note that the effect has to be added to the image or a container on the stage, rather than the applicationComplete function of the parent WindowedApplication component.
- The window is positioned on the users’ scren with Script, rather than properties. – It gives a little more flexibility to do things like this with scripts rather than properties.
- To get the nice drop shadow effect, the drop shadow is actually on the png image. Transparency is enabled by modifying the -app.xml settings of the main MXML file in Flex.
Flex is a convoluted term for sure. As the history of the product has evolved it has been a j2ee server, an as framework, a compiler and and IDE among other things.
In todays day and age we are at a released version 3, with version 4 in beta. The term flex typically refers to a way of developing flash platform application using the components in the open source framework developed by adobe.
Flex applications are written as a combination of xml markup (mxml) and actionscript much in the same vein that html applications are written with JS. The big difference is that the output of all your mxml and actionscript files is a single swf that can be embedded in a web page and displayed to the world. You can also use Flex to develop AIR applications, applications that can be installed on a users desktop. Continue reading ‘What is Flex?’
A lot of people steer clear of the Flex framework because they think it’s complicated. But generally speaking, a framework is just a set of reusable classes that can work together to provide a base for an application.
Take a house as an analogy: every house on the planet has a framework. Each house has a foundation and walls, and those walls can’t stand without the foundation. Once the foundation has been laid and the walls are up, a roof can be applied and the interior designed and implemented, while work continues on the initial foundation.
If we apply this analogy to the Flex framework, we have a stack of logic — the controller logic — that has been made available for communicating with a database, handling security, writing to the file system, and so on. There are also the user interface elements — buttons, canvases, dropdown lists, and so on. All of these also form the foundation of your Flex application — the concrete slab, the timber beams and the bricks with which to build your house.
Flex is easy for web developers to learn because, at its core, it has a lot in common with (X)HTML, CSS, and JavaScript. Suppose you wanted to create a simple web page with a form button. In XHTML you’d type the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Button Example</title>
</head>
<body>
<form method="post" id="example" action="http://www.example.com/">
<input type="button" name="newButton" id="newButton" value="This is a button" onclick="checkForm()" />
</form>
</body>
</html>
Continue reading ‘Flex Framework’
The Validator.enabled property lets you enable and disable a validator. When the value of the enabled property is true, the validator is enabled; when the value is false, the validator is disabled. When a validator is disabled, it dispatches no events, and the validate() method returns null.
For example, you can set the enabled property using data binding, as the following code shows:
Code Samples:
<?xml version="1.0"?>
<!-- validators\EnableVal.mxml --> Continue reading 'Enabling and disabling a validator in Flex'
The Validator class, the base class for all Flex validators, contains a required property that when set to true causes validation to fail when a field is empty. You use this property to configure the validator to fail when a user does not enter data in a required input field.
You typically call the validate() method to invoke a validator on a required field. This is often necessary because you cannot guarantee that an event occurs to trigger the validation– an empty input field often means that the user never gave the input control focus.
Continue reading ‘Flex Validating required fields’
