I am using Adobe Flex 4.6 and I have this image:
<mx:Image source="assets/logo.png" horizontalAlign="center" verticalAlign="middle"></mx:Image>
The image appears, but it does not center horizontal or vertical, how Do I center this image?
I have also tried the following:
<mx:Canvas width="100%">
<mx:HBox horizontalCenter="0" verticalCenter="0">
<mx:Image source="assets/logo.png" horizontalAlign="center" verticalAlign="middle"></mx:Image>
</mx:HBox>
</mx:Canvas>
Still nothing, my image wont center
This worked for me
<s:Group width="100%" height="100%">
<s:layout>
<s:VerticalLayout
verticalAlign="middle"
horizontalAlign="center"/>
</s:layout>
<s:BitmapImage source="#Embed(source='assets/logo.png')" />
</s:Group>
Use the horizontalCenter and VerticalCenter properties in the image tag as below
<mx:Image source="assets/logo.png" horizontalCenter="0" verticalCenter="0"></mx:Image>
It is working fine for me.
Related
I have a chart with a legend
<s:VGroup width="100%" height="100%">
<mx:LineChart width="100%" height="100%" id="lineChart" showDataTips="true" dataTipFunction="columnChartDataTipFunction">
<mx:verticalAxis>
<mx:LinearAxis id="v1" title="Position" labelFunction="labelFuncY"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis
categoryField="kh_formatted_date" />
</mx:horizontalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer id="vax" axis="{v1}" placement="top"/>
</mx:verticalAxisRenderers>
</mx:LineChart>
<s:BorderContainer width="100%" borderColor="#ff0000" borderWeight="4">
<mx:Legend verticalGap="0" dataProvider="{lineChart}" clipContent="true" maxWidth="100"/>
</s:BorderContainer>
</s:VGroup>
I have this result but I was expecting scrollbars, also maxWidth seems to be ignored.
Use this structure instead
<s:BorderContainer width="100" borderColor="#ff0000" borderWeight="4">
<s:Scroller left="0" right="0" top="0" bottom="0">
<s:Group left="0" right="0" top="0" bottom="0">
<mx:Legend verticalGap="0" dataProvider="{myChart}" clipContent="true"/>
</s:Group>
</s:Scroller>
</s:BorderContainer>
to control the width of the legend you can use the width property of the BorderContainer
If you run the following mxml code, you'll see there's a gap between the TabBar and the BorderContainer. How to simply remove that gap? I'm having trouble laying it out. Nothing I enter in TabBar (e.g. top="10", or y="10") has any effect.
<?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">
<s:VGroup top="10" bottom="20" left="20" right="20">
<s:Group width="100%">
<s:HGroup left="0" top="2">
<s:Label id="titleTextId" text="My Title" fontWeight="bold" fontSize="18"/>
</s:HGroup>
<s:HGroup right="0" verticalAlign="middle">
<s:Button label="Button1" width="65"/>
<s:Button label="Button2" width="65" />
</s:HGroup>
</s:Group>
<s:TabBar id="tabs" dataProvider="{vs}"/>
<mx:ViewStack id="vs" height="100%" width="100%">
<s:NavigatorContent label="Tab 1" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="1" borderStyle="solid">
<s:Label left="3" top="5" text="This is my first tab..."/>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 2" width="100%" height="100%">
<s:BorderContainer width="100%" height="100%" borderWeight="1" borderStyle="solid">
<s:Label left="3" top="5" text="This is my second tab..."/>
</s:BorderContainer>
</s:NavigatorContent>
</mx:ViewStack>
</s:VGroup>
Try the gap attribute, this should do it!
<s:VGroup top="10" bottom="20" left="20" right="20" gap="0">
The content(Here is VBox) is not align with Tab, put it in another way, the content is stretch out one pixel(The red border is wider than the Tab), as show in the following pic:
So how to solve the issue?
code snippet:
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
>
<mx:TabNavigator id="tn"
width="300"
height="300"
tabWidth="{tn.width/tn.numChildren}"
borderStyle="solid"
borderColor="#ff0000"
backgroundColor="#ffffff"
paddingTop="0">
<mx:VBox id="vb1" width="100%" label="Tab 1" backgroundColor="#ffffff">
<mx:Label text="width:{vb1.width}, height:{vb1.height}" />
</mx:VBox>
<mx:VBox id="vb2" width="100%" label="Tab 2" backgroundColor="#00ffff">
<mx:Label text="width:{vb2.width}, height:{vb2.height}" />
</mx:VBox>
</mx:TabNavigator>
</mx:Application>
I have created a Popup that is custom component extends Canvas i want the look of the canvas is similar like that showed in image. is there any idea that how to create a pop up similar like that.
Here i am giving you the sample code that i have done till now...
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="550" height="350" backgroundAlpha="0">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
public function btnImage_click():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Image source="Images/close.png" top="4" left="500" useHandCursor="true" buttonMode="true" click="{btnImage_click();}" />
<mx:Fade id="fadeIn" duration="700" alphaFrom="0.0" alphaTo="1.0"/>
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Canvas height="85%" width="90%" backgroundColor="#ffffff" backgroundAlpha="1" >
<mx:VBox height="100%" width="100%">
<mx:HBox height="70%" width="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Image id="btnPrevious" source="Images/previous.png"
click="{vsSubImages.selectedIndex--}" enabled="{vsSubImages.selectedIndex!=0}"/>
<mx:ViewStack height="100%" width="90%" creationPolicy="all" id="vsSubImages">
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}">
<mx:Image id="img1" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />
</mx:VBox>
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}">
<mx:Image id="img2" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />
</mx:VBox>
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" showEffect="{fadeIn}">
<mx:Image id="img3" maintainAspectRatio="true" height="100%" width="100%" horizontalAlign="center" verticalAlign="middle" />
</mx:VBox>
</mx:ViewStack>
<mx:Image id="btnNext" source="Images/next.png"
click="{vsSubImages.selectedIndex++}" enabled="{vsSubImages.selectedIndex!=2}" />
</mx:HBox>
<mx:Box height="30%" width="100%" horizontalAlign="right" verticalAlign="top">
<mx:Form height="100%" width="100%">
<mx:FormItem label="Project Name : " >
<mx:Label id="lblName" />
</mx:FormItem>
<mx:FormItem label="Description : " >
<mx:Label id="lblDescription" />
</mx:FormItem>
<mx:FormItem label="Technology Name : " >
<mx:Label id="lblTechnology" />
</mx:FormItem>
</mx:Form>
</mx:Box>
</mx:VBox>
</mx:Canvas>
</mx:VBox>
</mx:Canvas>
The main idea is to show the close button on the Canvas currently i am getting that behind the Canvas.
Please Help me.
Put the <mx:Image source="Images/close.png" top="4" left="500" useHandCursor="true" buttonMode="true" click="{btnImage_click();}" /> tag at the very bottom of the code before last </mx:Canvas> tag. Because canvas behaves like last is at the very top in the z-index.
I've had this problem for quite a while now, and I just cant get my head around it..
First, a short explanation of my program:
It's going to be used to view complicated scenes in 3D, but to make it work on laptops it's instead showing pre-rendered 360 degree renders of the objects.
When you load an object, it first buffers 360 frames into memory, so that you can rotate around this object smoothly. When you release the mouse button, it loads in the high-res image of that frame.
Then, you should be able to zoom in and move around to inspect the model closer.
Problem here is when I have the scrollbars enabled it wont work properly.
Firstly, I had a problem where the vertical scrollbar moved out of the picture when I was scrolling the horizontal scrollbar.
Then after some more testing, they now stay where they should, but when I zoom in (will post code below) the horizontal scrollbar is not able to go far enough to the left to show the whole image.
What happens is, when I zoom in, the scrollbar remains at it's left position, but I zoom in on the center of the image (zooming, by scaling the container. The image fill the container).
My problem is probably just a result of me overlooking some basic understanding. And sorry if the code is a bit messy, I've only done a little bit of clean up. The code I post below is without any scrollbars visible.
You can see that I've tried using scrollbar components too, and it works somehow. But I'm not able to scale the scrollbar depending on the content, so if I zoom in or out, the handle you drag on the scrollbar will be the same...
Thanks a LOT in advance to anyone trying to help me figure this out!
Image of app running if needed:
Code:
<mx:Panel x="0" y="0" width="100%" height="100%" titleIcon="#Embed('assets/img/cog_01.png')" title="vCog Subsea - Draugen Project">
<mx:HDividedBox x="0" y="0" width="100%" height="100%" liveDragging="true">
<mx1:TabNavigator width="30%" height="100%" chromeColor="#4B4B4B" tabHeight="20">
<mx1:DividedBox width="100%" height="100%" label="Components" borderVisible="true">
<mx:VBox width="100%">
<mx:Tree id="treeView" x="0" y="0" width="100%" height="100%"
itemRenderer="components.CustomTreeItemRenderer"
paddingBottom="2" showRoot="true"
itemClick="treeItemClick(event)"
itemOpen="treeItemOpen(event)" />
<mx:Canvas width="100%" height="30" styleName="information">
<mx:CheckBox id="infoCheckBox" x="10" y="5" width="100%" label="Information"
click="checkbox1_clickHandler(event)" enabled="true"
selected="{infoview_visible}" styleName="infoCheckBox"/>
</mx:Canvas>
</mx:VBox>
</mx1:DividedBox>
</mx1:TabNavigator>
<mx:HBox width="100%" height="100%">
<mx1:TabNavigator id="myTabs" width="100%" height="100%" dropShadowVisible="false" tabHeight="20">
<mx1:DividedBox id="my3DView" width="100%" height="100%"
label="3D View Main" borderVisible="true" >
<!-- CONTAINER -->
<mx:Canvas id="container" width="100%" height="100%"
resize="resizeHandler(event)"
mouseWheel="videoBufferWheel(event)"
horizontalScrollPolicy="off"
verticalScrollPolicy="off" >
<!-- CONTENT -->
<mx:Canvas id="content"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:Canvas id="videoCanvas" width="100%" height="100%"
mouseDown="videoBufferMDown(event)"
mouseMove="videoBufferMMove(event)"
mouseUp="videoBufferMUp(event)" >
<s:Image id="imageBuffer" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch" />
<s:Image id="imageFull" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch"/>
<s:Image id="imageMask" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch" />
</mx:Canvas> <!-- videoCanvas END -->
</mx:Canvas> <!-- CONTENT END -->
<!-- Scrollbars -->
<s:HScrollBar id="hScroll" bottom="0" left="0" right="16" maximum="100" minimum="-100"
pageSize="100" change="scroll(event)"
visible="false" />
<s:VScrollBar id="vScroll" right="0" top="0" bottom="16" maximum="100" minimum="-100" pageSize="100"
change="scroll(event)"
visible="false" />
<!-- Camera controlls -->
<mx:Panel id="panelCamera" visible="true" right="20"
bottom="20" width="130" height="50"
backgroundAlpha="0.6" backgroundColor="#383838"
borderAlpha="0.5" chromeColor="#2A2A2A"
contentBackgroundAlpha="1.0"
contentBackgroundColor="#737373" cornerRadius="0"
dropShadowVisible="false" focusColor="#999999"
layout="absolute" styleName="panelCamera"
symbolColor="#878787" title="Select camera">
<mx:Button id="btnTotal" x="10" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonTotalStyle" click="camTotalClick(event)"/>
<mx:Button id="btnClose" x="50" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonCloseStyle" click="camCloseClick(event)"/>
<mx:Button id="btnExploded" x="90" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonExplodedStyle" click="camExplodedClick(event)"/>
</mx:Panel>
<!-- Full/Color image loading bar -->
<mx:ProgressBar id="myProgressFull" y="10" width="95%" height="15" visible="false" alpha="0.5" mode="manual"
label="Downloading Image" fontSize="7" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="-8"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressColor" y="27" width="95%" height="15" visible="false" alpha="0.5" mode="manual"
label="Downloading Hilights" fontSize="7" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="-8"
labelPlacement="center"/>
<!-- Main loading bar -->
<mx:Panel id="myLoadingPanel" top="100" width="520" height="107"
backgroundAlpha="0.5"
backgroundColor="#3A3A3A"
borderVisible="true"
contentBackgroundColor="#7E7E7E"
dropShadowVisible="false"
fontWeight="normal" fontThickness="0" fontSize="10" color="#959595"
headerHeight="15"
horizontalAlign="center"
horizontalCenter="0"
layout="absolute"
title="Downloading and buffering content..."
visible="false"
verticalAlign="middle"
titleIcon="#Embed('assets/img/loading_01.png')"
>
<mx:ProgressBar id="myProgressBarTotal" y="10" width="500"
label="Total progress" chromeColor="#474747"
color="#FFFFFF" fontWeight="normal"
horizontalCenter="0" indeterminate="false" mode="manual"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressBar" y="41" width="500"
label="Downloading data" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="0"
labelPlacement="center" source="_SWFLoader"/>
<mx:ProgressBar id="myProgressBar2" y="61" width="500"
label="Buffering data" chromeColor="#75584A"
color="#EB7738" fontWeight="normal"
horizontalCenter="0" indeterminate="false" mode="manual"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressBarVisual" y="32" width="500" height="5" label=" "
horizontalCenter="0" indeterminate="true"
labelPlacement="center"/>
</mx:Panel>
</mx:Canvas> <!-- CONTAINER END -->
</mx1:DividedBox>
<mx1:DividedBox width="100%" height="100%" label="Main Map" borderVisible="true">
<mx:Canvas width="100%" height="100%" click="overviewClickHandler(event)" >
<s:Image id="overColor" width="100%" height="100%" source="assets/img/overview_color_001.png" scaleMode="letterbox" visible="false" />
<s:Image id="overFull" width="100%" height="100%" source="assets/img/overview_001.png" scaleMode="letterbox" smooth="true" />
</mx:Canvas>
</mx1:DividedBox>
</mx1:TabNavigator>
</mx:HBox>
</mx:HDividedBox>
</mx:Panel>
Functions:
public function videoBufferWheel(event:MouseEvent):void{
var delta:Number=(event.delta*myZoom)/300;
if(myZoom+delta<1){
delta=1-myZoom;
}else if(myZoom+delta>3){
delta=3-myZoom;
}
myZoom += delta;
resizeHandler(null);
event.stopImmediatePropagation();
}
public function resizeHandler(event:Event):void{
var _w:Number=container.width-scrollerSize;
var _h:Number=container.height-scrollerSize;
if(_w/_h<aspect){
content.height=_h*myZoom;
content.width=(_h*myZoom)*aspect;
}else{
content.height=(_w*myZoom)/aspect;
content.width=(_w*myZoom);
}
content.x = (-content.width/2)+container.width/2+(hOffset*(container.width-content.width)/200);
content.y = (-content.height/2)+container.height/2+(vOffset*(container.height-content.height)/200);
}
If I understand right, you want to move a scroll button when user zooms an image. But where do you add a code for this action? I mean you should add a code to move the scroll button.