Hướng dẫn lập trình Eclipse RAP cho người mới bắt đầu - Ứng dụng e4 Workbench
Công ty Vĩnh Cửu tuyển dụng lập trình viên Java

1- Giới thiệu

Tài liệu này được viết dựa trên:
  • Eclipse 4.5 (MARS)

  • Eclipse RAP e4

Document History:
  • 27-08-2014: Based on Eclipse 4.4 LUNA + RAP 2.3 + Old Model of Workbench
  • 21-07-2015: Update to Eclipse 4.5 MARS + Eclipse RAP e4 (e4 Workbench)

Chú ý:

Bạn có thể xem lập trình RAP 2.3 (với mô hình Workbench cũ) tại:

2- Các cài đặt trước khi bắt đầu

2.1- Cài đặt Eclipse

Bạn cần có Eclipse phiên bản mới nhất. Hiện tại đang là Eclipse 4.5 (Mã hiệu MARS).
Theo tôi bạn lên download package: "Eclipse IDE for Java EE Developers". Các package chỉ khác nhau số lượng Plugin, cho các mục đích lập trình khác nhau. Trong quá trình lập trình có thể cài thêm các Plugin cho các mục đích khác

2.2- Cài đặt WindowBuilder

Cài đặt Plugin WindowBuilder, đây là 1 Plugin cho phép bạn thiết kế giao diện ứng dụng SWT bằng cách kéo thả rất tiện lợi.
Xem hướng dẫn cài đặt tại:

2.3- Cài đặt e4 Tools Developer Resources

Bạn có thể xem hướng dẫn cài đặt e4 Tools Developer Resources tại:

2.4- Cài đặt RAP e4 Tooling vào Eclipse

Bạn có thể xem hướng dẫn tại:

3- Tạo mới Java Workspace

Để lập trình ứng dụng RAP e4 bạn nên tạo mới một Java Workspace:
  • File/Switch Workspace/Other..
Nhập vào:
  • F:\ECLIPSE_TUTORIAL\RAP_E4

4- Cài đặt RAP Target

Để lập trình một ứng dụng RAP e4 bạn cần phải cài đặt môi trường RAP (RAP Target Platform). Bao gồm ít nhất 2 thư viện:
  1. RAP Target Components
  2. RAP e4 Target Components
Tạo project RAPTarget và tạo file Target define. Bạn có thể xem hướng dẫn tại:
Kết quả có được:

5- Tạo Eclipse RAP e4 Project rỗng

Trong tài liệu này tôi sẽ hướng dẫn bạn xây dựng một ứng dụng RAP e4 từ khi bắt đầu (Không làm theo template có sẵn), vì vậy tôi sẽ tạo ra một ứng dụng Eclipse RAP e4 rỗng.
Trên Eclipse chọn: File/New/Other...
Nhập vào:
  • Project Name: RAPe4Tutorial
  1. Check chọn trên (1)
  2. Trên vùng (2) chọn "No" để Eclipse tạo ra RAP Project (Chạy trên Web) , ngược lại nó sẽ tạo ra RCP Project (Chạy trên Desktop).
Lựa chọn "RAP e4 application"
Nhập vào:
  • Application window title: Hello RAP E4
  • Java package name: org.o7planning.tutorial.rape4
Đây là hình ảnh Project được tại ra:

Chạy thử ứng dụng:

Nhấn phải chuột vào project RAPe4Tutorial chọn Run As/Eclipse Application
Trình duyệt của Eclipse có thể không hiển thị được ứng dụng RAP e4.
Bạn cần copy đường dẫn để chạy trên Firefox hoặc Chrome:

6- Cấu hình thông số chạy ứng dụng

Bạn có thể cấu hình cổng (port) và trình duyệt mặc định chạy ứng dụng RAP e4:
Nhấn phải chuột vào project RAPe4Tutorial chọn Run As/Run Configurations...
Sử dụng cổng 7777 và trình duyệt mặc định của hệ điều hành:
Nhấn Apply và chạy ứng dụng:
Kết quả:

7- Cấu trúc của ứng dụng Eclipse e4 RAP rỗng

Ứng dụng Eclipse RAP e4 rỗng đã được Eclipse tạo ra, hãy xem cấu trúc của nó. Mở file Application.e4xmi:
Thay đổi tiêu đề của ứng dụng thành "Eclipse E4 RAP Application" như hình minh họa dưới đây.
Và chạy lại ứng dụng:

8- Cấu hình thêm các Bundle

Để xây dựng một ứng dụng RAP e4 với nhiều chức năng bạn cần khai báo sử dụng thêm một số Bundle khác:
Mở file MANIFEST.MF
Thêm vào các Bundle:
  • org.eclipse.e4.ui.model.workbench
  • org.eclipse.e4.ui.services
  • org.eclipse.e4.ui.workbench
Các Bundle có thể phụ thuộc lẫn nhau, chẳng hạn bundle A phụ thuộc vào bundle B, C. Và B lại phụ thuộc vào E, F. Nếu bạn thêm bundle A vào ứng dụng của mình, eclipse cần tính toán lại các Bundle cần thiết để đóng gói thành sản phẩm có thể chạy.

Như vậy sau khi bạn khai báo sử dụng thêm các Bundle, bạn cần cấu hình hình lại ứng dụng.
Nhấn phải chuột vào project và chọn Run As/Run Configurations:
  1. Nhấn vào Add Required Bundles để eclipse tính toán lại các bundle phụ thuộc
  2. Nhấn vào Validate Bundles để đảm bảo project của bạn không có vấn đề gì

9- Handler và Command

RAP Framework xây dựng sẵn rất nhiều Command, chẳng hạn 3 command có ID dưới đây:
  1. org.eclipse.ui.file.exit
    • Lệnh thoát ra khỏi ứng dụng
  2. org.eclipse.ui.file.open
    • Lệnh mở file.
  3. org.eclipse.ui.file.save
    • Lệnh save editor
  4. org.eclipse.ui.help.aboutAction
    • Lệnh mở ra cửa sổ About.

Bạn có thể xem thêm danh sách các command được xây dựng sẵn của RCP framework tại:

Tạo mới một Command có tên quiteCommand, gọi tới lệnh thoát khỏi ứng dụng đã được xây dựng sẵn của RAP Framework.
Tương tự chúng ta tạo tiếp 2 Command khác:
Thực hiện lệnh save nội dung trên Part (editor).
  • ID: org.eclipse.ui.file.save
  • Name: saveCommand
AboutCommand:
  • ID: org.eclipse.ui.help.aboutAction
  • Name: aboutCommand
Handler là các class sử lý cho các lệnh (command) của Menu hoặc Toolbar. Khi bạn click vào MenuItem hoặc ToolItem có nghĩa là gọi thực thi một Command, trước khi Command được thực thi Handler sẽ được thực thi trước, bạn có thể hủy (cancel) việc Command được thực thi trong Handler.

Handler là các class mà khi được thực thi nó sẽ thực thi các nhiệm vụ được viết trong method có chú thích bởi @Execute.

Tôi sẽ tạo ra 3 class Handler:
  • AboutHandler.java
package org.o7planning.tutorial.rape4.handler;

import org.eclipse.e4.core.di.annotations.Execute;
import org.eclipse.jface.dialogs.MessageDialog;
import org.eclipse.swt.widgets.Shell;

public class AboutHandler {
   
   @Execute
   public void execute(Shell shell) {
       MessageDialog.openInformation(shell, "About", "Eclipse e4 RAP Application");
   }
}
  • QuitHandler.java
package org.o7planning.tutorial.rcp.handler;

import org.eclipse.e4.core.di.annotations.Execute;
import org.eclipse.e4.ui.workbench.IWorkbench;
import org.eclipse.jface.dialogs.MessageDialog;
import org.eclipse.swt.widgets.Shell;


public class QuitHandler {
  @Execute
  public void execute(IWorkbench workbench, Shell shell){
      if (MessageDialog.openConfirm(shell, "Confirmation",
              "Do you want to exit?")) {
          workbench.close();
      }
  }
}
  • SaveHandler.java
package org.o7planning.tutorial.rcp.handler;

import org.eclipse.e4.core.di.annotations.CanExecute;
import org.eclipse.e4.core.di.annotations.Execute;
import org.eclipse.e4.ui.workbench.modeling.EPartService;

public class SaveHandler {

  @CanExecute
  public boolean canExecute(EPartService partService) {
      if (partService != null) {
          return !partService.getDirtyParts().isEmpty();
      }
      return false;
  }

  @Execute
  public void execute(EPartService partService) {
      partService.saveAll(false);
  }
}

Khai báo các class Handler với ứng dụng.

Khai báo một Handler với Application bạn phải khai báo ID, Handler class và Command.

Ví dụ người dùng đóng ứng dụng bằng cách click vào menuItem Exit, menuItem này gắn với quiteCommand, QuiteHandler là class sử lý cho command này (Như khai báo ở trên), class QuiteHandler sẽ hỏi người dùng có thực muốn đóng ứng dụng không, nếu có Command quiteCommand sẽ được thực thi.
Nhập vào:
  • ID: handler.quiteCommand
Tương tự khai báo các Handler khác.
  • handler.aboutCommand
  • handler.saveCommand

10- Khai báo Menus

Thêm một số icon vào project, sử dụng làm icon cho menuItem và toolItem.
  1. sample.png
  2. save_edit.png
Tạo menu chính (Main menu) của ứng dụng
Nhập vào ID của Main Menu, nó bắt buộc phải là:
  • menu:org.eclipse.ui.main.menu
Thêm 3 menu con:
  • File, Function, Help
Khai báo các menu con cho menu File.
  • Save
  • Exit
Bạn có thể chạy lại ứng dụng của mình:

11- Tạo Toolbar

Tạo Main Toolbar, với ID:
  • ID: toolbar:org.eclipse.ui.main.toolbar
Thêm vào 2 Toolitem: open & save
Chạy lại ứng dụng của bạn:

12- Part

  • SamplePart.java
/*******************************************************************************
* Copyright (c) 2010 - 2013 IBM Corporation and others.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
* http://www.eclipse.org/legal/epl-v10.html
*
* Contributors:
*     IBM Corporation - initial API and implementation
*     Lars Vogel <lars.Vogel@gmail.com> - Bug 419770
*******************************************************************************/
package org.o7planning.tutorial.rape4.part;

import javax.annotation.PostConstruct;
import javax.inject.Inject;

import org.eclipse.e4.ui.di.Focus;
import org.eclipse.e4.ui.di.Persist;
import org.eclipse.e4.ui.model.application.ui.MDirtyable;
import org.eclipse.jface.viewers.TableViewer;
import org.eclipse.swt.SWT;
import org.eclipse.swt.events.ModifyEvent;
import org.eclipse.swt.events.ModifyListener;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Text;

public class SamplePart {

   private Text txtInput;
   private TableViewer tableViewer;

   @Inject
   private MDirtyable dirty;

   @PostConstruct
   public void createComposite(Composite parent) {
       parent.setLayout(new GridLayout(1, false));

       txtInput = new Text(parent, SWT.BORDER);
       txtInput.setMessage("Enter text to mark part as dirty");
       txtInput.addModifyListener(new ModifyListener() {
           @Override
           public void modifyText(ModifyEvent e) {
               dirty.setDirty(true);
           }
       });
       txtInput.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));

       tableViewer = new TableViewer(parent);

       tableViewer.add("Sample item 1");
       tableViewer.add("Sample item 2");
       tableViewer.add("Sample item 3");
       tableViewer.add("Sample item 4");
       tableViewer.add("Sample item 5");
       tableViewer.getTable().setLayoutData(new GridData(GridData.FILL_BOTH));
   }

   @Focus
   public void setFocus() {
       tableViewer.getTable().setFocus();
   }

   @Persist
   public void save() {
       dirty.setDirty(false);
   }
}
Thêm mới PerspectiveStack. Đây là một ngăn xếp (Stack) chứa các khung nhìn (Perspective).
Thêm mới khung nhìn (Perspective):
Chạy lại ứng dụng:
Các thay đổi trên Part có thể làm nút SAVE sáng lên.