Flex 3: Menu arredondada, com um PopUpButton
-
05-07-2019 - |
Pergunta
Então, eu tenho um PopUpButton e quando eu clicar no botão Eu quero o menu que aparece para ter cantos arredondados. Como eu iria fazer isso?
UPDATE: Eu encontrei uma atualização semelhante ao que eu quero fazer, ele pode ser encontrado na página o seguinte:
http: //blog.flexmonkeypatches.com/2007/10/08/flex-rounded-menues-using-masking/comment-page-1/
A única diferença é que eu estou mostrando o menu com uma PopUpButton. Até agora, este é o que eu tenho para o meu menu personalizado:
package {
import flash.display.Sprite;
import mx.controls.Menu;
import mx.events.MenuEvent;
public class MyMenu extends Menu {
public function MyMenu() {
super();
addEventListener("menuShow", onMenuShow);
}
private function onMenuShow(e:MenuEvent):void {
callLater(maskRoundedCorners,[e]);
}
private function maskRoundedCorners(e:MenuEvent):void {
var menu:Menu = e.menu as Menu;
menu.cacheAsBitmap=false;
if (!menu.mask){
var maskx:uint = menu.x;
var masky:uint = menu.y;
var maskw:uint = menu.getExplicitOrMeasuredWidth();
var maskh:uint = menu.getExplicitOrMeasuredHeight();
var rad:int = menu.getStyle("cornerRadius") * 2;
var roundRect:Sprite = new Sprite();
roundRect.graphics.beginFill(0xFFFFFF);
roundRect.graphics.drawRoundRect(maskx,masky,maskw,maskh,rad);
roundRect.graphics.endFill();
menu.mask = roundRect;
}
}
}
}
Alguém pode me ajudar com o que eu estou sentindo falta ... Eu não tenho certeza se eu precisar substituir qualquer uma das funções classes de menu.
Quando eu carregar o meu exemplo o:
addEventListener ( "menuShow", onMenuShow);
fica fogo, mas quando clico no PopUpButton para mostrar o menu da função onMenuShow não está sendo demitido e o menu regular é estar exibição com os cantos arredondados.
Qualquer ajuda sobre este é apreciado.
Obrigado
Solução
Finalmente descobriram isso. Aqui está a solução que eu vim com:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Menu;
[Bindable]
private var myMenu:Menu;
private function popUpButtonInit():void {
myMenu = new Menu();
myMenu.dataProvider = arr;
}
private function menuOpenHandler():void {
var maskx:uint = myMenu.x;
var masky:uint = myMenu.y - 1;
var maskw:uint = myMenu.getExplicitOrMeasuredWidth();
var maskh:uint = myMenu.getExplicitOrMeasuredHeight();
var rad:int = myMenu.getStyle("cornerRadius");
var roundRect:Sprite = new Sprite();
roundRect.graphics.beginFill( 0xFFFFFF );
roundRect.graphics.drawRoundRect( maskx, masky, maskw, maskh, rad );
roundRect.graphics.endFill();
myMenu.mask = roundRect;
}
]]>
</mx:Script>
<mx:Style>
Menu {
corner-radius: 30;
}
</mx:Style>
<mx:Array id="arr">
<mx:Object label="Alert" />
<mx:Object label="Button" />
<mx:Object label="ButtonBar" />
<mx:Object label="CheckBox" />
<mx:Object label="ColorPicker" />
<mx:Object label="ComboBox" />
</mx:Array>
<mx:PopUpButton width="78" height="25"
initialize="popUpButtonInit();"
popUp="{myMenu}" popUpGap="3" open="menuOpenHandler();"
horizontalCenter="0" verticalCenter="0">
</mx:PopUpButton>
</mx:Application>
Se tiver que ter uma solução melhor comentário, por favor.