[flexcoders] Dragging an image out of a tilelist

[lanekelly5]

First post to the group.  Glad I found this as a resource...


I have a TileList control with cells that contain an image and a 
label. See the itemRenderer code:

Code:
mx:HBox xmlns:mx=http://www.adobe.com/2006/mxml;
horizontalAlign=center
verticalAlign=middle

mx:Image source={da...@thumbnailimage} width=75 height=50/

mx:Label text={da...@title} /

/mx:HBox
What I want to do is give the user the ability to drag just the image 
portion of the cell onto a different canvas. Here's where I am so far 
on the TileList code:

Code:
mx:TileList id=myVidTilelist
dataProvider={xmlListColl}
itemRenderer=CustomItemRenderer  
columnCount=1
columnWidth=180
rowCount=6
verticalScrollPolicy=on
dragEnabled=true 
mouseMove=mouseOverHandler(event);
/
Not sure if I should be using mouseMove to start the drag or some 
other event. But in the handler, I'm unsure of how to reference the 
image inside the cell of the TileList. I want to show that as the 
dragProxy (I think that's the correct term) and also resize it so it 
isn't the thumbnail size shown in the TileList.  I don't want the 
label to be part of the dragged item (it should just disappear).

Any thoughts would be greatly appreciated. If I need to provide more 
code to make this question more clear, please let me know.

Thanks.

[flexcoders] Re: Dragging an image out of a tilelist

[lanekelly5]

Here's the mouseOverHandler function that is throwing the type 
conversion error.  It's basically copied from the docs 
example Specifying the drag proxy. Not sure how to reference the 
image portion of the TileList element so that I'm not converting 
TileList to Image...

private function mouseOverHandler(event:MouseEvent):void 
{  
var dragInitiator:Image=Image(event.currentTarget);
var ds:DragSource = new DragSource();
ds.addData(dragInitiator, img);   

// The drag manager uses the Image control 
// as the drag proxy and sets the alpha to 1.0 
(opaque),
// so it appears to be dragged across the Canvas.
var imageProxy:Image = new Image();
imageProxy.source = event.currentTarget;
imageProxy.height=15;
imageProxy.width=15;
DragManager.doDrag(dragInitiator, ds, event, 
imageProxy, -15, -15, 1.00);

}

--- In flexcoders@yahoogroups.com, lanekelly5 lkel...@... wrote:

 First post to the group.  Glad I found this as a resource...
 
 
 I have a TileList control with cells that contain an image and a 
 label. See the itemRenderer code:
 
 Code:
 mx:HBox xmlns:mx=http://www.adobe.com/2006/mxml;
 horizontalAlign=center
 verticalAlign=middle
 
 mx:Image source={da...@thumbnailimage} width=75 
height=50/
 
 mx:Label text={da...@title} /
 
 /mx:HBox
 What I want to do is give the user the ability to drag just the 
image 
 portion of the cell onto a different canvas. Here's where I am so 
far 
 on the TileList code:
 
 Code:
 mx:TileList id=myVidTilelist
   dataProvider={xmlListColl}
 itemRenderer=CustomItemRenderer  
 columnCount=1
   columnWidth=180
   rowCount=6
   verticalScrollPolicy=on
   dragEnabled=true 
   mouseMove=mouseOverHandler(event);
 /
 Not sure if I should be using mouseMove to start the drag or some 
 other event. But in the handler, I'm unsure of how to reference the 
 image inside the cell of the TileList. I want to show that as the 
 dragProxy (I think that's the correct term) and also resize it so 
it 
 isn't the thumbnail size shown in the TileList.  I don't want the 
 label to be part of the dragged item (it should just disappear).
 
 Any thoughts would be greatly appreciated. If I need to provide 
more 
 code to make this question more clear, please let me know.
 
 Thanks.

[flexcoders] TabNavigator data provider

[lanekelly5]

I have a ViewStack which I'm controlling with a LinkBar (via the 
dataProvider). I want to have a second TabNavigator (actually the 
google code SuperTabNavigator) controlling this same ViewStack. What I 
can't seem to figure out is how to assign a dataProvider to the 
TabNavigator. Are there any examples that show this? 

Thanks.

[flexcoders] Accordion problem - rowCount/scrollbar

[lanekelly5]

Is there a way to essentially disable the rowCount property of an 
accordion and just have it show as much content (including partial 
rows) in the vertical space that is available?  I'm finding that if I 
set a rowCount which takes up less space than the expanded section has 
available I get an annoying thin gray bounding box and the scroll bar 
only extends down that far.  I have dead space below that before the 
collapsed accordion headers are displayed.  If I set my rowCount to be 
large enough to take up more space than there is my scrollbar is 
screwed up - there's no slider or up/down arrow visible.

Does this make sense?  I really want to specify no rowCount and have it 
show as much as possible based on the height available.  (I need to fix 
the height of the overall accordion component to fit the design layout.)

[flexcoders] Re: Accordion problem - rowCount/scrollbar

[lanekelly5]

Ack!  I stand corrected - had to go back and look at my code - it is 
the TileList that has the rowCount behavior that I don't like.  I 
have An accordion where each panel is a canvas that contains a 
TileList.

So it's the TileList that I need to have look differently.  I think 
the default rowCount is 4 for a TileList.  I'd rather have it show X 
pixels worth of info instead.

Sorry for the confusion.

--- In flexcoders@yahoogroups.com, Tracy Spratt tspr...@... wrote:

 I don't think I have ever set rowCount with Accordion, and have 
never
 seen the problem you describe.  What happens if you do not set it?
 
  
 
 Tracy Spratt 
 Lariat Services 
 
 Flex development bandwidth available 
 
 
 
 From: flexcoders@yahoogroups.com 
[mailto:flexcod...@yahoogroups.com] On
 Behalf Of lanekelly5
 Sent: Friday, February 20, 2009 10:32 AM
 To: flexcoders@yahoogroups.com
 Subject: [flexcoders] Accordion problem - rowCount/scrollbar
 
  
 
 Is there a way to essentially disable the rowCount property of an 
 accordion and just have it show as much content (including partial 
 rows) in the vertical space that is available? I'm finding that if 
I 
 set a rowCount which takes up less space than the expanded section 
has 
 available I get an annoying thin gray bounding box and the scroll 
bar 
 only extends down that far. I have dead space below that before the 
 collapsed accordion headers are displayed. If I set my rowCount to 
be 
 large enough to take up more space than there is my scrollbar is 
 screwed up - there's no slider or up/down arrow visible.
 
 Does this make sense? I really want to specify no rowCount and have 
it 
 show as much as possible based on the height available. (I need to 
fix 
 the height of the overall accordion component to fit the design 
layout.)

[flexcoders] Re: Accordion problem - rowCount/scrollbar

[lanekelly5]

Got it figured out.  The height propery of the TileList works fine in 
my case.

--- In flexcoders@yahoogroups.com, Tracy Spratt tspr...@... wrote:

 I don't think I have ever set rowCount with Accordion, and have 
never
 seen the problem you describe.  What happens if you do not set it?
 
  
 
 Tracy Spratt 
 Lariat Services 
 
 Flex development bandwidth available 
 
 
 
 From: flexcoders@yahoogroups.com 
[mailto:flexcod...@yahoogroups.com] On
 Behalf Of lanekelly5
 Sent: Friday, February 20, 2009 10:32 AM
 To: flexcoders@yahoogroups.com
 Subject: [flexcoders] Accordion problem - rowCount/scrollbar
 
  
 
 Is there a way to essentially disable the rowCount property of an 
 accordion and just have it show as much content (including partial 
 rows) in the vertical space that is available? I'm finding that if 
I 
 set a rowCount which takes up less space than the expanded section 
has 
 available I get an annoying thin gray bounding box and the scroll 
bar 
 only extends down that far. I have dead space below that before the 
 collapsed accordion headers are displayed. If I set my rowCount to 
be 
 large enough to take up more space than there is my scrollbar is 
 screwed up - there's no slider or up/down arrow visible.
 
 Does this make sense? I really want to specify no rowCount and have 
it 
 show as much as possible based on the height available. (I need to 
fix 
 the height of the overall accordion component to fit the design 
layout.)

[flexcoders] Detaching RichTextArea controls

[lanekelly5]

I saw this link posted in an old message:
http://www.code4net.com/rte/

Does anyone know how this was done?  I need to create one or more 
TextAreas based on user input and having a single set of RTE controls 
apply to the TextArea with focus would be perfect.  

[flexcoders] Accordion question - height minus header space

[lanekelly5]

I'd like to size the TileLists inside each accordion panel properly.  
If I have 4 panels (and thus 4 header buttons for navigation), how can 
I calculate the available space for a panel?  I assume this would be 
the specified height of the accordion minus the height of a header * 
numChildren.  Anyone know if there's a property that already has this 
info or how to calculate the hight of a header (assuming that they are 
all the same size)?

[flexcoders] Using an Alert when handling another event?

[lanekelly5]

I'm using a SuperTabNavigator control from the flexlib package.  When 
the user clicks on the close button for a tab it fires the tabClose 
event.  I have specified a handler for this in the mxml for the 
SuperTabNavigator component:

tabClose=confirmTabDelete(event);

In the confirmTabDelete function I would like to pop up an Alert with 
YES | NO buttons.  According to the SuperTabNavigator docs I can 
cancel the delete action by calling event.preventDefault() within the 
confirmTabDelete function.  My problem is that the Alert box uses its 
own handler function for the YES/NO button clicks.  I'm not sure how 
that handler function can reference the event object to call 
preventDefault().

private function confirmTabDelete(event:SuperTabEvent):void {
   Alert.show(Are you sure you want to delete this tab?, Confirm 
delete, Alert.YES | Alert.NO, this, alertListener, null, Alert.NO);

}

private function alertListener(eventObj:CloseEvent):void {
   if (eventObj.detail==Alert.NO) {
   //Now what?  How to call preventDefault() on the event object 
in confirmTabDelete?
   }
}

Is the secret in the this which is being used as the parent for the 
Alert?  

Any help would be great.


}

[flexcoders] Re: Accordion question - height minus header space

[lanekelly5]

I think I have it close using:

accordion.height - (accordion.numChildren * accordion_header_height)

What I'm finding though is that the calculation comes in roughly 3 
pixels too short.  If I use the result of the above for my TileList 
hight (the element that I'm placing in the accordion container) I 
still get some wasted space at the bottom.  For the moment I'm just 
adding in a fudge constant of 3 pixels to make it look right.  
Could this discrepancy be the result of padding somewhere?

--- In flexcoders@yahoogroups.com, alinmircea_s alinmirce...@... 
wrote:

 child's height or width can be specified percent wise
 width=100%
 myComponent.percentWidth = 100;
 
 but if you have to you have to
 
 
http://livedocs.adobe.com/flex/3/langref/mx/containers/Accordion.html
 
 quote : headerHeight=depends on header font styles =
 Number(myAccordion.getStyle('headerHeight'))

[flexcoders] Error when adding RTE toolbar to other container

[lanekelly5]

I'm trying to use the trick where you remove the toolbar from a 
RichTextEditor and add it elsewhere.  Ideally I'd like to have a 
single static toolbar that interacts with the TextArea that has 
focus, but I haven't figured out how to do that yet.

Anyway, below is the code I use to add the RichTextArea to the 
selected child in a ViewStack, then I try to add the toolbar child of 
that RTE to another HBox container textControls.  Note that this HBox 
container is NOT inside the slideViewStack.

//Add text
private function addText():void {
var rte:RichTextEditor = new RichTextEditor();
var tc:TextControl = new TextControl();
rte.id = rte;
rte.styleName = rtePanel;
rte.addEventListener(FocusEvent.FOCUS_IN, enableToolbar);
rte.addEventListener(FocusEvent.FOCUS_OUT, disableToolbar);
slideViewStack.selectedChild.addChild(rte);
rte.showControlBar=false;
textControls.addChild(DisplayObject(rte.toolbar)); //causes 
problem
}

When the toolbar is added to the HBox, I get the following error 
trace:

ReferenceError: Error #1069: Property fontFamilyCombo not found on 
main and there is no default value.
at mx.core::Container/hasChildMatchingDescriptor()
[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:3
704]
at mx.core::Container/createComponentFromDescriptor()
[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:3
561]
at mx.core::Container/createComponentsFromDescriptors()
[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:3
485]
at mx.core::Container/createChildren()
[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2
587]
at mx.core::UIComponent/initialize()
[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as
:5262]
at mx.core::Container/initialize()
[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2
524]
at 
mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::child
Added()
[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as
:5159]
at 
mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::childAd
ded()
[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:3
297]
at mx.core::Container/addChildAt()
[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2
210]
at mx.core::Container/addChild()
[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2
140]
at main/addText()[C:\Users\Administrator\Documents\Flex 
Builder 3\Content_demo\src\main.mxml:398]
at main/__addTextBtn_click()
[C:\Users\Administrator\Documents\Flex Builder 3
\Content_demo\src\main.mxml:504]

Any thoughts?  After closing the error, it generally seems to work as 
I'd hoped.

[flexcoders] Dynamically updated ToolTip on move

[lanekelly5]

I have a component that dispatches an event when it is being moved.  In 
that handler I wanted to pop up a ToolTip and display the current X/Y 
coordinates.  I must be missing some of the logistics behind ToolTip 
behavior because I'm just getting the static text.

Here's the code in my handler (which I've verified via the debugger is 
being called):

private function showLocation(event:ObjectHandleEvent):void {
event.currentTarget.toolTip = x: + event.currentTarget.x +  y: 
+ event.currentTarget.y;
}

Anyone created this effect with a ToolTip?

[flexcoders] Navigating to a new child in a ViewStack - how to target the child being hidden?

[lanekelly5]

I'm putting together a prototype of an app and I have a ViewStack that is being 
controlled by a button toolbar.  In each of these views there is a video 
player.  What I need to do is to pause the video in the view that is being 
hidden.  I see the change event triggered when I change views, but it seems 
that the target reference passed in via the event parameter is the new view.  
Is there an easy way to get a reference to the view being hidden?  Or is there 
a different event triggered (something like a deactivate) that I can use to 
create a handler with a passed in reference to the departing view?

Thanks.

[flexcoders] Help trying to sort data provider for DataGrid

[lanekelly5]

I'm trying to load a few elements of an RSS feed into a DataGrid, and I'm 
having trouble with the code to pre-sort the data before the grid gets it.  
Here's a snippet of the code:

private function requestRSS(e:FlexEvent):void
{
initVars();
showBusyCursor();
rssService.url = rssUrl;
rssService.resultFormat = e4x;
rssService.useProxy = false;
rssService.addEventListener(ResultEvent.RESULT, 
resultHandler);
rssService.addEventListener(FaultEvent.FAULT, 
faultHandler);
rssService.send();
}

private function resultHandler(e:ResultEvent):void
{
listHeadlines.dataProvider = 
e.target.lastResult.channel.item;
}

In the mxml:
mx:DataGrid id=listHeadlines width=433 height=113 
click=showDetails(event)
mx:columns
mx:DataGridColumn dataField=pubDate sortDescending=true/
mx:DataGridColumn dataField=title/
/mx:columns
/mx:DataGrid 

At this point my data in e.target.lastResult.channel.item is not always sorted 
properly.  I'd like to sort it by pubDate descending before filling out the 
DataGrid.  Any guidance on this?

[flexcoders] FLVPlayback component - preview image

[lanekelly5]

After getting frustrated with the lack of functionality of the preview property 
of the FLVPlayback component at runtime (apparently you can't assign it a path 
to a PNG and have it work like expected), I was wondering if anyone had 
extended the class to add that feature in.  I'm using the FLVPlayback_2.5.swc 
component that Adobe provides.

[flexcoders] Flex linkBar control - multiple lines?

[lanekelly5]

Any way to make the linkBar control wrap around to use multiple lines?  I have 
an application where the client wants two rows worth of menu items and it would 
be nice not to have to work around the convoluted logic of using two linkBar 
controls (one for each line) since the links will be built dynamically.

[flexcoders] Help setting the selectedChild of a viewstack

[lanekelly5]

I'm trying to grab a portion of the BrowserManager.fragment (I bring it in as 
an object) and then use it to set the selectedChild of a ViewStack.  I'm 
running into a type conversion error.

Essentially this is what I'm trying to do:

o.view contains the portion of my fragment - say it is set to sytems with 
(.../index.html#view=systems)

var o:Object = URLUtil.stringToObject(browserManager.fragment);

I then try to set the selectedChild of my ViewStack with:

myVS.selectedChild = o.view;

I get the following:
TypeError: Error #1034: Type Coercion failed: cannot convert sytems to 
mx.core.Container.

I'm not sure how to make this work.  Any thoughts?

Thanks.

[flexcoders] Source view files not generated

[lanekelly5]

Apologies if this has been covered, but the group's search feature isn't 
working for me (it's throwing server too busy errors).

I have one project that isn't cooperating when I try to export a release build 
and enable source view.  I have the box checked and it creates the srcview 
folder, but all the required files are not generated.  When you load up the 
index.html file it attempts to load a main.mxml.html file into the right hand 
frame.  That main.mxml.html file was not generated by the Flex IDE.  (Yes, my 
main application file is indeed called main.mxml.)  For several of my other 
projects I'm not having this problem and all the view source components are 
generated.  I still get the ZIP file for this poroblem project and some of the 
other folders, but there are NO files in the base srcview/source folder (just 
some subfolders).

Any ideas?  I need to get this resolved as I'm hoping to use this code sample 
as part of an interview. 

Thanks.

[flexcoders] Setting a chromeColor within a skin?

[lanekelly5]

I created a skin that is a copy of the TabBarButtonSkin and I see where there's 
a property set:  useChromeColor = true;

I have some CSS that uses a different chromeColor for the selected tab vs the 
unselected tab and I'm wondering how that value gets integrated into the skin.  
I don't see chrome used anywhere else in that skin file other than that one 
line.  There's no fill or anything that uses the chromeColor.

Since I'm not sure how to access the compound CSS rule (the selected tab's 
chromeColor) from setStyle(), I figured that maybe I would set the chromeColor 
in the skin for the specific states I want.

I guess I should have indicated upfront that I need this chromeColor to change 
at runtime, so I can't hardcode it into the CSS.

[flexcoders] White button label color - disabled state problem

[lanekelly5]

For some reason if I make the text of a button white, the alpha.disabled 
property in the SparkSkin container of my custom button skin doesn't behave 
properly.  I can set the alpha.disabled=.99 on the SparkSkin and the white 
text is really hard to read.  I would expect that it would make the disabled 
button look almost exactly like the enabled button (it does if the label text 
is black and not white).  Is there some weird blending mode going on under the 
hood with a label on the button skin?

If I set alpha.disabled=1 on the SparkSkin component of my custom button skin, 
then the disabled and enabled buttons look the same with white text.

[flexcoders] navigateToUrl( ) - can I determine when completed?

[lanekelly5]

I have a function call in my app that calls the server and expects back a CSV 
file that I want the user to be able to save.  Right now I make that call via 
navigateToURL() with a parameter of _blank.  Due to a change in requirements, 
I need to refresh a grid after that server call is completed so I need some 
sort of complete event.  I see that URLLoader() has a complete event, but it 
doesn't seem to support opening in _blank so I get the save prompt.  

Anyone know a solution here?

[flexcoders] Form field validation - required property not working

[lanekelly5]

I have a TextInput control in my form that is required only when a 
RadioButtonGroup has a certain selected value.  There is a RegExpValidator 
defined that is tied to the TextInput source property.

Here's the validator:

mx:RegExpValidator id=employeeEmailValidator source={formEmail} 
property=text flags=g expression={emailRegex}
noMatchError=Invalid Email Address format 
required={formNoticesGroup.selectedValue == 'yes'}/

With the radio button set so that the field is required, I can focus in and 
then focus out of the TextInput and I get the red box border.  But if I go 
change the radio button selection so that the field isn't required, the red box 
remains and I still see the toolTip indicating that the field is required.  
It's not until I focus in and focus out of the TextInput again that I see that 
styling go away.

I tried putting the following into the RadioButton definition:  
change={employeeEmailValidator.validate();} but it didn't seem to help.

I would think that binding the required property of the RegExpValidator would 
be enough, but it's not changing the apparent required indicator until the 
TextInput gains and loses focus (which I assume triggers the default 
valueCommit event).

Any thoughts on what I can do?  When I save the form the validator works OK and 
I don't have any issues if it isn't required, but the user is still going to 
get confused when filling out the form.

[flexcoders] White button label text in Alert

[lanekelly5]

For the life of me I can't get the button label text to be white when I roll 
over the button in an Alert control (Flex 4).  I have a custom button skin for 
all the buttons in my app and the white color for the labelDisplay part works 
just fine in all states.  But when I use that skin for buttons on an Alert 
control - the label changes to black on rollover.

Here's part of my app CSS:

.myButton {
chromeColor: #e68d00;
color: #ff;
font-weight: bold;
skinClass: ClassReference(assets.skins.CustomButtonSkin);
emphasizedSkin: ClassReference(assets.skins.CustomButtonSkin);
overSkin: ClassReference(assets.skins.CustomButtonSkin);
downSkin: ClassReference(assets.skins.CustomButtonSkin);
disabledSkin: ClassReference(assets.skins.CustomButtonSkin);
}

mx|Alert {
buttonStyleName: myButton;
}

I even went into the CustomButtonSkin.mxml and hardcoded the color attribute of 
the labelDisplay spark label to 0xFF.  Didn't help.

I'd really love to get the Alert buttons matching the rest of my app buttons.  
They are except for the rollover color of the label.  

[flexcoders] Styling title area of Alert control

[lanekelly5]

Does anyone have a good example of how to change the title area of an Alert 
control in Flex 4 (Spark)?