Wednesday, March 14, 2007
flex lib proect:
Just like the corelib project for the collection of Actionscript3 api's ,the flexlib project has also started on codes.google.com for the collection of the custom flex component.
These components are open source and I think any body can contribute to this library.
But the contributed components has to be a pure Actionscript3 code and not mxml classes.
Library has a beatifull asDoc documentation which explains all the Apis.The downloadable zip of the library also contains the example for each component demonstrating their use.
We just need to include this library in our project and then use it as imported class or the user defined namespce.
ex:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flexlib="class path to flexlib library" > <flexlib:compoentName > <!-- properties to set --> </flexlib:compoentName >
more information on
http://code.google.com/p/flexlib/
These components are open source and I think any body can contribute to this library.
But the contributed components has to be a pure Actionscript3 code and not mxml classes.
Library has a beatifull asDoc documentation which explains all the Apis.The downloadable zip of the library also contains the example for each component demonstrating their use.
We just need to include this library in our project and then use it as imported class or the user defined namespce.
ex:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flexlib="class path to flexlib library" > <flexlib:compoentName > <!-- properties to set --> </flexlib:compoentName >
more information on
http://code.google.com/p/flexlib/
Monday, March 12, 2007
Skinning Flex component
Skinning the flex component is too easy than it seems to be.
with the help of the beautiful templates (flash file and the css file given ),
we can just edit in the flash file given and use it in our flex project.
If we don't want to use that css file and just want to skin few component, we can do that also.
Ex: if we want to skin the tab bar component then,
1) create on css file (my_Skin_css.css) and write this
TabBar
{
firstButtonStyleName: "tabStyle";
tabStyleName: "tabStyle";
lastButtonStyleName: "tabStyle";
}
.tabStyle {
disabledSkin: Embed(source="my_skins.swf", symbol="Tab_disabledSkin");
downSkin: Embed(source="my_skins.swf", symbol="Tab_downSkin");
overSkin: Embed(source="my_skins.swf", symbol="Tab_overSkin"); selectedDisabledSkin: Embed(source="my_skins.swf", symbol="TabSelected_disabledSkin");
selectedDownSkin: Embed(source="my_skins.swf", symbol="TabSelected_upSkin");
selectedOverSkin: Embed(source="my_skins.swf", symbol="TabSelected_upSkin");
selectedUpSkin: Embed(source="my_skins.swf", symbol="TabSelected_upSkin");
upSkin: Embed(source="my_skins.swf", symbol="Tab_upSkin");
}
Note:
Tab bar is the component which aligns tabs in vertical or horizontal manner.
So it needs to handle the toggling of tabs. hence the first tab and the last tab needs to have different styling.
For that reason the "firstButtonStyleName" and "lastButtonStyleName" are sepcially mentioned.
If these things are undefined then the default style is assumed i,e(tabStyleName) for the first and last tab also.
(These atrributes are present mostly in the bar component like: button bar , togglebutton bar and tabbar )
(we can always refer to the default css given for the name of classes which flex use to skin its component.)
2) create flash file with the name my_skins.fla contains the movieClips with linkage name specified in the symbol attribute in ths css file
publish this flash file
3) and package the published swf(my_skins.swf) and my_Skin_css.css with mxml file.
mentioned the path of the css like this :
<mx:Style source="my_Skin_css.css"/>
Just run yourmxml and see the the skined component.
Download the template for the flash and css here :
Soruce article : http://www.adobe.com/devnet/flex/articles/flex_skins_print.html
with the help of the beautiful templates (flash file and the css file given ),
we can just edit in the flash file given and use it in our flex project.
If we don't want to use that css file and just want to skin few component, we can do that also.
Ex: if we want to skin the tab bar component then,
1) create on css file (my_Skin_css.css) and write this
TabBar
{
firstButtonStyleName: "tabStyle";
tabStyleName: "tabStyle";
lastButtonStyleName: "tabStyle";
}
.tabStyle {
disabledSkin: Embed(source="my_skins.swf", symbol="Tab_disabledSkin");
downSkin: Embed(source="my_skins.swf", symbol="Tab_downSkin");
overSkin: Embed(source="my_skins.swf", symbol="Tab_overSkin"); selectedDisabledSkin: Embed(source="my_skins.swf", symbol="TabSelected_disabledSkin");
selectedDownSkin: Embed(source="my_skins.swf", symbol="TabSelected_upSkin");
selectedOverSkin: Embed(source="my_skins.swf", symbol="TabSelected_upSkin");
selectedUpSkin: Embed(source="my_skins.swf", symbol="TabSelected_upSkin");
upSkin: Embed(source="my_skins.swf", symbol="Tab_upSkin");
}
Note:
Tab bar is the component which aligns tabs in vertical or horizontal manner.
So it needs to handle the toggling of tabs. hence the first tab and the last tab needs to have different styling.
For that reason the "firstButtonStyleName" and "lastButtonStyleName" are sepcially mentioned.
If these things are undefined then the default style is assumed i,e(tabStyleName) for the first and last tab also.
(These atrributes are present mostly in the bar component like: button bar , togglebutton bar and tabbar )
(we can always refer to the default css given for the name of classes which flex use to skin its component.)
2) create flash file with the name my_skins.fla contains the movieClips with linkage name specified in the symbol attribute in ths css file
publish this flash file
3) and package the published swf(my_skins.swf) and my_Skin_css.css with mxml file.
mentioned the path of the css like this :
<mx:Style source="my_Skin_css.css"/>
Just run yourmxml and see the the skined component.
Download the template for the flash and css here :
Soruce article : http://www.adobe.com/devnet/flex/articles/flex_skins_print.html
Tuesday, February 20, 2007
making swf active in I E- no need to click it
When we embed the swf in a html page and view it in browser.
Its not active by default and on rollOver we get a message like this
: Press SPACEBAR or ENTER to Activate and use this control.
To Avoid this problem follow the following steps
1) Replace the object tag in html (in which we are embeding swf) by div
<div class="div03" style="opacity: .75; height: 385px;" id="flashContentLayer"> <script language='javascript'>fnPutFlashObject()</script>
2) write a function fnPutFlashObject() in an external js file
function fnPutFlashObject()
{
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="1000" height="392" id = "main">');
document.write('<param name="movie" value="swf/flash-banner_left_ver1.swf">');
document.write('<PARAM NAME=wmode VALUE=transparent>');
document.write('<PARAM NAME=menu VALUE=false>');
document.write('<param name="quality" value="high">');
document.write('<embed src="swf/flash-banner_left_ver1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1000" height="392" id="main"></embed>');
document.write('</object>');
}
3) and include this js file in script tag
<script type="text/JavaScript" src="jsFiles/Source.js">
and it works !
Its not active by default and on rollOver we get a message like this
: Press SPACEBAR or ENTER to Activate and use this control.
To Avoid this problem follow the following steps
1) Replace the object tag in html (in which we are embeding swf) by div
<div class="div03" style="opacity: .75; height: 385px;" id="flashContentLayer"> <script language='javascript'>fnPutFlashObject()</script>
2) write a function fnPutFlashObject() in an external js file
function fnPutFlashObject()
{
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="1000" height="392" id = "main">');
document.write('<param name="movie" value="swf/flash-banner_left_ver1.swf">');
document.write('<PARAM NAME=wmode VALUE=transparent>');
document.write('<PARAM NAME=menu VALUE=false>');
document.write('<param name="quality" value="high">');
document.write('<embed src="swf/flash-banner_left_ver1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1000" height="392" id="main"></embed>');
document.write('</object>');
}
3) and include this js file in script tag
<script type="text/JavaScript" src="jsFiles/Source.js">
and it works !
Tuesday, February 13, 2007
sprites in mxml
While adding a sprite to mxml base application it produces a error like :
cannot convert flash.display::Sprite@3d2a191 to mx.core.IUIComponent.
Sprite is nothing but a new object introduce which is similar to movieClip. We can draw inside it and place it on to the stage by using its graphic object
The reason for error is mailny because sprite is the superclass of UIComponent , where as to add any object in mxml base container we need it to be a type of UIComponent. As the UIComponent class is the base class for all visual components. addChild method in UIcompoent Overrides the addChild method DisplayObjectContainer’saddChild method and adds a new object to mxml base container. (DisplayObjectContainer’ is a super class of sprite class ) Hence when we do addChild(newObject) we get a error , if newObject is of type sprite, as addChild which is invoked is of UIComponent class's method.
Hence we need to add a sprite to UIcompoent first and then the UIcomponent to mxml base container as follows :
<?xml:namespace prefix = mx /><mx:application initialize="drawStuff()" layout="absolute" mx="http://www.adobe.com/2006/mxml">
</mx:script>
cannot convert flash.display::Sprite@3d2a191 to mx.core.IUIComponent.
Sprite is nothing but a new object introduce which is similar to movieClip. We can draw inside it and place it on to the stage by using its graphic object
The reason for error is mailny because sprite is the superclass of UIComponent , where as to add any object in mxml base container we need it to be a type of UIComponent. As the UIComponent class is the base class for all visual components. addChild method in UIcompoent Overrides the addChild method DisplayObjectContainer’saddChild method and adds a new object to mxml base container. (DisplayObjectContainer’ is a super class of sprite class ) Hence when we do addChild(newObject) we get a error , if newObject is of type sprite, as addChild which is invoked is of UIComponent class's method.
Hence we need to add a sprite to UIcompoent first and then the UIcomponent to mxml base container as follows :
<?xml:namespace prefix = mx /><mx:application initialize="drawStuff()" layout="absolute" mx="http://www.adobe.com/2006/mxml">
import mx.core.UIComponent;
var bgColor:uint = 0xFFCC00;
public function drawStuff() : void
{
var ref : UIComponent = new UIComponent(); // creating a UI compoent Object
var circle1 : Sprite = new Sprite();
circle1.graphics.beginFill(bgColor);
circle1.graphics.drawCircle( 40, 40, 40 );
circle1.buttonMode = true;
addChild( ref ); // add UI component to mxml base container
ref.addChild( circle1 );// adding sprite to UIcompoent
}
]]>
</mx:Script>
</mx:Application>
Subscribe to:
Posts (Atom)