On an Adobe Photoshop panel - which uses Adobe Flex 3 - I'd like some textual elements not to be selectable. If I have a text element like
<mx:Text id="t1" text="My text" x="4" width="200" textAlign="left"/>
I currently take care of that in an init() function using AS3 like this
t1.selectable = false;
My question is: Do I have to do that or is there an MXML way to do the same?
Pretty sure it is just
<mx:Text id="t1" text="My text" x="4" width="200" textAlign="left" selectable="false" />
http://help.adobe.com/en_US/flex/using/WS02f7d8d4857b1677-165a04e1126951a2d98-7fe4.html
Related
I have a HGroup with a few Labels and an Image. The HGroup has verticalAlign set to baseline. All the Labels line up correctly. The Image does not. The Image is much too low.
Is there a property or style to adjust the vertical position of the Image? It looks like the HGroup uses baseline or baselinePosition to position the Labels. It looks like Image has that property and style as well but it doesn't seem to do anything when I change it.
Example code:
<s:HGroup verticalAlign="baseline"
top="10"
right="10"
left="10">
<s:Button label="Previous"/>
<s:Label text="Total results:" />
<s:Image height="28" width="100"
source="myImage.png"
/>
<s:Spacer width="100%"/>
<s:Button label="Next" />
</s:HGroup>
HorizontalLayout has a method called calculateBaselineTopBottom() and it's called in updateDisplayListReal(). It seems it is doing something with baseline and baselinePosition. It also seems to use alignmentBaseline. So far in my tests it doesn't seem to change anything.
It looks like setting the baseline property does it. It wasn't working because in my tests I was passing a String value (well, it was converted to a String along the way). So it needs to be passed as a Number. The baseline property accepts Objects which is why it would accept String or Number.
It also accepts negative values. So the following works:
<s:HGroup verticalAlign="baseline"
top="10"
right="10"
left="10">
<s:Button label="Previous"/>
<s:Label text="Total results:" />
<s:Image height="28" width="100"
source="myImage.png"
baseline="-8"
/>
<s:Spacer width="100%"/>
<s:Button label="Next" />
</s:HGroup>
I try to display a text with a Label component.
In some case text is longer than label weight. So I hope to use something like word-wrap option to display text on 2 lines.
<s:BorderContainer height="26" width="100%" borderStyle="inset" id="bcDos">
<s:Label text="{phpImportant}"
textAlign="center"
fontWeight="bold"
color="#FF0730"
fontSize="12"
paddingBottom="1"
paddingTop="1"
width="100%"
height="100%"
maxDisplayedLines="2"/>
</s:BorderContainer>
With this code, only 1 line is displaying. If there is more text than the label can display, Label truncate the text for me with a truncation indicator such as "...".
In my dream I'd like to have automatic word-wrap on 2 lines.
Thanks for helping.
You've indicated a height of 26px for your Label, which for its current font properties (fontSize, fontWeight, ...) can not show more than one line.
So to show your text on two lines, you've to use an appropriate height value or simply keep that property empty so your label will be resized automatically :
<s:Label text="{phpImportant}" textAlign="center"
fontWeight="bold" color="#FF0730" fontSize="12"
paddingBottom="1" paddingTop="1"
width="100%" maxDisplayedLines="2"
/>
Hope that can help.
I am trying to render an image in a Flex mobile grid, but I can't get the MobileGridBitmapCellRenderer to display. There is just no image visible.
Does anyone see anything wrong? Here is my code:
<ns:MobileGrid id="myDataGrid" textAlign="left" width="100%" height="100%" borderVisible="true" dataProvider="{pDataCollection}"
sortChange="myDataGrid_sortChangeHandler(event)" scrollSnappingMode="leadingEdge" change="myDataGrid_changeHandler(event)"
touchInteractionEnd="myDataGrid_touchInteractionEndHandler(event)">
<ns:columns>
<ns:MobileGridColumn dataField="id" width="8%">
<ns:itemRenderer>
<fx:Component>
<ns:MobileGridBitmapCellRenderer source="#Embed('images/espn-profile-pics/tiny4821.png')" width="100%" />
</fx:Component>
</ns:itemRenderer>
</ns:MobileGridColumn>
<!--ns:MobileGridColumn dataField="player">
<ns:itemRenderer>
<fx:Component>
<ns:MobileGridTextCellRenderer labelField="player"/>
</fx:Component>
</ns:itemRenderer>
</ns:MobileGridColumn-->
<ns:MobileGridColumn dataField="player" width="22%"/>
<ns:MobileGridColumn dataField="year" width="9%"/>
<ns:MobileGridColumn dataField="team" width="9%" />
</ns:columns>
</ns:MobileGrid>
However, the MobileGridTextCellRenderer works just fine. I've read the following documentation, but I still don't get it.
http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Usage-Example-td5308.html
http://flex.apache.org/asdoc/spark/components/itemRenderers/IMobileGridCellRenderer.html
http://flex.apache.org/asdoc/spark/components/itemRenderers/MobileGridBitmapCellRenderer.html
If I try this code for the itemRanderer:
<ns:itemRenderer>
<fx:Component>
<s:Image source="#Embed('images/espn-profile-pics/tiny4821.png'" width="100%" />
</fx:Component>
</ns:itemRenderer>
I get the runtime error:
Error: MobileGridColumn item renderer must implement spark.components.itemRenderers.IMobileGridCellRenderer
<ns:itemRenderer>
<fx:Component>
<s:Image source="#Embed('images/espn-profile-pics/tiny4821.png'" width="100%" />
</fx:Component>
</ns:itemRenderer>
The issue with this code is that Image is not a valid ItemRenderer, you need to wrap the Image in something that is, for example: (EDIT: code updated)
<ns:MobileGridColumn dataField="id" width="8%">
<ns:itemRenderer>
<fx:Component>
<ns:MobileGridTextCellRenderer>
<s:Image source="#Embed('images/espn-profile-pics/tiny4821.png'" width="100%" />
</ns:MobileGridTextCellRenderer>
</fx:Component>
</ns:itemRenderer>
</ns:MobileGridColumn>
By using the MobileGridBitmapCellRenderer iconFunction I can embed an image as described on this page
A couple of issues persist.
Scale mode of "repeat" is the only mode I can see the image.
I'd like to use dynamic images from the MobileGrid datasource. At this time I have to declare an icon using embed in AS3.
I would like to combine an image and text in the same cell.
Ideally, I would be able to simply specify the source property.
I have a component with 2 states and I have added transitions for switching between the states, where 2 Move affects are applied to 2 different objects. This all works fine, however, after the transition from the first state to the second has completed the second state doesn not render correctly. It contains a TextInput control which is not visible, and a Button with a custom skin that is only sometimes visible and vanishes if you click on it. I have tried called invalidateDisplayList() and validateNow() after loading the second state but that has done nothing. I also have a VBox with a cornerRadius property set, strangely this does not seem to apply anymore and the corners are square, where they displayed correctly before I added the transition in. Does anyone have any ideas?
Thank you!
Here is the code for my states and their transitions:
<!-- different states of this component -->
<mx:states>
<s:State name="useForFree"
enterState="renderState()"/>
<s:State name="enterLicence"
enterState="renderState()"/>
</mx:states>
<!-- transitions between different states -->
<mx:transitions>
<!-- transition from useForFree to enterLicence state -->
<s:Transition id="toEnterLicence"
fromState="useForFree"
toState="enterLicence">
<s:Parallel id="p1"
targets="{[freeBtn, _enterLicenceMask]}">
<s:Move yFrom="250"
yTo="0"
duration="500"
targets="{[freeBtn]}"/>
<s:Move yFrom="289"
yTo="39"
duration="500"
targets="{[_enterLicenceMask]}"/>
</s:Parallel>
</s:Transition>
<!-- transition from enterLicence to useForFree state -->
<s:Transition id="toUseForFree"
fromState="enterLicence"
toState="useForFree">
<s:Parallel id="p2"
targets="{[enterLicenceBtn, _useForFreeMask]}">
<s:Move yFrom="0"
yTo="240"
duration="500"
targets="{[enterLicenceBtn]}"/>
<s:Move yFrom="-250"
yTo="0"
duration="500"
targets="{[_useForFreeMask]}"/>
</s:Parallel>
</s:Transition>
</mx:transitions>
and here is the code for my layout:
<mx:Canvas id="freeStateCanvas"
width="100%">
<mx:VBox width="100%"
horizontalAlign="center"
top="0"
mask="{_useForFreeMask}">
<mx:VBox id="freeBox"
includeIn="useForFree">
<s:Label text="some text"/>
<s:Spacer height="20"/>
<s:Image source="image path"/>
<s:Spacer height="20"/>
<mx:Button id="connectBtn"/>
<s:Spacer height="10"/>
<mx:HBox >
<s:Label text="some text"/>/>
</mx:HBox>
</mx:VBox>
<s:Label text="some text"
includeIn="useForFree"/>
</mx:VBox>
<mx:Button id="enterLicenceBtn"
includeIn="useForFree"/>
</mx:Canvas>
<!-- enter licence state -->
<mx:Canvas id="enterLicenceStateCanvas"
width="100%">
<mx:VBox id="enterLicenceBox"
mask="{_enterLicenceMask}"
includeIn="enterLicence">
<s:Label text="some text"/>
<s:Spacer height="20"/>
<s:TextInput id="licenceInput"
width="200"
height="30"/>
<s:Spacer height="20"/>
<mx:Button id="registerBtn"/>
<s:Spacer height="10"/>
<mx:HBox>
<s:Label text="some text"/>
<s:Label text="some more text"/>
</mx:HBox>
</mx:VBox>
<mx:Button id="freeBtn"
includeIn="enterLicence"/>
</mx:Canvas>
where the variables being set as masks are UIComponent instances where I have used their graphics property to draw a rectangle.
Okay, so I found what the problem was, but thanks for trying to help shaunhusain.
In my code you can see I have 2 VBox containers called "freeBox" and "enterLicenceBox" and these actually had a white background and rounded corners, and a DropShadowFilter applied to them (I removed these properties when putting up the code as I felt they were irrelevant, that was a mistake).
This DropShadowFilter was the cause of all my problems and on removing it, the transitions worked fine and all content was rendered correctly. I assume this is just a strange Flex bug, and I didn't find a workaround, I just used images as the box backgrounds for a quick fix.
Here is my problem, fairly obvious: [img at bottom]
The problem, as you can see, is that the text (height and width) is nothing like the Height and Width of the compoent (Spark TextArea) that I have set via the Main.mxml file in Flex 4. This is pissing me off so much because nobody can tell me why this is happening, or how to fix it. Text is dynamically added to the TextArea as people send messages in the server, hence the valueCommit line.
I don't understand this, because I know it's not the fault of my fx:Script. I know this, because when I switch over to the Design tab of Adobe Flex Builder 4; the lines are just as messed up as in the screen shot.
I've been tearing my hair out (metaphorically) over this issue, please help me come to an answer.
<!-- State: interface -->
<s:TextArea id="incomingMessages" includeIn="interface"
heightInLines="{NaN}" widthInChars="{NaN}"
y="10" x="9" minWidth="426" minHeight="442"
text="Connected to Chat Paradise v5.00a, By CharlesBroughton."
valueCommit="incomingMessages_valueCommitHandler(event)"/>
<!-- Toolbar -->
<s:HGroup includeIn="interface" x="10" y="460" width="363" height="22">
<mx:ColorPicker id="tintColor" selectedColor="#FFFFFF" includeIn="interface"/>
<s:Label id="curname" height="22" width="100" text="<user>" fontSize="16" includeIn="interface"/>
<s:CheckBox label="AutoScroll" id="scrollToggle" selected="true"/>
<s:Button id="clearButton" width="60" height="22" label="Clear" click="incomingMessages.text = "";"/>
</s:HGroup>
<!-- end Toolbar -->
<s:Button id="sendMessage" width="60" height="22" label="SEND" includeIn="interface" x="375" y="460"/>
<s:TextArea id="outgoingMessages" x="10" y="480" maxChars="2048" editable="true" width="425" height="50" includeIn="interface" skinClass="graphite.skins.TextAreaSkin"/>
<s:List id="userlist" x="443" y="10" width="128" height="488" includeIn="interface" itemRenderer="userlistRenderer"/>
<s:ComboBox includeIn="interface" x="444" y="506" width="127" id="songs" selectedIndex="0"/>
<!-- end State: interface -->
Here is the FX:SCRIPT for incomingMessages_valueCommitHandler(event) if you care:
protected function incomingMessages_valueCommitHandler(event:FlexEvent):void
{
if (scrollToggle.selected)
incomingMessages.textDisplay.verticalScrollPosition = incomingMessages.textDisplay.maxHeight;
}
I'm not allowed to post images [less than 10 repute] so here is a link: Image Link
Edited to include the surrounding code as asked for. What you all don't seem to understand is that the text box is taking up the size I set it to, but the TEXT inside the text box is only taking up like 100px wide and high of the total text box area, please check the picture link.
Okay so, we found the problem, graphite.styles.TextAreaSkin ... WHAT WAS ADOBE SMOKING?
<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" measuredSizeIncludesScrollBars="false">
<s:RichEditableText id="textDisplay"
lineBreak="toFit"
textAlign="left"
selectable="true"
verticalAlign="top"
paddingBottom="4"
paddingTop="4"
paddingLeft="4"
paddingRight="4"
height="125"
width="125"
maxWidth="125"
maxHeight="125"/>
</s:Scroller>
What type of component is the parent to your TextArea? Without knowing any of the surrounding mxml, you may want to set width and height to 100%. If that doesn't work, post some more of your mxml and we'll try to figure it out. Hope that helps.
As you said, this is a problem with the graphite textarea skin. I created a new skinClass for my textarea(based on graphite text area skin). and replaced the scroller and richeditabletext with the Spark text area ones. And added textAlign = "left". And it started working fine. Let me know if this helped. Thanks.