Scroller not shown Flex 4 with VGroup - actionscript-3

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.

Related

How to disable my wordpress page from scrolling up when clicking inside an iFrame?

Recently I added an iFrame using the following code I found online:
"<iframe id=“personio-iframe” style=“border: none;” src=“my website address is here” width=“100%” onload=“window.top.scrollTo(0,0);“> window.addEventListener(‘message’, function(e) { var iframe = document.querySelector(‘#personio-iframe’); var eventName = e.data[0]; var data = e.data[1]; switch(eventName) { case ‘setHeight’: iframe.style.height = data + ‘px’; window.scrollTo({ top: 0, behavior: ‘smooth’ }); break; } }, false);"
I noticed whenever I click on any part inside an iFrame the page scrolls up.
I can see the two lines in the code that mention scrolling up, but when I tried to delete them the frame doesn't show properly, it's displayed as a narrow bar on the page.
Can you please let me know how can I modify this code to successfully get rid of the scrolling up without damaging the iFrame itself?
Please try this line:
<iframe id="personio-iframe" style="border: none;" src="your website address is here" width="100%" height="600px">
This is optional for your css, with it the iframe will not go over 90% of screen height
#personio-iframe {max-height:90vh;}

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
}

Flex ItemRenderer: rendering the source item of a drag

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;
}

Place an 'addChild' button into grid space of TabNavigator

This question is similar to the post:
"Move Button into grid space of a TabNavigator’s tabs in Flex Builder."
Move Button into grid space of a TabNavigator's tabs in Flex Builder
but with a slight difference. I wish to have a button that adds a child (tab) to the TabNavigator in the grid space (simpler with TabBar, but see below), but will not block tabs as they extend towards the button. This functionality can be seen in every web browser that uses tabs.
In addition I would like to have a scroll button appear if too many tabs are opened, and the ability to close tabs. I have tried using Doug McCune's SuperTabNavigator, which offers most of these features, but it does not offer the addChild button that I am looking for.
Is there a way to add this 'addChild' button to the grid space, or to add the features from SuperTabNavigator to TabBar?
This class will do the trick except for scrolling when there are too many tabs.
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="400">
<mx:HBox width="100%">
<mx:TabBar dataProvider="{viewstack}"/>
<mx:Button label="+" width="35" click="addTab()"/>
</mx:HBox>
<mx:ViewStack height="100%" width="100%" id="viewstack"/>
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.containers.Panel;
//add a new container
private function addTab():void
{
var l:Label = new Label();
l.text = "Panel " + (viewstack.numChildren + 1);
var p:Panel = new Panel();
p.label = l.text;
p.addChild(l);
viewstack.addChild(p);
viewstack.selectedChild = p;
}
]]>
</mx:Script>
</mx:VBox>