Pull request #4862: REPORT-53175【10.0.18】组件背景分离为标题/背景/边框

Merge in DESIGN/design from ~STARRYI/design:feature/10.0 to feature/10.0

* commit '56b32280f38684e44d1fb6a7345c5582799ec4b9':
  REPORT-53175【10.0.18】组件背景分离为标题/背景/边框
  REPORT-53175【10.0.18】组件背景分离为标题/背景/边框
  REPORT-53175【10.0.18】组件背景分离为标题/背景/边框
  CHART-19720  控件顺序反了

designer-base/src/main/java/com/fr/design/border/UIRoundedBorder.java

@@ -1,32 +1,33 @@
 package com.fr.design.border;
 
 import com.fr.base.GraphHelper;
+import com.fr.stable.GraphDrawHelper;
 
 import javax.swing.border.LineBorder;
-import java.awt.Color;
+import java.awt.*;
-import java.awt.Component;
-import java.awt.Graphics;
-import java.awt.Graphics2D;
-import java.awt.RenderingHints;
 import java.awt.geom.RoundRectangle2D;
 
 public class UIRoundedBorder extends LineBorder {
 
 	private static final long serialVersionUID = 1L;
 
+	private BasicStroke stroke4Thickness;
 	private int roundedCorner;
 	private int lineStyle;
 
 	public UIRoundedBorder(Color color) {
 		super(color);
+		this.stroke4Thickness = new BasicStroke(thickness, BasicStroke.CAP_BUTT, BasicStroke.JOIN_MITER);
 	}
 
 	public UIRoundedBorder(Color color, int thickness){
 		super(color, thickness);
+		this.stroke4Thickness = new BasicStroke(thickness, BasicStroke.CAP_BUTT, BasicStroke.JOIN_MITER);
 	}
 
 	public UIRoundedBorder(Color color, int thickness, int roundedCorners){
 		super(color, thickness, true);
+		this.stroke4Thickness = new BasicStroke(thickness, BasicStroke.CAP_BUTT, BasicStroke.JOIN_MITER);
 		this.roundedCorner = roundedCorners;
 	}
 
@@ -51,7 +52,19 @@ public class UIRoundedBorder extends LineBorder {
         Graphics2D g2d = (Graphics2D)g;
         g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
         g2d.setColor(lineColor);
-		GraphHelper.draw(g2d, new RoundRectangle2D.Double(x, y, width - 1.0D, height - 1.0D, roundedCorner, roundedCorner), lineStyle);
+
+        Shape shape = new RoundRectangle2D.Double(x, y, width - 1.0D, height - 1.0D, roundedCorner, roundedCorner);
+
+        if (stroke4Thickness != null) {
+			Stroke oldStroke = g2d.getStroke();
+			g2d.setStroke(stroke4Thickness);
+			g2d.draw(shape);
+
+			g2d.setStroke(oldStroke);
+		} else {
+			GraphHelper.draw(g2d, shape, lineStyle);
+		}
+
         g2d.setColor(oldColor);
         g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_OFF);
 	}

designer-form/src/main/java/com/fr/design/designer/beans/location/AccessDirection.java

@@ -195,8 +195,11 @@ public abstract class AccessDirection implements Direction {
 		if (type != formEditor.getCursor().getType()) {
 			// 设置当前形状
 			formEditor.setCursor(Cursor.getPredefinedCursor(type));
+
+			FormSelection selection = formEditor.getSelectionModel().getSelection();
+            boolean canLockAspectRatioOnlyByShift = !selection.isCreatorAspectRatioLockedInAbsLayout(formEditor) && selection.isCreatorInAbsLayout(formEditor);
             ServerPreferenceConfig config = ServerPreferenceConfig.getInstance();
-            if (!config.isHasShownLockedAspectRatioResizingToolTip()) {
+            if (canLockAspectRatioOnlyByShift && !config.isHasShownLockedAspectRatioResizingToolTip()) {
                 formEditor.setToolTipText(getTooltip());
                 config.setHasShownLockedAspectRatioResizingToolTip(true);
             }

designer-form/src/main/java/com/fr/design/designer/beans/models/StateModel.java

@@ -15,6 +15,7 @@ import com.fr.design.designer.creator.XLayoutContainer;
 import com.fr.design.designer.creator.XWAbsoluteBodyLayout;
 import com.fr.design.designer.creator.XWAbsoluteLayout;
 import com.fr.design.mainframe.FormDesigner;
+import com.fr.design.mainframe.FormSelection;
 import com.fr.design.mainframe.FormSelectionUtils;
 import com.fr.design.utils.ComponentUtils;
 
@@ -486,12 +487,14 @@ public class StateModel {
     public void dragging(MouseEvent e) {
         //进入dragging状态时备份组件大小和位置
         if (!dragging) {
-            this.aspectRatioLocked = this.selectionModel.getSelection().isCreatorAspectRatioLockedInAbsLayout(designer);
             selectedPositionBackup = selectionModel.getSelection().getRelativeBounds();
         }
         checkAddable(e);
         setDependLinePainter(e);
-        this.aspectRatioLocked = this.aspectRatioLocked || e.isShiftDown();
+
+        FormSelection selection = this.selectionModel.getSelection();
+        this.aspectRatioLocked = selection.isCreatorAspectRatioLockedInAbsLayout(designer)  ||
+                (this.selectionModel.getSelection().isCreatorInAbsLayout(designer) && e.isShiftDown());
         driection.drag(getMouseXY(e).x - currentX, getMouseXY(e).y - currentY, designer);
         this.dragging = true;
     }

designer-form/src/main/java/com/fr/design/designer/creator/XBorderStyleWidgetCreator.java

@@ -11,6 +11,7 @@ import com.fr.form.ui.Widget;
 import com.fr.form.ui.WidgetTitle;
 import com.fr.form.ui.WidgetValue;
 import com.fr.form.ui.container.WTitleLayout;
+import com.fr.general.Background;
 import com.fr.general.ComparatorUtils;
 import com.fr.general.act.BorderPacker;
 import com.fr.general.act.TitlePacker;
@@ -18,7 +19,11 @@ import com.fr.stable.Constants;
 import com.fr.stable.StringUtils;
 
 import javax.swing.*;
+import javax.swing.border.Border;
+import javax.swing.border.LineBorder;
 import java.awt.*;
+import java.awt.geom.Rectangle2D;
+import java.awt.geom.RoundRectangle2D;
 
 /**
  * Created with IntelliJ IDEA.
@@ -29,6 +34,7 @@ import java.awt.*;
 
 public class XBorderStyleWidgetCreator extends XWidgetCreator{
 	protected static final Dimension BORDER_PREFERRED_SIZE = new Dimension(250, 150);
+	protected Background background4Painting;	// 设计器预览界面中绘制组件背景图
 
     public XBorderStyleWidgetCreator(Widget widget, Dimension initSize) {
         super(widget, initSize);
@@ -39,7 +45,16 @@ public class XBorderStyleWidgetCreator extends XWidgetCreator{
 		}
     }
 
-    /**
+	public Background getBackground4Painting() {
+		return this.background4Painting;
+	}
+
+	public void setBackground4Painting(Background background4Painting) {
+		this.background4Painting = background4Painting;
+		this.repaint();
+	}
+
+	/**
 	 * 返回容器对应的widget
 	 * @return 同上
 	 */
@@ -58,22 +73,37 @@ public class XBorderStyleWidgetCreator extends XWidgetCreator{
 
 	protected void initStyle() {
     	BorderPacker style = toData().getBorderStyle();
-     	initBorderStyle();
+     	initBorderAndBackgroundStyle();
         if (ComparatorUtils.equals(style.getType(), LayoutBorderStyle.TITLE)) {
           	initTitleStyle(style);
         } else {
         	clearTitleWidget();
          }
+
+        // 编辑右侧栏组件样式面板后，重新调整组件/标题/边框的显示效果
+		reshuffleBorderAndBackgroundPaintingEffectIfTitleExists();
      }
 
-  // 边框默认值设为NONE,不然像scalelayout这种只用默认边框的会不显示边框
+    protected void initBorderAndBackgroundStyle() {
-    protected void initBorderStyle() {
     	BorderPacker style = toData().getBorderStyle();
-        if (style != null && style.getBorder() != Constants.LINE_NONE) {
+		LineBorder DEFAULT_LINE_BORDER = (LineBorder) DEFALUTBORDER;
-            this.setBorder(new UIRoundedBorder(style.getBorder(), style.getColor(), style.getBorderRadius()));
+
-        } else {
+		// 边框默认值设为NONE,不然像scalelayout这种只用默认边框的会不显示边框
-            this.setBorder(DEFALUTBORDER);
+		Border border = DEFAULT_LINE_BORDER;
+        if (style != null) {
+        	int radius = style.getBorderRadius();	// 不管有无边框线, 圆角裁剪总是生效
+        	if (style.getBorder() != Constants.LINE_NONE) {
+        		// 设置了边框线
+        		border = new UIRoundedBorder(style.getBorder(), style.getColor(), radius);
+			} else {
+        		// 为设置边框线
+				border = new UIRoundedBorder(DEFAULT_LINE_BORDER.getLineColor(), DEFAULT_LINE_BORDER.getThickness(), radius);
+			}
         }
+
+		this.setBorder(border);
+
+		this.setBackground4Painting(style != null ? style.getBackground() : null);
     }
     
     private void clearTitleWidget() {
@@ -143,6 +173,75 @@ public class XBorderStyleWidgetCreator extends XWidgetCreator{
     	return new WidgetValue(value);
     }
 
+    // 如果存在标题栏，则需要重新弄调整边框和背景的显示效果，使得边框和背景的视觉效果出现在包含组件和标题的整体区域上，
+	// 而不是组件和标题各自出现独立的边框和背景，同时如存在标题栏，则标题栏下方还应有底部边框，作为标题和内容的分界线
+    protected void reshuffleBorderAndBackgroundPaintingEffectIfTitleExists() {
+    	Container parent = this.getParent();
+    	if (parent instanceof XWTitleLayout) {
+			XWTitleLayout titleParent = (XWTitleLayout) parent;
+			if (parent.getComponentCount() > 1) {
+				XCreator titleCreator = titleParent.getTitleCreator();
+				XCreator bodyXCreator = titleParent.getBodyCreator();
+
+				Border border = bodyXCreator.getBorder();
+
+				titleParent.setBorder(border);								// 容器绘制完整边框
+				bodyXCreator.setBorder(BorderFactory.createEmptyBorder());	// body不绘制边框
+				titleCreator.setBorder(BorderFactory.createEmptyBorder());	// title绘制底部边框
+				if (border instanceof LineBorder) {
+					Color color = ((LineBorder) border).getLineColor();
+					int thickness = ((LineBorder) border).getThickness();
+					titleCreator.setBorder(new BottomLineBorder(color, thickness));
+				}
+
+				if (bodyXCreator instanceof XBorderStyleWidgetCreator) {
+					XBorderStyleWidgetCreator styledBodyXCreator = (XBorderStyleWidgetCreator) bodyXCreator;
+					Background background4Painting = styledBodyXCreator.getBackground4Painting();
+
+					styledBodyXCreator.setBackground4Painting(null);			// body不绘制背景
+					titleParent.setBackground4Painting(background4Painting);	// 容器绘制完整背景
+				}
+			}
+		}
+	}
+
+
+	// 根据当前组件边框裁剪内容，如果当前组件存在圆角，则应当按圆角裁剪内容
+	private void clipByRoundedBorder(Graphics2D g2d) {
+		Border currentBorder = getBorder();
+		if (currentBorder instanceof UIRoundedBorder) {
+			int thickness = ((UIRoundedBorder) currentBorder).getThickness();
+			int radius = ((UIRoundedBorder) currentBorder).getRoundedCorner();
+			int currentClipX = 0;
+			int currentClipY = 0;
+			int currentClipWidth = getWidth();
+			int currentClipHeight = getHeight();
+			int currentClipRadius = Math.max(radius - thickness, 0);	// 应沿着边框外围进行裁剪
+			g2d.clip(new RoundRectangle2D.Double(currentClipX, currentClipY, currentClipWidth, currentClipHeight, currentClipRadius, currentClipRadius));
+		}
+	}
+
+	// 设计器预览界面中绘制组件背景效果
+	private void paintBackground(Graphics2D g2d) {
+    	Background background4Painting = getBackground4Painting();
+		if (background4Painting != null) {
+			background4Painting.paint(g2d, new Rectangle2D.Double(0, 0, getWidth(), getHeight()));
+		}
+	}
+
+	@Override
+	protected void paintComponent(Graphics g) {
+		this.paintBackground((Graphics2D) g);
+		super.paintComponent(g);
+	}
+
+	@Override
+	public void paint(Graphics g) {
+    	this.clipByRoundedBorder((Graphics2D) g);
+		super.paint(g);
+    	paintBorder(g);
+	}
+
     @Override
     protected String getIconName() {
         return StringUtils.EMPTY;
@@ -169,8 +268,33 @@ public class XBorderStyleWidgetCreator extends XWidgetCreator{
 	 * data属性改变触发其他操作
 	 *
 	 */
-	public void firePropertyChange(){
+	public void firePropertyChange() {
 
 	}
 
+	// 适用于标题栏的底部边框
+	public static class BottomLineBorder extends LineBorder {
+
+		private BottomLineBorder(Color color, int thickness) {
+			super(color, thickness);
+		}
+
+		@Override
+		public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
+			Graphics2D g2d = (Graphics2D)g;
+
+			Color oldColor = g2d.getColor();
+			Stroke oldStroke = g2d.getStroke();
+
+			g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
+
+			g2d.setColor(getLineColor());
+			g2d.setStroke(new BasicStroke(getThickness()));
+			g2d.drawLine(0, height, width, height);
+
+			g2d.setStroke(oldStroke);
+			g2d.setColor(oldColor);
+			g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_OFF);
+		}
+	}
 }

designer-form/src/main/java/com/fr/design/designer/creator/XChartEditor.java

@@ -165,7 +165,7 @@ public class XChartEditor extends XBorderStyleWidgetCreator {
     @Override
     protected void initXCreatorProperties() {
         super.initXCreatorProperties();
-        initBorderStyle();
+        initBorderAndBackgroundStyle();
         BaseChartCollection collection = ((BaseChartEditor) data).getChartCollection();
         isRefreshing = true;
         ((MiddleChartComponent) designerEditor.getEditorTarget()).populate(collection);

designer-form/src/main/java/com/fr/design/designer/creator/XElementCase.java

@@ -57,7 +57,7 @@ public class XElementCase extends XBorderStyleWidgetCreator implements FormEleme
         super.initXCreatorProperties();
 
         // 报表块初始化时要加载对应的borderStyle
-        initBorderStyle();
+        initBorderAndBackgroundStyle();
     }
 
     /**

designer-form/src/main/java/com/fr/design/designer/creator/XLayoutContainer.java

@@ -118,7 +118,7 @@ public abstract class XLayoutContainer extends XBorderStyleWidgetCreator impleme
     @Override
     protected void initXCreatorProperties() {
         super.initXCreatorProperties();
-        initBorderStyle();
+        initBorderAndBackgroundStyle();
         this.initLayoutManager();
         this.convert();
     }

designer-form/src/main/java/com/fr/design/designer/creator/XWAbsoluteBodyLayout.java

@@ -106,7 +106,7 @@ public class XWAbsoluteBodyLayout extends XWAbsoluteLayout {
 
     @Override
     protected void initStyle() {
-        initBorderStyle();
+        initBorderAndBackgroundStyle();
     }
 
     /**

designer-form/src/main/java/com/fr/design/designer/creator/XWTitleLayout.java

@@ -10,10 +10,9 @@ import com.fr.design.fun.WidgetPropertyUIProvider;
 import com.fr.form.ui.Label;
 import com.fr.form.ui.Widget;
 import com.fr.form.ui.WidgetTitle;
+import com.fr.form.ui.container.WAbsoluteLayout.BoundsWidget;
 import com.fr.form.ui.container.WTitleLayout;
 import com.fr.general.ComparatorUtils;
-import com.fr.form.ui.container.WAbsoluteLayout.BoundsWidget;
-import com.fr.stable.StringUtils;
 
 import java.awt.*;
 import java.awt.event.ContainerEvent;
@@ -46,6 +45,17 @@ public class XWTitleLayout extends DedicateLayoutContainer {
 		super(widget, initSize);
 	}
 
+	@Override
+	protected void initXCreatorProperties() {
+		super.initXCreatorProperties();
+
+		// 初始化后（如打开旧模版)，需要重新调整组件/标题/边框的显示效果
+		XCreator xCreator = getBodyCreator();
+		if (xCreator instanceof XBorderStyleWidgetCreator) {
+			((XBorderStyleWidgetCreator) xCreator).reshuffleBorderAndBackgroundPaintingEffectIfTitleExists();
+		}
+	}
+
 	/**
 	 * 初始化容器对应的布局 由于是只装一个需要保持原样高度的控件，布局设为absolute
 	 */

designer-form/src/main/java/com/fr/design/designer/creator/cardlayout/XWCardLayout.java

@@ -400,7 +400,7 @@ public class XWCardLayout extends XLayoutContainer {
     protected void initStyle() {
         BorderPacker style = toData().getBorderStyle();
         initBorderTitleStyle(style);
-        initBorderStyle();
+        initBorderAndBackgroundStyle();
         clearOrShowTitleLayout(ComparatorUtils.equals(style.getType(), LayoutBorderStyle.TITLE));
     }
 

designer-form/src/main/java/com/fr/design/gui/xpane/BorderLineAndImagePane.java

@@ -5,6 +5,7 @@ import com.fr.base.Style;
 import com.fr.base.Utils;
 import com.fr.base.background.ImageBackground;
 import com.fr.base.background.ImageFileBackground;
+import com.fr.config.ServerPreferenceConfig;
 import com.fr.design.border.UIRoundedBorder;
 import com.fr.design.constants.UIConstants;
 import com.fr.design.designer.IntervalConstants;
@@ -20,7 +21,6 @@ import com.fr.design.gui.ibutton.UIButtonUI;
 import com.fr.design.gui.ibutton.UIColorButton;
 import com.fr.design.gui.icombobox.LineComboBox;
 import com.fr.design.gui.ilable.UILabel;
-import com.fr.design.gui.itooltip.UIToolTip;
 import com.fr.design.layout.FRGUIPaneFactory;
 import com.fr.design.layout.TableLayout;
 import com.fr.design.layout.TableLayoutHelper;
@@ -32,7 +32,10 @@ import com.fr.general.Background;
 import com.fr.general.IOUtils;
 import com.fr.stable.Constants;
 import com.fr.stable.GraphDrawHelper;
+import com.fr.stable.ProjectLibrary;
+import com.fr.stable.StableUtils;
 import com.fr.stable.StringUtils;
+import com.fr.stable.project.ProjectConstants;
 
 import javax.swing.*;
 import javax.swing.event.ChangeEvent;
@@ -46,6 +49,7 @@ import java.awt.event.MouseListener;
 import java.awt.event.MouseMotionListener;
 import java.awt.geom.RoundRectangle2D;
 import java.awt.image.BufferedImage;
+import java.io.File;
 import java.io.IOException;
 import java.net.URI;
 import java.net.URISyntaxException;
@@ -174,6 +178,20 @@ public class BorderLineAndImagePane extends JPanel implements UIObserver {
         }
     }
 
+    private void initImageFileChooserDirectory() {
+        ServerPreferenceConfig config = ServerPreferenceConfig.getInstance();
+        String lastUsedBorderImagesDirPath = config.getLastUsedBorderImagesDir();
+        File lastUsedBorderImagesDir = StringUtils.isNotEmpty(lastUsedBorderImagesDirPath) ? new File(lastUsedBorderImagesDirPath) : null;
+
+        File inbuiltBorderImagesDir = new File(StableUtils.pathJoin(ProjectLibrary.getInstance().getLibHome(), ProjectConstants.ASSETS_NAME, "border_images"));
+
+        if (lastUsedBorderImagesDir!= null && lastUsedBorderImagesDir.exists()) {
+            imageFileChooser.setCurrentDirectory(lastUsedBorderImagesDir);
+        } else if (inbuiltBorderImagesDir.exists()) {
+            imageFileChooser.setCurrentDirectory(inbuiltBorderImagesDir);
+        }
+    }
+
     protected void initNinePointTweakPaneIfNotExist() {
         if (tweakPane == null) {
             tweakPane = new NinePointImageTweakDialogPane();
@@ -210,8 +228,15 @@ public class BorderLineAndImagePane extends JPanel implements UIObserver {
             @Override
             public void actionPerformed(ActionEvent e) {
                 initImageFileChooserIfNotExist();
-
+                initImageFileChooserDirectory();
                 int returnVal = imageFileChooser.showOpenDialog(DesignerContext.getDesignerFrame());
+
+                if (returnVal == JFileChooser.APPROVE_OPTION) {
+                    ServerPreferenceConfig config = ServerPreferenceConfig.getInstance();
+                    File selectedDirectory = imageFileChooser.getSelectedFile().getParentFile();
+                    config.setLastUsedBorderImagesDir(selectedDirectory.getPath());
+                }
+
                 ImgChooseWrapper.getInstance(imagePreviewPane, imageFileChooser, DEFAULT_IMAGE_LAYOUT_STYLE, new ChangeListener() {
                     @Override
                     public void stateChanged(ChangeEvent e) {

designer-form/src/main/java/com/fr/design/mainframe/FormSelection.java

@@ -303,6 +303,16 @@ public class FormSelection {
         return false;
     }
 
+    public boolean isCreatorInAbsLayout(FormDesigner designer) {
+        for (XCreator creator : selection) {
+            LayoutAdapter layoutAdapter = AdapterBus.searchLayoutAdapter(designer, creator);
+            if (layoutAdapter instanceof FRAbsoluteLayoutAdapter) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     /**
      * @Description 重置报表块缩略图
      * @param: creator

designer-form/src/main/java/com/fr/design/widget/ui/designer/component/WidgetAbsoluteBoundPane.java

@@ -29,11 +29,12 @@ public class WidgetAbsoluteBoundPane extends WidgetBoundPane {
         y = new UIBoundSpinner(0, Integer.MAX_VALUE, 1, 0d);
         width = new UIBoundSpinner(0, Integer.MAX_VALUE, 1, 0d);
         height = new UIBoundSpinner(0, Integer.MAX_VALUE, 1, 0d);
-        ratioLockedButton = new AspectRatioLockedButton(width, height, creator);
+        ratioLockedButton = new AspectRatioLockedButton(width, height);
         x.setGlobalName(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Form_Coords_And_Size"));
         y.setGlobalName(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Form_Coords_And_Size"));
         width.setGlobalName(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Form_Coords_And_Size"));
         height.setGlobalName(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Form_Coords_And_Size"));
+        ratioLockedButton.setGlobalName(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Form_Coords_And_Size"));
         this.add(WidgetBoundsPaneFactory.createAbsoluteBoundsPane(x, y, width, height, ratioLockedButton, WidgetBoundsPaneFactory.NameAttribute.WIDGET));
     }
 

designer-form/src/main/java/com/fr/design/widget/ui/designer/component/WidgetBoundPane.java

@@ -11,8 +11,11 @@ import com.fr.design.designer.creator.cardlayout.XWCardLayout;
 import com.fr.design.designer.creator.cardlayout.XWCardTagLayout;
 import com.fr.design.dialog.BasicPane;
 import com.fr.design.dialog.FineJOptionPane;
+import com.fr.design.event.GlobalNameListener;
+import com.fr.design.event.GlobalNameObserver;
+import com.fr.design.event.UIObserver;
+import com.fr.design.event.UIObserverListener;
 import com.fr.design.file.HistoryTemplateListCache;
-import com.fr.design.gui.ibutton.UIButton;
 import com.fr.design.gui.ispinner.UISpinner;
 import com.fr.design.layout.FRGUIPaneFactory;
 import com.fr.design.mainframe.FormDesigner;
@@ -81,7 +84,8 @@ public class WidgetBoundPane extends BasicPane {
 
         JTemplate jTemplate = HistoryTemplateListCache.getInstance().getCurrentEditingTemplate();
         if (jTemplate.isJWorkBook() || !((JForm)jTemplate).isSelectRootPane()) {
-            ratioLockedButton = new AspectRatioLockedButton(width, height, creator);
+            ratioLockedButton = new AspectRatioLockedButton(width, height);
+            ratioLockedButton.setGlobalName(i18nText("Fine-Design_Form_Coords_And_Size"));
             ratioLockedButton.setLockEnabled(false);
         }
 
@@ -121,7 +125,7 @@ public class WidgetBoundPane extends BasicPane {
             limitHeight(wabs, h, bounds, rec);
         }
         if (ratioLockedButton != null) {
-            ratioLockedButton.setLocked(creator.toData().isAspectRatioLocked());
+            ratioLockedButton.update(creator);
         }
     }
 
@@ -191,21 +195,24 @@ public class WidgetBoundPane extends BasicPane {
 
     }
 
-    protected static class AspectRatioLockedButton extends UIButton {
+    protected static class AspectRatioLockedButton extends JButton implements UIObserver, GlobalNameObserver {
 
         private final Icon enabledLocked = IOUtils.readIcon("/com/fr/design/images/buttonicon/icon_lock_enabled.png");
         private final Icon disabledLocked = IOUtils.readIcon("/com/fr/design/images/buttonicon/icon_lock_disabled.png");
         private final Icon enabledUnLocked = IOUtils.readIcon("/com/fr/design/images/buttonicon/icon_unlock_enabled.png");
         private final Icon disabledUnLocked = IOUtils.readIcon("/com/fr/design/images/buttonicon/icon_unlock_disabled.png");
 
-        private UISpinner mWidthSpinner;
+        private UIObserverListener uiObserverListener;
-        private UISpinner mHeightSpinner;
+        private GlobalNameListener globalNameListener;
-        private XCreator mCreator;
+        private String globalName = null;
+
+        private final UISpinner mWidthSpinner;
+        private final UISpinner mHeightSpinner;
 
         protected double width4Backup = 0;
         protected double height4Backup = 0;
 
-        public AspectRatioLockedButton(UISpinner widthSpinner, UISpinner heightSpinner, XCreator creator) {
+        public AspectRatioLockedButton(UISpinner widthSpinner, UISpinner heightSpinner) {
             setUI(new BasicButtonUI());
             setBorderPainted(false);
             setBorder(null);
@@ -214,25 +221,25 @@ public class WidgetBoundPane extends BasicPane {
 
             this.mWidthSpinner = widthSpinner;
             this.mHeightSpinner = heightSpinner;
-            this.mCreator = creator;
 
             addActionListener(new ActionListener() {
                 @Override
                 public void actionPerformed(ActionEvent e) {
-                    setSelected(!isSelected());
+                    // 改变图标icon
-                }
+                    setLocked(!isLocked());
-            });
-            addChangeListener(new ChangeListener() {
-                @Override
-                public void stateChanged(ChangeEvent e) {
-                    mCreator.toData().setAspectRatioLocked(isLocked());
-
-                    setToolTipText(isLockEnabled() ? null : i18nText("Fine-Design_Form_Widget_Lock_Aspect_Ratio_Button_ToolTip"));
 
                     if (isLocked() && isLockEnabled()) {
                         width4Backup = mWidthSpinner.getValue();
                         height4Backup = mHeightSpinner.getValue();
                     }
+
+                    if (globalNameListener != null) {
+                        globalNameListener.setGlobalName(globalName);
+                    }
+
+                    if (uiObserverListener != null) {
+                        uiObserverListener.doChange();
+                    }
                 }
             });
 
@@ -285,15 +292,44 @@ public class WidgetBoundPane extends BasicPane {
 
         public void setLockEnabled(boolean enabled) {
             this.setEnabled(enabled);
+            setToolTipText(isLockEnabled() ? null : i18nText("Fine-Design_Form_Widget_Lock_Aspect_Ratio_Button_ToolTip"));
         }
 
         public void populate(XCreator creator) {
             Rectangle bounds = new Rectangle(creator.getBounds());
-            mCreator = creator;
             width4Backup = bounds.width;
             height4Backup = bounds.height;
             Widget widget = creator.toData();
             setLocked(widget.isAspectRatioLocked());
         }
+
+        public void update(XCreator creator) {
+            creator.toData().setAspectRatioLocked(this.isLocked());
+        }
+
+        @Override
+        public void registerChangeListener(UIObserverListener listener) {
+            uiObserverListener = listener;
+        }
+
+        @Override
+        public boolean shouldResponseChangeListener() {
+            return true;
+        }
+
+        @Override
+        public void registerNameListener(GlobalNameListener listener) {
+            this.globalNameListener = listener;
+        }
+
+        @Override
+        public boolean shouldResponseNameListener() {
+            return true;
+        }
+
+        @Override
+        public void setGlobalName(String name) {
+            this.globalName = name;
+        }
     }
 }