11 building joomla! extensions with flex integration

22
Xây dựng Joomla! Xây dựng Joomla! extensions tích extensions tích hợp Adobe Flex hợp Adobe Flex Created by: Bravebits Ltd Created by: Bravebits Ltd

Upload: nguyen-duc-phu

Post on 29-Jun-2015

895 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: 11 building joomla! extensions with flex integration

Xây dựng Joomla! Xây dựng Joomla! extensions tích hợp extensions tích hợp

Adobe FlexAdobe FlexCreated by: Bravebits LtdCreated by: Bravebits Ltd

Page 2: 11 building joomla! extensions with flex integration

GiớiGiới thiệuthiệu JoomlaJoomla CMS CMS vàvà hướnghướng dẫndẫn xâyxây dựngdựng JoomlaJoomla extensions extensions

NângNâng caocao tínhtính thânthân thiệnthiện bằngbằng cáchcách tíchtích hợphợp Adobe Flex Adobe Flex vàovào JoomlaJoomla Extension Extension

Source code Source code vàvà Demo Demo sửsử dụngdụng JSN JSN ImageShowImageShow extension extension

HỏiHỏi & & đápđáp

Khái quátKhái quát

Page 3: 11 building joomla! extensions with flex integration

Giới thiệu Joomla CMS và Giới thiệu Joomla CMS và hướng dẫn xây dựng Joomla hướng dẫn xây dựng Joomla

extensionsextensions

Page 4: 11 building joomla! extensions with flex integration

Joomla CMSJoomla CMS

Joomla là một Open Source CMS Joomla là một Open Source CMS Viết bằng ngôn ngữ PHP và kết nối Viết bằng ngôn ngữ PHP và kết nối

tới database MySQL tới database MySQL Một trong 3 open source CMS phổ Một trong 3 open source CMS phổ

biến nhất: Wordpress, Joomla, Drupalbiến nhất: Wordpress, Joomla, Drupal Đã có 22 triệu lượt download (Số liệu Đã có 22 triệu lượt download (Số liệu

12/2010).12/2010). Hơn 6000 extension trên JED (Joomla Hơn 6000 extension trên JED (Joomla

Extension Directory).Extension Directory).

Page 5: 11 building joomla! extensions with flex integration

Requirements for Joomla Requirements for Joomla 1.5.x1.5.x

Page 6: 11 building joomla! extensions with flex integration

Joomla ExtensionJoomla Extension

Để tùy biến hoặc bổ sung tính năng Để tùy biến hoặc bổ sung tính năng cho Joomla, cần cài đặt thêm các cho Joomla, cần cài đặt thêm các ExtensionExtension

Các loại extension của JoomlaCác loại extension của Joomla ComponentsComponents ModulesModules PluginsPlugins TemplatesTemplates Language packLanguage pack

Page 7: 11 building joomla! extensions with flex integration

MVC trên Joomla MVC trên Joomla componentcomponent

Trong Joomla, Trong Joomla, mô hình MVC mô hình MVC được hỗ trợ được hỗ trợ thông qua 3 lớp thông qua 3 lớp JModel, JView và JModel, JView và Jcontroller. Jcontroller.

Page 8: 11 building joomla! extensions with flex integration

MVC folder structure in MVC folder structure in ComponentComponent

Simple Component Simple Component Complex Component Complex Component

Page 9: 11 building joomla! extensions with flex integration

Nâng cao tính thân thiện Nâng cao tính thân thiện bằng cách tích hợp Adobe bằng cách tích hợp Adobe Flex vào Joomla ExtensionFlex vào Joomla Extension

Page 10: 11 building joomla! extensions with flex integration

Giới thiệu về RIA và Flex Giới thiệu về RIA và Flex Rich Internet applications (RIA) là các ứng dụng Rich Internet applications (RIA) là các ứng dụng

trên web có đầy đủ các tính năng đặc trưng của trên web có đầy đủ các tính năng đặc trưng của các ứng dụng desktop truyền thống. Các RIA sẽ các ứng dụng desktop truyền thống. Các RIA sẽ chuyển các quá trình xử lý dữ liệu từ giao diện chuyển các quá trình xử lý dữ liệu từ giao diện người dùng tới các Web client nhưng chúng sẽ giữ người dùng tới các Web client nhưng chúng sẽ giữ lại các dữ liệu trên máy chủ ứng dụng (application lại các dữ liệu trên máy chủ ứng dụng (application server)server)

Flex (Adobe Flex) là công nghệ mới của hãng Flex (Adobe Flex) là công nghệ mới của hãng Adobe cung cấp công nghệ phát triển RIA chuyên Adobe cung cấp công nghệ phát triển RIA chuyên nghiệp.  Flex dựa trên Flash, dùng ngôn ngữ khai nghiệp.  Flex dựa trên Flash, dùng ngôn ngữ khai báo MXML dựa trên XML kết hợp với ActionScript, báo MXML dựa trên XML kết hợp với ActionScript, cung cấp sự tách biệt giữa phần giao diện người cung cấp sự tách biệt giữa phần giao diện người dùng và phần luận lý ứng dụng rõ ràng hơn so dùng và phần luận lý ứng dụng rõ ràng hơn so Flash. Flash.

Page 11: 11 building joomla! extensions with flex integration

Nâng cao tính thân thiện Nâng cao tính thân thiện qua Flexqua Flex

Usability: Tính thân thiện người dùngUsability: Tính thân thiện người dùng Ưu điểm của Flex:Ưu điểm của Flex:

Hỗ trợ trên các browser và platformHỗ trợ trên các browser và platform   Tương tác với thông tin động không cần Tương tác với thông tin động không cần

load lại trangload lại trang Hỗ trợ thiết kế giao diện người dùng với Hỗ trợ thiết kế giao diện người dùng với

tính tương tác caotính tương tác cao Thời gian phát triển nhanhThời gian phát triển nhanh

Page 12: 11 building joomla! extensions with flex integration

Các phương thức tích hợp PHP và Các phương thức tích hợp PHP và FlexFlex

Flex client có thể kết nối với Server side bằng 2 phương Flex client có thể kết nối với Server side bằng 2 phương thức: HTTP và Sockets thức: HTTP và Sockets

Kết nối thông qua Sockets không phù hợp với JoomlaKết nối thông qua Sockets không phù hợp với Joomla Kết nối HTTP:Kết nối HTTP:

Sử dụng HTTPService component để send request ( POST hoặc Sử dụng HTTPService component để send request ( POST hoặc GET) đến server. Dữ liệu trả về có định dạng là XML hoặc JSON.GET) đến server. Dữ liệu trả về có định dạng là XML hoặc JSON.

FFlex sử dụng WebService components để kết nối với server lex sử dụng WebService components để kết nối với server thông qua webservice của server. Flex web service API hỗ trợ thông qua webservice của server. Flex web service API hỗ trợ format: SOAP 1.1, XML Schema 1.0, WSDL 1.1 document-format: SOAP 1.1, XML Schema 1.0, WSDL 1.1 document-literal. literal.

Remoting( or RPC)Remoting( or RPC) :Flex client sẽ gửi một request message :Flex client sẽ gửi một request message tới server để thực thi một function trên server. Sau khi thực thi tới server để thực thi một function trên server. Sau khi thực thi xong thì server sẽ trả kết quả về để Flex client tiếp tục xử xong thì server sẽ trả kết quả về để Flex client tiếp tục xử lý.Flex sử dụng RemoteObject component kết hợp với third-lý.Flex sử dụng RemoteObject component kết hợp với third-party software(AmfPhp, WebOrb, Zenamf, BlazeDS ) để party software(AmfPhp, WebOrb, Zenamf, BlazeDS ) để community với PHP community với PHP

Page 13: 11 building joomla! extensions with flex integration

Giới thiệu về JSONGiới thiệu về JSON Viết tắt của JavaScript Object Notation. Là Viết tắt của JavaScript Object Notation. Là

một chuẩn để định dạng dữ liệu, tương tự một chuẩn để định dạng dữ liệu, tương tự XML YAML…. XML YAML….

JSON chính là cách biểu diễn một đối JSON chính là cách biểu diễn một đối tượng của JavaScript và ActionScript.tượng của JavaScript và ActionScript.

Khi sử dụng JSON với JavaScript hay Khi sử dụng JSON với JavaScript hay ActionScript, có thể truy vấn trực tiếp giá ActionScript, có thể truy vấn trực tiếp giá trị theo tên (khóa) được định nghĩa trong trị theo tên (khóa) được định nghĩa trong JSON.JSON.

Dữ liệu JSON gọn nhẹ hơn vì không yêu Dữ liệu JSON gọn nhẹ hơn vì không yêu cầu nhiều thẻ như XML.cầu nhiều thẻ như XML.

Page 14: 11 building joomla! extensions with flex integration

Sử dụng JSON cho Joomla Sử dụng JSON cho Joomla và Flexvà Flex

Flex trực tiếp call đến Joomla Flex trực tiếp call đến Joomla ComponentComponent

Joomla Component trả về dữ liệu dưới Joomla Component trả về dữ liệu dưới dạng JSONdạng JSON

Flex phân tích dữ liệu và hiển thị trên Flex phân tích dữ liệu và hiển thị trên InterfaceInterface

Page 15: 11 building joomla! extensions with flex integration

Joomla Extension tích Joomla Extension tích hợp Flexhợp Flex

Page 16: 11 building joomla! extensions with flex integration

Source code và Demo sử Source code và Demo sử dụng JSN ImageShow dụng JSN ImageShow

extensionextension

Page 17: 11 building joomla! extensions with flex integration

Giới thiệu JSN Giới thiệu JSN ImageShowImageShow

Là một JSN Extension có chức năng Là một JSN Extension có chức năng quản lý và trình diễn ảnh quản lý và trình diễn ảnh

Sử dụng Flash để slide ảnhSử dụng Flash để slide ảnh Kết nối được với nhiều image sourceKết nối được với nhiều image source Cung cấp nhiều hiệu ứng hình ảnh Cung cấp nhiều hiệu ứng hình ảnh

đẹp mắtđẹp mắt Dễ sử dụng, cho phép back up và Dễ sử dụng, cho phép back up và

restore dữ liệu.restore dữ liệu.

Page 18: 11 building joomla! extensions with flex integration

PHP function giao tiếp với PHP function giao tiếp với FlexFlex

PHP function:PHP function:

(load hình ảnh từ một showlist)(load hình ảnh từ một showlist)

Page 19: 11 building joomla! extensions with flex integration

JSON kết quả từ PHPJSON kết quả từ PHP

Page 20: 11 building joomla! extensions with flex integration

Flex sử dụng chuỗi JSONFlex sử dụng chuỗi JSON

Page 21: 11 building joomla! extensions with flex integration

Hỏi & ĐápHỏi & Đáp

Page 22: 11 building joomla! extensions with flex integration

THANK YOU!THANK YOU!