Apache Flex Tutorial for Beginners
2019-06-18 09:12:32

Apache Flex Tutorial for Beginners

What is Apache Flex?

Apache Flex is an open source application framework. It allows us to easily build a mobile application for Android, IOS, and BlackBerry Tablet OS devices.  We can also build a traditional application for browser and desktop using the same programming model, tool, and codebase. We can easily create mobile apps using Apache Flex Framework. Apache Flex, formerly Adobe Flex, is a software development kit (SDK). We can use Flex SDK to create a wide range of highly interactive and expressive application. For example: - A data visualization application built in Apache Flex can pull the data from several back-end sources and display it visually. Apache Flex is developer friendly. In 2011, Adobe donated Flex to the Apache Software Foundation. Flex uses MXML and ActionScript. MXML is used to define UI layouts and other non-visual static aspects. ActionScript is used to address dynamic aspects and as code-behind. Flex requires Adobe AIR or Flash Player at runtime to the application. Apache Flex Tutorial In 2014, Apache Software Foundation started a new project FlexJS. It was created to cross-compile ActionScript3 to JavaScript. So that, it can run on browsers that do not support Adobe Flash Player and those devices that do not support Adobe AIR runtime. In 2017, FlexJS was renamed as Apache Royale. SDK 4.16.1 is the latest version of the Apache Flex SDK. It released under the version 2 of Apache License on November 23, 2017. Apache Flex Introduction

Advantage of Apache Flex

  • Apache Flex runs on the Adobe Flash Player, which can be found almost everywhere.
  • Adobe supports Apache Flex.
  • Apache Flex apps can easily run outside the browser and offline.
  • IDE support comes from Adobe with FlashBuilder and JetBrains with IntelliJ.

Key Features of Apache Flex

One Codebase Output Everywhere Apache Flex SDK allows us to write the code that is highly reusable and deployable on all major platforms. To make your application stylish and attractive with minimal works, utilize the UI components such as buttons, containers, forms, data grids, lists, etc. In the browser We can make available our application to over 90% of internet-connected devices by targeting the Adobe Flash Player. Target the Internet Explorer 5+, Firefox, Chrome, Opera, and Safari on Windows, Mac OSX, Linux, and Solaris OS in a predictable and consistent manner. Mobile and Tablets It has never been easier for several mobile platforms like Apple iPods, iPads, and Android devices to develop applications when coupled with Adobe AIR. So, Apache Flex provides a way where we can deploy our apps to the respective app store and save time spent making native applications. Choose your Tools Do you need to develop the native applications for Apple, but only have PC? Do you want to write your mobile app for both platforms in your choice of IDE? With support from Eclipse-based Adobe Flash Builder, FDT, FlashDevelop and JetBrains IntelliJ IDEA we can work at our own pace, using the platform we want. Apps on the TV Apache Flex application can be compiled for use on smart TV utilizing the Broadcom platform. Don’t add another native platform yet that we need to learn in order to publish our apps where our customers are. Apache Flex has the tool chain in place for us to go where we want to go. System requirement
  • The very first requirement of Apache Flex is JDK 1.4 or higher is installed in our system. Verify Java installation on our machine by executing the given commands for different platforms.
Operating System               Task Command
Windows CMD c:\>java -version
Linux CMD Terminal $ java –version
Mac    Terminal java -version

How to Apache Flex SDK?

We can download Apache Flex for Windows, Linux, and Mac OS. The following steps are given for windows. Step 1: For download, the Flex SDK clicks on http://flex.apache.org and go to Download Flex. Apache Flex SDK Step 2: Go to Download Flex a SDK Installer (For Application Developer). Apache Flex SDK Installer Step 3: Here, we get the latest Apache SDK, i.e., 4.16.1. The Apache Flex suggests that we download the latest released version. Click on the download button. Apache Flex suggests Step 4: Now, we run the Apache Flex and set the location where we want to install. Click on Continue and follow the instructions. Apache Flex and set the location Step 5: Now, we need to select our Flex, AIR, and Flash Player version. Click on Next button after selecting the versions for each application. Apache flex Step 5 Step 6: Select the installation directory C:\Program Files\Apache Flex\Apache Flex 4.16.1 v32. We will need to create an Apache Flex 4.16.1 v32 directory. Apache Flex Step 6 Step 7: Here, we have to check all the boxes to accept each of the License Agreements. Click on the Install button to download all the components into new Apache Flex 4.16.1 v17 directory. Apache Flex 7 Step 8: Once we click on the Install button, the installation of Apache Flex is started. Apache Flex 8 Step 9: Apache Flex is successfully installed. Click on OPEN APACHE FLEX FOLDER to see the Apache Flex files. Apache Flex 9

Creating our first Hello World application

It is very simple, easy, generic Hello World application. If you want to learn, check out some other resource and videos http://flex.apache.org/doc-videos.html.
  1. Set the height and weight of your application to the application tag.
Width=”540” height=”420”
  1. Add a new Layout tag within the application tags. This will tell Apache Flex that how we plan on laying out our app.
<s: layout></s: layout>
  1. Add a BasicLayout tag within layout tags, and this will tell Flex that where to place our components.
<s: BasicLayout />
  1. Add a Label tag between the Application and Layout tags. We will be setting theText horizontalCenter and verticalCenter properties. 
    <s: Label text=”Hello World!” horizontalCenter=”0” verticalCenter=”0” />
  2. Click on Debug toolbar. Our application should launch in our default web browser. Hello World! Will appear in the middle of the screen.
<? xml version= “1.0” encoding=”utf-8”?>
<s:Application xmlns:fx=”http:ns.adobe.com/mxml/2009”
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx” width=”640” height:480”>
<s:layout>
<s:BasicLayout />
</s:layout>
<s:Label text=”Hello World!” horizontalCenter=”0” verticalCenter=”0” />
</s:Application>
Output Apache Flex Output   Note: Apache Flex 4.8.0 is the first release of Apache Flex.