I have a component that uses #HostBinding to set a class:
#HostBinding('class.dark-1') true;
Which works fine. However, now I need to create a function in my component to change the class dynamically.
For example, from dark-1 to light-2 when a button in the component is clicked.
I know how to create the function and call it from a button, but how do I change the class in the hostbinding and refresh the UI with the new class?
You can toggle a clicked flag when clicking the button, and set the classes with getters:
#HostBinding("class.dark-1") public get classDark1() {
return !this.clicked;
}
#HostBinding("class.light-2") public get classLight2() {
return this.clicked;
}
private clicked = false;
public onClick() {
this.clicked = true;
}
Sinply give it a property name:
#HostBinding('class.dark-1') isDark = true;
Then you can change it:
this.isDark = false;
Or change entire className:
#HostBinding('class') className = 'dark-1';
this.className = 'light-1';
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...
FlashBuilder/Spark mobile project view action bar.
Currently if you set the chromeColor of a button in the actionbar it only shows up when on the press state of the button. It does not change the color of the button default state. I could not find any way to style it.
After some digging I found that TransparentActionButtonSkin.as was overriding the drawBrackground function and specifically removing chromeColor and only allowing it to show on a the button down state.
I overrode that "little gem" with my own class.
package view_components
{
import mx.core.mx_internal;
import spark.skins.mobile.TransparentActionButtonSkin;
use namespace mx_internal;
public class ActionbarColoredButton extends TransparentActionButtonSkin
{
public function ActionbarColoredButton()
{
super();
}
override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
{
// omit super.drawBackground() to drawRect instead
// only draw chromeColor in down state (transparent hit zone otherwise)
//NO, I want colored action buttons
var chromeColor:uint = getStyle(fillColorStyleName);
var chromeAlpha:Number = 1;
graphics.beginFill(chromeColor, chromeAlpha);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
}
}
I want to create a custom control for a button. However wow can i override the visibility of the button?
For example if the access level of the user is false then it will hide the button.
Here is my coding
public override void Visible()
{//Get access right from session
blcAccessLevel accessLevel = (blcAccessLevel)HttpContext.Current.Session[gbcAccessLevel.sessionAcl];
if (accessLevel.Read_Access == true)
{
base.Visible = true;//error occu
}
else
{
base.Visible = false;
}
}
It return me the error.Error 'blcCustomControl.cusAclReadButton.Visible()': cannot override because 'System.Web.UI.Control.Visible' is not a function By the way, should I implement the get set method?
public class MyButton : Button
{
public new bool Visible
{
get
{
return (blcAccessLevel)HttpContext.Current.Session[gbcAccessLevel.sessionAcl].ReadAccess;
}
}
}
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 want to add a simple piece of text to the stage and add a listener to do something when the user clicks it.
Here's my TextLink class:
package some.package
{
import flash.display.Sprite;
import flash.external.ExternalInterface;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
public class TextLink extends Sprite
{
public var tf:TextField = new TextField();
public var bspr:Sprite = new Sprite();
public function TextLink(tx:int, ty:int, tft:String):void
{
tf.text = tft;
tf.x = tx;
tf.y = ty;
tf.autoSize = TextFieldAutoSize.LEFT;
bspr.addChild(tf);
this.addChild(tf);
}
}
}
And here is the way I am calling it, along with the listener:
public function test_array_of_objects():void
{
var tmp:TextLink = new TextLink(30, 30, "some text");
tmp.addEventListener(MouseEvent.CLICK, roverNotify);
addChild(tmp);
}
protected function roverNotify(e:Event):void
{
ExternalInterface.call("console.log", "got a click");
}
...But I don't get a message for some reason.
I've imported everything successfully. Any thoughts on what else I can try?
Is your TextLink class an event dispatcher? You're trying to add a listener to the TextLink object, but the click listener needs to be attached to the text field that you're using inside TextLink. TextLink needs to be a DisplayObject of some kind to inherit the dispatching capabilities.
Also, constructors should not specify a return type (since they're just returning themselves) -- the :void should not be there where your TextLink constructor is.
Does function TextLink require something like this at the beginning:
var tf:Text = new Text();
Is the problem with clicking the Sprite or getting the event to fire? If it's the former you could try adding the code below.
tmp.mouseChildren = false;
tmp.buttonMode = true;
ExternalInterface.call("console.log", "got a click");
You have a JavaScript function defined like this??:
function console.log(inputString) {
//do something
}
Edit: Nevermind the above, forgot about Firebug.
Also, TextLink doesn't need to be an event dispatcher, though you may want to have TextLink set its mouseChildren property to false (unless you need to be able to select that text), so that you don't inadvertently trigger events on the TextField, and buttonMode to true.
Edit: Also, what's the point of?:
var bspr:Sprite = new Sprite();
bspr.addChild(tf);
Final edit
How about this? http://code.google.com/p/fbug/issues/detail?id=1494
Yes, you are correct, in FF3 the console is injected only when the page has
javascript and uses window.console.
If you put any js that accesses the console before the Flash loads it should work, eg
<script>
var triggerFirebugConsole = window.console;
</script>
Let us know if this works. It's unlikely that we can fix this soon.