22
RIA & FLEX & Red5 Daniel Hu Daniel Hu 2006-11-30 2006-11-30

RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

Embed Size (px)

Citation preview

Page 1: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

RIA & FLEX & Red5 Daniel HuDaniel Hu

2006-11-302006-11-30

Page 2: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

AgendaAgenda

What’s RIAWhat’s RIA What’s FlexWhat’s Flex Flex BuilderFlex Builder Architecture of Flex ApplicationArchitecture of Flex Application RED5RED5

Page 3: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

What’s RIAWhat’s RIA

Rich Internet Application ( 富互联网应用系统 )

结合桌面应用程序与网络的优点 RIA 是一种在因特网上运行的应用程序,

有着如同桌面应用程序的行为、功能、快速响应、直觉与体验,也融合了因特网应用程序的容易开发的与低成本的特性

Page 4: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

Traditional Architecture JSP uses Custom Tags and JavaBeans to

render dynamic content as HTML, which is displayed in the browser.

JavaScript is used for presentation components, field validation, and other client-side processing.

Session state is maintained on the client with HTTP cookies or HTML hidden fields.

Typically designed to support linear, form-based, request-response processes:–Users navigate through a series of screens.–To display each screen, the server processes a request andrenders an interface for the browser to display.

Page 5: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

Problems With the HTML Approach

Browser compatibility issues Frequent trips to the server High dependency on the network Interfaces are typically not cached on

the client Usability limitations Duplicate form submissions Users pressing forward/back buttons,

book-marking internal pages, closing the browser window, etc..

Page 6: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

Rich Internet Applications

Support complex user interaction–Not constrained by the limitations of HTML–Advanced components/widgets – drag/drop, expand/collapse–Multimedia content – sound, video

Intelligent client-side validation and processing Bandwidth efficient

–Store data and manage sessions on the client–Presentation can be cached–Allows for partially-connected applications

Platform and browser independent

Page 7: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

RIARIA 不只是变漂亮不只是变漂亮 呈现更多的细节呈现更多的细节 (Visual detail)(Visual detail) 快速响应快速响应 无接缝无接缝 (client-server(client-server 之间的互动使用者之间的互动使用者看不到看不到 ))

完全的控制完全的控制 GUIGUI 的功能的功能 维持维持Web appWeb app 低发布费用但又拥有低发布费用但又拥有 LocaLoca

l APl AP 的优势的优势

Page 8: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

What’s FlexWhat’s Flex

Flex 是一种表现层的解决方案 快速开发,专为 IT 人员设计 (MXML+AC

TIONSCRIPT) 即时发布,即时生成,无须 Flash 设计师

参与

…………

Page 9: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

Flex Presentation TierFlex Presentation Tier

J2EE/CF/.NETApplication Server

Flex Presentation Server

Flex Runtime Services

Flex Application Framework

MXML ActionScript

Flex Class Library

Page 10: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

MXMLMXML

MXML MXML 是用于为 是用于为 Adobe® Flex™ Adobe® Flex™ 应用程应用程序进行用户界面组件布局的 序进行用户界面组件布局的 XML XML 语言。 语言。 您还使用 您还使用 MXML MXML 来显式定义应用程序的来显式定义应用程序的非可视方面非可视方面 , , 例如访问服务器端数据源和例如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。用户界面组件与数据源之间的数据绑定。

<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?> <mx:Application <mx:Application

xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="center">horizontalAlign="center" verticalAlign="center"> <mx:Button id="myButton" label="I'm a button!" /> <mx:Button id="myButton" label="I'm a button!" />

</mx:Application></mx:Application>

Page 11: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

Features of ActionScript Features of ActionScript 3.03.0

ActionScript 3.0 consists of two parts: ActionScript 3.0 consists of two parts: Core language :Core language :

The core language defines the basic building blocks The core language defines the basic building blocks of the programming language, such as statements, of the programming language, such as statements, expressions, conditions, loops, and types.expressions, conditions, loops, and types.

Flash Player API :Flash Player API : The flash player api sis made up of classes that repreThe flash player api sis made up of classes that repre

sent and provide access to Flash Player–specific funsent and provide access to Flash Player–specific functionalityctionality

Page 12: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

Features of ActionScript Features of ActionScript 3.0 3.0

ActionScript 3.0 is based on ActionScript 3.0 is based on ECMAScript, the international ECMAScript, the international standardized programming language standardized programming language for scripting. ActionScript 3.0 is for scripting. ActionScript 3.0 is compliant with the ECMAScript compliant with the ECMAScript Language Specification, Third Edition (Language Specification, Third Edition (ECMA-262ECMA-262). It also contains ). It also contains functionality based on ongoing work on functionality based on ongoing work on ECMAScript Edition 4, occurring within ECMAScript Edition 4, occurring within the ECMA standards body.the ECMA standards body.

Page 13: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

Architecture of Flash Architecture of Flash ApplicationApplicationFlash Media

Server /Red 5 WEB Server

Database ServerLDAP Server

End UserEnd User

Page 14: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

Sends SWF

Web ServerClient

Flash Media Server

RED 5

HTTP

Plays SWF usingFlash Player

RTMP

Sends/receives data Stream

Page 15: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

RED 5RED 5

Red5 is an Open Source Flash Server written Red5 is an Open Source Flash Server written in Java that supports:in Java that supports:

Streaming Audio/Video (FLV and MP3) Streaming Audio/Video (FLV and MP3) Recording Client Streams (FLV only) Recording Client Streams (FLV only) Shared ObjectsShared Objects Live Stream PublishingLive Stream Publishing RemotingRemoting

0.6 rc1 released on 30/10/06 0.6 rc1 released on 30/10/06

Page 16: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

RED5RED5

AMF0/AMF3AMF0/AMF3 MINAMINA

Page 17: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

AMF0/AMF3AMF0/AMF3

AMFAMF 是专为是专为 ActionScriptActionScript 对象设计的信对象设计的信息编码格式,它采用二进制格式,用于向息编码格式,它采用二进制格式,用于向远程服务发送和接受信息远程服务发送和接受信息

Page 18: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

MINAMINA

Apache MINA (Multipurpose Apache MINA (Multipurpose Infrastructure for Network Infrastructure for Network Applications) is a network Applications) is a network application framework which helps application framework which helps users develop high performance and users develop high performance and high scalability network applications high scalability network applications easily.easily.

Page 19: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

RED5 & MINARED5 & MINA

RED5 RED5 通过通过 MINAMINA 的的 FilterChainFilterChain 式结构式结构来加载来加载 FilterFilter ,使得很多非通讯核心问题,使得很多非通讯核心问题得以从基础件中剥离出来 得以从基础件中剥离出来

Page 20: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

RED5 & MINARED5 & MINA

Audio Data Video Data Invoke

Handler

Byte

MINA 通讯框架

Decode filter Encode filter

Page 21: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

ResourcesResources

ftp://ftp.cybernaut.com.cn/flexbuilderftp://ftp.cybernaut.com.cn/flexbuilder//

Page 22: RIA & FLEX & Red5 Daniel Hu 2006-11-30. Agenda What’s RIA What’s RIA What’s Flex What’s Flex Flex Builder Flex Builder Architecture of Flex Application

Questions Thanks for coming