MOBILE-21673 & MOBILE-21669 移动端控件插件化接口设计器支持

5 years ago · 2372920230
18 changed files with 608 additions and 8 deletions
--- a/designer-base/src/main/java/com/fr/design/ExtraDesignClassManager.java
+++ b/designer-base/src/main/java/com/fr/design/ExtraDesignClassManager.java
@ -6,18 +6,14 @@ package com.fr.design;

 import com.fr.base.BaseUtils;
 import com.fr.design.data.datapane.TableDataNameObjectCreator;
-import com.fr.design.fun.CellWidgetOptionProvider;
-import com.fr.design.fun.FormWidgetOptionProvider;
-import com.fr.design.fun.ParameterWidgetOptionProvider;
-import com.fr.design.fun.ServerTableDataDefineProvider;
-import com.fr.design.fun.TableDataDefineProvider;
-import com.fr.design.fun.ToolbarItemProvider;
+import com.fr.design.fun.*;
 import com.fr.design.gui.core.WidgetOption;
 import com.fr.design.gui.core.WidgetOptionFactory;
 import com.fr.design.menu.ShortCut;
 import com.fr.design.widget.Appearance;
 import com.fr.design.widget.mobile.WidgetMobilePane;
 import com.fr.form.ui.Widget;
+import com.fr.general.ComparatorUtils;
 import com.fr.general.IOUtils;
 import com.fr.plugin.AbstractExtraClassManager;
 import com.fr.plugin.injectable.PluginModule;
@ -207,6 +203,20 @@ public class ExtraDesignClassManager extends AbstractExtraClassManager implement
        return map;
    }

+    public MobileWidgetStyleProvider[] getMobileStyleOfWidget(String xType) {
+        Set<MobileWidgetStyleProvider> set = getArray(MobileWidgetStyleProvider.XML_TAG);
+        if (set.isEmpty()) {
+            return new MobileWidgetStyleProvider[0];
+        }
+        List<MobileWidgetStyleProvider> providers = new ArrayList<>();
+        for (MobileWidgetStyleProvider provider: set) {
+            if(ComparatorUtils.equalsIgnoreCase(provider.xTypeForWidget(), xType)) {
+                providers.add(provider);
+            }
+        }
+        return providers.toArray(new MobileWidgetStyleProvider[providers.size()]);
+    }
+
    @Override
    protected boolean demountSpecific(PluginSingleInjection injection) {

--- a/designer-base/src/main/java/com/fr/design/fun/MobileWidgetStyleProvider.java
+++ b/designer-base/src/main/java/com/fr/design/fun/MobileWidgetStyleProvider.java
@ -0,0 +1,24 @@
+package com.fr.design.fun;
+
+import com.fr.design.mainframe.mobile.ui.MobileStyleCustomDefinePane;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.stable.fun.mark.Mutable;
+
+/**
+ * 移动端组件样式扩展接口
+ */
+public interface MobileWidgetStyleProvider extends Mutable {
+
+    String XML_TAG = "MobileWidgetStyleProvider";
+
+    int CURRENT_LEVEL = 1;
+
+    Class<? extends MobileStyle> classForMobileStyle();
+
+    Class<? extends MobileStyleCustomDefinePane> classForWidgetAppearance();
+
+    String xTypeForWidget();
+
+    String displayName();
+
+}
--- a/designer-base/src/main/java/com/fr/design/fun/impl/AbstractMobileWidgetStyleProvider.java
+++ b/designer-base/src/main/java/com/fr/design/fun/impl/AbstractMobileWidgetStyleProvider.java
@ -0,0 +1,20 @@
+package com.fr.design.fun.impl;
+
+import com.fr.design.fun.MobileWidgetStyleProvider;
+import com.fr.stable.fun.impl.AbstractProvider;
+import com.fr.stable.fun.mark.API;
+
+@API(level = MobileWidgetStyleProvider.CURRENT_LEVEL)
+public abstract class AbstractMobileWidgetStyleProvider extends AbstractProvider implements MobileWidgetStyleProvider {
+
+    @Override
+    public int currentAPILevel() {
+        return CURRENT_LEVEL;
+    }
+
+    @Override
+    public String mark4Provider() {
+        return getClass().getName();
+    }
+
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/DefaultMobileStyleCustomDefinePane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/DefaultMobileStyleCustomDefinePane.java
@ -0,0 +1,39 @@
+package com.fr.design.mainframe.mobile.ui;
+
+import com.fr.form.ui.Widget;
+import com.fr.form.ui.mobile.MobileStyle;
+
+import javax.swing.*;
+
+public class DefaultMobileStyleCustomDefinePane extends MobileStyleCustomDefinePane {
+
+
+    public DefaultMobileStyleCustomDefinePane(Widget widget) {
+        super(widget);
+    }
+
+    @Override
+    protected JPanel createPreviewPane() {
+        return null;
+    }
+
+    @Override
+    public void populateBean(MobileStyle ob) {
+
+    }
+
+    @Override
+    public MobileStyle updateBean() {
+        return null;
+    }
+
+    @Override
+    protected String title4PopupWindow() {
+        return null;
+    }
+
+    @Override
+    protected void init() {
+
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/DefaultMobileWidgetStyleProvider.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/DefaultMobileWidgetStyleProvider.java
@ -0,0 +1,30 @@
+package com.fr.design.mainframe.mobile.ui;
+
+import com.fr.design.fun.impl.AbstractMobileWidgetStyleProvider;
+import com.fr.form.ui.mobile.DefaultMobileStyle;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.locale.InterProviderFactory;
+
+public class DefaultMobileWidgetStyleProvider extends AbstractMobileWidgetStyleProvider {
+
+    @Override
+    public Class<? extends MobileStyle> classForMobileStyle() {
+        return DefaultMobileStyle.class;
+    }
+
+    @Override
+    public Class<? extends MobileStyleCustomDefinePane> classForWidgetAppearance() {
+        return DefaultMobileStyleCustomDefinePane.class;
+    }
+
+    @Override
+    public String xTypeForWidget() {
+        return null;
+    }
+
+    @Override
+    public String displayName() {
+        return InterProviderFactory.getProvider().getLocText("Fine-Engine_Report_DEFAULT");
+    }
+
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/MobileStyleCustomDefinePane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/MobileStyleCustomDefinePane.java
@ -0,0 +1,22 @@
+package com.fr.design.mainframe.mobile.ui;
+
+import com.fr.design.beans.BasicBeanPane;
+import com.fr.form.ui.Widget;
+import com.fr.form.ui.mobile.MobileStyle;
+
+import javax.swing.*;
+
+public abstract class MobileStyleCustomDefinePane extends BasicBeanPane<MobileStyle> {
+
+    protected Widget widget;
+
+    public MobileStyleCustomDefinePane(Widget widget) {
+        this.widget = widget;
+        init();
+    }
+
+    protected abstract JPanel createPreviewPane();
+
+    protected abstract void init();
+
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/MobileStyleDefinePane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/MobileStyleDefinePane.java
@ -0,0 +1,115 @@
+package com.fr.design.mainframe.mobile.ui;
+
+import com.fr.design.beans.BasicBeanPane;
+import com.fr.design.gui.ilable.UILabel;
+import com.fr.design.i18n.Toolkit;
+import com.fr.design.layout.FRGUIPaneFactory;
+import com.fr.design.style.color.NewColorSelectBox;
+import com.fr.design.utils.gui.GUICoreUtils;
+import com.fr.form.ui.Widget;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.general.FRFont;
+import com.fr.invoke.Reflect;
+
+import javax.swing.*;
+import javax.swing.border.TitledBorder;
+import javax.swing.event.ChangeEvent;
+import javax.swing.event.ChangeListener;
+import java.awt.*;
+
+public class MobileStyleDefinePane extends BasicBeanPane<MobileStyle> {
+
+    private Widget widget;
+    private MobileStyleCustomDefinePane customBeanPane;
+    private Class<? extends MobileStyle> mobileStyleClazz;
+    private NewColorSelectBox colorSelectBox;
+
+    MobileStyleDefinePane(Widget widget, Class<? extends MobileStyleCustomDefinePane> customBeanPaneClass,
+                          Class<? extends MobileStyle> mobileStyleClazz) {
+        this.widget = widget;
+        this.customBeanPane = Reflect.on(customBeanPaneClass).create(widget).get();
+        this.mobileStyleClazz = mobileStyleClazz;
+        init();
+    }
+
+    @Override
+    public void populateBean(MobileStyle ob) {
+        this.customBeanPane.populateBean(ob);
+        colorSelectBox.setSelectObject(ob.getBackground());
+    }
+
+    @Override
+    public MobileStyle updateBean() {
+        MobileStyle mobileStyle = Reflect.on(mobileStyleClazz).create().get();
+        this.widget.setMobileStyle(mobileStyle);
+        this.customBeanPane.updateBean();
+        mobileStyle.setBackground(colorSelectBox.getBackground());
+        return mobileStyle;
+    }
+
+    @Override
+    protected String title4PopupWindow() {
+        return null;
+    }
+
+    private void init() {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        createGeneralPane();
+        createCustomPane();
+    }
+
+    private void createGeneralPane() {
+        createPreviewPane();
+        createBackgroundPane();
+    }
+
+    private void createPreviewPane() {
+        JPanel mobileStylePreviewPane = this.customBeanPane.createPreviewPane();
+        if(mobileStylePreviewPane != null) {
+            JPanel previewPane = FRGUIPaneFactory.createBorderLayout_S_Pane();
+            TitledBorder titledBorder = GUICoreUtils.createTitledBorder(Toolkit.i18nText("Fine-Design_Basic_Widget_Style_Preview"), null);
+            titledBorder.setTitleFont(FRFont.getInstance("PingFangSC-Regular", Font.PLAIN, 12, new Color(0x2f8ef100)));
+            previewPane.setBorder(titledBorder);
+            previewPane.setPreferredSize(new Dimension(500, 83));
+            previewPane.add(mobileStylePreviewPane, BorderLayout.CENTER);
+            this.add(previewPane, BorderLayout.NORTH);
+        }
+    }
+
+    private void createBackgroundPane() {
+
+        JPanel backgroundPane = new JPanel();
+        backgroundPane.setLayout(new FlowLayout(FlowLayout.LEFT, 10, 5));
+        backgroundPane.setPreferredSize(new Dimension(500, 65));
+
+        TitledBorder titledBorder = GUICoreUtils.createTitledBorder(Toolkit.i18nText("Fine-Design_Mobile_Common_Attribute"), null);
+        titledBorder.setTitleFont(FRFont.getInstance("PingFangSC-Regular", Font.PLAIN, 12, Color.BLUE));
+        backgroundPane.setBorder(titledBorder);
+
+        UILabel colorSelectLabel = new UILabel(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Mobile_Widget_Background"), UILabel.RIGHT);
+        colorSelectLabel.setPreferredSize(new Dimension(65, 20));
+
+        colorSelectBox = new NewColorSelectBox(152);
+        colorSelectBox.addSelectChangeListener(new ChangeListener() {
+            @Override
+            public void stateChanged(ChangeEvent e) {
+            }
+        });
+
+        backgroundPane.add(colorSelectLabel);
+        backgroundPane.add(colorSelectBox);
+
+        this.add(backgroundPane, BorderLayout.NORTH);
+    }
+
+    private void createCustomPane() {
+        JPanel configPane = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        TitledBorder titledBorder = GUICoreUtils.createTitledBorder(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Report_Set"), null);
+        titledBorder.setTitleFont(FRFont.getInstance("PingFangSC-Regular", Font.PLAIN, 12, Color.BLUE));
+        configPane.setBorder(titledBorder);
+
+        configPane.add(this.customBeanPane, BorderLayout.CENTER);
+
+        this.add(configPane, BorderLayout.CENTER);
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/MobileStylePane.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/mobile/ui/MobileStylePane.java
@ -0,0 +1,130 @@
+package com.fr.design.mainframe.mobile.ui;
+
+import com.fr.design.ExtraDesignClassManager;
+import com.fr.design.beans.BasicBeanPane;
+import com.fr.design.dialog.BasicPane;
+import com.fr.design.fun.MobileWidgetStyleProvider;
+import com.fr.design.layout.FRGUIPaneFactory;
+import com.fr.form.ui.Widget;
+import com.fr.form.ui.mobile.MobileStyle;
+import com.fr.log.FineLoggerFactory;
+import com.fr.stable.ArrayUtils;
+
+import javax.swing.*;
+import java.awt.*;
+import java.awt.event.MouseAdapter;
+import java.awt.event.MouseEvent;
+import java.util.HashMap;
+import java.util.Map;
+
+public class MobileStylePane extends BasicPane {
+
+    private Widget widget;
+    private DefaultListModel<String> listModel;
+    private JPanel right;
+    private CardLayout card;
+    private JList styleList;
+    private Map<String, BasicBeanPane<MobileStyle>> map = new HashMap<>();
+
+    public MobileStylePane(Widget widget) {
+        this.widget = widget;
+        init();
+    }
+
+    @Override
+    protected String title4PopupWindow() {
+        return null;
+    }
+
+    public void populate(MobileStyle mobileStyle) {
+        if(mobileStyle != null) {
+            MobileWidgetStyleProvider[] styleProviders = getMobileWidgetStyleProviders();
+            for(int i = 0; i < styleProviders.length; i ++) {
+                if(mobileStyle.getClass() == styleProviders[i].classForMobileStyle()) {
+                    String displayName = styleProviders[i].displayName();
+                    styleList.setSelectedIndex(i);
+                    map.get(displayName).populateBean(mobileStyle);
+                    card.show(right, displayName);
+                    return;
+                }
+            }
+        }
+        styleList.setSelectedIndex(0);
+    }
+
+    public MobileStyle update() {
+        return map.get(styleList.getSelectedValue()).updateBean();
+    }
+
+    private void init() {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        listModel = new DefaultListModel<>();
+        card = new CardLayout();
+        right = FRGUIPaneFactory.createCardLayout_S_Pane();
+        right.setLayout(card);
+        MobileWidgetStyleProvider[] styleProviders = getMobileWidgetStyleProviders();
+        for(MobileWidgetStyleProvider styleProvider: styleProviders) {
+            this.addProvider2View(styleProvider);
+        }
+        this.addWestList();
+        this.addCenterConfig();
+    }
+
+    private void addWestList() {
+        styleList = new JList<>(listModel);
+        styleList.setCellRenderer(render);
+        styleList.addMouseListener(new MouseAdapter() {
+            public void mouseClicked(MouseEvent e) {
+                String selectedValue = (String)styleList.getSelectedValue();
+                card.show(right, selectedValue);
+            }
+        });
+        JPanel westPane = FRGUIPaneFactory.createBorderLayout_L_Pane();
+        westPane.add(styleList, BorderLayout.CENTER);
+        westPane.setPreferredSize(new Dimension(100, 500));
+        this.add(westPane, BorderLayout.WEST);
+    }
+
+    private void addCenterConfig() {
+        JPanel centerPane = FRGUIPaneFactory.createBorderLayout_L_Pane();
+        JPanel attrConfPane = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        centerPane.setPreferredSize(new Dimension(500, 500));
+        attrConfPane.add(right, BorderLayout.CENTER);
+        centerPane.add(attrConfPane, BorderLayout.CENTER);
+        this.add(centerPane, BorderLayout.CENTER);
+    }
+
+    private void addProvider2View(MobileWidgetStyleProvider styleProvider) {
+        String displayName = styleProvider.displayName();
+        Class<? extends MobileStyleCustomDefinePane> appearanceClazz = styleProvider.classForWidgetAppearance();
+        Class<? extends MobileStyle> mobileStyleClazz = styleProvider.classForMobileStyle();
+
+        listModel.addElement(displayName);
+        try {
+            BasicBeanPane<MobileStyle> mobileStyleBasicBeanPane = new MobileStyleDefinePane(widget, appearanceClazz, mobileStyleClazz);
+            right.add(displayName, mobileStyleBasicBeanPane);
+            map.put(displayName, mobileStyleBasicBeanPane);
+        } catch (Exception e) {
+            FineLoggerFactory.getLogger().error(e.getMessage(), e);
+        }
+    }
+
+    private static ListCellRenderer render = new DefaultListCellRenderer() {
+        @Override
+        public Component getListCellRendererComponent(JList list, Object value, int index, boolean isSelected, boolean cellHasFocus) {
+            super.getListCellRendererComponent(list, value, index, isSelected, cellHasFocus);
+            if (value instanceof MobileStyle) {
+                MobileStyle l = (MobileStyle) value;
+                this.setText(l.toString());
+            }
+            return this;
+        }
+    };
+
+    private MobileWidgetStyleProvider[] getMobileWidgetStyleProviders() {
+        DefaultMobileWidgetStyleProvider defaultMobileWidgetStyleProvider = new DefaultMobileWidgetStyleProvider();
+        MobileWidgetStyleProvider[] styleProviders = ExtraDesignClassManager.getInstance().getMobileStyleOfWidget(widget.getXType());
+        styleProviders = ArrayUtils.insert(0, styleProviders, defaultMobileWidgetStyleProvider);
+        return styleProviders;
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/widget/accessibles/AccessibleMobileStyleEditor.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/widget/accessibles/AccessibleMobileStyleEditor.java
@ -0,0 +1,36 @@
+package com.fr.design.mainframe.widget.accessibles;
+
+import com.fr.design.dialog.BasicDialog;
+import com.fr.design.dialog.DialogActionAdapter;
+import com.fr.design.mainframe.mobile.ui.MobileStylePane;
+import com.fr.design.mainframe.widget.wrappers.MobileStyleWrapper;
+import com.fr.form.ui.mobile.MobileStyle;
+
+import javax.swing.SwingUtilities;
+import java.awt.Dimension;
+
+public class AccessibleMobileStyleEditor extends UneditableAccessibleEditor {
+
+    private MobileStylePane stylePane;
+    private static final Dimension DEFAULT_DIMENSION = new Dimension(600, 400);
+
+    public AccessibleMobileStyleEditor(MobileStylePane stylePane) {
+        super(new MobileStyleWrapper());
+        this.stylePane = stylePane;
+    }
+
+    @Override
+    protected void showEditorPane() {
+        stylePane.setPreferredSize(DEFAULT_DIMENSION);
+        BasicDialog dlg = stylePane.showWindow(SwingUtilities.getWindowAncestor(this));
+        dlg.addDialogActionListener(new DialogActionAdapter() {
+            @Override
+            public void doOk() {
+                setValue(stylePane.update());
+                fireStateChanged();
+            }
+        });
+        stylePane.populate((MobileStyle) getValue());
+        dlg.setVisible(true);
+    }
+}
--- a/designer-base/src/main/java/com/fr/design/mainframe/widget/wrappers/MobileStyleWrapper.java
+++ b/designer-base/src/main/java/com/fr/design/mainframe/widget/wrappers/MobileStyleWrapper.java
@ -0,0 +1,26 @@
+package com.fr.design.mainframe.widget.wrappers;
+
+import com.fr.design.Exception.ValidationException;
+import com.fr.design.designer.properties.Decoder;
+import com.fr.design.designer.properties.Encoder;
+import com.fr.locale.InterProviderFactory;
+
+public class MobileStyleWrapper implements Encoder, Decoder {
+    @Override
+    public Object decode(String txt) {
+        return null;
+    }
+
+    @Override
+    public void validate(String txt) throws ValidationException {
+
+    }
+
+    @Override
+    public String encode(Object v) {
+        if (v == null) {
+            return InterProviderFactory.getProvider().getLocText("Fine-Engine_Report_DEFAULT");
+        }
+        return v.toString();
+    }
+}
--- a/designer-form/src/main/java/com/fr/design/designer/creator/XChartEditor.java
+++ b/designer-form/src/main/java/com/fr/design/designer/creator/XChartEditor.java
@ -339,4 +339,9 @@ public class XChartEditor extends XBorderStyleWidgetCreator {
 	public boolean isSupportShared() {
 		return true;
 	}
+
+	@Override
+	public boolean supportMobileStyle() {
+		return false;
+	}
 }
--- a/designer-form/src/main/java/com/fr/design/designer/creator/XCreator.java
+++ b/designer-form/src/main/java/com/fr/design/designer/creator/XCreator.java
@ -3,7 +3,6 @@
 */
 package com.fr.design.designer.creator;

-import com.fr.base.BaseUtils;
 import com.fr.base.GraphHelper;
 import com.fr.base.vcs.DesignerMode;
 import com.fr.design.actions.UpdateAction;
@ -591,6 +590,14 @@ public abstract class XCreator extends JPanel implements XComponent, XCreatorToo
 		return;
 	}

+	/**
+	 * 是否支持定义移动端样式，默认true
+	 * @return 是否支持定义移动端样式
+	 */
+	public boolean supportMobileStyle() {
+		return true;
+	}
+
 	/**
 	 * 获取当前组件自定义的属性表tab
 	 *
--- a/designer-form/src/main/java/com/fr/design/designer/creator/XElementCase.java
+++ b/designer-form/src/main/java/com/fr/design/designer/creator/XElementCase.java
@ -121,6 +121,11 @@ public class XElementCase extends XBorderStyleWidgetCreator implements FormEleme
 		return ArrayUtils.add(extraTableEditor, reportFitEditor);
 	}

+	@Override
+	public boolean supportMobileStyle() {
+		return false;
+	}
+
 	private CRPropertyDescriptor getReportFitEditor() {
 		this.designer = WidgetPropertyPane.getInstance().getEditingFormDesigner();
 		FitProvider wbTpl = designer.getTarget();
--- a/designer-form/src/main/java/com/fr/design/designer/creator/XLayoutContainer.java
+++ b/designer-form/src/main/java/com/fr/design/designer/creator/XLayoutContainer.java
@ -572,4 +572,9 @@ public abstract class XLayoutContainer extends XBorderStyleWidgetCreator impleme
        return false;
    }

+    @Override
+    public boolean supportMobileStyle() {
+        return false;
+    }
+
 }
--- a/designer-form/src/main/java/com/fr/design/designer/creator/XWScaleLayout.java
+++ b/designer-form/src/main/java/com/fr/design/designer/creator/XWScaleLayout.java
@ -179,4 +179,9 @@ public class XWScaleLayout extends DedicateLayoutContainer {
 		}
 		return super.getWidgetPropertyUIProviders();
 	}
+
+	@Override
+	public boolean supportMobileStyle() {
+		return true;
+	}
 }
--- a/designer-form/src/main/java/com/fr/design/designer/properties/mobile/MobileStylePropertyUI.java
+++ b/designer-form/src/main/java/com/fr/design/designer/properties/mobile/MobileStylePropertyUI.java
@ -0,0 +1,31 @@
+package com.fr.design.designer.properties.mobile;
+
+import com.fr.design.designer.creator.XCreator;
+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.MobileWidgetStyleDefinePane;
+
+public class MobileStylePropertyUI extends AbstractWidgetPropertyUIProvider {
+
+    private XCreator xCreator;
+
+    public MobileStylePropertyUI(XCreator xCreator) {
+        this.xCreator = xCreator;
+    }
+
+    @Override
+    public AbstractPropertyTable createWidgetAttrTable() {
+        return null;
+    }
+
+    @Override
+    public BasicPane createWidgetAttrPane() {
+        return new MobileWidgetStyleDefinePane(xCreator);
+    }
+
+    @Override
+    public String tableTitle() {
+        return null;
+    }
+}
--- a/designer-form/src/main/java/com/fr/design/mainframe/WidgetPropertyPane.java
+++ b/designer-form/src/main/java/com/fr/design/mainframe/WidgetPropertyPane.java
@ -7,6 +7,7 @@ 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.designer.properties.mobile.MobileStylePropertyUI;
 import com.fr.design.fun.WidgetPropertyUIProvider;
 import com.fr.design.gui.ibutton.UIHeadGroup;
 import com.fr.design.gui.icontainer.UIScrollPane;
@ -172,8 +173,12 @@ public class WidgetPropertyPane extends FormDockView implements BaseWidgetProper
    private WidgetPropertyUIProvider[] getExtraPropertyUIProviders() {
        FormSelection selection = designer.getSelectionModel().getSelection();
        WidgetPropertyUIProvider[] embeddedPropertyUIProviders = null;
-        if (selection != null && selection.getSelectedCreator() != null) {
+        XCreator xCreator = selection.getSelectedCreator();
+        if (selection != null && xCreator != null) {
            embeddedPropertyUIProviders = selection.getSelectedCreator().getWidgetPropertyUIProviders();
+            if(!designer.getDesignerMode().isFormParameterEditor() && xCreator.supportMobileStyle()) {
+                embeddedPropertyUIProviders = ArrayUtils.insert(0, embeddedPropertyUIProviders, new MobileStylePropertyUI(xCreator));
+            }
        }
        Set<WidgetPropertyUIProvider> set = ExtraDesignClassManager.getInstance().getArray(WidgetPropertyUIProvider.XML_TAG);
        return ArrayUtils.addAll(embeddedPropertyUIProviders, set.toArray(new WidgetPropertyUIProvider[set.size()]));
--- a/designer-form/src/main/java/com/fr/design/widget/ui/designer/mobile/MobileWidgetStyleDefinePane.java
+++ b/designer-form/src/main/java/com/fr/design/widget/ui/designer/mobile/MobileWidgetStyleDefinePane.java
@ -0,0 +1,85 @@
+package com.fr.design.widget.ui.designer.mobile;
+
+import com.fr.design.constants.LayoutConstants;
+import com.fr.design.designer.IntervalConstants;
+import com.fr.design.designer.creator.XCreator;
+import com.fr.design.gui.frpane.AttributeChangeListener;
+import com.fr.design.gui.ilable.UILabel;
+import com.fr.design.layout.FRGUIPaneFactory;
+import com.fr.design.layout.TableLayoutHelper;
+import com.fr.design.mainframe.DesignerContext;
+import com.fr.design.mainframe.FormDesigner;
+import com.fr.design.mainframe.widget.accessibles.AccessibleMobileStyleEditor;
+import com.fr.design.mainframe.mobile.ui.MobileStylePane;
+import com.fr.form.ui.mobile.MobileStyle;
+
+import javax.swing.*;
+import java.awt.*;
+
+public class MobileWidgetStyleDefinePane extends MobileWidgetDefinePane {
+
+    private XCreator xCreator;
+    private AccessibleMobileStyleEditor mobileStyleEditor;
+    private AttributeChangeListener changeListener;
+
+    public MobileWidgetStyleDefinePane(XCreator xCreator) {
+        this.xCreator = xCreator;
+    }
+
+    @Override
+    public void setPreferredSize(Dimension dimension) {
+        super.setPreferredSize(dimension);
+    }
+
+    @Override
+    public void initPropertyGroups(Object source) {
+        this.setLayout(FRGUIPaneFactory.createBorderLayout());
+        UILabel label = new UILabel(com.fr.design.i18n.Toolkit.i18nText("Fine-Design_Form_Tab_Style_Template"));
+        mobileStyleEditor = new AccessibleMobileStyleEditor(new MobileStylePane(this.xCreator.toData()));
+        JPanel jPanel = TableLayoutHelper.createGapTableLayoutPane(
+                new Component[][]{new Component[]{label, mobileStyleEditor}},
+                TableLayoutHelper.FILL_LASTCOLUMN, IntervalConstants.INTERVAL_L1, LayoutConstants.VGAP_LARGE
+        );
+        JPanel holder = FRGUIPaneFactory.createBorderLayout_S_Pane();
+        holder.add(jPanel, BorderLayout.NORTH);
+
+        this.add(holder, BorderLayout.NORTH);
+    }
+
+    @Override
+    public void populate(FormDesigner designer) {
+        mobileStyleEditor.setValue(xCreator.toData().getMobileStyle());
+        this.bindListeners2Widgets();
+        this.addAttributeChangeListener(changeListener);
+    }
+
+    @Override
+    public void update() {
+        xCreator.toData().setMobileStyle((MobileStyle) mobileStyleEditor.getValue());
+        DesignerContext.getDesignerFrame().getSelectedJTemplate().fireTargetModified();
+    }
+
+    @Override
+    public Dimension getPreferredSize() {
+        return new Dimension(super.getPreferredSize().width, 30);
+    }
+
+    @Override
+    public Dimension getMaximumSize() {
+        return new Dimension(400, 200);
+    }
+
+    private void bindListeners2Widgets() {
+        reInitAllListeners();
+        this.changeListener = new AttributeChangeListener() {
+            @Override
+            public void attributeChange() {
+                update();
+            }
+        };
+    }
+
+    private void reInitAllListeners() {
+        initListener(this);
+    }
+}