Category Archives: Flex

Flex : MMS editor

MXML Component


<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 title="MMS Template Editor">
	<fx:Declarations>
		<fx:XMLList id="menuXML">
			<fx:menuitem label="Template">
				<fx:menuitem label="Save" data="Save"/>
				<fx:menuitem label="Save As" data="Save As"/>
				<fx:menuitem label="Close" data="Close"/>
			</fx:menuitem>
			<fx:menuitem label="Slide">	
				<fx:menuitem label="New" data="New"/>
				<fx:menuitem label="Duplicate" data="Duplicate"/>
				<fx:menuitem label="Delete" data="Delete"/>
			</fx:menuitem>
			<fx:menuitem label="Insert">
				<fx:menuitem label="Text" data="Text"/>
				<fx:menuitem label="Image" data="Image"/>
				<fx:menuitem label="Audio" data="Audio"/>
				<fx:menuitem label="Video" data="Video"/>
			</fx:menuitem>
		</fx:XMLList>
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"/>
	</s:layout>
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.MenuEvent;
			
			import spark.layouts.HorizontalLayout;
			private function itemClickInfo(event:MenuEvent):void {
				if(event.label == 'New') {
					var newPanel:Panel = new Panel();
					newPanel.title = 'New Slide';
					slides.addElement(newPanel);
				}
			}
		]]>
	</fx:Script>	
	
	<mx:VDividedBox width="100%" height="100%">
		<mx:HDividedBox width="100%" height="100%">
			<s:Panel width="400" height="400" title="MMS Viewer">
			</s:Panel>		
			<s:Panel width="200" height="400" title="Property Viewer">
			</s:Panel>
		</mx:HDividedBox>	
		<s:Panel width="606" title="Slides Viewer" id="slides">
			<s:layout>
				<s:HorizontalLayout paddingBottom="4" paddingLeft="4" paddingRight="4" paddingTop="4"/>
			</s:layout>
			<s:Panel title="Slide x">				
			</s:Panel>
		</s:Panel>
	</mx:VDividedBox>
	
	<s:controlBarContent>
		<mx:MenuBar height="100%" dataProvider="{menuXML}" labelField="@label" showRoot="true" itemClick="itemClickInfo(event)" />
		<mx:HBox paddingBottom="5" paddingTop="5">
			<mx:Spacer width="100%"/>
		</mx:HBox>
	</s:controlBarContent>   
</s:Panel>

MMS Template Editor

Advertisements
Tagged

Flex : Two State Login Panel (Component)

  • I used Flash Builder 4.5
  • Create a Flex Project
    (I created MyApp)
  • Create a package for components
  • Create an MXML components inside that package
    1. Named it LoginComp
    2. Based on Panel
    3. Removed height and width values
    4. flash builder new flex component

Package explorer
flash builder package explorer

MyApp.mxml


<?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" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">	
	<fx:Script>
		<![CDATA[
			import components.LoginComp;
			
			import mx.events.FlexEvent;
			
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				var loginComp:LoginComp = new LoginComp();
				loginComp.top = 300;
				loginComp.left = 300;
				this.contentGroup.addElement(loginComp);
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>		
</s:Application>

LoginComp.mxml


<?xml version="1.0" encoding="utf-8"?>
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 currentState="Login" title="Please Log In" title.Register="Please Register">
	
	<fx:Script>
		<![CDATA[
			protected function button1_clickHandler(event:MouseEvent):void
			{
				if(this.currentState == "Register") {
					currentState = "Login";
				} else if(this.currentState == "Login") {
					currentState = "Register";
				}
			}
		]]>
	</fx:Script>
	
	<s:states>
		<s:State name="Login"/>
		<s:State name="Register"/>
	</s:states>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"/>		
	</s:layout>
	<s:HGroup verticalAlign="middle">
		<s:Label text="Username" width="80"/>
		<s:TextInput id="username"/>
	</s:HGroup>
	<s:HGroup verticalAlign="middle">
		<s:Label text="Password" width="80"/>
		<s:TextInput id="password" displayAsPassword="true"/>
	</s:HGroup>
	<s:HGroup verticalAlign="middle" includeIn="Register">
		<s:Label text="Email" width="80"/>
		<s:TextInput id="email"/>
	</s:HGroup>
	<s:HGroup verticalAlign="middle" includeIn="Register">
		<s:Label text="Phone" width="80"/>
		<s:TextInput id="phone"/>
	</s:HGroup>
	<s:controlBarContent>
		<s:Button label="Login" label.Register="Register"/>
		<s:Spacer width="100%"/>
		<s:Button label="New User" label.Register="Existing User" click="button1_clickHandler(event)"/>
	</s:controlBarContent>
</s:Panel>

Login state
login state

Register State
register state

Flex : Started

Started learning flex 🙂

Tagged

Linux : Installing Flex SDK

Create a directory for flex

~]# mkdir /opt/flex

Copy the SDK to that directory and unzip.

flex]# unzip flex_sdk_4.6.zip 

Set PATH

~]# vim /etc/profile

Add following lines to the end of the file

FLEX_HOME=/opt/flex; export FLEX_HOME
PATH=$FLEX_HOME/bin:$PATH; export PATH