openplanning

Hướng dẫn lập trình Eclipse RAP cho người mới bắt đầu - Ứng dụng cơ bản

  1. Giới thiệu
  2. Các cài đặt đòi hỏi
  3. Tạo Project RAP Target Platform (Khai báo thư viện RAP)
  4. Tạo project RAP cơ bản
  5. Xem cấu trúc ví dụ
  6. Chạy ứng dụng RAP
  7. Đóng gói và triển khai ứng dụng RAP
  8. Ứng dụng Eclipse RAP e4 Workbench

1. Giới thiệu

Tài liệu này viết trên:

2. Các cài đặt đòi hỏi

Trước hết phải đảm bảo rằng bạn đã cài đặt "RAP Tools". Nếu chưa cài bạn có thể xem tại:

3. Tạo Project RAP Target Platform (Khai báo thư viện RAP)

Trươc hết, bạn cần tạo Project RAPTarget, để khai báo các thư viện RAP và môi trường.
Bạn có thể xem hướng dẫn tại:

4. Tạo project RAP cơ bản

Trên Eclipse chọn:
  • File/New/Other..
Nhập vào tên Project:
  • HelloBasicRAP
  • org.o7planning.tutorial.rap.hellobasicrap.Activator
Trên cửa sổ Template chọn "Rap Hello World", mục đích để tạo ra một Project RAP theo một mẫu có sẵn của Eclipse.
Chú ý: Nếu bạn không cài Rap Tools như bước ở phía trên sẽ không có Template này để bạn chọn.
Nhập vào tên package sẽ sử dụng trong project.
  • org.o7planning.tutorial.rap.hellobasicrap
Project đã được tạo ra. Đồng thời Eclipse hỏi bạn có muốn cài đặt "RAP Target platform" hay không, nhấn NO.
Nếu project tạo ra có thông báo lỗi như hình minh họa dưới đây, có nghĩa là "RAP Target Platform" chưa có tác dụng đối với project bạn mới tạo ra.
Mở file RAPTarget.target và click vào "Set as Target Platform".
Project của bạn bây giờ đã không còn thông báo lỗi.

5. Xem cấu trúc ví dụ

Bây giờ chúng ta xem cấu trúc ví dụ được tạo ra như thế nào:
Class BasicEntryPoint sẽ giống như một trang web:
BasicEntryPoint.java
package org.o7planning.tutorial.rap.hellobasicrap;

import org.eclipse.rap.rwt.application.AbstractEntryPoint;
import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Composite;


public class BasicEntryPoint extends AbstractEntryPoint {

    @Override
    protected void createContents(Composite parent) {
        parent.setLayout(new GridLayout(2, false));
        Button checkbox = new Button(parent, SWT.CHECK);
        checkbox.setText("Hello");
        Button button = new Button(parent, SWT.PUSH);
        button.setText("World");
    }

}
Trong khi đó BasicApplication khai báo các đường dẫn để truy cập vào các EntryPoint.
Bạn có thể thấy BasicEntryPoint sẽ là trang được truy cập theo đường dẫn:
  • http://<host>:<port>/hello
Trong thực tế có nhiều cách để khai báo EntryPoint. Ngoài cách khai báo trên class, bạn có thể khai báo trên plugin.xml
BasicApplication.java
import org.eclipse.rap.rwt.application.Application;
import org.eclipse.rap.rwt.application.ApplicationConfiguration;
import org.eclipse.rap.rwt.client.WebClient;


public class BasicApplication implements ApplicationConfiguration {

   public void configure(Application application) {
       Map<String, String> properties = new HashMap<String, String>();
       properties.put(WebClient.PAGE_TITLE, "Hello RAP");
       application.addEntryPoint("/hello", BasicEntryPoint.class, properties);
   }

}
Mở class BasicEntryPoint bằng WindowBuilder.
Chú ý: Bạn có thể xem hướng dẫn cài đặt WindowBuilder vào Eclipse tại đây:
Trên cửa sổ thiết kế, có thông báo WindowBuilder không hiểu đâu là điểm bắt đầu để nó vẽ giao diện. Hãy nhấn vào “Use as entry point” và quay lại Tab Source.
Quay trở lại Tab Source, và sửa code:
BasicEntryPoint.java
package org.o7planning.tutorial.rap.hellobasicrap;

import java.util.HashMap;
import java.util.Map;

package org.o7planning.tutorial.rap.hellobasicrap;

import org.eclipse.rap.rwt.application.AbstractEntryPoint;
import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.Composite;


public class BasicEntryPoint extends AbstractEntryPoint {

   /**
    * @wbp.parser.entryPoint
    */
  @Override
  protected void createContents(Composite parent) {
      // Hãy thay đổi code giống dưới đây để có thể mở bằng WindowBuilder.
      parent.setLayout(new FillLayout());
      Composite root= new Composite(parent,SWT.NONE) ;
  }

}
Bây giờ bạn có thể thiết kế trang này trên WindowBuilder:
Kéo thả một vài thành phần (component) vào giao diện. Code sẽ được WindowBuilder tạo ra. Nếu bạn không rành về WindowBuilder bạn có thể tìm hiểu cách sử dụng nó. Trong tài liệu này tôi đang hướng dẫn bạn về RAP. Và bây giờ quan trọng là chúng ta sẽ chạy chương trình RAP này thế nào.

6. Chạy ứng dụng RAP

Nhấn phải chuột vào Project HelloBasicRAP và chọn "Run As/RAP Application"
Trong trường hợp chạy có lỗi.
Nhấn phải vào project HelloBasicRAP, chọn "Run As/ Run Configurations.."
Bạn có thể cấu hình để trang web của bạn chạy trên cổng nào đó ở đây tôi chọn là 1234, và trình duyệt Firefox.
Chuyển sang TAB Bundles, hãy đảm bảo rằng các Bundle sau được chọn:
Tiếp theo bạn nhấn vào “Add Required Bundles” để RAP tự động tính toán các Bundle phụ thuộc, nó sẽ tự động check vào các Bundle phụ thuộc này.
Nếu việc kiểm tra thành công, bạn sẽ nhận được thông báo không có vấn đề gì. Nhấn Apply và Close cửa sổ cấu hình.
Sau đó chạy lại Project của bạn.

7. Đóng gói và triển khai ứng dụng RAP

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

8. Ứng dụng Eclipse RAP e4 Workbench

Tiếp theo bạn có thể xem tài liệu "Hướng dẫn lập trình Eclipse RAP - Ứng dụng e4 Workbench":

Công nghệ của Eclipse

Show More