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

Xem thêm các chuyên mục:

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- Giới thiệu

Tài liệu này viết trên:
  • Eclipse 4.5 (MARS)   (ok for Eclipse 4.4 LUNA + RAP2.3, see comments)

  • Eclipse RAP 3.0

Document History:
  • 24-04-2014: Create Tutorial (Eclipse 4.3.2 & RAP 2.2)
  • 12-09-2014: Update to Eclipse 4.4 & RAP 2.3
  • 08-07-2015: Update to Eclipse 4.5 & RAP 3.0

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:
 
  • HelloBasicRAP
  • org.apache.felix.gogo.command
  • org.apache.felix.gogo.runtime
  • org.apache.felix.gogo.shell
  • org.eclipse.equinox.console
  • org.eclipse.equinox.http.jetty
  • org.eclipse.equinox.ds
  • org.eclipse.rap.rwt.osgi
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":

Xem thêm các chuyên mục: