Archive for Custom Components
Dotted Underline LinkButton (Flex)
Posted by: | CommentsI needed a link control that would display a dotted-underline on hover. To achieve this I overrode the rollOverHandler and the rollOutHandler of a standard LinkButton. Inside the rollOverHandler I used the graphics API to draw a dotted underline beneath the control’s textField.
Here’s an example:
There are some magic numbers, but tweaking them to get the look you want shouldn’t be too difficult.
And here’s the source: DottedLinkButton.as
Extending the SkinnableComponent (well, sort of)
Posted by: | CommentsI won’t exactly be extending a SkinnableComponent in this post, I’ll be extending the Button (which extends SkinnableComponent) and creating a few new skins for it. Extending the SkinnableComponent is almost identical to extending the SkinnableContainer (see my previous post). You won’t need the contentGroup, of course.
I wanted to illustrate the power of Flex’s new skinnable architecture when combined with states.
Specifically I will show:
1. How easy it is to create multiple skins for the same class.
2. How easy it is to change skins at runtime via states.
For my collapsible panel, I need a button. All in all the button has 8 possible states: for each of the two expanded or collapsed states of the container, there are the 4 possible button states (up, down, over, disabled). Rather than suffer the madness of creating a skin with 8 possible states and the button class to manage them, I’m going to create two skins (one for expanded, one for collapsed), each which use the 4 standard button states.
I’ll include the full code for the CollapseButtonSkin, (which extends Skin). The code for ExpandButtonSkin is almost identical, except for the image names. The most important thing to note, is how I change the source of the Image using the new state syntax. I’ll be using that same syntax later in my panel.
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="12" minHeight="12" alpha.disabled="0.5">
<!-- host component -->
<fx:Metadata>
[HostComponent("com.googolflex.gflib.controls.ExpandCollapseButton")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<mx:Image
source.down="@Embed('../assets/collapse_panel/collapse_down.png')"
source.over="@Embed('../assets/collapse_panel/collapse_over.png')"
source.up="@Embed('../assets/collapse_panel/collapse.png')"
source.disabled="@Embed('../assets/collapse_panel/collapse_over.png')" />
</s:Skin>
I didn’t do anything special in the ExpandCollapseButton class, I just extended Button (which contains the code to change between the up, down, over, and disabled states).
When I add my button to the QuickCollapsePanelSkin class, I specify a skinClass for each of my two panel states. When the state of the component changes, the button skins (which in turn have their own states) will be updated automatically. Here is the code:
<controls:ExpandCollapseButton
width="12" height="12"
top="{(SimpleQuickCollapsePanel(hostComponent).headerHeight - 12) / 2}"
left="4"
skinClass.collapsed="com.googolflex.gflib.skins.ExpandButtonSkin"
skinClass.expanded="com.googolflex.gflib.skins.CollapseButtonSkin"
click="SimpleQuickCollapsePanel(hostComponent).toggleExpanded()" />
You can download the full source for this example here: simple_collapsible_panel.zip
Extending the SkinnableContainer (attempt 1)
Posted by: | CommentsI’ve just created my first Flex 4 component, and loved doing it. It’s not entirely finished, but I wanted to share what I learned for those who may follow after me.
In the component proper, some things to remember:
1. Extend SkinnableContainer.
2. Declare the skin states using metadata brackets. In my case:
[SkinState("collapsed")][SkinState("expanded")]
3. Override getCurrentSkinState() to return one of the strings declared in #2, based on component state.
override protected function getCurrentSkinState() : String { if (expanded) return "expanded"; else return "collapsed";}
4. Call invalidateSkinState(), if necessary. Possibly done in setters or in commitProperties()
In the skin class, some things to remember:
1. Extend the SkinnableContainerSkin.
2. Declare the host component, the component you are skinning. Done as follows, using metadata tags:
<fx:Metadata>
[HostComponent("com.googolflex.gflib.containers.SimpleQuickCollapsePanel")]
</fx:Metadata>
If you need to access any properties of the extended class, ie SkinnableContainer you can do so by using the hostComponent variable. When I wanted to access members specific to my HostComponent, I had to cast hostComponent to a SimpleQuickCollapsePanel.
3. Declare the states of your skin. This may be done as follows:
<default:states> <mx:State name="collapsed"> <mx:State name="expanded"> </default:states>
4. Draw your layers or add your images to the skin as necessary. Reference your states, or hostComponent as necessary.
5. In the case of the SkinnableContainer you’ll want to make sure you add the container for its children. You can supply whatever layout you need, and can even change it based on state. It needs to be called contentGroup, however.
Here’s an example of how I did it:
<s:Group id="contentGroup"
left="3" right="3"
top="{SimpleQuickCollapsePanel(hostComponent).headerHeight+3}"
bottom="3"
visible="{SimpleQuickCollapsePanel(hostComponent).expanded}">
<s:layout>
<s:VerticalLayout />
</s:layout>
</s:Group>
I’ll be including the full source for my QuickCollapsePanel in my next post, where I describe extending the SkinnableComponent.
Update: In the most recent SDK release, the spark.skins.default package has been changed to the spark.skins.spark package. This affects the SkinnableContainerSkin class.
Stay tuned for the next update, when Adobe changes it to the spark.skins.spark.skins package…
Preventing User Dragging Panel Off Screen
Posted by: | CommentsMy most recent monkey patch to the Flex framework code took place in the Panel class. It is possible to drag a Panel completely off the screen, such that the user has no way of dragging it back should they release the mouse button.
Panel has a private handler private function systemManager_mouseMoveHandler (event:MouseEvent) : void that gets called before any mouse event handlers you might listen for should you extend Panel or try any other object oriented approach. There are also two private variables on the Panel class, regX and regY which store the location the mouse was pressed on the Panel’s title bar, and are set in the startDragging() method. (These numbers are useful for determining if the Panel is being dragged off screen as well as for determining where the top-left corner of the Panel is).
I decided to keep it simple and only prevent the user from dragging the Panel off the left or upper edges of the browser. (You can do the same for the bottom and right edges by performing similar calculations… but I didn’t.)
Here’s the code that does the checking (inside systemManager_mouseMoveHandler():
var sx : int = event.stageX; var sy : int = event.stageY; var nx : int = event.stageX - regX; var ny : int = event.stageY - regY; if (nx < 0 && ny < 0) move(0,0); else if (nx < 0 && ny >= 0) move(0, sy-regY); else if (nx >= 0 && ny < 0) move(sx-regX, 0); else move(event.stageX - regX, event.stageY - regY);
Essentially the code detects if the top or left edge of the Panel is in the negative, and if so resets it to zero. There is a stopDragging() method that I originally tried to use in my code, but gave up, because I wanted the user to be able to continue dragging their mouse back onto the browser after they dragged it off.
Adding in the right and bottom will add several more permutations, so I’ve been thinking of more creative ways to handle this, but haven’t got it working the way I want yet. I’ll update this post when I do.
