[flexcomponents] Re: Asigning customized scrollbar to containers
Hi Alex, Thanks for the reply, I'll try that. I think I can also achieve this by creating custom Container, Box and VBox, by just changing package in container for Scrollbar, but that will not solve the problem because then if my application contains other scrolable container, e.g. list then i also have to customize them :p . I'll try your solution and see. Ajay Chhaya --- In flexcomponents@yahoogroups.com, Alex Harui [EMAIL PROTECTED] wrote: That's a good enhancement request. If you know the scrollbar should be visible, you can try to switch the verticalScrollPolicy to on after you set verticalScrollBar. Something like that might work. From: flexcomponents@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of ajayflash Sent: Wednesday, March 07, 2007 4:07 AM To: flexcomponents@yahoogroups.com Subject: [flexcomponents] Asigning customized scrollbar to containers Hi all, I'm want to customize Scrollbar, e.g. change the position of the top arrow button next to bottom arrow button. I tried a few things but its not working. I know it cant be done with style or programmatic skins. I will create custom Scrollbar, but the problem is to attach that scrollbar to the containers. I tried to change verticalScrollBar property of VBox but it doesn't work because I saw the implementation of verticalScrollBar setter in Container class which does nothing except to change the variable. I thought about creating a customized VBox component and set the verticalScrollBar there but that also wont work because in Container class, verticalScrollBar gets created and deleted through functions createScrollbarsIfNeeded, createOrDestroyScrollbars. and these functions are private so I cant override them :( can anyone suggest how can I achieve this?
Re: [flexcomponents] Extending Datagrid Headers
curious, what is a good approach to making this label appear the same as the
DG header?
DK
On 07 Mar 2007 09:33:10 -0800, Alex Harui [EMAIL PROTECTED] wrote:
I don't think I'd extend DG for that. I'd just stretch a label over
the columns. You can listen for events from the DG to keep 'extendedHeader'
in sync.
canvas
canvas id=extendedHeader backgroundColor=#ff
label text=Personal Data
/canvas
datagrid id=dg
/canvas
--
*From:* flexcomponents@yahoogroups.com [mailto:flexcompone
[EMAIL PROTECTED] *On Behalf Of *Alberto Albericio
*Sent:* Wednesday, March 07, 2007 4:14 AM
*To:* flexcomponents@yahoogroups.com
*Subject:* [flexcomponents] Extending Datagrid Headers
Hi all,
I need to extend the Datagrid control in order to draw an extra header
that lables groups of columns. This extra header does not need to be
functional but only informative.
I wanted to ask you, guys, what is the best approach to achieve this?
I would also like to specify the groups by setting some kind of
parameter of the new datagrid component. In the example ( jpg )
attached, it would be something like this:
custom:exDatagrig
groups=[ { columns: [ age, money ], label: 'Personal data' } ]
...
/
Thank you all.
Alberto
--
Douglas Knudsen
http://www.cubicleman.com
this is my signature, like it?
RE: [flexcomponents] Extending Datagrid Headers
You can draw in a background gradient by copying code from DataGrid, but
I would put a different kind of border around it. It really depends on
what you want it to look like. Canvas gives you lots of flexibility.
From: flexcomponents@yahoogroups.com
[mailto:[EMAIL PROTECTED] On Behalf Of Douglas Knudsen
Sent: Thursday, March 08, 2007 8:56 AM
To: flexcomponents@yahoogroups.com
Subject: Re: [flexcomponents] Extending Datagrid Headers
curious, what is a good approach to making this label appear the same as
the DG header?
DK
On 07 Mar 2007 09:33:10 -0800, Alex Harui [EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
I don't think I'd extend DG for that. I'd just stretch a label over the
columns. You can listen for events from the DG to keep 'extendedHeader'
in sync.
canvas
canvas id=extendedHeader backgroundColor=#ff
label text=Personal Data
/canvas
datagrid id=dg
/canvas
From: flexcomponents@yahoogroups.com
mailto:flexcomponents@yahoogroups.com [mailto:flexcompone
[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] ] On Behalf Of Alberto
Albericio
Sent: Wednesday, March 07, 2007 4:14 AM
To: flexcomponents@yahoogroups.com
mailto:flexcomponents@yahoogroups.com
Subject: [flexcomponents] Extending Datagrid Headers
Hi all,
I need to extend the Datagrid control in order to draw an extra header
that lables groups of columns. This extra header does not need to be
functional but only informative.
I wanted to ask you, guys, what is the best approach to achieve this?
I would also like to specify the groups by setting some kind of
parameter of the new datagrid component. In the example ( jpg )
attached, it would be something like this:
custom:exDatagrig
groups=[ { columns: [ age, money ], label: 'Personal data' } ]
...
/
Thank you all.
Alberto
--
Douglas Knudsen
http://www.cubicleman.com http://www.cubicleman.com
this is my signature, like it?
Re: [flexcomponents] Extending Datagrid Headers
We needed to do something similar, where a datagrid would have metadata /
summaries inline, but didn't want them to sort. Another example would be a
row at bottom, where you could have column totals, you don't want those to
sort with the regular data. I'll probably turn this into a component, but
would like to hear any suggestions / requests:
?xml version=1.0 encoding=utf-8?
mx:Application xmlns:mx=http://www.adobe.com/2006/mxml; layout=absolute
creationComplete=init()
mx:Script
![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.events.DataGridEvent;
import mx.collections.*;
// Declare storage variables and initialize the simple
variables.
// The data provider collection.
private var myXML:XML;
private var myLoader:URLLoader;
private var myDPList:XMLListCollection;
private function init():void
{
myXML = new XML();
var XML_URL:String = ResponseTable.xml;
var myXMLURL:URLRequest = new URLRequest(XML_URL);
myLoader = new URLLoader(myXMLURL);
myLoader.addEventListener(complete, onDataLoaded );
}
//Initialize the DataGrid control with sorted data.
private function onDataLoaded( e:* ):void
{
myXML = XML(myLoader.data);
var col:DataGridColumn;
var cols:Array = new Array();
for each( var colXml:XML in myXML.columns.column ) {
col = new DataGridColumn();
col.dataField = [EMAIL PROTECTED];
col.headerText = [EMAIL PROTECTED];
cols.push( col );
}
//set columns
headerGrid.columns = subGrid.columns = bodyGrid.columns =
cols;
// Set the Collection (binding!!) as
//the DataGrid data provider.
myDPList = new XMLListCollection( myXML.data.row );
headerGrid.dataProvider = myDPList;
headerGrid.rowCount = myDPList.length + 1;
subGrid.dataProvider = myXML.subTable.row;
subGrid.rowCount = myXML.subTable.row.length();
bodyGrid.dataProvider = myDPList;
bodyGrid.rowCount = myDPList.length;
}
]]
/mx:Script
mx:DataGrid id=headerGrid
width=500 y=24 x=24
draggableColumns=false !--headerRelease=headRelEvt(event);--
/mx:DataGrid
mx:DataGrid id=subGrid
width=500 y={headerGrid.y+headerGrid.rowHeight} x=24
selectable=false
showHeaders=false
!--headerRelease=headRelEvt(event);--
/mx:DataGrid
mx:DataGrid id=bodyGrid
width=500 y={subGrid.y+subGrid.height} x=24
showHeaders=false
!--headerRelease=headRelEvt(event);--
/mx:DataGrid!
/mx:Application
-Scott
On 07 Mar 2007 04:19:34 -0800, Alberto Albericio [EMAIL PROTECTED]
wrote:
Hi all,
I need to extend the Datagrid control in order to draw an extra header
that lables groups of columns. This extra header does not need to be
functional but only informative.
I wanted to ask you, guys, what is the best approach to achieve this?
I would also like to specify the groups by setting some kind of
parameter of the new datagrid component. In the example ( jpg )
attached, it would be something like this:
custom:exDatagrig
groups=[ { columns: [ age, money ], label: 'Personal data' } ]
...
/
Thank you all.
Alberto
--
: : ) Scott
attachment: tablemeta.JPG
?xml version=1.0 encoding=iso-8859-1?
table
columns
column dataField=segment headerText= /
column dataField=numCust headerText= /
column dataField=actualResponse headerText=Actual Response /
column dataField=predResponse headerText=Predicted Response /
/columns
subTable
row
segment/segment
numCustN/numCust
actualResponseMean/actualResponse
/row
row
segmentAll/segment
numCust362422/numCust
actualResponse4.03%/actualResponse
/row
/subTable
data
row
segment0/segment
numCust36251/numCust
actualResponse14.60%/actualResponse
/row
row
segment1/segment
numCust54654/numCust
actualResponse7.12%/actualResponse
/row
row
segment2/segment
numCust32156/numCust
actualResponse4.67%/actualResponse
/row
row
segment3/segment
numCust654321/numCust
actualResponse3.90%/actualResponse
/row
/data
/table
[flexcomponents] custom component best practice?
I have a custom component that is done with MXML and some actionscript, in this component I have a few states defined which is for some transition effects between some containers. When I extend this component I cannot add any new states or else I lose my original states, so is the best practice to not have states in your custom components if they are extensible?
Re: [flexcomponents] optimal way to declare styles
On second thoughts, how can you have default style values and do it cleanly?
This way, your component will define a styleName called ffButton, which will
be compiled into your app even if the user of the componet chooses another
styleName to use. Apart from overhead, there is a risk that this user may
attempt to use the styleName for something else, and be surprised by the
weird default values they are seeing.
Seems like the only way around that is to use a separate class for each
sub-component, so you can associate the default styles, but allow the user
to set the styleName the same way as above.
Thoughts?
Peter
On 3/3/07, Josh Tynjala [EMAIL PROTECTED] wrote:
Why doesn't your ideal version work? That's exactly how you should do it.
It's clean and allows customization.
VideoControlBar
{
fastForwardButtonStyleName: ffButton;
}
.ffButton
{
fillColors: #E7E7E7, #EFEFEF, #EFEFEF, #E7E7E7;
}
You'll notice that the Flex framework allows you to style subcomponents
like this too.
In your VideoControlBar component's styleChanged, when
fastForwardButtonStyleName changes, you'll need to assign it to the button.
The framework will take it from there.
-Josh
Johannes Nel wrote:
hi
i am creating a video controller bar. so this controller bar consits of
several buttons and 2 sliders.
so for each of these buttons i want someone to be able to specify all the
different skins. so my style declaration looks something like this
/**
* Default controller fastforward button selected disabled
skin
*/
[Style(name=fastforwardSelectedDisabledIcon, type=Class,
inherit=yes)]
/**
* Default controller fastforward button over skin
*/
[Style(name=fastforwardOverIcon, type=Class,
inherit=yes)]
/**
* Default controller fastforward button down skin
*/
[Style(name=fastforwardDownIcon, type=Class,
inherit=yes)]
/**
* Default controller fastforward button disabled skin
*/
[Style(name=fastforwardDisabledIcon, type=Class,
inherit=yes)]
for each button i declare each skin :(
so my css style would look something like this
.myVideoControlBar
{
fastforwardSelectedDisabledIcon:
Embed(source=../../assets/barbuttons.swf, symbol=fastforward);
fastforwardSelectedDownIcon:
Embed(source=../../assets/barbuttons.swf, symbol=fastforward);
fastforwardSelectedOverIcon:
Embed(source=../../assets/barbuttons.swf, symbol=fastforwardOver);
}
and then i have to write the code to set this and flag the changes in
styleChanged, invalidate displaylist and write default style values for each
in the classConstruct function.
this looks clumsy and requires a lot of code, time, difficult testing and
high maintenance :(
i could ofcourse do this
mx:Button id=fastforwardButton
styleName=forwardButton
buttonDown=fastforward()
autoRepeat=true/
but now i am tying the user of this component into a naming convention in
their stylesheet. also undesireble.
my ideal would be doing this:
declaring a style i want to use for the button in my style sheet
.fastforwardStyle
{
fillColors: #E7E7E7, #EFEFEF, #EFEFEF, #E7E7E7;
cornerRadius: 0;
disabledIcon: Embed(source=../../assets/barbuttons.swf,
symbol=fastforward);
downIcon: Embed(source=../../assets/barbuttons.swf,
symbol=fastforward);
overIcon: Embed(source=../../assets/barbuttons.swf,
symbol=fastforwardOver);
selectedDisabledIcon: Embed(source=../../assets/barbuttons.swf,
symbol=fastforward);
selectedDownIcon: Embed(source=../../assets/barbuttons.swf,
symbol=fastforward);
selectedOverIcon: Embed(source=../../assets/barbuttons.swf,
symbol=fastforwardOver);
selectedUpIcon: Embed(source=../../assets/barbuttons.swf,
symbol=fastforward);
upIcon: Embed(source=../../assets/barbuttons.swf,
symbol=fastforward);
}
then in my videocontrol bar
/**
* Default controller fastforward button skin
* @copy Button#Styles
*/
[Style(name=fastforwardButtonStyle, type=String,
inherit=yes)]
mx:Button id=fastforwardButton
buttonDown=fastforward()
autoRepeat=true/
//
and in the video control bar style
.myVideoControlBar
{
fastforward-button-style:fastforwardStyle;
}
and finally assinging the style in my component i would just do this
fastforwardButton.styleName = fastforwardStyle;
this obviously does not work, hence me posting here.
has anyone got any suggestions how i can do this with the least amount of
code?
thanks
johan
--
j:pn
http://www.lennel.org
