Merge pull request #1642 in BA/design from ~PLOUGH/design:feature/9.0 to feature/9.0

* commit '22f763a6c4d2dad55ed76de29d32f1de8e4c8b76': MOBILE-3963 9.0设计器新界面（移动端）=>代码规范 MOBILE-3963 9.0设计器新界面（移动端）=>国际化 MOBILE-3963 9.0设计器新界面（移动端）=>调整代码；增加提示，交互微调 MOBILE-3963 9.0设计器新界面（移动端）=>参数面板 MOBILE-3963 9.0设计器新界面（移动端）=>body 界面修改 MOBILE-3963 9.0设计器新界面（移动端）=>body 界面修改=>框架完成 MOBILE-3963 9.0设计器新界面（移动端）=>排序面板实现
7 years ago · fc0ef351f1
12 changed files with 822 additions and 98 deletions
--- a/designer_base/src/com/fr/design/gui/controlpane/UISimpleListControlPane.java
+++ b/designer_base/src/com/fr/design/gui/controlpane/UISimpleListControlPane.java
@ -0,0 +1,467 @@
+package com.fr.design.gui.controlpane;
+
+import com.fr.base.BaseUtils;
+import com.fr.design.actions.UpdateAction;
+import com.fr.design.constants.UIConstants;
+import com.fr.design.dialog.BasicPane;
+import com.fr.design.gui.icontainer.UIScrollPane;
+import com.fr.design.gui.ilable.UILabel;
+import com.fr.design.gui.ilist.ListModelElement;
+import com.fr.design.gui.ilist.UIList;
+import com.fr.design.gui.itoolbar.UIToolBarUI;
+import com.fr.design.gui.itoolbar.UIToolbar;
+import com.fr.design.layout.FRGUIPaneFactory;
+import com.fr.design.menu.ShortCut;
+import com.fr.design.menu.ToolBarDef;
+import com.fr.general.ComparatorUtils;
+import com.fr.general.Inter;
+import com.fr.stable.ArrayUtils;
+import com.fr.stable.Nameable;
+import com.fr.stable.StringUtils;
+import sun.swing.DefaultLookup;
+
+import javax.swing.*;
+import javax.swing.border.Border;
+import javax.swing.event.ListSelectionEvent;
+import javax.swing.event.ListSelectionListener;
+import java.awt.*;
+import java.awt.event.*;
+import java.util.Arrays;
+import java.util.Comparator;
+
+/**
+ * 简单列表面板
+ * Created by plough on 2018/2/1.
+ */
+public class UISimpleListControlPane extends BasicPane {
+    public static final String LIST_NAME = "UISimpleControl_List";
+
+    protected UIList nameList;
+    protected String selectedName;
+    private ShortCut4JControlPane[] shorts;
+    private ToolBarDef toolbarDef;
+    private UIToolbar toolBar;
+
+    public UISimpleListControlPane() {
+        initComponentPane();
+    }
+
+    public ShortCut4JControlPane[] getShorts() {
+        return shorts;
+    }
+
+    protected void initComponentPane() {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        this.add(getContentPane(), BorderLayout.CENTER);
+        this.checkButtonEnabled();
+    }
+
+    protected JPanel getContentPane() {
+        JPanel contentPane = FRGUIPaneFactory.createBorderLayout_S_Pane();
+
+        JPanel listPane = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        initListPane(listPane);
+        contentPane.add(listPane, BorderLayout.CENTER);
+
+        shorts = this.createShortcuts();
+        if (ArrayUtils.isEmpty(shorts)) {
+            return contentPane;
+        }
+
+        toolbarDef = new ToolBarDef();
+        for (ShortCut4JControlPane sj : shorts) {
+            toolbarDef.addShortCut(sj.getShortCut());
+        }
+        toolBar = ToolBarDef.createJToolBar();
+        toolBar.setUI(new UIToolBarUI(){
+            @Override
+            public void paint(Graphics g, JComponent c) {
+                Graphics2D g2 = (Graphics2D) g;
+                g2.setColor(Color.WHITE);
+                g2.fillRect(0, 0, c.getWidth(), c.getHeight());
+            }
+        });
+        toolbarDef.updateToolBar(toolBar);
+        // 封装一层，加边框
+        JPanel toolBarPane = new JPanel(new BorderLayout());
+        toolBarPane.add(toolBar, BorderLayout.CENTER);
+        toolBarPane.setBorder(BorderFactory.createMatteBorder(1, 1, 0, 1, UIConstants.RULER_LINE_COLOR));
+
+        listPane.add(toolBarPane, BorderLayout.NORTH);
+
+        return contentPane;
+    }
+
+    protected ShortCut4JControlPane[] createShortcuts() {
+        return new ShortCut4JControlPane[]{
+                moveUpItemShortCut(),
+                moveDownItemShortCut(),
+                sortItemShortCut(),
+        };
+    }
+
+    protected void initListPane(JPanel listPane) {
+        nameList = createJNameList();
+        nameList.setName(LIST_NAME);
+        nameList.setSelectionBackground(UIConstants.ATTRIBUTE_PRESS);
+        listPane.add(new UIScrollPane(nameList), BorderLayout.CENTER);
+
+
+        nameList.setSelectionMode(ListSelectionModel.MULTIPLE_INTERVAL_SELECTION);
+        nameList.addMouseListener(listMouseListener);
+        nameList.addListSelectionListener(new ListSelectionListener() {
+            public void valueChanged(ListSelectionEvent evt) {
+                // richie:避免多次update和populate大大降低效率
+                if (!evt.getValueIsAdjusting()) {
+                    UISimpleListControlPane.this.checkButtonEnabled();
+                }
+            }
+        });
+    }
+
+    public UIList createJNameList() {
+        UIList nameList = new UIList(new DefaultListModel()) {
+            @Override
+            public int locationToIndex(Point location) {
+                int index = super.locationToIndex(location);
+                if (index != -1 && !getCellBounds(index, index).contains(location)) {
+                    return -1;
+                }
+                else {
+                    return index;
+                }
+            }
+        };
+        nameList.setCellRenderer(new NameableListCellRenderer(this));
+        return nameList;
+    }
+
+    protected ShortCut4JControlPane moveUpItemShortCut() {
+        return new NormalEnableShortCut(new MoveUpItemAction());
+    }
+
+    protected ShortCut4JControlPane moveDownItemShortCut() {
+        return new NormalEnableShortCut(new MoveDownItemAction());
+    }
+
+    protected ShortCut4JControlPane sortItemShortCut() {
+        return new NormalEnableShortCut(new SortItemAction());
+    }
+
+    public Nameable[] update() {
+        java.util.List<Nameable> res = new java.util.ArrayList<Nameable>();
+        DefaultListModel listModel = (DefaultListModel) this.nameList.getModel();
+        for (int i = 0, len = listModel.getSize(); i < len; i++) {
+            res.add(((ListModelElement) listModel.getElementAt(i)).wrapper);
+        }
+
+        return res.toArray(new Nameable[res.size()]);
+    }
+
+    public void populate(Nameable[] nameableArray) {
+        DefaultListModel listModel = (DefaultListModel) this.nameList.getModel();
+        listModel.removeAllElements();
+        if (ArrayUtils.isEmpty(nameableArray)) {
+            return;
+        }
+
+        listModel.setSize(nameableArray.length);
+        for (int i = 0; i < nameableArray.length; i++) {
+            listModel.set(i, new ListModelElement(nameableArray[i]));
+        }
+        if (listModel.size() > 0 || this.nameList.getSelectedIndex() != 0) {
+            this.nameList.setSelectedIndex(0);
+        }
+        this.checkButtonEnabled();
+    }
+
+    /**
+     * 根据name,选中UINameEdList中的item
+     */
+    public void setSelectedName(String name) {
+        DefaultListModel listModel = (DefaultListModel) this.nameList.getModel();
+        for (int i = 0, len = listModel.getSize(); i < len; i++) {
+            Nameable item = ((ListModelElement) listModel.getElementAt(i)).wrapper;
+            if (ComparatorUtils.equals(name, item.getName())) {
+                this.nameList.setSelectedIndex(i);
+                break;
+            }
+        }
+    }
+
+    /**
+     * 获取选中的名字
+     */
+    public String getSelectedName() {
+        ListModelElement el = (ListModelElement) this.nameList.getSelectedValue();
+
+        return el == null ? null : el.wrapper.getName();
+    }
+
+    protected DefaultListModel getModel() {
+        return (DefaultListModel) this.nameList.getModel();
+    }
+
+    @Override
+    protected String title4PopupWindow() {
+        return null;
+    }
+
+    /*
+     * 上移Item
+     */
+    private class MoveUpItemAction extends UpdateAction {
+        public MoveUpItemAction() {
+            this.setName(Inter.getLocText("Utils-Move_Up"));
+            this.setMnemonic('U');
+            this.setSmallIcon(BaseUtils
+                    .readIcon("/com/fr/design/images/control/up.png"));
+        }
+
+        @Override
+        public void actionPerformed(ActionEvent evt) {
+            int selectedIndex = nameList.getSelectedIndex();
+            if (selectedIndex == -1) {
+                return;
+            }
+
+            // 上移
+            if (selectedIndex > 0) {
+                DefaultListModel listModel = (DefaultListModel) nameList.getModel();
+
+                Object prevObj = listModel.get(selectedIndex - 1);
+                Object currentObj = listModel.get(selectedIndex);
+                listModel.set(selectedIndex - 1, currentObj);
+                listModel.set(selectedIndex, prevObj);
+
+                nameList.setSelectedIndex(selectedIndex - 1);
+                nameList.ensureIndexIsVisible(selectedIndex - 1);
+            }
+        }
+    }
+
+    /*
+     * 下移Item
+     */
+    private class MoveDownItemAction extends UpdateAction {
+        public MoveDownItemAction() {
+            this.setName(Inter.getLocText("Utils-Move_Down"));
+            this.setMnemonic('D');
+            this.setSmallIcon(BaseUtils
+                    .readIcon("/com/fr/design/images/control/down.png"));
+        }
+
+        @Override
+        public void actionPerformed(ActionEvent evt) {
+            int selectedIndex = nameList.getSelectedIndex();
+            if (selectedIndex == -1) {
+                return;
+            }
+
+            if (selectedIndex < nameList.getModel().getSize() - 1) {
+                DefaultListModel listModel = (DefaultListModel) nameList.getModel();
+
+                Object nextObj = listModel.get(selectedIndex + 1);
+                Object currentObj = listModel.get(selectedIndex);
+                listModel.set(selectedIndex + 1, currentObj);
+                listModel.set(selectedIndex, nextObj);
+
+                nameList.setSelectedIndex(selectedIndex + 1);
+                nameList.ensureIndexIsVisible(selectedIndex + 1);
+            }
+        }
+    }
+
+    private class SortItemAction extends UpdateAction {
+        private boolean isAtoZ = false;
+
+        public SortItemAction() {
+            this.setName(Inter.getLocText("FR-Action_Sort"));
+            this.setMnemonic('S');
+            this.setSmallIcon(BaseUtils
+                    .readIcon("/com/fr/design/images/control/sortAsc.png"));
+        }
+
+        @Override
+        public void actionPerformed(ActionEvent evt) {
+            // p:选中的值.
+            Object selectedValue = nameList.getSelectedValue();
+
+            DefaultListModel listModel = (DefaultListModel) nameList.getModel();
+            if (listModel.getSize() <= 0) {
+                return;
+            }
+            Nameable[] nameableArray = new Nameable[listModel.getSize()];
+
+            for (int i = 0; i < listModel.getSize(); i++) {
+                nameableArray[i] = ((ListModelElement) listModel.getElementAt(i)).wrapper;
+            }
+
+            // p:排序.
+            if (isAtoZ) {  // 升序
+                Comparator<Nameable> nameableComparator = new Comparator<Nameable>() {
+                    @Override
+                    public int compare(Nameable o1, Nameable o2) {
+                        return ComparatorUtils.compare(o2.getName(), o1.getName());
+                    }
+                };
+                isAtoZ = !isAtoZ;
+                Arrays.sort(nameableArray, nameableComparator);
+            } else {  // 降序
+                Comparator<Nameable> nameableComparator = new Comparator<Nameable>() {
+                    @Override
+                    public int compare(Nameable o1, Nameable o2) {
+                        return ComparatorUtils.compare(o1.getName(), o2
+                                .getName());
+                    }
+                };
+                isAtoZ = !isAtoZ;
+                Arrays.sort(nameableArray, nameableComparator);
+            }
+
+            for (int i = 0; i < nameableArray.length; i++) {
+                listModel.set(i, new ListModelElement(nameableArray[i]));
+            }
+
+            // p:需要选中以前的那个值.
+            if (selectedValue != null) {
+                nameList.setSelectedValue(selectedValue, true);
+            }
+
+            checkButtonEnabled();
+            // p:需要repaint.
+            nameList.repaint();
+        }
+    }
+
+    /*
+     * UIList的鼠标事件
+     */
+    private MouseListener listMouseListener = new MouseAdapter() {
+        @Override
+        public void mouseClicked(MouseEvent e) {
+            JList list = (JList) e.getSource();
+            if (list.locationToIndex(e.getPoint()) == -1 && !e.isShiftDown()
+                    && !isMenuShortcutKeyDown(e)) {
+                list.clearSelection();
+            }
+        }
+
+        private boolean isMenuShortcutKeyDown(InputEvent event) {
+            return (event.getModifiers() & Toolkit.getDefaultToolkit()
+                    .getMenuShortcutKeyMask()) != 0;
+        }
+    };
+
+    /**
+     * 检查按钮可用状态 Check button enabled.
+     */
+    public void checkButtonEnabled() {
+        for (ShortCut4JControlPane sj : getShorts()) {
+            sj.checkEnable();
+        }
+    }
+
+    /**
+     * 设置选中项
+     *
+     * @param index 选中项的序列号
+     */
+    public void setSelectedIndex(int index) {
+        nameList.setSelectedIndex(index);
+    }
+
+
+    public class NormalEnableShortCut extends ShortCut4JControlPane {
+        public NormalEnableShortCut(ShortCut shortCut) {
+            this.shortCut = shortCut;
+        }
+
+        /**
+         * 检查是否可用
+         */
+        @Override
+        public void checkEnable() {
+            this.shortCut.setEnabled(getModel()
+                    .getSize() > 0
+                    && UISimpleListControlPane.this.nameList.getSelectedIndex() != -1);
+        }
+    }
+
+
+    private class NameableListCellRenderer extends
+            JPanel implements ListCellRenderer {
+
+        private UILabel label;
+        private UISimpleListControlPane listControlPane;
+        private Color initialLabelForeground;
+
+        public NameableListCellRenderer(UISimpleListControlPane listControlPane) {
+            super();
+            this.listControlPane = listControlPane;
+            initComponents();
+            setOpaque(true);
+            setBorder(getNoFocusBorder());
+            setName("List.cellRenderer");
+        }
+
+        private void initComponents() {
+            label = new UILabel();
+            label.setBorder(BorderFactory.createEmptyBorder(3, 10, 3, 0));
+            initialLabelForeground = label.getForeground();
+            this.setLayout(new BorderLayout());
+            this.add(label, BorderLayout.CENTER);
+        }
+
+        private Border getNoFocusBorder() {
+            return BorderFactory.createMatteBorder(0, 0, 1, 0, UIConstants.LIST_ITEM_SPLIT_LINE);
+        }
+
+        private void setText(String t) {
+            label.setText(t);
+        }
+
+        @Override
+        public Component getListCellRendererComponent(JList list, Object value,
+                                                      int index, boolean isSelected, boolean cellHasFocus) {
+            setComponentOrientation(list.getComponentOrientation());
+
+            Color bg = null;
+            Color fg = null;
+
+            JList.DropLocation dropLocation = list.getDropLocation();
+            if (dropLocation != null
+                    && !dropLocation.isInsert()
+                    && dropLocation.getIndex() == index) {
+
+                bg = DefaultLookup.getColor(this, ui, "List.dropCellBackground");
+                fg = DefaultLookup.getColor(this, ui, "List.dropCellForeground");
+
+                isSelected = true;
+            }
+
+            if (isSelected) {
+                setBackground(bg == null ? list.getSelectionBackground() : bg);
+                setForeground(fg == null ? list.getSelectionForeground() : fg);
+                label.setForeground(Color.WHITE);
+            }
+            else {
+                setBackground(list.getBackground());
+                setForeground(list.getForeground());
+                label.setForeground(initialLabelForeground);
+            }
+
+            setText((value == null) ? StringUtils.EMPTY : value.toString());
+
+            setEnabled(list.isEnabled());
+            setFont(list.getFont());
+
+            if (value instanceof ListModelElement) {
+                Nameable wrappee = ((ListModelElement) value).wrapper;
+                this.setText(wrappee.getName());
+            }
+
+            return this;
+        }
+    }
+}
--- a/designer_base/src/com/fr/design/gui/frpane/AbstractAttrNoScrollPane.java
+++ b/designer_base/src/com/fr/design/gui/frpane/AbstractAttrNoScrollPane.java
@ -5,6 +5,7 @@ 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.stable.StringUtils;

 import javax.swing.*;
 import java.awt.*;
@ -132,13 +133,19 @@ public abstract class AbstractAttrNoScrollPane extends BasicPane {
 	/**
 	 * 返回图标的路径
 	 */
-	public abstract String getIconPath();
+	public String getIconPath() {
+		// 默认为空，子类有需要再重写
+		return StringUtils.EMPTY;
+	}

    /**
     * 界面标题
     * @return 标题
     */
-	public abstract String title4PopupWindow();
+	public String title4PopupWindow() {
+		// 默认为空，子类有需要再重写
+		return StringUtils.EMPTY;
+	}

 	/**
 	 * 设置选中的ID, 用于双击展示界面.
--- a/designer_form/src/com/fr/design/designer/creator/XWParameterLayout.java
+++ b/designer_form/src/com/fr/design/designer/creator/XWParameterLayout.java
@ -6,7 +6,9 @@ package com.fr.design.designer.creator;
 import com.fr.design.ExtraDesignClassManager;
 import com.fr.design.designer.beans.LayoutAdapter;
 import com.fr.design.designer.beans.adapters.layout.FRParameterLayoutAdapter;
+import com.fr.design.designer.properties.mobile.ParaMobilePropertyUI;
 import com.fr.design.form.util.XCreatorConstants;
+import com.fr.design.fun.WidgetPropertyUIProvider;
 import com.fr.design.mainframe.widget.editors.BackgroundEditor;
 import com.fr.design.mainframe.widget.editors.BooleanEditor;
 import com.fr.design.mainframe.widget.editors.WidgetDisplayPosition;
@ -214,6 +216,11 @@ public class XWParameterLayout extends XWAbsoluteLayout {
    public void updateBoundsWidget() {
    }

+    @Override
+    public WidgetPropertyUIProvider[] getWidgetPropertyUIProviders() {
+        return new WidgetPropertyUIProvider[]{ new ParaMobilePropertyUI(this)};
+    }
+
    @Override
    protected String getIconName() {
        return "layout_absolute.png";
--- a/designer_form/src/com/fr/design/designer/properties/mobile/BodyMobilePropertyUI.java
+++ b/designer_form/src/com/fr/design/designer/properties/mobile/BodyMobilePropertyUI.java
@ -6,6 +6,7 @@ import com.fr.design.designer.creator.XWFitLayout;
 import com.fr.design.dialog.BasicPane;
 import com.fr.design.fun.impl.AbstractWidgetPropertyUIProvider;
 import com.fr.design.gui.itable.AbstractPropertyTable;
+import com.fr.design.widget.ui.designer.mobile.BodyMobileDefinePane;
 import com.fr.general.Inter;

 /**
@ -25,12 +26,12 @@ public class BodyMobilePropertyUI extends AbstractWidgetPropertyUIProvider {

    @Override
    public AbstractPropertyTable createWidgetAttrTable() {
-        return new BodyAppRelayoutTable(xCreator);
+        return null;
    }

    @Override
    public BasicPane createWidgetAttrPane() {
-        return null;
+        return new BodyMobileDefinePane(xCreator);
    }

    @Override
--- a/designer_form/src/com/fr/design/designer/properties/mobile/ParaMobilePropertyUI.java
+++ b/designer_form/src/com/fr/design/designer/properties/mobile/ParaMobilePropertyUI.java
@ -0,0 +1,39 @@
+package com.fr.design.designer.properties.mobile;
+
+import com.fr.design.designer.creator.XCreator;
+import com.fr.design.designer.creator.XWAbsoluteBodyLayout;
+import com.fr.design.designer.creator.XWFitLayout;
+import com.fr.design.designer.creator.XWParameterLayout;
+import com.fr.design.dialog.BasicPane;
+import com.fr.design.fun.impl.AbstractWidgetPropertyUIProvider;
+import com.fr.design.gui.itable.AbstractPropertyTable;
+import com.fr.design.widget.ui.designer.mobile.BodyMobileDefinePane;
+import com.fr.design.widget.ui.designer.mobile.ParaMobileDefinePane;
+import com.fr.general.Inter;
+
+/**
+ * Created by Administrator on 2016/5/16/0016.
+ */
+public class ParaMobilePropertyUI extends AbstractWidgetPropertyUIProvider {
+
+    private XCreator xCreator;
+
+    public ParaMobilePropertyUI(XWParameterLayout xwParameterLayout) {
+        this.xCreator = xwParameterLayout;
+    }
+
+    @Override
+    public AbstractPropertyTable createWidgetAttrTable() {
+        return null;
+    }
+
+    @Override
+    public BasicPane createWidgetAttrPane() {
+        return new ParaMobileDefinePane(xCreator);
+    }
+
+    @Override
+    public String tableTitle() {
+        return Inter.getLocText("FR-Designer_Mobile-Attr");
+    }
+}
--- a/designer_form/src/com/fr/design/mainframe/MobileWidgetListPane.java
+++ b/designer_form/src/com/fr/design/mainframe/MobileWidgetListPane.java
@ -0,0 +1,71 @@
+package com.fr.design.mainframe;
+
+import com.fr.design.designer.creator.XCreator;
+import com.fr.design.gui.controlpane.UISimpleListControlPane;
+import com.fr.form.ui.Widget;
+import com.fr.form.ui.container.WSortLayout;
+import com.fr.general.NameObject;
+import com.fr.stable.ArrayUtils;
+import com.fr.stable.Nameable;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * Created by plough on 2018/1/31.
+ */
+public class MobileWidgetListPane extends UISimpleListControlPane {
+    public static final String LIST_NAME = "Widget_List";
+
+    private FormDesigner designer;
+    private WSortLayout wSortLayout;
+    private String[] widgetNameList;
+
+    public MobileWidgetListPane(FormDesigner designer, WSortLayout wSortLayout) {
+        super();
+        this.designer = designer;
+        this.wSortLayout = wSortLayout;
+        widgetNameList = getData();
+
+        List<NameObject> nameObjectList = new ArrayList<NameObject>();
+        for (String name : widgetNameList) {
+            nameObjectList.add(new NameObject(name, null));
+        }
+        populate(nameObjectList.toArray(new NameObject[nameObjectList.size()]));
+    }
+
+    /**
+     * 保存移动端控件列表顺序
+     */
+    public void updateToDesigner() {
+        Nameable[] nameableList = update();
+        List<String> newMobileWidgetList = new ArrayList<>();
+        for (Nameable nameable : nameableList) {
+            newMobileWidgetList.add(nameable.getName());
+        }
+        wSortLayout.updateSortedMobileWidgetList(newMobileWidgetList);
+    }
+
+    /**
+     * 获取选中控件的控件列表
+     *
+     * @return List<String> widgetNameList
+     */
+    private String[] getData() {
+        //选择的控件
+        XCreator selectedCreator = designer.getSelectionModel().getSelection().getSelectedCreator();
+        Widget selectedModel = selectedCreator != null ? selectedCreator.toData() : null;
+
+        if (selectedModel == null || !selectedModel.acceptType(WSortLayout.class)) {
+            return ArrayUtils.EMPTY_STRING_ARRAY;
+        }
+
+        // 选择的控件有两种类型，一种是WLayout，代表容器，一种是Widget，代表控件
+        java.util.List<String> mobileWidgetList = ((WSortLayout) selectedModel).getOrderedMobileWidgetList();
+        String[] widgetNames = new String[mobileWidgetList.size()];
+        for (int i = 0; i < mobileWidgetList.size(); i++) {
+            widgetNames[i] = mobileWidgetList.get(i);
+        }
+        return widgetNames;
+    }
+}
--- a/designer_form/src/com/fr/design/mainframe/WidgetPropertyPane.java
+++ b/designer_form/src/com/fr/design/mainframe/WidgetPropertyPane.java
@ -7,21 +7,18 @@ import com.fr.design.designer.beans.events.DesignerEditListener;
 import com.fr.design.designer.beans.events.DesignerEvent;
 import com.fr.design.designer.creator.*;
 import com.fr.design.designer.properties.EventPropertyTable;
-import com.fr.design.dialog.BasicPane;
 import com.fr.design.fun.WidgetPropertyUIProvider;
 import com.fr.design.gui.ibutton.UIHeadGroup;
 import com.fr.design.gui.icontainer.UIScrollPane;
+import com.fr.design.gui.ilable.UILabel;
 import com.fr.design.gui.itable.AbstractPropertyTable;
 import com.fr.design.layout.FRGUIPaneFactory;
 import com.fr.design.mainframe.widget.ui.FormWidgetCardPane;
 import com.fr.design.widget.ui.designer.mobile.MobileWidgetDefinePane;
-import com.fr.form.ui.Widget;
 import com.fr.general.Inter;
 import com.fr.stable.ArrayUtils;

 import javax.swing.*;
-import javax.swing.border.LineBorder;
-import javax.swing.table.JTableHeader;
 import java.awt.*;
 import java.util.ArrayList;
 import java.util.List;
@ -33,8 +30,6 @@ import java.util.Set;
 */
 public class WidgetPropertyPane  extends FormDockView implements BaseWidgetPropertyPane {

-    private static final String PARA = "para";
-    private static final String BODY = "body";
    private static final int PADDING = 10;
    private static final int PADDING_M = 12;
    private FormWidgetCardPane formWidgetCardPane; // 控件的属性表
@ -43,14 +38,7 @@ public class WidgetPropertyPane  extends FormDockView implements BaseWidgetPrope
    private List<MobileWidgetDefinePane> mobileExtraPropertyPanes; // 保存9.0设计器下移动端拓展的属性tab，舍弃JTable
    private FormDesigner designer; // 当前designer
    private UIScrollPane psp; // 用来装载属性表table的容器
-    private UIScrollPane esp; //用来装载事件table的容器
    private JPanel wsp; // 装载移动端tab的容器，包括移动端属性表和控件拓展的移动端属性表
-    private MobileParaWidgetTable mobileParaWidgetTable; // 参数面板的移动端属性tab（和body的移动端属性tab区别是没有标签名column）
-    private MobileWidgetTable mobileWidgetTable; // body的移动端属性tab
-    private UIScrollPane downPanel; // 这个滚动容器是用于装载centerPane的
-    private JPanel centerPane; // 此centerPane采用的是cardLayout布局，装载着mobileWidgetTable和mobileBodyWidgetTable
-    private CardLayout cardLayout; // 卡片布局，选中参数面板时显示mobileWidgetTable，选中body时显示mobileBodyWidgetTable
-    private JTableHeader header;//把表头单独get出来作为一个组件
    private UIHeadGroup tabsHeaderIconPane;
    private XComponent lastAffectedCreator;

@ -159,33 +147,10 @@ public class WidgetPropertyPane  extends FormDockView implements BaseWidgetPrope
        //加上表头后，这里不再使用borderLayout布局，而采用BoxLayout布局
        wsp = FRGUIPaneFactory.createY_AXISBoxInnerContainer_S_Pane();
        wsp.setBorder(null);
-        mobileParaWidgetTable = new MobileParaWidgetTable(designer);
-        mobileWidgetTable = new MobileWidgetTable(designer);
        designer.addDesignerEditListener(new MobileWidgetDesignerAdapter());
-        centerPane = FRGUIPaneFactory.createCardLayout_S_Pane();
-        cardLayout = (CardLayout) centerPane.getLayout();
-        centerPane.add(mobileParaWidgetTable, PARA);
-        // 采用卡片布局的容器必须指定卡片名字，如果没有卡片名字
-        // 就会出现：Exception in thread "main" java.lang.IllegalArgumentException:
-        // cannot add to layout: constraint must be a string
-        // 第二个参数代表卡片的名字。后来show方法调用时通过名字找到要显示的卡片
-        centerPane.add(mobileWidgetTable, BODY); //这两句代码，是把JTable放到一个JPanel中去了，表头不会显示，
-        //只有放到JScrollPanel中去表头才能正常显示，这就是MobileWidgetTable中定义了表头却没有显示的原因！
-        //解决方案：MobileWidgetTable实在无法直接放到JScrollPanel中去的时候，应该把表头get出来单独作为一个组件显示
-
-        if (hasSelectParaPane(designer)) {
-            cardLayout.show(centerPane, PARA);
-            header = mobileParaWidgetTable.getTableHeader();
-        } else {
-            cardLayout.show(centerPane, BODY);
-            header = mobileWidgetTable.getTableHeader();
-        }
-        downPanel = new UIScrollPane(centerPane);
-        downPanel.setBorder(new LineBorder(Color.GRAY));

        //获取拓展移动端属性tab
        WidgetPropertyUIProvider[] widgetAttrProviders = getExtraPropertyUIProviders();
-
        addWidgetAttr(widgetAttrProviders);
    }

@ -220,9 +185,8 @@ public class WidgetPropertyPane  extends FormDockView implements BaseWidgetPrope
     * @param widgetAttrProviders 拓展的tab
     */
    private void addWidgetAttr(WidgetPropertyUIProvider[] widgetAttrProviders) {
-        if (widgetAttrProviders.length == 0) { // 判断有没有拓展的tab，没有就使用原来的
-            wsp.add(header);
-            wsp.add(downPanel);
+        if (widgetAttrProviders.length == 0) { // 判断有没有拓展的tab，提示"无可用配置项"
+            wsp.add(getUnavailablePane());
        } else {
            for (WidgetPropertyUIProvider widgetAttrProvider : widgetAttrProviders) {
                MobileWidgetDefinePane extraPane = (MobileWidgetDefinePane) widgetAttrProvider.createWidgetAttrPane();
@ -236,29 +200,20 @@ public class WidgetPropertyPane  extends FormDockView implements BaseWidgetPrope
                    widgetPropertyTables.add(propertyTable);
                    designer.addDesignerEditListener(new WidgetPropertyDesignerAdapter(formWidgetCardPane));

-                    UIScrollPane uiScrollPane = new UIScrollPane(getExtraBodyTable(propertyTable));
+                    UIScrollPane uiScrollPane = new UIScrollPane(propertyTable);
                    wsp.add(uiScrollPane);
                }
            }
        }
    }

-    /**
-     * 如果是body的拓展属性表，那么要额外加上一张控件顺序表
-     *
-     * @return
-     */
-    private Component getExtraBodyTable(AbstractPropertyTable abstractPropertyTable) {
-        Widget selection = designer.getSelectionModel().getSelection().getSelectedCreator().toData();
-        if ("body".equals(selection.getWidgetName())) {
-            JPanel jPanel = FRGUIPaneFactory.createY_AXISBoxInnerContainer_S_Pane();
-            jPanel.add(abstractPropertyTable);
-            MobileWidgetTable mobileWidgetTable = new MobileWidgetTable(designer);
-            jPanel.add(mobileWidgetTable.getTableHeader());
-            jPanel.add(mobileWidgetTable);
-            return jPanel;
-        }
-        return abstractPropertyTable;
+    // "无可用配置项"面板
+    private JPanel getUnavailablePane() {
+        JPanel panel = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        UILabel label = new UILabel(Inter.getLocText("FR-Designer_No_Settings_Available"));
+        label.setHorizontalAlignment(SwingConstants.CENTER);
+        panel.add(label);
+        return panel;
    }

    private void initTabPane() {
--- a/designer_form/src/com/fr/design/widget/ui/designer/mobile/BodyMobileDefinePane.java
+++ b/designer_form/src/com/fr/design/widget/ui/designer/mobile/BodyMobileDefinePane.java
@ -0,0 +1,123 @@
+package com.fr.design.widget.ui.designer.mobile;
+
+import com.fr.design.designer.beans.events.DesignerEvent;
+import com.fr.design.designer.creator.XCreator;
+import com.fr.design.foldablepane.UIExpandablePane;
+import com.fr.design.gui.frpane.AttributeChangeListener;
+import com.fr.design.gui.icheckbox.UICheckBox;
+import com.fr.design.layout.FRGUIPaneFactory;
+import com.fr.design.mainframe.FormDesigner;
+import com.fr.design.mainframe.MobileWidgetListPane;
+import com.fr.design.mainframe.WidgetPropertyPane;
+import com.fr.form.ui.container.WSortLayout;
+import com.fr.general.Inter;
+
+import javax.swing.*;
+import java.awt.*;
+import java.lang.reflect.Method;
+
+/**
+ * Created by plough on 2018/2/1.
+ */
+public class BodyMobileDefinePane extends MobileWidgetDefinePane {
+    private XCreator bodyCreator;
+    private FormDesigner designer;
+    private AttributeChangeListener changeListener;
+    private UICheckBox appRelayoutCheck;
+    private MobileWidgetListPane mobileWidgetListPane;
+
+    public BodyMobileDefinePane(XCreator xCreator) {
+        this.bodyCreator = xCreator;
+    }
+
+    @Override
+    public void initPropertyGroups(Object source) {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        this.designer = WidgetPropertyPane.getInstance().getEditingFormDesigner();
+        this.add(getMobilePropertyPane(), BorderLayout.NORTH);
+        this.add(getMobileWidgetListPane(), BorderLayout.CENTER);
+        this.repaint();
+    }
+
+    // 手机属性
+    private UIExpandablePane getMobilePropertyPane() {
+        JPanel panel = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        appRelayoutCheck = new UICheckBox(Inter.getLocText("FR-Designer-App_ReLayout"), true);
+        appRelayoutCheck.setBorder(BorderFactory.createEmptyBorder(0, 0, 10, 0));
+        panel.setBorder(BorderFactory.createEmptyBorder(10, 0, 0, 0));
+        panel.add(appRelayoutCheck);
+
+        final JPanel panelWrapper = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        panelWrapper.add(panel, BorderLayout.NORTH);
+
+        return new UIExpandablePane(Inter.getLocText("FR-Designer_Properties_Mobile"), 280, 20, panelWrapper);
+    }
+
+    // 控件顺序
+    private UIExpandablePane getMobileWidgetListPane() {
+        mobileWidgetListPane = new MobileWidgetListPane(designer, (WSortLayout) bodyCreator.toData());
+        mobileWidgetListPane.setBorder(BorderFactory.createEmptyBorder(10, 0, 5, 0));
+        JPanel panelWrapper = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        panelWrapper.add(mobileWidgetListPane, BorderLayout.CENTER);
+
+        return new UIExpandablePane(Inter.getLocText("FR-Designer_WidgetOrder"), 280, 20, panelWrapper);
+    }
+
+    private void bindListeners2Widgets() {
+        reInitAllListeners();
+        this.changeListener = new AttributeChangeListener() {
+            @Override
+            public void attributeChange() {
+                update();
+            }
+        };
+    }
+
+    /**
+     * 后台初始化所有事件.
+     */
+    private void reInitAllListeners() {
+        initListener(this);
+    }
+
+    // body是否开启手机重布局
+    private boolean isAppRelayout() {
+        boolean result = false;
+        try {
+            Method m = bodyCreator.toData().getClass().getMethod("isAppRelayout");
+            result = (boolean)m.invoke(bodyCreator.toData());
+        } catch (Exception e) {
+            // do nothing
+        }
+        return result;
+    }
+
+    private void setAppRelayout(boolean appRelayoutSeleted) {
+        if (appRelayoutSeleted == isAppRelayout()) {
+            return;
+        }
+        try {
+            Method m = bodyCreator.toData().getClass().getMethod("setAppRelayout", boolean.class);
+            m.invoke(bodyCreator.toData(), appRelayoutSeleted);
+        } catch (Exception e) {
+            // do nothing
+        }
+    }
+
+    @Override
+    public void populate(FormDesigner designer) {
+        this.designer = designer;
+        appRelayoutCheck.setSelected(isAppRelayout());
+
+        // 数据 populate 完成后，再设置监听
+        this.bindListeners2Widgets();
+        this.addAttributeChangeListener(changeListener);
+    }
+
+    @Override
+    public void update() {
+        setAppRelayout(appRelayoutCheck.isSelected());
+        mobileWidgetListPane.updateToDesigner();
+        designer.getEditListenerTable().fireCreatorModified(DesignerEvent.CREATOR_EDITED);
+    }
+}
--- a/designer_form/src/com/fr/design/widget/ui/designer/mobile/ChartEditorDefinePane.java
+++ b/designer_form/src/com/fr/design/widget/ui/designer/mobile/ChartEditorDefinePane.java
@ -49,25 +49,6 @@ public class ChartEditorDefinePane extends MobileWidgetDefinePane{
        this.xCreator = xCreator;
    }

-    @Override
-    protected void initContentPane() {}
-
-    @Override
-    protected JPanel createContentPane() {
-        return new JPanel();
-    }
-
-    @Override
-    public String getIconPath() {
-        return StringUtils.EMPTY;
-    }
-
-    @Override
-    public String title4PopupWindow() {
-        return StringUtils.EMPTY;
-    }
-
-
    @Override
    public void initPropertyGroups(Object source) {
        this.setLayout(FRGUIPaneFactory.createBorderLayout());
--- a/designer_form/src/com/fr/design/widget/ui/designer/mobile/ElementCaseDefinePane.java
+++ b/designer_form/src/com/fr/design/widget/ui/designer/mobile/ElementCaseDefinePane.java
@ -48,25 +48,6 @@ public class ElementCaseDefinePane extends MobileWidgetDefinePane{
        this.xCreator = xCreator;
    }

-    @Override
-    protected void initContentPane() {}
-
-    @Override
-    protected JPanel createContentPane() {
-        return null;
-    }
-
-    @Override
-    public String getIconPath() {
-        return "";
-    }
-
-    @Override
-    public String title4PopupWindow() {
-        return "ElementCase";
-    }
-
-
    @Override
    public void initPropertyGroups(Object source) {
        this.setLayout(FRGUIPaneFactory.createBorderLayout());
--- a/designer_form/src/com/fr/design/widget/ui/designer/mobile/MobileWidgetDefinePane.java
+++ b/designer_form/src/com/fr/design/widget/ui/designer/mobile/MobileWidgetDefinePane.java
@ -3,6 +3,8 @@ package com.fr.design.widget.ui.designer.mobile;
 import com.fr.design.gui.frpane.AbstractAttrNoScrollPane;
 import com.fr.design.mainframe.FormDesigner;

+import javax.swing.*;
+
 /**
 * 所有移动端需要拓展的属性面板均继承此类
 *
@ -23,4 +25,14 @@ public abstract class MobileWidgetDefinePane extends AbstractAttrNoScrollPane{
     * 从属性面板把数据传到后台
     */
    public abstract void update();
+
+    // 暂不需要此方法
+    @Override
+    protected void initContentPane() {}
+
+    // 暂不需要此方法
+    @Override
+    protected JPanel createContentPane() {
+        return new JPanel();
+    }
 }
--- a/designer_form/src/com/fr/design/widget/ui/designer/mobile/ParaMobileDefinePane.java
+++ b/designer_form/src/com/fr/design/widget/ui/designer/mobile/ParaMobileDefinePane.java
@ -0,0 +1,80 @@
+package com.fr.design.widget.ui.designer.mobile;
+
+import com.fr.design.designer.beans.events.DesignerEvent;
+import com.fr.design.designer.creator.XCreator;
+import com.fr.design.foldablepane.UIExpandablePane;
+import com.fr.design.gui.frpane.AttributeChangeListener;
+import com.fr.design.layout.FRGUIPaneFactory;
+import com.fr.design.mainframe.FormDesigner;
+import com.fr.design.mainframe.MobileWidgetListPane;
+import com.fr.design.mainframe.WidgetPropertyPane;
+import com.fr.form.ui.container.WSortLayout;
+import com.fr.general.Inter;
+
+import javax.swing.*;
+import java.awt.*;
+
+/**
+ * Created by plough on 2018/2/5.
+ */
+public class ParaMobileDefinePane extends MobileWidgetDefinePane {
+    private XCreator paraCreator;
+    private FormDesigner designer;
+    private AttributeChangeListener changeListener;
+    private MobileWidgetListPane mobileWidgetListPane;
+
+    public ParaMobileDefinePane(XCreator xCreator) {
+        this.paraCreator = xCreator;
+    }
+
+    @Override
+    public void initPropertyGroups(Object source) {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        this.designer = WidgetPropertyPane.getInstance().getEditingFormDesigner();
+        this.add(getMobileWidgetListPane(), BorderLayout.CENTER);
+        this.repaint();
+    }
+
+    // 控件顺序
+    private UIExpandablePane getMobileWidgetListPane() {
+        mobileWidgetListPane = new MobileWidgetListPane(designer, (WSortLayout) paraCreator.toData());
+        mobileWidgetListPane.setBorder(BorderFactory.createEmptyBorder(10, 0, 5, 0));
+        JPanel panelWrapper = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        panelWrapper.add(mobileWidgetListPane, BorderLayout.CENTER);
+
+        return new UIExpandablePane(Inter.getLocText("FR-Designer_WidgetOrder"), 280, 20, panelWrapper);
+    }
+
+    private void bindListeners2Widgets() {
+        reInitAllListeners();
+        this.changeListener = new AttributeChangeListener() {
+            @Override
+            public void attributeChange() {
+                update();
+            }
+        };
+    }
+
+    /**
+     * 后台初始化所有事件.
+     */
+    private void reInitAllListeners() {
+        initListener(this);
+    }
+
+
+    @Override
+    public void populate(FormDesigner designer) {
+        this.designer = designer;
+
+        // 设置监听
+        this.bindListeners2Widgets();
+        this.addAttributeChangeListener(changeListener);
+    }
+
+    @Override
+    public void update() {
+        mobileWidgetListPane.updateToDesigner();
+        designer.getEditListenerTable().fireCreatorModified(DesignerEvent.CREATOR_EDITED);
+    }
+}