I want to show the TEXT with the marquee effect in my application.
Marquee effect is only on the text that is in the BOX and that should be in the Vertical.
Please Help me asap.
This code works fine for me.
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.effects.Move;
import spark.events.IndexChangeEvent;
// Define a new Zoom effect.
private var zMove:Move = new Move();
private function toLeft():void {
// Set duration of zoom effect.
zMove.duration = 20000;
zMove.xFrom = 0.1 ;
zMove.xTo = -label2.width;
zMove.target = label2;
}
private function rightToLeft():void {
// Set duration of zoom effect.
zMove.duration = 20000;
zMove.xFrom = Capabilities.screenResolutionX;
zMove.xTo = 0.1;
zMove.target = label2;
}
private function zoomeffect():void {
if(zMove.xFrom != 0.1) {
toLeft();
} else {
rightToLeft();
}
label2.visible=true;
zMove.play([label2],false);
}
]]>
</fx:Script>
<s:Group width="100%" bottom="0" height="50" contentBackgroundColor="#d0382b" >
<s:Label id="label2" text="Marquee effect in flex "
top="25" height="50" fontSize="15" fontStyle="italic"
fontFamily="Verdana" verticalCenter="0" visible="false"
creationComplete="moveffect()" effectEnd="moveffect()"/>
</s:Group>
Related
I am trying to create links inside data grid cells and I am unable to remove the horizontal scroll bar
Here is my example
///////////////////////////////////////////
//GridExample.mxml - Main application
///////////////////////////////////////////
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<mx:Box id="myCustomBox" height="100%" width="100%" initialize="assignData();">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.HierarchicalData;
[Embed("dialog_error.png")]
private var myImage:Class;
public function assignData():void {
var retVal:ArrayCollection = new ArrayCollection();
var hData:HierarchicalData = new HierarchicalData();
var s:String = '[{"Property":"AA","Value":2,"RowIdentifier":"AA"},{"Property":"BB","Value":"Nice looking link","RowIdentifier":"BB"},{"Property":"CC","Value":"sdfgusgdfugadgfuasygdfgauidsguiasgdfugasuidfguiasg","RowIdentifier":"CC"}]';
var pSets:Object = JSON.parse(s);
var propertySets:Array = pSets as Array;
for (var i:int=0;i<propertySets.length;i++)
{
var item:Object = propertySets[i];
var arrayElt:Object = {Property: item["Property"], RowIdentifier: item["RowIdentifier"], Value: item["Value"]};
retVal.addItem(arrayElt);
}
hData.source = retVal;
myGridId.dataProvider = hData;
}
]]>
</fx:Script>
<mx:AdvancedDataGrid id="myGridId"
variableRowHeight="true"
width="100%"
showHeaders="false"
includeInLayout="{myGridId.visible}"
defaultLeafIcon="{null}"
>
<mx:columns >
<mx:AdvancedDataGridColumn dataField="Property" headerText="Property" backgroundColor="#E5EFF5" width="0.4" wordWrap="true" />
<mx:AdvancedDataGridColumn dataField="Value" headerText="Value" backgroundColor="white" width="0.6" itemRenderer="ExampleRenderer"/>
<mx:AdvancedDataGridColumn dataField="RowIdentifier" visible="false"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Box>
</s:WindowedApplication>
///////////////////////////////////////////
//ExampleRenderer.mxml - ItemRenderer used
///////////////////////////////////////////
<?xml version="1.0"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" textAlign="center" creationComplete="renderNow()" >
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.controls.LinkButton;
import mx.controls.Alert;
private function renderNow():void {
var dataObject:Object = super.data;
var rowId:String = dataObject["RowIdentifier"];
var label:LinkButton = new LinkButton();
label.addEventListener(MouseEvent.CLICK, mouseClick);
label.percentWidth = 100;
label.label = dataObject["Value"];
label.setStyle("horizontalScrollPolicy","off");
label.setStyle("textAlign","left");
label.setStyle("paddingLeft",3);
this.addChild(label);
}
override public function set data(value:Object):void
{
super.data = value;
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}
private function mouseClick(e:MouseEvent):void{
Alert.show("Clicked on a link");
}
]]>
</mx:Script>
</mx:Box>
The LinkButton produced nice links that can be clicked and in a web view it looks really good with a nice hover producing an underline (just like a link) etc but when the text is long, the horizontal scroll bar obscures the text itself. How do I get rid of the horizontal scrollbar (I have tried turning horizontalScrollPolicy off and that does not help). I do not mind if the extra text over and beyond the row length is hidden as I am going to add a tooltip anyway to every cell. Any help here is appreciated.
Thank you.
Setting the minWidth to 0 along with the percentWidth=100 fixed it.
I have a AdvansedDatGrid with empty data and more columns. Grid has width and height equals to 100 percent. I put this grid in group with 100 persentage width and height. If i add some columns, the data grid change her size and size of parent container. If i put some data in dataProvider, than grid resize rightly, bug appear only if grid has not data.
In this code block creates AdvancedDataGrid with 59 columns without data in dataGrid. Her width equals 5900px. Click on button "Add Columns" add 10 columns to Grid. After than, grid increase her size on 1000px, and size of parent container(testGroup).
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
initialize="application1_initializeHandler(event)"
width="100%" height="100%">
<fx:Script>
<![CDATA[
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
[Bindable]
private var columnsData:Array = [];
//Create columns with number header
private function createColumnsData():void {
var tempColumn:AdvancedDataGridColumn;
for (var i:int = 0; i < 59; i++) {
tempColumn = new AdvancedDataGridColumn(Math.floor(Math.random() * 200).toString());
tempColumn.headerText = Math.floor(Math.random() * 2000).toString();
tempColumn.dataField = Math.floor(Math.random() * 200).toString();
columnsData.push(tempColumn);
}
dataGrid.columns = columnsData;
}
private function addColumns():void {
var tempColumn:AdvancedDataGridColumn;
for (var i:int = 0; i < 20; i++) {
tempColumn = new AdvancedDataGridColumn(Math.floor(Math.random() * 200).toString());
tempColumn.headerText = Math.floor(Math.random() * 2000).toString();
tempColumn.dataField = Math.floor(Math.random() * 200).toString();
columnsData.push(tempColumn);
}
dataGrid.columns = columnsData;
}
private function button1_clickHandler(event:MouseEvent):void {
addColumns();
}
protected function application1_initializeHandler(event:FlexEvent):void {
addColumns();
}
]]>
</fx:Script>
<s:Group id="testGroup" width="100%" height="100%">
<mx:AdvancedDataGrid id="dataGrid"
horizontalScrollPolicy="auto"
width="100%" height="100%"
columns="{columnsData}"/>
<s:HGroup paddingBottom="10" paddingTop="10">
<s:Button label="Add Columns" click="button1_clickHandler(event)"/>
</s:HGroup>
</s:Group>
</s:Application>
I saw in Flex bugs database and didn't find any point, abiut this issue. I use Flex SDK 4.1.0. But this problem appear in Fles SDK 4.6.0.
I try to repair this bug set the direct width to Grid. This looks fine and bug disappear, but if i decrease size of application, the data grid didn't decrease her size, because he has direct width instead percentWidth.
One solution is to add a Resize listener to the application:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%" height="100%"
resize="onResize(event)">
<fx:Script>
<![CDATA[
onResize(e:ResizeEvent):void {
dataGrid.width=this.width;
}
//etc...
]]>
</fx:Script>
Make sure your dataGrid always has a direct width set, and it'll always get set to the same size as the application, no matter how you resize it.
I find solution:
set direct width to grid
add resize listener
[Bindable]
private var columnsData:Array = [];
//Create columns with number header
private function createColumnsData():void {
var tempColumn:AdvancedDataGridColumn;
for (var i:int = 0; i < 59; i++) {
tempColumn = new AdvancedDataGridColumn(Math.floor(Math.random() * 200).toString());
tempColumn.headerText = Math.floor(Math.random() * 2000).toString();
tempColumn.dataField = Math.floor(Math.random() * 200).toString();
columnsData.push(tempColumn);
}
dataGrid.columns = columnsData;
}
private function addColumns():void {
var tempColumn:AdvancedDataGridColumn;
for (var i:int = 0; i < 20; i++) {
tempColumn = new AdvancedDataGridColumn(Math.floor(Math.random() * 200).toString());
tempColumn.headerText = Math.floor(Math.random() * 2000).toString();
tempColumn.dataField = Math.floor(Math.random() * 200).toString();
columnsData.push(tempColumn);
}
dataGrid.columns = columnsData;
}
private function button1_clickHandler(event:MouseEvent):void {
addColumns();
}
protected function application1_initializeHandler(event:FlexEvent):void {
addColumns();
}
protected function contentGroup_resizeHandler(event:ResizeEvent):void
{
if (this.width < dataGrid.getExplicitOrMeasuredWidth()) {
dataGrid.width = this.width;
}
}
]]>
</fx:Script>
<s:VGroup id="testGroup"
resize="contentGroup_resizeHandler(event)"
width="100%" height="100%">
<mx:AdvancedDataGrid id="dataGrid"
horizontalScrollPolicy="auto"
width="{testGroup.width}" height="100%"
columns="{columnsData}"/>
<s:HGroup paddingBottom="10" paddingTop="10">
<s:Button label="Add Columns" click="button1_clickHandler(event)"/>
</s:HGroup>
</s:VGroup>
Hi I am trying to add an image when I click on a thumbnail.
I know I have to use a listener (Event.COMPLETE ?), but the image is not resizing correctly when I rotate the tablet.
I believe the problem is that I cannot resize the image within the addImage1() function, as the image has not yet loaded, but I cannot use newImg.width within the listener function to reset the image width.
Any help would be most appreciated.
Code follows:-)
<?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="ZOOM Pictues with Tap"
resize="view1_resizeHandler(event)">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
public var hasImageBeenAdded:Boolean = false;
private var imageLastWidth:Number;
private var imageLastHeight:Number;
private var zoomFactor:Number;
private var imageNumber:Number;
private var rhsKeepWidth:int;
private var rhsKeepHeight:int;
private var rhsKeep:Boolean = false;
protected function view1_resizeHandler(event:ResizeEvent):void
{
if(rhsKeepWidth > rhsKeepHeight) // Was Landscape is now Portrait
{
var tmpWidth2:int = rhsKeepWidth;
var tmpHeight2:int = rhsKeepHeight;
rhsKeepWidth = tmpHeight2-lhs.width;
rhsKeepHeight = tmpWidth2+lhs.width;
}
else //Was Portrait is now Landscape
{
var tmpWidth1:int = rhsKeepWidth;
var tmpHeight1:int = rhsKeepHeight;
rhsKeepWidth = tmpHeight1-lhs.width;
rhsKeepHeight = tmpWidth1+lhs.width;
}
addImage1();
}
protected function removeAllImages():void
{
var totalElements : int = rhs.numElements;
for(var i:int=totalElements-1;i>=0;i--)
{
rhs.removeElementAt(i);
}
}
private function onImageLoaded(e:Event):void
{
var zoomFactor1:Number;
var zoomFactor2:Number;
imageLastWidth = e.target.sourceWidth;
imageLastHeight = e.target.sourceHeight;
if(rhsKeep != true) //Need to set the rhs VGroup dimensions
{
rhs.width = hGroup1.width-lhs.width;
rhs.height = hGroup1.height;
rhsKeep = true;
rhsKeepWidth = rhs.width;
rhsKeepHeight = rhs.height;
}
zoomFactor1 = rhsKeepWidth/imageLastWidth;
zoomFactor2 = rhsKeepHeight/imageLastHeight;
if(zoomFactor1 < zoomFactor2)
{
zoomFactor = zoomFactor1;
}
else
{
zoomFactor = zoomFactor2;
}
trace("zoomFactor=" + zoomFactor);
}
public function addImage1():void
{
var i:int;
var newImg:Image = new Image();
removeAllImages();
newImg.source = "images/1.jpg";
newImg.x = 0;
newImg.y = 0;
newImg.addEventListener(Event.COMPLETE,onImageLoaded);
rhs.addElementAt(newImg,0);
hasImageBeenAdded = true;
imageNumber = 1;
trace("Image Width= " + newImg.width);
newImg.scaleX = newImg.scaleY = zoomFactor;
}
]]>
</fx:Script>
<s:HGroup id="hGroup1" width="100%" height="100%">
<s:Scroller id="scrollerL" height="100%">
<s:VGroup id="lhs" width="15%" height="100%" gap="10"
horizontalAlign="center" verticalAlign="top">
<s:Image width="100" height="100" source="thumbs/1.jpg" click="addImage1()"/>
</s:VGroup>
</s:Scroller>
<s:Scroller id="scroller1" height="100%" width="100%">
<s:VGroup id="rhs" height="100%">
</s:VGroup>
</s:Scroller>
</s:HGroup>
</s:View>
Regarding the device orientation, you should use:
trace(Stage.deviceOrientation);
trace(Stage.orientation);
They are read-only strings outputting information regarding the device's and the screen's orientation. You may manually set the stage's orientation:
Stage.setOrientation(StageOrientation.DEFAULT);
Regarding the image loading, you need an eventListener for Event.COMPLETE and you should also cast the content as Image:
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(event:Event):void {
trace("Image loaded");
// Handle code here
// Use: (loader.content as Image)
});
loader.load(new URLRequest("images/1.jpg"));
I'm not sure if that title is descriptive enough, but here is the basic issue. I have a spark.effects.Animate instance repeating n times with a listener on the EFFECT_REPEAT event. In that event's listener, I'm incrementing a variable. Logic would dictate that if the variable started at 0 and the animation was played with a repeatCount of 3, the variable would be 2 when finished. This works fine, until I focus a different tab. When doing this, on occasion, the repeat event isn't fired/handled (or the animation is just not actually doing the animation) and my count isn't correct when finished.
This is a fully functioning example built against Flex 4.5. To duplicate just click the GO button and maintain focus on the TAB. Then click it again and switch tabs and switch back. The counts don't match.
How can I fix this so that the repeat event is called consistently?
<?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" width="600" height="400" applicationComplete="application1_applicationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.controls.Image;
import mx.events.EffectEvent;
import mx.events.FlexEvent;
import spark.effects.Animate;
import spark.effects.animation.MotionPath;
import spark.effects.animation.SimpleMotionPath;
private var animate:Animate;
private var someCounter:int = 0;
protected function application1_applicationCompleteHandler(event:FlexEvent):void
{
// Create the graphic
var img:Image = new Image();
img.source = "http://www.google.com/intl/en_com/images/srpr/logo3w.png";
// Add the graphic
addElement( img );
// Create the motion path
var smp:SimpleMotionPath = new SimpleMotionPath();
smp.property = "x";
smp.valueFrom = 0;
smp.valueTo = this.width - 275;
// Add the motion path to a Vector
var paths:Vector.<MotionPath> = new Vector.<MotionPath>();
paths.push( smp );
// Create the animation
animate = new Animate();
animate.easer = null;
animate.target = img;
animate.duration = 150;
animate.repeatCount = 15;
animate.motionPaths = paths;
animate.addEventListener( EffectEvent.EFFECT_REPEAT, animate_effectRepeatHandler );
animate.addEventListener( EffectEvent.EFFECT_END, animate_effectEndHandler );
}
private function animate_effectRepeatHandler( event:EffectEvent ):void
{
lblCounter.text = someCounter.toString();
someCounter++;
}
private function animate_effectEndHandler( event:EffectEvent ):void
{
lblCounter.text = someCounter.toString(); // Sometimes doesn't equal animate.repeatCount - 1
}
protected function button1_clickHandler(event:MouseEvent):void
{
if( !animate.isPlaying )
{
someCounter = 0;
animate.play();
}
}
]]>
</fx:Script>
<mx:Label id="lblCounter" horizontalCenter="0" bottom="50" width="150" height="50" textAlign="center" />
<mx:Button horizontalCenter="0" bottom="0" label="GO" width="150" height="50" click="button1_clickHandler(event)" />
</s:Application>
I have created a scheduling application that spans upwards of 16 weeks. I would like to be able to print the schedule using Flex. I've created a test application that lists incrementing dates. These dates obviously stretch longer than the width of my computer. I would like for my print function to print the entire width of dates across several pages... currently, it prints just what appears on my screen. Is there a way to accomplish this?
Below is the app i've created. There are some calls to custom functions, but they in no way relate to the issue at hand:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
<mx:Script source="functions/dateFunctions.as" />
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;
[Bindable] public var date:Date = new Date;
public var numDays:Number = 50;
[Bindable] public var datesAC:ArrayCollection = new ArrayCollection;
public function init():void
{
var tempDate:String = new String;
for (var i:int = 0; i < numDays; i++)
{
tempDate = dateToNumText(rightDate(date.getMonth(), date.getDate() + i, date.getFullYear()));
datesAC.addItem(tempDate);
}
}
private function printMe() :void
{
var pj:PrintJob = new PrintJob();
pj.start();
// setTimeout(function() :void { finishPrinting(pj);}, 1);
finishPrinting(pj);
}
private function finishPrinting(pj:PrintJob): void {
pj.addPage(this);
pj.send();
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
<mx:Button id="print" label="Start Print" click="printMe()" />
<mx:HorizontalList id="dateList" dataProvider="{datesAC}" width="100%" height="100%" useRollOver="false">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas borderColor="#000000" borderSides="right" borderStyle="solid">
<mx:Text text="{data}" textAlign="center" color="#000000" width="100" />
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:HorizontalList>
</mx:VBox>
</mx:Application>
You would have to break up/paginate content on your own. You can send each such logically broken up page to PrintJob.appPage() API so it becomes a printed paper. At present, what is happening would be that content would be getting clipped.
I guess you should use PrintJob.addPage() to add your dates to print job.