package {
import mx.controls.LinkButton;
import flash.text.TextLineMetrics;
public class multiLineLinkButton extends LinkButton {
override protected function createChildren():void {
super.createChildren();
if (textField){
textField.wordWrap = true;
textField.multiline = true;
}
}
override public function measureText(s:String):TextLineMetrics {
textField.text = s;
var lineMetrics:TextLineMetrics = textField.getLineMetrics(0);
lineMetrics.width = textField.textWidth;
lineMetrics.height = textField.textHeight;
return lineMetrics;
}
}
my issue here is if you use this component you will see that the text is bunched up into a very small area. It does not fill the entire width of the linkButton. Anyone know why this is happening?
The container is probably not wide enough. Set the container percentWidth to 100 and see if it fixes your problem. You can also set the LinkButton to a fixed width and see if that helps.
Related
I need to be able to show a toolTip on disabled checkboxes. A solution I've seen here on stackoverflow and other places is to just wrap the checkbox in a Group and give the Group the toollTip. This works, but I'm trying to do this generically.
I want to be able to set a property on a custom Checkbox component and at that point wrap the Chexbox in a Group that has the toolTip set.
My problem is, I can't figure out how to add the Checkbox to a Group component at run time in the Checkbox ActionScript code. I've tried adding a showDisabledToolTip property to the Checkbox Class and when that is set do something like this:
var parent = this.parent;
var gp:Group = new Group();
gp.toolTip = this.toolTip;
gp.addElement(this);
if(parent is Group) {
parent.addElement(gp);
} else {
parent.addChild(gp);
}
My main problem at that point is this.parent is null. Besides that though, I don't even know if this will really work.
Help is appreciated. Thanks!
i came up with the solution to extend the CheckBox class and create a new CheckBoxSkin with 2 new SkinStates inside (disabledWithTooltip and disabledWithTooltipSelected)
The extended Checkbox class adds a new disabledWithTooltip property and overrides the getCurrentSkinState method and the mouseEventHandler from ButtonBase
Custom CheckBox class
package components
{
import flash.events.Event;
import flash.events.MouseEvent;
import mx.events.FlexEvent;
import spark.components.CheckBox;
[SkinState (disabledWithToolTip)]
[SkinState (disabledWithToolTipSelected)]
public class CustomCheckBox extends CheckBox
{
private var _disabledKeepToolTip:Boolean = false;
public function CustomCheckBox()
{
super();
this.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete, false, 0, true);
}
protected function onCreationComplete(ev:FlexEvent):void {
//_storedState = this.currentState;
}
protected override function getCurrentSkinState():String {
if(!_disabledKeepToolTip)
return super.getCurrentSkinState();
else {
if(!selected)
return "disabledWithToolTip";
else
return "disabledWithToolTipSelected";
}
}
protected override function mouseEventHandler(event:Event):void {
var skinState:String = getCurrentSkinState();
if(skinState != "disabledWithToolTip" && skinState != "disabledWithToolTipSelected") {
super.mouseEventHandler(event);
}
}
[Bindable]
[Inspectable(category="General", enumeration="true,false", defaultValue="true")]
public function get disabledKeepToolTip():Boolean {
return _disabledKeepToolTip;
}
public function set disabledKeepToolTip(value:Boolean):void {
_disabledKeepToolTip = value;
this.invalidateSkinState();
}
}
}
Create a new Skin based on (spark) CheckBoxSkin and change the hostcomponent in the metadata
[HostComponent("components.CustomCheckBox")]
and add two new skinStates
<s:State name="disabledWithToolTip" stateGroups="disabledStates" />
<s:State name="disabledWithToolTipSelected" stateGroups="disabledStates, selectedStates" />
Usage e.g.
<s:HGroup>
<components:CustomCheckBox id="custom_chk" label="KeepTooltipCheckbox" skinClass="skins.CustomCheckBoxSkin" toolTip="See this tooltip"/>
<s:CheckBox id="enable_chk" label="enable/disable" change="{custom_chk.disabledKeepToolTip = enable_chk.selected}"/>
</s:HGroup>
You have to adapt your own package structure if it's different...
when i use the following tree renderer class the the informtions in the tree gets chopped. Is there any solution to fix this bug. please help me.
The PLTree class is as follows:
import flash.events.Event;
import mx.events.ScrollEvent;
import mx.controls.Tree;
import mx.core.ScrollPolicy;
import mx.core.mx_internal;
import mx.events.TreeEvent;
public class PLTree extends Tree
{
private var _lastWidth:Number = 0;
private var _lastHeight:Number = 0;
public function PLTree() {
super();
horizontalScrollPolicy = ScrollPolicy.AUTO;
}
override public function get maxHorizontalScrollPosition():Number
{
return mx_internal::_maxHorizontalScrollPosition;
}
override public function set maxHorizontalScrollPosition(value:Number):void
{
mx_internal::_maxHorizontalScrollPosition = value;
dispatchEvent(new Event("maxHorizontalScrollPositionChanged"));
scrollAreaChanged = true;
invalidateDisplayList();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
var diffWidth:Number = measureWidthOfItems(0,0) - (unscaledWidth - viewMetrics.left - viewMetrics.right);
if (diffWidth <= 0) {
maxHorizontalScrollPosition = 0;
horizontalScrollPolicy = ScrollPolicy.OFF;
} else {
maxHorizontalScrollPosition = diffWidth;
horizontalScrollPolicy = ScrollPolicy.ON;
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
override protected function scrollHandler(event:Event):void
{
if (mx_internal::isOpening)
return;
// TextField.scroll bubbles so you might see it here
if (event is ScrollEvent){
super.scrollHandler(event);
invalidateDisplayList();
}
}
}
i am attaching the image file of how it looks when executed.
When surfing using google i found a suggesion to fix this bug is it the right way ?
(
Issue: Text getting chopped of at end.
Fix: change
maxHorizontalScrollPosition = diffWidth;
to
maxHorizontalScrollPosition = diffWidth + 10;
or what ever correction factor you need.
)
Kindly help me .Thanks a lot in advance.
Looking at your picture, I'd suspect the issue has nothing to do with the specific tree, and is only slightly related to the renderer. Instead, I think that when the container holding the Tree is created, it doesn't have a size, and when the Tree sizes its renderers, it gives them the wrong size. Since List-based controls don't set the actual width on renderers, choosing to set explicitWidth instead, the renderers aren't triggered into changing their size.
Check out http://www.developria.com/2009/12/handling-delayed-instantiation-1.html for more explicit details and fixes.
similar to the scroll handler in the above mentioned program. Use a mouse wheel scroll handler to handle that event as follows:
override protected function mouseWheelHandler(eventMouse:MouseEvent):void
{ if (mx_internal::isOpening)
return;
if (eventMouse is MouseEvent){
super.mouseWheelHandler(eventMouse);
invalidateDisplayList();
}
}
I have a button which I use for sending a message. When the message text is empty, it should not be possible to click the button.
This is all fine and not an issue. The only thing that is bugging me is the fact that I can disable the send button but the image does not get disabled (like I would expect).
Is there a way to do this elegantly because I don't want to provide a sendicon_disabled.png and change it myself (I don't think this should be my job).
You can use the following button for that:
package
{
import mx.controls.Button;
import mx.core.mx_internal;
use namespace mx_internal;
public class IconButton extends Button
{
private var enabledChanged:Boolean = false;
override public function set enabled(value:Boolean):void
{
if (super.enabled == value)
{
return;
}
super.enabled = value;
enabledChanged = true;
invalidateDisplayList();
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (enabledChanged)
{
if (!enabled && currentIcon)
{
currentIcon.alpha = 0.5;
}
enabledChanged = false;
}
}
}
}
You can use your custom alpha value or move it to separate style.
I basically want to make things easier by just looping LinkButtons instead of making textfields because the linkbuttons have the rollovers already programmed.
But I have a lot of text and it just keeps going. I want it to wrap like I can do with textfields.
Thanks
package {
import mx.controls.LinkButton;
import flash.text.TextLineMetrics;
public class multiLineLinkButton extends LinkButton {
override protected function createChildren():void {
super.createChildren();
if (textField){
textField.wordWrap = true;
textField.multiline = true;
}
}
override public function measureText(s:String):TextLineMetrics {
textField.text = s;
var lineMetrics:TextLineMetrics = textField.getLineMetrics(0);
lineMetrics.width = 700;
lineMetrics.height = textField.textHeight;
return lineMetrics;
}
}
}
This is the component, but like I said everything is automatically centered.
I've tried paddingLEFT =0; and trying to setStyle("paddingLEFT", 0); but those methods don't work.
var test:multiLineLinkButton = new multiLineLinkButton();
test.label = "sdfdsfdsfdsfsdfsdfsdfdsfsdfdsfdsdsfdsfdsfdffsdfdsfdfdsfdsfdsfdsfdsfdsfsdfdsfdfdsfdfdsfdsfsdfsdfsdf";
test.setStyle("textAlign","left");
var metrics:TextLineMetrics = measureText(test.label);
trace(metrics.height);
myCanvas.addChild(test);
so metrics.height is giving me a height of 14, which i believe is a single line even though it wraps.
This guy did it:
http://ooine.com/index.php/2009/10/12/flex-linkbutton-word-wrap/
FYI, this was the first hit on Google for the search term "flex linkButton word wrap"
I am working on a problem since a week soon, but I still couldn't make it work as expected. I have a DataGrid which has HBox with a CheckBox an a Label as itemRenderer (see Code below). When I tap in to the Cell the standard itemEditor pops up and lets you enter the content of the label. Thats the standard behavior. I works fine except for 2 problems:
If I enter to much text, the horizontal srollbar pops up, and the cell is filled with that scrollbar. As you see I tried to set the horizontalScrollPolicy to off, but that doesnt work at all... I tried to do that for all the different elements, but the failure is still existent.
When I have filled more than one row, there is an other mistake happening. If I tap on a row, the datagrid selects the one below that row. That's only if one line is already selected. If I tap outside the datagrid and then, tap at any row the itemEditor of the right row will show up... Is there anything now wright in the setup of my set data method?
__
package components
{
import mx.containers.HBox;
import mx.controls.CheckBox;
import mx.controls.Label;
public class ChoiceRenderer extends HBox
{
private var correctAnswer:CheckBox;
private var choiceLabel:Label;
public function ChoiceRenderer()
{
super();
paint();
}
private function paint():void{
percentHeight = 100;
percentWidth = 100;
setStyle("horizontalScrollPolicy", "off");
super.setStyle("horizontalScrollPolicy", "off");
correctAnswer = new CheckBox;
correctAnswer.setStyle("horizontalScrollPolicy", "off");
addChild(correctAnswer);
choiceLabel = new Label;
choiceLabel.setStyle("horizontalScrollPolicy", "off");
addChild(choiceLabel);
}
override public function set data(xmldata:Object):void{
if(xmldata.name() == "BackSide"){
var xmlText:Object = xmldata.TextElements.TextElement.(#position == position)[0];
super.data = xmlText;
choiceLabel.text = xmlText.toString();
correctAnswer.selected = xmlText.#correct_answer;
}
}
}
Thanks in advance!
Markus
I am not sure if this is the reason behind your issues, but the standard way of creating children is to override the createChildren method.
Also, you are missing an else statement - you are not calling super.data when if condition fails. That doesn't look good either.
Try:
package components
{
public class ChoiceRenderer extends HBox {
private var correctAnswer:CheckBox;
private var choiceLabel:Label;
public function ChoiceRenderer() {
super();
percentHeight = 100;
percentWidth = 100;
setStyle("horizontalScrollPolicy", "off");
}
override protected function createChildren():void {
super.createChildren();
correctAnswer = new CheckBox();
addChild(correctAnswer);
choiceLabel = new Label();
choiceLabel.setStyle("horizontalScrollPolicy", "off");
addChild(choiceLabel);
}
override public function set data(xmldata:Object):void {
if(xmldata.name() == "BackSide") {
var xmlText:Object = xmldata.TextElements.TextElement.(#position == position)[0];
super.data = xmlText;
choiceLabel.text = xmlText.toString();
correctAnswer.selected = xmlText.#correct_answer;
}
else {
//what if xmldata.name() is not "BackSide"?
//you are not calling super.data in that case
}
}
}
in order to avoid scroll bar you have to let datagrid have variable height
<mx:DataGrid id="dg"
dataProvider="{dp}"
variableRowHeight="true"
creationComplete="dg.height=dg.measureHeightOfItems(0,dp.length)+dg.headerHeight+2"/>