Step 2: Define application settings

Before starting with actual code lets do some basic settings which will allow our application to give a define look and feel. So first of all open code view of main.mxml file and write below MXML code in it.

Now open main-app.xml file to define some settings for AIR application. In this file majority we would define application name and dimension related settings. Below is the code of my main-app.xml which you could simple copy and paste in your xml file.

Step 3: Place required components in main.mxml

Before starting with the core logic of the code we need to place various buttons and other flex components which will allow us to give a feel of first page of our application. To do so we need to write following set of code in main.mxml file.

Lets have a look on the output to understand what we achieve till now.

Step 4: Creating different views & mxml components

In this step we will create different views and other mxml components which will be used by these views. These views consist following items:

Day View

Week View

Month View

Event Form

Day view will further use “hourCell.mxml” and “hourCellLeftStrip.mxml”. Week view will use “hourCell.mxml”, “hourCellLeftStrip.mxml” and “weekCell.mxml”. Whereas Month view will use “monthCell.mxml”. In addition all these views are using “skin.css” file to use various colors and styles. Lets start with creating folders for these files then we will create mxml file and thereafter we would writing code for above views.

To create various folders just open “Flex Navigator” pane do right click on “src” folder and select “New > folder” from the drop down, refer to below Figure 4.1.

Figure 4.1

Once New Folder window is shown follow below points to create different folders:-

type “styles” in Folder name and click Finish.

Again open New folder window and type “mxml_views” in Folder name and click Finish.

Again open New folder window and type “classes/views” in Folder name and click Finish.

Again open New folder window and type “classes/utils” in Folder name and click Finish.

Again open New folder window and type “classes/skins” in Folder name and click Finish.

Again open New folder window and type “classes/model” in Folder name and click Finish.

Again open New folder window and type “classes/events” in Folder name and click Finish.

We are now through with folder creation. If I say you to show screen-shot of Flex Navigator at the moment it should be look like below Figure 4.2.

Figure 4.2

Very first class file which we needs to create is ButtonSkin.as. We will use this class in css file of the application, this class allows to create a skin for Flex button component.We will create this class under classes/skins folder, to create it do right click on skins folder and select New > ActionScript Class. Type class name as “ButtonSkin” and Superclass as “mx.skins.ProgrammaticSkin”. Click Finish. Refer to below Figure 4.3 for creating this class.

Figure 4.3

ButtonSkin.as: A very small yet useful class which defines the Skin of Flex Button component. This class is being used by “btnDayItems” style defined in skin.css file. Below is the code for the same.

The second file which we needs to create is “skin.css”. To create it right click on styles folder and select New > CSS File from the dropdown menu. Type file name as “skin” and write below code in this file.

skin.css: skin.css defines all styles that are used in Event Calendar application. Copy below code in your skin.css file.

Now we need to create various MXML components which will be used by different views or by the application. All these MXML files needs to be created in mxml_views folder to do that right click on mxml_views folder and select New > MXML Component.

EventForm.mxml: EventForm defines looks of event form which allow to save an event on the basis of certain parameters like date and time. These values are passed by CommonUtils class which we discuss later in this tutorial. To create do right click on mxml_views folder and select New > MXML Component and then copy below code in the file.

hourCell.mxml: hourCell.mxml file allows to show two buttons i.e. first and second half of an hour. This mxml is being used in a loop while generating day and week view. To create do right click on mxml_views folder and select New > MXML Component and then copy below code in the file.

hourCellLeftStrip.mxml: This file is also used in day and week view but to show a blue colored strip which shows hour numbers. To create do right click on mxml_views folder and select New > MXML Component and then copy below code in the file.

monthCell.mxml: This file is being used in Month view and show square boxes which further allow Month view to show description of an event if exist on a particular day in that month.To create do right click on mxml_views folder and select New > MXML Component and then copy below code in the file.

weekCell.mxml: weekCell is basically header file for week view which shows day names. It also contains an empty Canvas container which used by Week view to add hour items. To create do right click on mxml_views folder and select New > MXML Component and then copy below code in the file.

So, We are gone through all mxml files and now we are left with writing the core classes but before proceeding with those lets have a look at Flex Navigator screen-shot so we stand on a same plain. Please refer to Figure 4.4

Figure 4.4

Step 5: Writing Core Classes

Lets start writing core classes which will allow to generate actual views. These classes will use above MXML files as well. we will go one by one and create these classes. Very first class which we need to start with is “DataHolder.as”.

DataHolder.as: This class is used as database for Event Calendar application. All views if needs to store any kind of data they will use this class and not for only storing in case they need to check any stored data they only get that data from this class and then uses accordingly. DataHolder resides under classes/model folder. This class also uses EventDispatcher class to dispatch event to Main application file whenever a new Event is added by any of the views. To create this class do right click on model folder and select New > ActionScript Class, use below code to populate this class.

package classes.model
{
import classes.events.CustomEvents;
import flash.events.EventDispatcher;
/**
* DataHolder class represent all data which needs to be stored
* or needs to be used by any of the classes.
* It also dispatches events on adding a new event from any of the views.
* It is a singletone class so only single instance will be created through out the application cycle.
*/
public class DataHolder extends EventDispatcher
{
import flash.events.EventDispatcher;
public static var objDataHolder:DataHolder;
private var m_arrEvents:Array;
public function DataHolder()
{
m_arrEvents = new Array();
}
// return class instance and if it is not created then create it first and the return.
public static function getInstance():DataHolder
{
if(objDataHolder == null)
{
objDataHolder = new DataHolder;
}
return objDataHolder;
}
// will add any event. used by day view and week view to do so.
public function addEvent(_obj:Object):void
{
m_arrEvents.push(_obj);
updateViews();
}
// dispatch event to main.mxml to update views as per new event added
private function updateViews():void
{
dispatchEvent(new CustomEvents(CustomEvents.ADD_NEW_EVENT));
}
// currently not being used but could be used when we need to add a functionality of removing an event
public function removeEventAt(index:int):void
{
m_arrEvents.splice(index, 1);
}
// set and get dataprovider, which store all event related data
public function set dataProvider(_arrEvents:Array):void
{
m_arrEvents = _arrEvents;
}
public function get dataProvider():Array
{
return m_arrEvents;
}
}
}

CustomEvents.as: This class is extended to Event class and used to dispatch any event from any of the classes, additionally this class allows to send a object while listening to the event. So in case there is a requirement to send specific data to the listener then this class a great help to do so. To create this class do right click on events folder and select New > ActionScript Class, use below code to populate this class.

CommonUtils.as: This class resides under classes/utils folder. As per the name it is a common class which is being used by other classes. All functions are public so any class could use that as per the requirement. This class also fire events for buttons in day and week view which allows Event Form to fetch the required data. To create this class do right click on utils folder and select New > ActionScript Class, use below code to populate this class.

DayView.as: Out of three important view classes this is the very first view which is responsible for generating Day View in Event Calendar. This class is extended to Canvas class so it could be used in MXML files as well by using mxml tags. This class uses CommonUtils and DataHolder classes for generating view and data reading respectively. To create this class do right click on views folder and select New > ActionScript Class, use below code to populate this class.

WeekView.as: This is second important view class which is responsible for generating Week View of Event Calendar. This class is also extended to Canvas class so it could be used in MXML files as well by using mxml tags. This class uses CommonUtils, DataHolder and weekCell classes for generating view. To create this class do right click on views folder and select New > ActionScript Class, use below code to populate this class.

Now lets check the next demo to notice the changes. Be sure you click on Week button to check the output of WeekView.as.

MonthView.as: This is third & last important view class which is responsible for generating Month View of Event Calendar. This class is also extended to Canvas class so it could be used in MXML files as well by using mxml tags. This class uses CommonUtils, DataHolder and monthCell classes for generating view. To create this class do right click on views folder and select New > ActionScript Class, use below code to populate this class.

Let’s check once more the next demo. Be sure you click on Month button to check the output of MonthView.as.

So, we are through with this step as well. All above classes are very well commented so in case you need to understand any calculation logic just read those comments even then if there is some confusion please send me a comment I’ll try to respond on that soon. Just to cross check please have a look at Figure 5.1 to see whether you have all the required classes in place.

Figure 5.1

I hope all is well till now, take a deep breath as we are through with the crucial part of the application and now we just need to integrate above classes in our final step of Creating Flex Calendar.

Step 6: Integrating all these classes and generating the final output

We have already created main.mxml file which is being used as our main application file. Now what we need to add to our previous version of file is:-

Import CSS file in MXML.

Call events on Add Event button.

Import all views i.e. Day, Week and Month inside ViewStack.

Import EventForm view.

Add Events Listeners for these views.

Bind m_intCurrentDate variable to all views including EventForm.

Dispatch an Event to update views when a request for adding a new event is received.

Before going further lets ensure that we have imported packages in <mx:WindowedApplication> tag. Import statements are highlighted in bold

Now add Event Form which allow us to save an event on a selected date. Before adding this tag you must import CommonUtils class in <ms:Script> tag using import classes.utils.CommonUtils; and then write following MXML code

Conclusion

Now just compile and run your application. The final result should be similar to the final demo. You could also take it to further by saving event data in some database and then convert this application to a perfect desktop application including event alerts and other features which generally you see in other desktop applications. In case any help is required to do so or need help on this article feel free to drop a comment. And if you integrate new features on it, be sure to drop a comment showing it.

Ankur Arora is a creator of striking Flash & Flex applications, impeccable markup and code, and forward-thinking ideas and applications. He work as Flash & Flex expert and have hands on experience on creating solutions for various applications. From front-end work to hardcore server-side challenges, he worked on many such projects. He has over 7 years of experience in developing Serious games, Flash applications, RIAs, Drawing APIs, Web applications and many more.. You can visit his blog to know more about him and his projects.

Ever wondered if you could visualize your website in 3D? Well, here’s one such Firefox extension that allows you to do so. Tilt is a Firefox add-on that lets you visualize any web page DOM and provides the relationship between various parts of a website in 3D.

User Interface Design in C# Windows Form Application From Scratch In this C Sharp tutorial you will learn user interface design in C# application. This step-by-step tutorial will help you deeply understand…

In this second part article you will learn how to build an image gallery that will load images from a web server. I decide to call it “Intelligent” because you don’t need to configure any XML or flash file. Just put the Flash movie and the images on a server and they will be loaded automatically. Nice ah?

There are many popular open source tweening engines in the Flash community today. Numbered among these are Tweener, TweenLite/Tweenmax, Tweensy, and GTween. This is a short look at the capabilities of newcomer to the scene: BetweenAS3. BetweenAS3 is the tweening engine brainchild of Yoshihiro (yossy) Shindo and is available as part of the Spark project (i.e. it is brought to us by one of the same group that brought the world the FLARToolkit for Augmented Reality in Flash and countless other goodies).

A Flash CMS is a good option to deliver projects to your clients when they want to manage and change the content easly, without programming knowledge and avoiding to edit the flash files. Today, we show you the free available options which you should bear in mind before decide to go on Premium Products.

In this article you will learn how to build an image gallery that will load images from a web server. I decide to call it “Intelligent” because you don’t need to configure any XML or flash file. Just put the Flash movie and the images on a server and they will be loaded automatically. Nice ah?

I just wanted to thank you for sharing this. I was able to customize it to fit my project’s needs (as a web application in Flex 4.5–I’ll try to post the code I customized once the project is fully finished).

Hi Ankur, u have a great apps. i know it have been a long time ago, but it still cool. i have a question: i did all codes, but can’t get the event, no respons if i click it. i think i got wrong on this side below:

Now add Event Form which allow us to save an event on a selected date. Before adding this tag you must import CommonUtils class in tag using import classes.utils.CommonUtils; and then write following MXML code

Hi I was wondering how to add agenda feature to my rentalcar application and hopefully your tutorial comes in rescue. What i really want to do is to have vehiles on leftStrip intead of Hours and have a kind of layer crossdays showing details about client. how should i preceed on basis of yours. Regards