In following code, I have one large component, and I'd like only the level4 panel to be scrollable, but instead, the whole application become scrollable.
Any suggestion ? Thanks
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel width="100%" height="100%" title="level1">
<mx:Panel width="100%" height="100%" title="level2">
<mx:HDividedBox width="100%" height="100%">
<mx:TextArea width="200" height="100%"/>
<mx:Panel width="100%" height="100%" title="level3">
<mx:ApplicationControlBar width="100%" dock="true">
<mx:Spacer width="30"/>
<mx:LegendItem width="80" height="20" fill="#CC9900" label="test1"/>
</mx:ApplicationControlBar>
<mx:Panel width="100%" height="100%" title="level4">
<mx:UIComponent width="2000" height="2000"/>
</mx:Panel>
</mx:Panel>
</mx:HDividedBox>
</mx:Panel>
</mx:Panel>
</mx:Application>
If I set ScrollPolicy, then no scrollbar will be shown up. Please check the following, thanks.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Panel width="100%" height="100%" title="level1" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Panel width="100%" height="100%" title="level2" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:HDividedBox width="100%" height="100%">
<mx:TextArea width="200" height="100%"/>
<mx:Panel width="100%" height="100%" title="level3" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:ApplicationControlBar width="100%" dock="true">
<mx:Spacer width="30"/>
<mx:LegendItem width="80" height="20" fill="#CC9900" label="test1"/>
</mx:ApplicationControlBar>
<mx:Panel width="100%" height="100%" title="level4" horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
<mx:UIComponent width="2000" height="2000"/>
</mx:Panel>
</mx:Panel>
</mx:HDividedBox>
</mx:Panel>
</mx:Panel>
</mx:Application>
Set layout="absolute" for the level4 panel.
You can change the value of .verticalScrollBarPolicy for each Panel, setting it to "off" for the Panels that should not scroll, and to "on" or "auto" for the Panels that should scroll. There is also a .horizontalScrollBarPolicy parameter if you need that as well.
Related
I want the TextArea under my second tab to update when the tab is clicked. However, it's only updating when I click on the TextArea or the container for that text area.
Flex:
<mx:Box paddingLeft="0" paddingRight="0" paddingBottom="0" paddingTop="0" width="100%" height="100%"
<mx:VBox id="vbxHTMLBody" width="100%" height="100%" horizontalScrollPolicy="off" horizontalAlign="center">
<mx:TabNavigator id = "tabNav" borderStyle="solid" width="100%" height="100%" creationPolicy="all">
<mx:VBox label="Tab1" width="100%" height="100%">
<mx:TextArea id="textArea1" paddingTop="25" paddingLeft="25" paddingRight="25" verticalScrollPolicy="on" focusThickness="0" borderThickness="0" borderStyle="none" editable="true" fontFamily="Arial" fontSize="14" width="100%" height="100%"/>
</mx:VBox>
<mx:VBox label="Tab2" width="100%" height="100%" click="updateTextArea2()">
<mx:TextArea id="textArea2" paddingTop="25" paddingLeft="25" paddingRight="25" verticalScrollPolicy="on" focusThickness="0" borderThickness="0" borderStyle="none" editable="true" fontFamily="Arial" fontSize="14" width="100%" height="100%"/>
</mx:VBox>
</mx:TabNavigator>
</mx:VBox>
</mx:Box>
ActionScript:
private function updateTextArea2(): void {
textArea2.htmlText = textArea1.text;
tabNav.validateNow();
textArea2.validateNow();
}
*I've also tried setting the click listener to the outer containers and that hasn't worked either.
I used change="updateTextArea2()" to listen for any changes made to the text area.
Call updateTextArea2()on change of the TabNavigator:
<mx:TabNavigator id="tabNav" change=updateTextArea2()">
instead from VBox change.
I'm building an flex app that is basically a wrapper for a few websites. One of them is a google docs website, and I'm trying to get flex to allow downloads or popups or something that will allow me to do it. I've tried a whole bunch of solutions online and none of them have worked out. Here's the code so far:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%"
creationComplete="onCreationComplete()">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<fx:Style source="style.css"/>
<fx:Script>
<![CDATA[
include "CustomHTMLLoader.as";
private function onCreationComplete():void
{
// ... other stuff ...
var custom:object;
custom.htmlHost = new MyHTMLHost();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:BorderContainer width="100%" height="100%" backgroundColor="#87BED0" styleName="container">
<s:Panel x="188" y="17" width="826" height="112" borderAlpha="0.15" chromeColor="#0C5A74"
color="#FFFFFF" cornerRadius="20" dropShadowVisible="false" enabled="true"
title="Customer Service Control Panel">
<s:controlBarContent/>
<s:Button id="home" x="13" y="10" height="44" label="Phones"
click="myViewStack.selectedChild=Home;" enabled="true"
icon="#Embed('assets/iconmonstr-mobile-phone-6-icon-32.png')"/>
<s:Button id="liveagent" x="131" y="10" height="44" label="Live Agent"
click="myViewStack.selectedChild=live_agent;"
icon="#Embed('assets/iconmonstr-speech-bubble-11-icon-32.png')"/>
<s:Button id="bigcommerce" x="260" y="10" width="158" height="44" label="Big Commerce"
click="myViewStack.selectedChild=bigcommerce_home;"
icon="#Embed('assets/iconmonstr-coin-6-icon-48.png')"/>
<s:Button id="faq" x="436" y="10" width="88" height="44" label="FAQ"
click="myViewStack.selectedChild=freqaskquestions;" fontFamily="Arial"
icon="#Embed('assets/iconmonstr-help-4-icon-32.png')"/>
<s:Button id="call" x="540" y="10" width="131" height="44" label="Google Docs"
click="myViewStack.selectedChild=call_notes;"
icon="#Embed('assets/iconmonstr-text-file-4-icon-32.png')"/>
<s:Button id="hoot" x="684" y="10" width="122" height="44" label="HootSuite"
click="myViewStack.selectedChild=hoot_suite;"
icon="#Embed('assets/iconmonstr-facebook-icon-32.png')"/>
</s:Panel>
<mx:ViewStack id="myViewStack" x="0" y="140" width="100%" height="100%" borderStyle="solid">
<s:NavigatorContent id="Home">
<s:BorderContainer width="100%" height="100%">
<mx:HTML x="0" y="0" width="100%" height="100%" borderVisible="false"
horizontalScrollPolicy="off"
location="http://mbvphone.mtbakervapor.org/vbx/messages/inbox"
/>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent id="bigcommerce_home">
<s:BorderContainer width="100%" height="100%">
<mx:HTML x="0" y="0" width="100%" height="100%" borderVisible="false"
horizontalScrollPolicy="off"
location="http://www.mtbakervapor.com/admin"
/>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent id="live_agent">
<s:BorderContainer width="100%" height="100%">
<mx:HTML x="0" y="0" width="100%" height="100%" borderVisible="false"
horizontalScrollPolicy="off"
location="http://mbvphone.mtbakervapor.org/liveagent/agent/#login"
/>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent id="freqaskquestions">
<s:BorderContainer width="100%" height="100%">
<mx:HTML x="0" y="0" width="100%" height="100%" borderVisible="false"
horizontalScrollPolicy="off"
location="http://mbvphone.mtbakervapor.org/liveagent/"
/>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent id="call_notes">
<s:BorderContainer width="100%" height="100%">
<mx:HTML id="html" x="0" y="0" width="100%" height="100%" borderVisible="false"
horizontalScrollPolicy="off"
location="https://drive.google.com/a/mtbakervapor.com/"
htmlHost="{new CustomHost()}"
/>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent id="hoot_suite">
<s:BorderContainer width="100%" height="100%">
<mx:HTML x="0" y="0" width="100%" height="100%" borderVisible="false"
horizontalScrollPolicy="off"
location="https://hootsuite.com/login"
/>
</s:BorderContainer>
</s:NavigatorContent>
</mx:ViewStack>
<s:Image x="0" y="0" width="180" height="140" scaleMode="letterbox" smooth="false"
source="assets/mbvlogo_black.png"/>
</s:BorderContainer>
</s:WindowedApplication>
and the custom class code:
package
{
import flash.html.HTMLHost;
import flash.html.HTMLWindowCreateOptions;
import flash.html.HTMLLoader;
public class MyHTMLHost extends HTMLHost
{
public function MyHTMLHost(defaultBehaviors:Boolean=true)
{
super(defaultBehaviors);
}
override public function createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader
{
// all JS calls and HREFs to open a new window should use the existing window
return HTMLLoader.createRootWindow();
}
}
}
any help would be appreciated.
I'm having the hardest time finding a way to simply add rounded tabs to a TabNavigator control.
I have seen examples which seem to be really simple but they don't seem to work in Flex 4.5. Here is some sample code:
<?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:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style source="style.css"/>
<mx:TabNavigator x="93" y="90" width="571" height="293" tabStyleName="tabstyle">
<s:NavigatorContent width="100%" height="100%" label="Tab 1">
</s:NavigatorContent>
</mx:TabNavigator>
</s:Application>
and the css:
/* CSS file */
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
.tabstyle
{
corner-radius: 10;
}
I have also tried cornerRadius: 10;
Any ideas why this does not work? Any easy to follow solution (I'm a beginner).
Thanks.
You could create a skin for your app/tab navigator, use the 'create copy of' option in Flash Builder, and in the Rect section, set the radiusX, radiusY values. Then use that skin for the component
This is the best and easiest workaround I know for this problem. It seems Adobe never solved this bug.
<s:VGroup width="100%" height="100%" gap="0" >
<s:Group width="100%">
<s:TabBar left="4" dataProvider="{tabNav}" cornerRadius="4" />
</s:Group>
<s:BorderContainer width="100%" height="100%" cornerRadius="4">
<mx:ViewStack id="tabNav" paddingBottom="10" width="100%" height="100%" >
<s:NavigatorContent label="Form" width="100%" height="100%">
...
</s:NavigatorContent>
<mx:Canvas id="treeNode" label="TreeNodeComponent" width="100%" height="100%">
...
</mx:Canvas>
<mx:Canvas id="melding" label="Melding" width="100%" height="100%" visible="{authorisation.moduleHasUserAutorization('melding')}" includeInLayout="{melding.visible}">
...
</mx:Canvas>
</mx:ViewStack>
</s:BorderContainer>
</s:VGroup>
It's the equivalent of this but with rounded corners in the tabs (and body):
<mx:TabNavigator id="tabNav" paddingBottom="10" width="100%" height="100%" >
<s:NavigatorContent label="Form" width="100%" height="100%">
...
</s:NavigatorContent>
<mx:Canvas id="treeNode" label="TreeNodeComponent" width="100%" height="100%">
...
</mx:Canvas>
<mx:Canvas id="melding" label="Melding" width="100%" height="100%" visible="{authorisation.moduleHasUserAutorization('melding')}" includeInLayout="{melding.visible}">
...
</mx:Canvas>
</mx:TabNavigator>
Try this!
<mx:TabNavigator id="tabNavigator" tabOffset="20" cornerRadius="10" height="100%" width="100%">
This is the sample code you can copy and run
<s:NavigatorContent id="search" label="Search" width="100%" height="100%" fontWeight="bold"
>
<s:layout>
<s:VerticalLayout horizontalAlign="center"
paddingTop="5" paddingLeft="5"
paddingRight="5" paddingBottom="5" />
</s:layout>
<s:Label text="Search Panel" />
<s:HGroup >
<s:TextInput id="Searchtxt" width="200" />
<mx:Button label="search" click="Searchtxt.text=''" />
</s:HGroup>
</s:NavigatorContent>
<s:NavigatorContent id="custInfo" label="Customer Info" backgroundColor="0xDCDCDC"
width="100%" height="100%" fontWeight="bold" >
<s:layout>
<s:VerticalLayout horizontalAlign="center"
paddingTop="5" paddingLeft="5"
paddingRight="5" paddingBottom="5" />
</s:layout>
<s:Label text="Customer Info" />
<s:HGroup>
<s:Label text="Email Address"/>
<s:TextInput id="email" width="200"/>
<s:Button label="Submit" click="email.text='';" />
</s:HGroup>
</s:NavigatorContent>
<s:NavigatorContent id="accountInfo" label="Account Info" backgroundColor="0xDCDCDC" width="100%" height="100%" fontWeight="bold" >
<s:layout>
<s:VerticalLayout horizontalAlign="center"
paddingTop="5" paddingLeft="5"
paddingRight="5" paddingBottom="5" />
</s:layout>
<s:Label text="Account Info" />
<s:HGroup>
<s:Button label="Purchases" />
<s:Button label="Sales" />
<s:Button label="Reports" />
</s:HGroup>
</s:NavigatorContent>
</mx:ViewStack>
Hy,
Is it possible to resize the application at the same moment when the Accordion size change, to make effect resize og the last one synchronised with resize of Application ?
In my code,, the Application is resized after the resize of Accordion is completed:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" minWidth="400" minHeight="300" backgroundColor="white" horizontalScrollPolicy="off" verticalScrollPolicy="off" mouseDown="stage.nativeWindow.startMove()">
<mx:Resize id="expand" target="{application}" heightTo="{acc01.height}"/>
<mx:Accordion id="acc01" x="0" y="0" resizeToContent="true" resize="expand.play();" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:VBox label="Accordion Pane 1" width="100%" height="100%">
<mx:Label text="hello"/>
<mx:Label text="hello"/>
<mx:Label text="hello"/>
<mx:Label text="hello"/>
</mx:VBox>
<mx:VBox label="Panel 2" width="100%" height="100%">
<mx:Label text="hello"/>
<mx:Label text="hello"/>
</mx:VBox>
<mx:VBox label="Panel 3" width="100%" height="100%">
<mx:Label text="hello"/>
<mx:Label text="hello"/>
</mx:VBox>
<mx:VBox label="Panel 4" width="100%" height="100%">
<mx:Label text="hello"/>
<mx:Label text="hello"/>
</mx:VBox>
</mx:Accordion>
</mx:Application>
Have a look at http://livedocs.adobe.com/flex/3/langref/mx/effects/Parallel.html, it might do what you need.
I have multiple HBoxes inside a VBox inside a canvas like so:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Canvas width="600" height="500">
<mx:VBox height="100%" left="10" right="10">
<mx:HBox width="100%" >
<mx:VBox width="48%" height="100%" horizontalAlign="left">
<mx:Label text="Label" />
</mx:VBox>
<mx:VBox width="48%" height="100%" horizontalAlign="left">
<mx:Label text="Label" />
<mx:HBox width="100%">
<mx:VBox width="48%">
<mx:Label text="Label" />
<mx:ComboBox />
</mx:VBox>
</mx:HBox>
</mx:VBox>
</mx:HBox>
<mx:VBox>
<mx:HBox>
<mx:Label text="Label" />
<mx:Label text="Label" />
</mx:HBox>
</mx:VBox>
<mx:HBox>
<mx:Label text="Label" />
<mx:ComboBox/>
</mx:HBox>
<mx:HBox>
<mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
includeInLayout="false" >
<mx:Label text="Label" />
</mx:VBox>
<mx:VBox>
<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
includeInLayout="false"
>
<mx:VBox >
<mx:Label text="Text" />
<mx:ComboBox />
</mx:VBox>
<mx:VBox>
<mx:Label text="Label" />
<mx:ComboBox />
</mx:VBox>
</mx:HBox>
<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
includeInLayout="false"
>
<mx:VBox>
<mx:Label text="Label:"/>
<mx:ComboBox />
</mx:VBox>
<mx:VBox>
<mx:Label text="Label: "/>
<mx:ComboBox />
</mx:VBox>
</mx:HBox>
</mx:VBox>
</mx:HBox>
<mx:HBox >
<mx:Label text="Label:" />
<mx:CheckBox />
</mx:HBox>
</mx:VBox>
</mx:Canvas>
</mx:Application>
The last child in the VBox is overlapping with other components. How do you prevent children of a VBox in a Canvas from overlapping? How do you debug this situation?
I have tried the following:
Removing percent based sizing
IncludeInLayout = true
Sceenshot - Label and Checkbox Overlapping:
It's hard to say with the information provided, but the two questions that come to mind first are:
Is your VBox height greater than the sum of the heights of its children?
Have you set the verticalGap property on the VBox? verticalGap determines vertical spacing between children.
I just tried this (AIR app) and it looks alright to me.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Canvas height="100%" width="100%"
borderStyle="solid"
backgroundColor="0x0000ff">
<mx:VBox height="100%" width="100%">
<mx:VBox backgroundColor="0xff0000" height="50%" width="100%">
<mx:HBox backgroundColor="0x000000" height="50%" width="50%"/>
<mx:HBox backgroundColor="0xffffff" height="50%" width="50%"/>
<mx:HBox backgroundColor="0x00ffff" height="50%" width="50%"/>
</mx:VBox>
<mx:HBox height="50%" width="100%"
backgroundColor="0xff0000" backgroundAlpha="0.5"
borderColor="0x000000" borderStyle="solid" borderThickness="1"/>
</mx:VBox>
</mx:Canvas>
</mx:WindowedApplication>
I resolved this by making the includeInLayout property of some of these components the same conditional used by their visible property.
Not sure what caused the issue though.