2012年11月3日土曜日

Ecliplse 4 アプリケーションの作成 (11) メトロ風スタイル

Windows 8 へアップグレード後の環境整備もほぼ終了したので、Eclipse の動作確認もかねて、メトロ風スタイルで遊んでみました。

BLUEテーマ:



新規プロジェクト作成
Eclipse 4 アプリケーションプロジェクトを作成します。
プロジェクト名: e4.win8style

※「Eclipse 4 アプリケーションの作成(1)」も参考にしてください。 

plugin.xml に以下のようなテーマを追加します。
   <extension
         point="org.eclipse.e4.ui.css.swt.theme">
      <theme
            basestylesheeturi="css/BLUE.css"
            id="BLUE"
            label="テーマBLUE">
      </theme>
      <theme
            basestylesheeturi="css/BROWN.css"
            id="BROWN"
            label="テーマBROWN">
      </theme>
      <theme
            basestylesheeturi="css/default.css"
            id="default"
            label="既定のテーマ">
      </theme>
      <theme
            basestylesheeturi="css/GREEN.css"
            id="GREEN"
            label="テーマGREEN">
      </theme>
      <theme
            basestylesheeturi="css/LIME.css"
            id="LIME"
            label="テーマLIME">
      </theme>
      <theme
            basestylesheeturi="css/MAGENTA.css"
            id="MAGENTA"
            label="テーマMAGENTA">
      </theme>
      <theme
            basestylesheeturi="css/ORANGE.css"
            id="ORANGE"
            label="テーマORANGE">
      </theme>
      <theme
            basestylesheeturi="css/PINK.css"
            id="PINK"
            label="テーマPINK">
      </theme>
      <theme
            basestylesheeturi="css/PURPLE.css"
            id="PURPLE"
            label="テーマPURPLE">
      </theme>
      <theme
            basestylesheeturi="css/RED.css"
            id="RED"
            label="テーマRED">
      </theme>
      <theme
            basestylesheeturi="css/TEAL.css"
            id="TEAL"
            label="テーマTEAL">
      </theme>
   </extension>

そして、それぞれのテーマに対応する CSS ファイルを プロジェクトの css フォルダに作成します。
※CSS設定については、「Eclipse 4 アプリケーションの作成(4)」も参考にしてください。
default.css :
.MPart {
  background-color: #2b599f #5b99d6 100% false;
}
.MPartSashContainer {
  background-color: #4b79bf;
}
.MPart Label {
  background-color: #5b99d6 #2b599f 100% false;
  color: #ffffff;
  font: 'arial' 14px;
  font-weight: bold;
}
.MTrimBar {
  background-color: #2b599f #5b99d6 100% false;
}
BLUE.css :
.MPart {
  background-color: #1BA1E2;
}
.MPartSashContainer {
  background-color: #1BA1E2;
}
.MPart Label {
  background-color: #1BA1E2;
  color: #1BA1E2;
  font: 'arial' 14px;
  font-weight: bold;
}
.MPart Composite {
  background-color: #1BA1E2;
}
.MTrimBar {
  background-color: #1BA1E2 #2bb1f2 100%;
}

その他の BROWN, GREEN, LIME, ... の各 CSS では BLUE.css の #1BA1E2, #2bb1f2 の部分がそれぞれ以下のように対応します。

  • BROWN : #A05000, #b06010
  • GREEN : #339933, #43a943
  • LIME    : #8CBF26, #9CAF36
  • MAGENTA : #FF0097, #ff10a7
  • ORANGE   : #F09609, #f1a619
  • PINK    : #E671B8, #f681a8
  • PURPLE : #A200FF, #b210ff
  • RED : #E51400, #f52410
  • TEAL : #00ABA9, #10bbb9



設定ダイアログの作成
テーマを変更するための設定ダイアログを作成します。
public class PreferenceDialog extends TitleAreaDialog {

    private String fThemeId;
    private FieldEditorPreferencePage fPage;
    private RadioGroupFieldEditor fThemeIdFld;

    /**
     * ダイアログの作成.
     * @param parentShell
     */
    public PreferenceDialog(Shell parentShell) {
        super(parentShell);
    }

    /**
     * ダイアログ・コンテンツの作成
     * @param parent
     */
    @Override
    protected Control createDialogArea(Composite parent) {
        getShell().setText("Windows 8 スタイル設定");
        setTitle("Windows 8 スタイル設定");
        setMessage("アプリケーションの実行環境を設定してください");
        
        Composite area = (Composite) super.createDialogArea(parent);
        GridLayout layout = (GridLayout) area.getLayout();
        layout.marginTop = 10;
        layout.marginBottom = 10;
        layout.marginLeft = 10;
        layout.marginRight = 10;
        area.layout();

        Preferences pref = ConfigurationScope.INSTANCE.getNode(Activator.PLUGIN_ID);
        fThemeId = pref.get("theme.id", "default");

        fPage = new FieldEditorPreferencePage(FieldEditorPreferencePage.GRID) {
            @Override
            public void createControl(Composite parent) {
                noDefaultAndApplyButton();
                super.createControl(parent);
            }
            
            @Override
            protected void createFieldEditors() {
                fThemeIdFld = new RadioGroupFieldEditor(
                        "pref.themeid",
                        "テーマを選択してください",
                        1, new String[][] {
                            { "既定値", "default" },
                            { "BLUE", "BLUE" },
                            { "BROWN", "BROWN" },
                            { "GREEN", "GREEN" },
                            { "LIME", "LIME" },
                            { "MAGENTA", "MAGENTA" },
                            { "ORANGE", "ORANGE" },
                            { "PINK", "PINK" },
                            { "PURPLE", "PURPLE" },
                            { "RED", "RED" },
                            { "TEAL", "TEAL" }
                            },
                        getFieldEditorParent());
                setRadioValue(fThemeId);
                addField(fThemeIdFld);
            }
            
            @Override
            protected void updateApplyButton() {
                updateButtons(isValid()); 
                super.updateApplyButton();
            }
            
            @Override
            public boolean performOk() {
                Composite cp = fThemeIdFld.getRadioBoxControl(getFieldEditorParent());
                for (Control c: cp.getChildren()) {
                    if (c instanceof Button) {
                        Button b = (Button)c;
                        if (b.getSelection()) {
                            fThemeId = b.getData().toString();
                            break;
                        }
                    }
                }
                return super.performOk();
            }

            private void setRadioValue(String data) {
                Composite cp = fThemeIdFld.getRadioBoxControl(getFieldEditorParent());
                for (Control c: cp.getChildren()) {
                    if (c instanceof Button) {
                        Button b = (Button)c;
                        if (b.getData().toString().equals(data)) {
                            b.setSelection(true);
                            break;
                        }
                    }
                }
            }
            
        };
        fPage.createControl(area);
        Control pageControl = fPage.getControl();
        pageControl.setLayoutData(new GridData(GridData.FILL_BOTH));
        return area;
    }

    /**
     * ボタン・バーの作成
     * @param parent
     */
    @Override
    protected void createButtonsForButtonBar(Composite parent) {
        createButton(parent, IDialogConstants.OK_ID, IDialogConstants.OK_LABEL,
                true);
        createButton(parent, IDialogConstants.CANCEL_ID,
                IDialogConstants.CANCEL_LABEL, false);
        updateButtons(fPage.isValid());
    }

    /** ダイアログの初期サイズ */
    @Override
    protected Point getInitialSize() {
        //int height = PluginConstants.isMac() ? 400 : 350;
        int height = 460;
        return new Point(450, height);
    }

    @Override
    protected void okPressed() {
        fPage.performOk();
        Preferences pref = ConfigurationScope.INSTANCE.getNode(Activator.PLUGIN_ID);
        pref.put("theme.id", fThemeId);
        try {
            pref.flush();
            super.okPressed();
        } catch (BackingStoreException e) {
        }
    }
    
    private void updateButtons(boolean isValid) {
        Button okButton = getButton(IDialogConstants.OK_ID);
        if (okButton != null) {
            okButton.setEnabled(isValid);
        }
    }
    
    public String getThemeId() {
        return fThemeId;
    }
}

そして、このダイアログをオープンするハンドラも作成します。 
public class OpenPreferenceHandler {
    @Execute
    public static void execute(@Named(IServiceConstants.ACTIVE_SHELL) Shell shell,
            IThemeEngine engine,
            IEventBroker broker) {
        PreferenceDialog dlg = new PreferenceDialog(shell);
        if (dlg.open()==Window.OK) {
            String themeId = dlg.getThemeId();
            if (engine != null) {
                engine.setTheme(themeId,true);
            }
        }
    }
}


ビューの作成

以下の内容の ListView を作成します。
public class ListView {
    private Table table;

    public ListView() {
    }

    @PostConstruct
    public void createControls(Composite parent) {
        GridLayout gl_parent = new GridLayout(1, false);
        gl_parent.verticalSpacing = 0;
        gl_parent.marginWidth = 0;
        gl_parent.marginHeight = 0;
        gl_parent.horizontalSpacing = 0;
        parent.setLayout(gl_parent);
        
        table = new Table(parent, SWT.BORDER | SWT.FULL_SELECTION);
        table.setFont(SWTResourceManager.getFont("Meiryo UI", 12, SWT.NORMAL));
        table.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true, 1, 1));
        table.setHeaderVisible(true);

        String[] titles = {"名前 ", "住所"};
        for (int i=0; i<titles.length; i++) {
            TableColumn column = new TableColumn (table, SWT.NONE);
            column.setText (titles [i]);
        } 
        TableItem item = new TableItem (table, SWT.NONE);
        item.setText (0, "山本太郎");
        item.setText (1, "東京都千代田区");

        item = new TableItem (table, SWT.NONE);
        item.setText (0, "鈴木花子");
        item.setText (1, "東京都渋谷区");
        for (int i=0; i<titles.length; i++) {
            table.getColumn (i).pack ();
        } 
    }

    // ...
}

同様に次のような DetailView を作成します。
public class DetailView {
    
    public DetailView() {
    }

    @PostConstruct
    public void createControls(Composite parent) {
        GridLayout gd1 = new GridLayout(1, false);
        gd1.horizontalSpacing = 0;
        gd1.verticalSpacing = 0;
        gd1.marginWidth = 0;
        gd1.marginHeight = 0;
        parent.setLayout(gd1);
        
        Composite composite = new Composite(parent, SWT.NONE);
        composite.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true, 0, 0));
    }

    // ...
}
アプリモデルの修正

Application.e4xmi を開いて、2つのパートを追加して(下図)、上記の ListView、 DetailView とリンクします。 


Window Trim に ToolBar と ToolControl を追加して、ToolBar には Direct Tool Item を追加して、メトロ風のアイコンを設定します(下図)。

設定アイテムには先に作成した、ハンドラクラス(OpenPrefereceHandler) をリンクします。

ウィンドウの表示位置 (5, 5) とサイズ (800, 600) も設定します。

アプリケーションの実行
実行前に、プロダクトの Launching タブの "Program Arguments" に "-clearPersistedState" を設定し、Dependencies タブで必須プラグインを追加しておきます。

アプリを実行して、設定ダイアログを開き(下図)、テーマを変更します。


PINK:

ORANGE:



ビデオプレーヤーアプリにメトロ風スタイルを設定して全画面表示する:
全画面表示でカーソルを左下に移動しても、もちろんスタート画面は表示されませんが、それっぽくは見えます。


0 件のコメント: