Calendar component for Flex 4.5.1 SDK (Flex Mobile Project)

Hi,

I am working on a mobile development project using Adobe Flex 4.5.1 SDK for Playbook/Andriod/iOS project.

I need to implement a calendar component in my application and I have searched many websites but have not found a calendar control which is compatible with Flex 4.5.1 (mobile project)

The IBM ILOG Elixir Enterprise 3.0 beta program which contains the calendar control is the ideal component for my application which gives users the ability to interact/modify the calendar and add events, etc.

This solution is not compatible with SDK 4.5.1 and other components which I have found include the KC-Calendar, but that costs over $500.

I am looking for a free calendar component which I can download and integrate into one of my views of the tabbedviewnavigator application.

I apprecaite all suggestions!

Thanks in advance
Ahmer_Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

dgofmanCommented:
I don;t know may be someone will give you exisitng 3td party component but here is workaround if you will not get other options.

I am lazy and didn't install Android SDK on my machine, so example what I will use for Flex 3 SDK but should work on Android too.

Create a new Flex SDK 3 project or MXML Application name as "DateChooser" and add these lines

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
				paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
	<mx:DateChooser id="dateChooser" width="100%" height="100%"/>
</mx:Application>

Open in new window


Better to compile as realease-bin to remove debugger information and copy generated SWF f(DateChooser.swf) to your project source directory

Now try embed this SWF into your project compile and run

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="absolute"
				verticalAlign="middle" creationComplete="init()">
	
	<mx:Script>
		<![CDATA[
			import mx.core.UIComponent;
			[Embed(source="DateChooser.swf", mimeType="application/octet-stream")]
			private var dateChooserSWF:Class;
			
			private var loader:Loader;
			private var dateChooser:*;
			
			private function init():void{
				loader = new Loader(); 
				loader.loadBytes(new dateChooserSWF()); 
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
				canvas.rawChildren.addChild(loader);
			}

			private function onComplete(event:Event):void{
				event.target.removeEventListener(Event.COMPLETE, onComplete);
				var timer:Timer = new Timer(100);
				timer.addEventListener(TimerEvent.TIMER, handleTimer);
				timer.start();
			}
			
			private function handleTimer(event:TimerEvent):void{
				var content:MovieClip = loader.content as MovieClip;
				if(content && content.currentFrame == 2 && content.numChildren > 0) {
					event.target.addEventListener(TimerEvent.TIMER, handleTimer);
					event.target.stop();
					dateChooser = content["application"].dateChooser;
					dateChooser.addEventListener(Event.CHANGE, onDataChange);
				}
			}
			
			private function onDataChange(event:Event):void{
				trace(dateChooser.selectedDate.toDateString());
			}
		]]>
	</mx:Script>
	<mx:Canvas id="canvas" width="100%" height="100%"/>
</mx:Application>

Open in new window


You should able to use any event or properties of Adobe DateChooser
0
Ahmer_Author Commented:
Ok so I completed step 1. Which is to build DateChooser using Adobe Flex application and SDK 3.6

I copied the SWF file to my project source directory.

I am a little confused what to do with the 2nd code snippet. Should I paste that code into my view where I want the calendar or should I create another SWF file and paste that code in it?
0
Ahmer_Author Commented:
This is the code I have in my schedule view
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		title="My Schedule">
	
	<![CDATA[  
	import mx.core.UIComponent;  
	[Embed(source="DateChooser.swf", mimeType="application/octet-stream")]  
	private var DateChooserSWF:Class;  
	
	private var loader:Loader;  
	private var dateChooser:*;  
	
	private function init():void{  
	loader = new Loader();   
	loader.loadBytes(new dateChooserSWF());   
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);  
	canvas.rawChildren.addChild(loader);  
	}  
	
	private function onComplete(event:Event):void{  
	event.target.removeEventListener(Event.COMPLETE, onComplete);  
	var timer:Timer = new Timer(100);  
	timer.addEventListener(TimerEvent.TIMER, handleTimer);  
	timer.start();  
	}  
	
	private function handleTimer(event:TimerEvent):void{  
	var content:MovieClip = loader.content as MovieClip;  
	if(content && content.currentFrame == 2 && content.numChildren > 0) {  
	event.target.addEventListener(TimerEvent.TIMER, handleTimer);  
	event.target.stop();  
	dateChooser = content["application"].dateChooser;  
	dateChooser.addEventListener(Event.CHANGE, onDataChange);  
	}  
	}  
	
	private function onDataChange(event:Event):void{  
	trace(dateChooser.selectedDate.toDateString());  
	}  
	]]>  

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:View>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

dgofmanCommented:
You forgot call unit function on cteationComplete
0
Ahmer_Author Commented:
Updated code:

Still getting an error:

Initializer for 'mxmlContentFactory': cannot parse value of type mx.core.IDeferredInstance from text '  

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		title="My Schedule"
		creationComplete="init()">
	
	<![CDATA[  
	import mx.core.UIComponent;  
	[Embed(source="DateChooser.swf", mimeType="application/octet-stream")]  
	private var DateChooserSWF:Class;  
	
	private var loader:Loader;  
	private var dateChooser:*;  
	
	private function init():void{  
	loader = new Loader();   
	loader.loadBytes(new dateChooserSWF());   
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);  
	canvas.rawChildren.addChild(loader);  
	}  
	
	private function onComplete(event:Event):void{  
	event.target.removeEventListener(Event.COMPLETE, onComplete);  
	var timer:Timer = new Timer(100);  
	timer.addEventListener(TimerEvent.TIMER, handleTimer);  
	timer.start();  
	}  
	
	private function handleTimer(event:TimerEvent):void{  
	var content:MovieClip = loader.content as MovieClip;  
	if(content && content.currentFrame == 2 && content.numChildren > 0) {  
	event.target.addEventListener(TimerEvent.TIMER, handleTimer);  
	event.target.stop();  
	dateChooser = content["application"].dateChooser;  
	dateChooser.addEventListener(Event.CHANGE, onDataChange);  
	}  
	}  
	
	private function onDataChange(event:Event):void{  
	trace(dateChooser.selectedDate.toDateString());  
	}  
	]]>  

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:View>

Open in new window

0
Ahmer_Author Commented:
Ok I made some changes to the code and used fx instead of mx and that error is resolved.

I am still getting an error for the canvas property. Access of undefined property canvas

Updated code
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		title="My Schedule"
		creationComplete="init()">
	
	<fx:Script>  
		<![CDATA[  
		import mx.core.UIComponent;  
		[Embed(source="dateChooser.swf", mimeType="application/octet-stream")]  
		private var dateChooserSWF:Class;  
		
		private var loader:Loader;  
		private var dateChooser:*;  
		
		private function init():void{  
		loader = new Loader();   
		loader.loadBytes(new dateChooserSWF());   
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);  
		canvas.rawChildren.addChild(loader);  
		}  
		
		private function onComplete(event:Event):void{  
		event.target.removeEventListener(Event.COMPLETE, onComplete);  
		var timer:Timer = new Timer(100);  
		timer.addEventListener(TimerEvent.TIMER, handleTimer);  
		timer.start();  
		}  
		
		private function handleTimer(event:TimerEvent):void{  
		var content:MovieClip = loader.content as MovieClip;  
		if(content && content.currentFrame == 2 && content.numChildren > 0) {  
		event.target.addEventListener(TimerEvent.TIMER, handleTimer);  
		event.target.stop();  
		dateChooser = content["application"].dateChooser;  
		dateChooser.addEventListener(Event.CHANGE, onDataChange);  
		}  
		}  
		
		private function onDataChange(event:Event):void{  
		trace(dateChooser.selectedDate.toDateString());  
		}  
		]]>  
	</fx:Script>  

	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:View>

Open in new window

0
Ahmer_Author Commented:
When I try adding: xmlns:mx="http://www.adobe.com/2006/mxml"

I get the error that only one name space is allowed. Can you clarify if I can use mx for Flex Mobile development?

And what are the advantages of mx over fx?

I am a new flex user...
0
Ahmer_Author Commented:
I added the ID of canvas to the code but cannot use mx and fx doesnt resolve component implementation..
0
dgofmanCommented:
Are you using spark components?
0
dgofmanCommented:
If you will tell me how to create FLex project for Mobile devices on Eclipse I will able to test my solution. I downloaded Eclipse, Android SDK, Android Plugin https://dl-ssl.google.com/android/eclipse/

But I don't know how to create a project and execute or debug
0
Ahmer_Author Commented:
I am not sure how to do that on eclipse.

I am currently using Adobe Flash Builder 4.5 which you can download for free here:

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexsdk

This can be used to create apps for iOS, Android and Playbook as well as other Adobe Projects

And yes I am using Spark components as those are optimized for mobile development
0
dgofmanCommented:
is DatrChooser available for Mobile application?
0
dgofmanCommented:
Fine I installed and tested download my SWF file to your src directory and replace your View mxml with my code

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" 
		xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()">
	<fx:Script>
		<![CDATA[
			import mx.core.UIComponent;
			import mx.managers.PopUpManager;
			[Embed(source="DateChooser.swf", mimeType="application/octet-stream")]
			private var dateChooserSWF:Class;
			
			private var loader:Loader;
			private var dateChooser:*;
			
			private function init():void{
				var lc:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
				lc.allowLoadBytesCodeExecution = true;
				loader = new Loader(); 
				loader.loadBytes(new dateChooserSWF(), lc); 
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
				holder.addChild(loader);
			}
			
			private function onComplete(event:Event):void{
				event.target.removeEventListener(Event.COMPLETE, onComplete);
				var timer:Timer = new Timer(100);
				timer.addEventListener(TimerEvent.TIMER, handleTimer);
				timer.start();
			}
			
			private function handleTimer(event:TimerEvent):void{
				var content:MovieClip = loader.content as MovieClip;
				if(content && content.currentFrame == 2 && content.numChildren > 0) {
					event.target.addEventListener(TimerEvent.TIMER, handleTimer);
					event.target.stop();
					dateChooser = content["application"].dateChooser;
					dateChooser.addEventListener(Event.CHANGE, onDataChange);
				}
			}
			
			private function onDataChange(event:Event):void{
				var alert:PopupAlert = new PopupAlert();
				alert.selectedDate = dateChooser.selectedDate.toDateString()
				alert.open(this, true);   
				PopUpManager.centerPopUp(alert);
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<fx:Component className="PopupAlert">
			<s:SkinnablePopUpContainer>
				<fx:Script>
					<![CDATA[
						[Bindable] public var selectedDate:String;
					]]>
				</fx:Script>
				<s:Panel title="Selected Date" width="200" height="200">
					<s:VGroup width="100%" horizontalAlign="center" paddingTop="20" gap="20">
						<s:Label text="{selectedDate}"/>
						<s:Button label="OK" click="close();"/>
					</s:VGroup>
				</s:Panel>
			</s:SkinnablePopUpContainer>
		</fx:Component>
	</fx:Declarations>
	<mx:UIComponent id="holder" width="100%" height="100%"/>
</s:View>

Open in new window

DateChooser.swf
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ahmer_Author Commented:
AWESOME!!!

P.S. I will be working on this project for the next 7 months.. so I will be asking a lot of questions as I am learning adobe flex.

Is there a way I can tag you on my future questions?

Really appreciate your help!!
0
dgofmanCommented:
Add me to your 'following ' list those people on my first priority help :-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apache Flex

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.