Flex 3: Menu arrotondato con un pulsante PopUp
-
05-07-2019 - |
Domanda
Quindi ho un PopupButton e quando faccio clic sul pulsante voglio che il menu che si apre abbia gli angoli arrotondati. Come farei per fare questo?
UPDATE: Ho trovato un aggiornamento simile a quello che voglio fare, può essere trovato nella seguente pagina:
http: //blog.flexmonkeypatches.com/2007/10/08/flex-rounded-menues-using-masking/comment-page-1/
L'unica differenza è che sto mostrando il menu con un pulsante PopUp. Finora questo è quello che ho per il mio menu personalizzato:
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;
}
}
}
}
Qualcuno può darmi una mano con ciò che mi manca ... Non sono sicuro di dover annullare una delle funzioni delle classi del menu.
Quando carico il mio esempio il:
addEventListener (" menuShow " ;, onMenuShow);
prende fuoco ma quando faccio clic sul pulsante PopUp per mostrare il menu, la funzione onMenuShow non viene attivata e il menu normale viene visualizzato senza gli angoli arrotondati.
Qualsiasi aiuto su questo è apprezzato.
Grazie
Soluzione
Finalmente ho capito. Ecco la soluzione che mi è venuta in mente:
<?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 ti capita di avere una soluzione migliore, ti preghiamo di commentare.