Flex ItemRenderer: rendering the source item of a drag - actionscript-3

When an item is being dragged from/within a list in the default implementation, it is shown as selected during the drag (and a separate item renderer, in dragging state, is shown as the drag image), so:
<s:ItemRenderer>
<s:Label text="{data}" color.selected="0xFF0000" color.dragging="0x00FF00" />
</s:ItemRenderer>
renders as:
Is there a straightforward way to change the state of the source of the drag (the red, selected, "Bar") to something other than "selected" for the duration of the drag?
In the ideal, I would add color.dragSource="0x0000FF" to the item renderer code above, and "Bar" would be red while selected, but blue once the dragging had begun. When the drag was complete, it would revert to red (or, if no longer selected, black).

What if you did an eventListener on drag start that set the selected item in the list to -1? -1 says that nothing should be selected.
Edit: added below code to support:
<s:List id="myList" dragStart="startDrag(event)"/>
private var dragIndex:int;
private function startDrag(e:Event):void
{
dragIndex = myList.selectedIndex;
myList.selectedIndex = -1;
}
private function stopDrag(e:Event):void
{
myList.selectedIndex = dragIndex;
}

Related

FindTabByUrl on tabs nested within another tab using Telerik

I have a RadTabStrip being used as a menu (the tabs act as links), some tabs when clicked open a sub-menu for related links.
I have the following code to highlight the current tab being visited:
Master Page Code-behind
protected void Page_Load(object sender, EventArgs e)
{
RadTabStrip tabControl = FindControl("radTabMenu"); //Pseudo
RadTab currentTab = tabControl.FindTabByUrl(Request.Url.PathAndQuery);
if (currentTab != null) currentTab.Selected = true;
}
Master Page
<telerik:RadTabStrip ID="radTabMenu" runat="server">
<Tabs>
<telerik:RadTab Text="Home" NavigateUrl="~/" /> <!-- Loads Default.aspx -->
<telerik:RadTab Text="Menu Item" NavigateUrl="~/MenuItem.aspx" />
<telerik:RadTab Text="Top Level Nav">
<Tabs>
<telerik:RadTab Text="Lower Menu Item 1" />
<telerik:RadTab Text="Lower Menu Item 2" NavigateUrl="~/Location/Page.aspx" />
</Tabs>
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
On page load if I have clicked Menu Item tab to load MenuItem page, the RadTabs correctly highlights the tab. However, I'm not sure how to go about making sure the sub-tab gets highlighted correctly.
I'm trying this, but I'm a little stuck:
RadTabStrip tabControl = FindControl("radTabMenu"); //Pseudo
RadTab currentTab = tabControl.FindTabByUrl(Request.Url.PathAndQuery);
if (currentTab != null)
currentTab.Selected = true;
else
{
string dir = Request.Url.GetComponents(UriComponents.Path, UriFormat.SafeUnescaped);
currentTab = tabControl.FindTabByValue(dir);
if (currentTab != null)
//Trying to findByUrl isn't possible here because the parent tab doesn't have that method.
}
Is there a good alternative to finding by URL, or a faster method overall of reaching the parent and sub-tabs?
EDIT: Adding a picture to clarify what I'm trying to achieve after page navigation
The FindTabBy* methods are available at either RadTabStrip or RadTabCollection level.
That's why, once you find the parent tab you were not able to invoke the FindTabBy* method on it, because you need to invoke the method on its .Tabs property instead.
See an example below:
var parent = radTabMenu.FindTabByText("Top Level Nav");
parent.Selected = true;
var child = parent.Tabs.FindTabByText("Lower Menu Item 1");
child.Selected = true;
Revisiting this, well after having my team decide to remove nested tab menus, I found that the tabs would be selected by URL.
My issue was that the parent tab wouldn't open and be selected, but digging through documentation led me to use tab.Select Parents() which goes up the hierarchy selecting all parents that lead to the current selected tab.
It seems super obvious now that I've found it.

How to check if mouse click was inside an element

What is the code to check if mouse is clicked inside a child element when the click event is for parent element. I need to differentiate to perform certain tasks only if the click is inside the child element. What kind of propagation happens in flex? I am bit new to this.
I have a video player with video display and video controls bar. I register click event for video player which occupies the full screen. On click the controls bar should toggle (as programmed) which it does, but on clicking any element in the control bar the entire bar dissapears.
<!-- Player Container -->
<s:BorderContainer width="100%" height="100%"
backgroundAlpha="0"
borderVisible="false">
<s:VideoPlayer id="vid_player"
width="100%" height="100%"
verticalCenter="0"
horizontalCenter="0"
skinClass="Skins.VideoPlayerSkin"
maintainProjectionCenter="true"
mouseDown="hideControls(event)"
autoPlay="true" source="{current_video.getSource()}"/>
</s:BorderContainer><!-- Player Container -->
public function hideControls(event:Event):void {
hidePlaylist();
toggleElem(header);
toggleElem(sec_drop_container);
toggleVideoPlayer();
}
public function toggleVideoPlayer() {
var controls:Object = vid_player.videoDisplay.parent.getChildAt(1);
if(controls.visible)
controls.visible=false;
else
controls.visible = true;
}
Probably the simplest way is:
private function mouseHandler(event:MouseEvent/*was e:MouseEvent*/):void {
whateverObject.hitTestPoint(event.stageX, event.stageY, false); // use shape flag is 3rd argument
}

Scroller not shown Flex 4 with VGroup

I am creating one application. In that There is one popup, in that I had used one VGroup in one Scroller.
I am dynamically adding my custom components in VGroup and removing all components at the closing of the popup and saves those components in Memory Pool.
In First step, I open a popup with numbers of components by that scroll bar appears.
Then I close the popup.
In second step, I opens a same popup instance with some less components so scroll bar does not appears and close the popup.
And now when I open popup with more components again scrollbar not appears.
So whenever popup is once opend with less components, scrollbar disappears.
Pls help me...
Here is the full code :
<s:Scroller id="myScroller"
width="100%"
height="210"
horizontalScrollPolicy="off">
<s:VGroup id="myContainer"
width="100%"
height="210" />
</s:Scroller>
Code for Adding Components :
for each(var object:MyObject in _arr)
{
var newView:MyCustomView = MyCustomViewPool.acquire();
myContainer.addElementAt(newView, 0);
newView.myData = object;
}
Here is the code for removing components :
for(var i:int = 0; i < myContainer.numElements; i++)
{
var newViewElement:IVisualElement = myContainer.getElementAt(i);
var myViewComponent:MyCustomView = newViewElement as MyCustomView;
MyCustomViewPool.release(myViewComponent);
}
myContainer.removeAllElements();
I think you don't have to set the hight on the VGroup. Just remove the assignment.

Constraining number of children in a ViewStack issue

I have the following code to create a ViewStack which is used as a dataprovider for a TabBar:
<s:TabBar id="objectTab" dataProvider="{vs_objects}"/>
<mx:ViewStack id="vs_objects" width="100%" />
I want to constrain the number of children the ViewStack to avvoid the tabs going out of the screen when the user opens many tabs without closing any. I attempt to do this by removing the oldest element in the ViewStack when the user opens a new tab and the size of the ViewStack is above 9.
private function openTab(object:Object): void {
//Create a new NavigatorContent(form) and add it to the ViewStack
........
vs_objects.addChild(form);
if(vs_objects.numChildren > 9) {
vs_objects.removeChildAt(0);
}
//vs_objects.selectedChild = form;
vs_objects.selectedIndex = (vs_Tiltaksbanken.numChildren -1);
}
The image below illustrates my problem, where the dark grey color illustrates the selected Tab. There should only be one selected tab, which works perfectly fine with both the child selection approaches above, when i don't remove a child before selecting a new. When i remove a child and then open a new Tab, the new Tab does not get selected properly, it only gets "painted" in the selected color. In This case Tab 40 is still shown when i open Tab 41 (exceeding 9 tabs). The result of this issue is that Tab 41 is not rendered completely.
Does anyone know how i can fix this problem, or have a different approach for constraining the number of Tab's/ViewStack-children?
UPDATE:
The problem was my AS3 code inside the childrens NavigatorContent's that caused the application to behave this way. The solution was using the callLater method:
The solution to my problem was using the callLater method as shown below with Adnan Doric's code example:
protected function openTab():void
{
var form:Container = new Container();
form.name = "Tab " + counter++;
vs_objects.addChild(form);
vs_objects.selectedChild = form;
callLater(removeTab);
}
private function removeTab(): void {
if (vs_objects.numElements > 10)
vs_objects.removeElementAt(0);
}
Try this, even though I'm not sure it is the correct solution, maybe it's better to implement some kind of scrolling.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.core.Container;
private var counter:int = 1;
protected function openTab():void
{
var form:Container = new Container();
form.name = "Tab " + counter++;
vs_objects.addChild(form);
if (vs_objects.numElements > 10)
vs_objects.removeElementAt(0);
vs_objects.selectedChild = form;
}
]]>
</fx:Script>
<s:TabBar id="objectTab" top="32" labelField="name" dataProvider="{vs_objects}"/>
<mx:ViewStack id="vs_objects" width="100%" />
<s:Button label="addTab" click="openTab()" />
</s:Application>
Hope that helps :)

Flex 4 spark Panel has an ugly gray top part

I have a Flex 4 spark Panel I'm popping up through the PopUpManager, but it has a gray portion at the top I can't get rid of. What is that and how can I remove it?
UPDATE: An example Panel is below. I simply call PopUpManager.addPopUp(new TestPanel(), background, true); on it and receive that solid gray bar above the button.
<s:Panel xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
dropShadowVisible="false"
backgroundAlpha="0"
controlBarVisible="false"
borderVisible="false">
<s:VGroup>
<s:Button label="A button" width="150" height="55"/>
</s:VGroup>
</s:Panel>
So, this is how I did it. I made a custom skin: HeaderlessPanelSkin.as
public class HeaderlessPanelSkin extends PanelSkin {
public function HeaderlessPanelSkin() {
super();
topGroup.includeInLayout = false;
}
}
Then, in the panel, I just reference the new skin: skinClass="HeaderlessPanelSkin"
That should do it :)
Create new skin, and in the panel declaration use it... like so
File->New MXML Skin, Host Component is panel.
Edit the Skin properties to change it how you like, in this case the gradient colors on the header.
Sounds like the Panel TitleBar
Create a custom skin and style the title bar how you want it to appear.