[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Calendar component for Flex 4.5.1 SDK (Flex Mobile Project)

Posted on 2011-10-05
15
Medium Priority
?
2,484 Views
Last Modified: 2012-08-14
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
0
Comment
Question by:Ahmer_
  • 8
  • 7
15 Comments
 
LVL 29

Expert Comment

by:dgofman
ID: 36921400
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
 

Author Comment

by:Ahmer_
ID: 36922041
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
 

Author Comment

by:Ahmer_
ID: 36922049
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 29

Expert Comment

by:dgofman
ID: 36922059
You forgot call unit function on cteationComplete
0
 

Author Comment

by:Ahmer_
ID: 36922135
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
 

Author Comment

by:Ahmer_
ID: 36922147
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
 

Author Comment

by:Ahmer_
ID: 36922153
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
 

Author Comment

by:Ahmer_
ID: 36922158
I added the ID of canvas to the code but cannot use mx and fx doesnt resolve component implementation..
0
 
LVL 29

Expert Comment

by:dgofman
ID: 36922564
Are you using spark components?
0
 
LVL 29

Expert Comment

by:dgofman
ID: 36922796
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
 

Author Comment

by:Ahmer_
ID: 36924053
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
 
LVL 29

Expert Comment

by:dgofman
ID: 36925702
is DatrChooser available for Mobile application?
0
 
LVL 29

Accepted Solution

by:
dgofman earned 2000 total points
ID: 36926982
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
 

Author Closing Comment

by:Ahmer_
ID: 36928392
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
 
LVL 29

Expert Comment

by:dgofman
ID: 36929016
Add me to your 'following ' list those people on my first priority help :-)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Sometimes you know that one object has a specific child in it, but you can't find the child. This happened to me when I was trying to code some actionScript to make a toolbar work with its embedded buttons.  My partner had created the toolbar usi…
Recently, I was asked to recommend a tracking system to be implemented on a clients website. As the entire site was built on flash, my first thought was to suggest custom built tracking system. However, our company at that point of time didn't h…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user how to use the auto adjust feature and what the different options do. When your video is not working right you can choose the auto adjust feature to help choose your settings.

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question