I'm trying to auto-resize a Spark TextArea using Flex Hero but having no luck. Can anyone point me in the direction of a working example please?
EDIT: To clarify, I want to auto-resize the TextArea when typing, so there's never a scroll bar.
After some playing around I found a way to do it:
<?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">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="8" paddingBottom="8"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.core.mx_internal;
protected function changeTextArea():void
{
textArea.heightInLines = NaN;
}
protected function lineCount():void
{
label.text = textArea.textFlow.flowComposer.numLines.toString();
}
]]>
</fx:Script>
<s:TextArea id="textArea"
heightInLines="1"
horizontalCenter="0" verticalCenter="0" verticalScrollPolicy="off" horizontalScrollPolicy="off"
change="changeTextArea()" focusOut="lineCount()"/>
<s:Label id="label"/>
<s:Button/>
</s:WindowedApplication>
I just set the width/height to be a percentage of the container:
<s:TextArea width="100%" height="100%" />
Unless you are asking something else?
I just tested it with flex hero, and as Bruno Trincão posted here, s:RichEditableText works with textArea.heightInLines = NaN;
Related
I would like to reorder items of a List in a Flex mobile app by dragging them around with a finger.
As a first step I have copied the example from Adobe document Using drag-and-drop with list-based controls - but while their example works fine as web application, nothing happens in the mobile app below:
Why doesn't it work (like is some skin missing in the mobile theme?)
Is there a way to make it work (at least reordering items in a mobile List)?
Below is the simple test code I've tried - just put it into a new blank (i.e. without a nav. bar) Flex mobile project in Flash Builder:
<?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"
applicationDPI="160"
creationComplete="initApp()">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function initApp():void {
srclist.dataProvider =
new ArrayCollection(['Reading', 'Television', 'Movies']);
destlist.dataProvider = new ArrayCollection([]);
}
]]>
</fx:Script>
<s:HGroup>
<s:VGroup>
<s:Label text="Available Activities"/>
<s:List id="srclist"
allowMultipleSelection="true"
dragEnabled="true"
dragMoveEnabled="true"/>
</s:VGroup>
<s:VGroup>
<s:Label text="Activities I Like"/>
<s:List id="destlist"
dropEnabled="true"/>
</s:VGroup>
</s:HGroup>
<s:Button id="b1"
label="Reset"
click="initApp();"/>
</s:Application>
I have found and tried by myself a super workaround on this page.
Just copy classes from his example and add the custom itemRenderer to your source list.
<s:List id="srclist"
allowMultipleSelection="true"
dragEnabled="true"
dragMoveEnabled="true">
<s:itemRenderer>
<fx:Component>
<local:DraggableIconItemRenderer decorator="{DragThumb}" />
</fx:Component>
</s:itemRenderer>
</s:List>
Respect to the author!
Here is the result:
I am playing around with flex 4 GUI with a simple alignment but couldnt figure out why.
I have button1, button2, and a text field. I want to align them horizontally, and center vertically for the text.
For the following code, i see the following output.
_______ ______
|bt1 | |bt2 | text1
|______| |______|
my question is;
1) why with the properties i sent on btn 1 verticalCenter="10" and btn2 verticalCenter="-10" they are still aligned? shouldnt i see one is up and the one is donw?
2 ) why my text1 is aligned top, even though i set it to verticalCenter=0, i tried it with or without in a group.
Thanks guys
<?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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group minWidth="100">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button label="myButton" click="" horizontalCenter="0"
verticalCenter="10"/>
<s:Button label="myButton" click="" verticalCenter="-10"/>
<s:Group verticalCenter="0" horizontalCenter="0">
<s:Label text="hello" color="#FFFF" verticalCenter="0"
textAlign="center" />
</s:Group>
</s:Group>
</s:Application>
It might be helpful for others to understand why this occurs, as it is a common problem.
When you use a HorizontalLayout or VerticalLayout some properties you set on the "layout objects" are not used. This occurs because these properties do not really work or make sense in a vertical/horizontal layout.
Layout properties that are ignored by vertical/horizontal layouts:
x and y coordinates
horizontalCenter and verticalCenter
top, bottom, left, right contstraints
The above properties will work for the default BasicLayout class.
As indicated in the answer by #Mahesh Parate, the vertical/horizontal layouts do allow for content to be centered by using the horizontalAlign and verticalAlign properties.
Below code may help you: - add verticalAlign="middle" in HorizontalLayout this will solve your problem.
<?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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
protected function onClickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
}
]]>
</fx:Script>
<s:Group minWidth="100" >
<s:layout>
<s:HorizontalLayout verticalAlign="middle"/>
</s:layout>
<s:Button label="myButton" click="onClickHandler(event)" horizontalCenter="0"
verticalCenter="10"/>
<s:Button label="myButton" click="onClickHandler(event)" verticalCenter="-10"/>
<s:Group verticalCenter="0" horizontalCenter="0">
<s:Label text="hello" color="#FFFF" verticalCenter="0"
textAlign="center" />
</s:Group>
</s:Group>
</s:Application>
For my flex project I am making, I'm trying to change the background of my website change to the image I have clicked on. The background in my main page I have set like this:
<s:BorderContainer id="backgroundContainer" width="100%" height="100%" backgroundImage="#Embed('assets/background.png')" borderAlpha="0">
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<mx:LinkBar styleName="mainnav" width="600" dataProvider="content" horizontalCenter="0" paddingLeft="20" paddingTop="125"/>
<s:Image top="5" bottom="5" horizontalCenter="50" source="assets/nav.png"/>
<mx:ViewStack id="content">
<mx:HBox id="home"
label="Home">
<component:home/>
</mx:HBox>
<mx:HBox id="bio"
label="Bio">
<component:bio/>
</mx:HBox>
<mx:HBox id="portfolio"
label="Portfolio">
<component:portfolio/>
</mx:HBox>
<mx:HBox id="contact"
label="Contact">
<component:contact/>
</mx:HBox>
</mx:ViewStack>
</s:BorderContainer>
Now from inside my component, I am trying to set the the background of the image you click on.
<fx:Script>
<![CDATA[
import mx.core.Application;
public function changeBackground(event:MouseEvent):void
{
Application.application.backgroundContainer.setStyle('backgroundImage', img1.source);
}
]]>
</fx:Script>
I call this function when you click on an image.
<mx:Image id="img1" source="assets/placeholder.jpg" click="changeBackground(event)"/>
But it doesn't work.
So I was wondering how this should be done?
Thank you,
Thomas
you can use BitmapFill and declare all your backgrounds first. Also, be sure your changeBackground function is public in your main application since it will be called from a component.
<?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" xmlns:component="component.*">
<fx:Script>
<![CDATA[
public function changeBackground(bitmapFillObj:BitmapFill):void
{
backgroundContainer.backgroundFill = bitmapFillObj;
}
]]>
</fx:Script>
<fx:Declarations>
<s:BitmapFill id="_bg1" source="#Embed('assets/bg1.jpg')"/>
<s:BitmapFill id="_bg2" source="#Embed('assets/bg2.jpg')"/>
</fx:Declarations>
<s:BorderContainer id="backgroundContainer" width="100%" height="100%" backgroundImage="#Embed('assets/bg1.jpg')" borderAlpha="0">
<component:home/>
</s:BorderContainer>
</s:WindowedApplication>
And now your component
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button label="click to show bg 1" click="FlexGlobals.topLevelApplication.changeBackground(FlexGlobals.topLevelApplication._bg1)"/>
<s:Button label="click to show bg 2" click="FlexGlobals.topLevelApplication.changeBackground(FlexGlobals.topLevelApplication._bg2)"/>
Your just have to adapt the code to your project, clicking on your images instead of buttons. Good luck!
In Flex 3, it used to be possible to bind a component property within an itemRenderer via outerDocument. So for instance, if there was a image inside an itemRenderer that was only displayed on a given condition of the parent, something like this would work perfectly:
<mx:itemRenderer>
<mx:Component>
<mx:Label text="{data}"/>
<mx:Image id="img" visible="{outerDocument.ShowImage}" includeInLayout="{outerDocument.ShowImage}"/>
</mx:Component>
</mx:itemRenderer>
where the outer document (not the list, but the mxml the list is in) contained something like
[Bindable]
public function get ShowImage():void
{
return showImage;
}
public function set ShowImage(val:Boolean):void
{
showImage = val;
}
I've tried to do the same thing in Flex 4.5 using Spark item renderers using parentDocument, but it doesn't seem to be aware to the binding. When I do this in Flex 4.5, the itemRenderer doesn't seem to be aware when the parentDocument ShowImage changes.
Has anyone seen this issue and is able to offer a solution?
EDIT: Add Spark Source
As requested here is my spark source:
MyItemRenderer.mxml
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:Label id="myLabel" text="{data}/>
<s:Image src="something.png" visible="{parentDocument.ShowImage}" includeInLayout="{parentDocument.ShowImage}"/>
</s:ItemRenderer>
RendererContainer.mxml
<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">
<fx:Script>
<![CDATA[
private var showImage:Boolean = false;
[Bindable]
public function set ShowImage(val:Boolean):void
{
showImage = val;
}
public function get ShowImage():Boolean
{
return showImage;
}
]]>
</fx:Script>
<!-- Content Group -->
<s:List id="lstCell" width="100%" height="100%" itemRenderer="MyItemRenderer">
</s:List>
</s:Panel>
Ok so there is a checkbox in a wrapper outside of RendererContainer.mxml that dispatches a custom event that is handled by changing a Bindable Boolean. The change in that var then changes the ShowImage property on my RendererContainer component. I would expect that the binding would then be picked up by MyItemRenderer but it doesnt seem to be working.
So my outer wrapper would access ShowImage like this
<comp:RendererContainer id="myId" ShowImage="{myCheckbox.selected}"/>
I think this should do the trick for you, YourTypeHere would be the class of the containing
object, make sure the ShowImage property is public and bindable.
<mx:itemRenderer>
<mx:Component>
<mx:Script>
<![CDATA[
import YourTypeHere;
]]>
</mx:Script>
<mx:Label text="{data}"/>
<mx:Image id="img"
visible="{YourTypeHere(this.parent.ShowImage)}"
includeInLayout="{YourTypeHere(this.parent.ShowImage)}"/>
</mx:Component>
</mx:itemRenderer>
P.s. please don't name properties with a starting uppercase letter, including getters, consider naming it showImage and your private var to something like _showImage instead :D
Your getter seems to have return type as void. Change that to Boolean
[Bindable]
public function get ShowImage():Boolean
{
return showImage;
}
public function set ShowImage(val:Boolean):void
{
showImage = val;
}
This will help.
<s:Image src="something.png" visible="{RendererContainer(ListSkin(parentDocument).parentDocument).ShowImage}" includeInLayout="{RendererContainer(ListSkin(parentDocument).parentDocument).ShowImage}"/>
Following works perfectly fine:
<?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">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<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">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
private var showImage:Boolean = false;
[Bindable]
public function set ShowImage(val:Boolean):void
{
showImage = val;
}
public function get ShowImage():Boolean
{
return showImage;
}
]]>
</fx:Script>
<s:CheckBox label="Select" change="{ShowImage = !ShowImage}"/>
<!-- Content Group -->
<s:List id="lstCell" width="100%" height="100%" dataProvider="{new ArrayCollection(['A','B'])}">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Label id="myLabel" text="{data}"/>
<s:Button label="something.png" visible="{outerDocument.ShowImage}" includeInLayout="{outerDocument.ShowImage}"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:Panel>
</s:WindowedApplication>
If I drag a textInput from a component and drop it near the end of the another component, the textInput goes outside of the dropZone.
Any ideas how to resolve this problem?
thanks
edit:
<?xml version="1.0" encoding="utf-8"?>
<s:Group 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="150" height="500" xmlns:components="components.*" >
protected function textInput_mouseDownHandler(event:MouseEvent):void
{
var dragI:Label=event.currentTarget as Label;
var ds:DragSource=new DragSource();
ds.addData(dragI,"TextInput");
DragManager.doDrag(dragI,ds,event);
}
<s:BorderContainer width="100%" height="100%">
<s:layout>
<s:VerticalLayout gap="10"/>
</s:layout>
<s:Label text="TextInput" mouseMove="textInput_mouseDownHandler(event )" dragComplete="dragCompleteHandler(event)" />
</s:BorderContainer>
and the dropZone componenent:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" height="500" width="700" xmlns:components="components.*" >
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
protected function dragDropHandler(event:DragEvent):void
{
if (event.dragSource.hasFormat("TextInput")){
var draggedText:TextInput=new TextInput();
draggedText.x = event.currentTarget.mouseX;
draggedText.y = event.currentTarget.mouseY;
event.currentTarget.addElement(draggedText);
}
}
protected function dragEnterHandler(event:DragEvent):void
{
if(event.dragSource.hasFormat("TextInput") )
{
var dropTarget:BorderContainer= event.currentTarget as BorderContainer;
DragManager.acceptDragDrop(dropTarget);
}
}
<s:BorderContainer width="100%" height="100%" dragDrop="dragDropHandler(event)"
dragEnter="dragEnterHandler(event)"/>
</s:Group>
On your layout object, set clipAndEnableScrolling to true. This will cause the layout to clip all content that is ouside the bounds of the containter. If you need to scroll, then you still need to wrap your group in a scroller.
<s:BorderContainer width="100%" height="100%">
<s:layout>
<s:VerticalLayout gap="10" clipAndEnableScrolling="true"/>
</s:layout>
<s:Label text="TextInput" mouseMove="textInput_mouseDownHandler(event )" dragComplete="dragCompleteHandler(event)" />
</s:BorderContainer>
clipAndEnableScrolling is a property on all the layouts, VerticalLayout, HorizontalLayout, and BasicLayout to name a few.
http://flexonblog.wordpress.com/2009/03/02/drag-and-drop-from-list-control-to-textinputnon-list-control-control-in-flex/
http://saturnboy.com/2009/08/drag-and-drop-flex-4/
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64595-7fff.html