Flex Builder Config

Athena JSC – Inbound Flex Builder Config

MỤC LỤC 1. Chuẩn bị........................................................................................ ......................2 2. Tạo và Cấu hình ETMRIA FlexProject................................ ...............................2 3. Giới thiệu cấu trúc Project..................................................................... ............10 3.1. Business.................................................................................................. ....10 3.2. Command........................................................................... ........................10 3.3. Control..................................................................................................... ...10 3.4. Model............................................................................. ............................10 3.5. View.......................................................................................................... ..11 3.6. VO........................................................................................ ......................11 3.7. Sơ đồ luồng dữ liệu của một hành động dưới client................................. ...11 4. Sử dụng Template để Gen Code......................................... ...............................11

1

Athena JSC – Inbound Flex Builder Config

1. Chuẩn bị • • • • • • •

Bộ cài Flex Builder 2.0 (or 3.0). Bộ cài WebORB. Flash Player 9.0 Bộ cài MyGeneration version 1.1.5.1 Weborb.config --> Website Các file dll của Weborb. Weborb.dll --> bin Copy Web-inf --> Website

Copy vào <system.web> --> của web.config

2. Tạo và Cấu hình ETMRIA FlexProject. Bước 1: Lấy thư mục ETMRIA và WEB-INF từ server về, copy vào thư mục \Source Code\Website của Project Travel Manager. Bước 2: Lấy thư mục App_Code\GridLoader\Services và App_Code\GridLoader\VO về, đặt vào thư mục App_Code\GridLoader của Project Travel Manager. Bước 3: Tạo Project trong Flexbuilder.

2

Athena JSC – Inbound Flex Builder Config

Khai báo tên Project và Đường dẫn trong hộp Folder chỉ đến vị trí của thư mục ETMRIA trong Project Travel Manager, sau đó chọn “Next” cho đến khi hoàn thành quá trình tạo Project. Bước 4: Cấu hình Project. Chọn Properties của Project ETMRIA.

3

Athena JSC – Inbound Flex Builder Config

Cấu hình FlexApplications: chọn Add và chọn “Main.mxml”.

4

Athena JSC – Inbound Flex Builder Config

Cấu hình Flex Buil Path:  Main Source Folder = “”  Output folder = “bin”

5

Athena JSC – Inbound Flex Builder Config

Trong Tab Library Path: Chọn Add SWC --> Browse.. chọn đường dẫn đến file Cairngorm.swc, chọn OK.

6

Athena JSC – Inbound Flex Builder Config

Làm tương tự với gói fds.swc Cấu hình Flex Compiler: Trong hộp Additional compiler Arguments chọn giá trị : -services ".....\services-config.xml" -locale en_US “....” : Đường dẫn đến thư mục Services-config.xml trong Project Travel Manager.

7

Athena JSC – Inbound Flex Builder Config

Cấu hình Flex Server:  Root Folder: Đường dẫn đến thư mục website của Project Travel Manager.  Root URL: http://localhost/etm

8

Athena JSC – Inbound Flex Builder Config

Kiểm tra:

Chọn Run file Main.mxml của Project, kết quả như hình dưới.

9

Athena JSC – Inbound Flex Builder Config

3. Giới thiệu cấu trúc Project. Project trên Flex Builder đóng vai trò là Client trong toàn bộ Project Travel Manager, nhiệm vụ chính là xử lý các thao tác liên quan đến giao diện, cung cấp thông tin các dữ liệu cần thiết cho Server. Chúng ta chỉ quan tâm chủ yếu đền gói com.athena.etm.* (Đây là gói mà ta can thiệp trực tiếp). Gói này được chia làm 6 gói nhỏ chính.

3.1.Business Chứa các Service, khai báo các hàm gọi lên server, thông tin của một Service được khai báo các thông số mapping với server trong file : Services.mxml VD: <mx:RemoteObject id="VwBookingDtService" destination="GenericDestination" source="ETM.Services.VwBookingDtService" showBusyCursor="true" result="event.token.resultHandler(event);" fault="event.token.faultHandler(event);">

Trong đây có 2 tham số đặc biệt  Id : là mô tả để dưới client gọi đến Service.  Source: Là thông tin file Service tương ứng trên Server.

3.2.Command Chứa các file có nhiệm vụ Execute các hành động dưới client cần phải gọi đến các Service.

3.3.Control Chứa các file có nhiệm vụ nhận các tham số của một hành động và gọi đến comand tương ứng. Với mỗi một control sẽ có một Command đi kèm và chúng được khai báo trong file AppController.as VD: public static const "INSERT_LOCATION_EVENT";

INSERT_LOCATION_EVENT

:

String

=

addCommand( AppController.INSERT_LOCATION_EVENT, InsertLocationCommand ); \\ Khai báo gọi đến Command tương ứng, được thể hiện trong hàm public function AppController()

3.4.Model Chỉ chưa một file duy nhất, AppModelLocator.as nó khai báo toàn bộ biến và hằng sử dụng trong chương trình.

10

Athena JSC – Inbound Flex Builder Config

3.5.View Chứa các file .mxml thể hiện giao diện dưới client.

3.6.VO Chứa các Model tương ứng với các Model trên Server.

3.7.Sơ đồ luồng dữ liệu của một hành động dưới client.

4. Sử dụng Template để Gen Code Bước 1: Lấy 2 file FLEX_C#_MasterDetail.csgen và FLEX_C#_MasterOnly.csgen trên StarTeam về máy. Bước 2: Copy 2 file trên vào thư mục C:\Program Files\MyGeneration\Templates\EntitySpaces\C#\Web (thư mục cài ra của MyGeneration). Bước 3: Khởi tạo MyGeneration chọn Browse Mode.

11

Athena JSC – Inbound Flex Builder Config

Chọn Refresh Template Browser

Bước 4: Chọn FLEX_C#_MasterDetail.csgen cho những bảng cần gen cả View, và FLEX_C#_MasterOnly.csgen cho những bảng không cần gen View.

12

Athena JSC – Inbound Flex Builder Config

Bước 5: Chọn Execute Template

Bước 6: Chọn các tham số để Gen Code.

13

Athena JSC – Inbound Flex Builder Config

Chọn tab Browse --> Chọn View

Chọn OK. Bước 7: Mở thư mục đã gen code

Bước 8: Copy các file vào đúng vị trí trong Project theo đúng hướng dẫn sau:

14

Athena JSC – Inbound Flex Builder Config

• Copy các file trong thư mục App_Code\GridLoader\Services vào trong thư mục App_Code\GridLoader\Services trên Server. • Copy các file trong thư mục App_Code\GridLoader\VO vào trong thư mục App_Code\GridLoader\VO trên Server. • Copy file trong thư mục com\athena\etm\business vào thư mục com\athena\etm\business dưới client. Mở file *.as và copy đoạn khai báo vào trong file Services.mxml

• Copy file trong thư mục com\athena\etm\command vào thư mục com\athena\etm\command dưới client. Mở file *.as và copy đoạn khai báo vào trong file AppController.mxml

• Copy file trong thư mục com\athena\etm\control vào thư mục com\athena\etm\control dưới client.

15

Athena JSC – Inbound Flex Builder Config

• Copy file trong thư mục com\athena\etm\vo vào thư mục com\athena\etm\vo dưới client. Mở file *.as và copy đoạn khai báo vào trong file AppModelLocator.mxml

Trong file *.as còn chứa các đoạn code phục vụ cho việc lập trình trên client. Các đoạn scrip hướng dẫn gọi các hàm trên Server, các đoạn giao diện tương ứng thể hiện gridView trong .mxml VD: Các đoạn Script hướng dẫn gọi các hàm Save,Delete,Load ... trên Server.

16