FlexViewer优化之HeaderControlWidget和Widget开关闭
FlexViewer是个非常优秀的ArcGIS地图开发框架,但其中有些地方如果作部分调整,功能上或者交互上会有很大提升。本此主要修改HeaderControlWidget打开和关闭Widget的功能,以及Widget打开和关闭的功能优化。
?
?
在FlexViewer2.4、FlexViewer2.5,、FlexViewer3.0中,HeaderControlWidget中只能打开Widget,并不能关闭打开的Widget。
=================HeaderControlWidget中Widget的打开与关闭==============
做如下修改,即可实现HeaderControlWidget中Widget的打开与关闭:
1)修改HeaderControllerWidget.mxml中的widgetItemDG_widgetItemClickHandler(event:Event)方法。
?
privatefunction widgetItemDG_widgetItemClickHandler(event:Event):void
??????????? {
??????????????? var widgetItem:WidgetItem =ItemRenderer(event.target).data as WidgetItem;
??????????????? if (widgetItem.isGroup)
??????????????? {
??????????????????? groupWidgetArrCol = newArrayCollection();
??????????????????? // check the array ofwidgets if they are open before hand
??????????????????? for each (varwidgetObj:Object in widgetItem.widgets)
??????????????????? {
??????????????????????? varwidgetItem1:WidgetItem = new WidgetItem;
??????????????????????? widgetItem1.id =widgetObj.widget.id;
??????????????????????? widgetItem1.label =widgetObj.widget.label;
??????????????????????? widgetItem1.icon =widgetObj.widget.icon;
??????????????????????? widgetItem1.url =widgetObj.widget.url;
??????????????????????? widgetItem1.open =widgetObj.open;
?
???????????????????????groupWidgetArrCol.addItem(widgetItem1);
??????????????????? }
??????????????????? menuToolTip.visible =false;
??????????????????? widgetList.visible = true;
??????????????? }
??????????????? else
??????????????? {
???????????? if (!widgetItem.open)
??????????? {
??????????????? AppEvent.dispatch(AppEvent.WIDGET_RUN,widgetItem.id);
???????????}????????
?????????? else
?????????? {
?????????AppEvent.dispatch(AppEvent.WIDGET_CLOSE, widgetItem.id);
?????????? }
??????????????? }
??????????? }
2)修改WidgetItemDataGroupRenderer.mxml中的
?private functionitemrenderer_clickHandler(event:MouseEvent):void
?? {
????? if (!WidgetItem(data).open)
???????? {
?????????? moveEffect.end();
??????????? moveEffect.play();
???????? }
else{
dispatchEvent(newEvent(WIDGET_ITEM_CLICK, true));
}
? }
?
?
=======================Widget中图片按钮的打开与关闭功能====================
1)修改WidgetTemplateSkin.mxml:
??? <mx:Image id="icon"
????????????? x.minimized="10"x.open="-20" y="12" y.minimized="-2"width="40" height="40"
????????????? buttonMode="true"
????????? useHandCursor="true"
?????????????source="{hostComponent.widgetIcon}"
?????????????visible="{hostComponent.enableIcon}"
?????????????visible.closed="false">
??????? <mx:filters>
??????????? <mx:DropShadowFilterblurX="10" blurY="10"/>
??????? </mx:filters>
??? </mx:Image>
?
2)修改WidgetTemplate.as
??? protected functionicon_clickHandler(event:MouseEvent):void
??? {
??????? if (_baseWidget)
??????? {
?????? if (_baseWidget.getState()==WIDGET_OPENED)
??????? {
?????? minimize_clickHandler(event);
?????? return;
??????? }
?????? else if (_baseWidget.getState()==WIDGET_MINIMIZED)
??????? {
???????????_baseWidget.setState(WIDGET_OPENED);
??????? this.widgetFrame.toolTip ="";
??????? this.icon.toolTip = "";
}
??????? }
??? }
?