Development of the TYPO3 Phoenix User Interface with Ext JS

Inspiring people toshareInspiring people toshareDevelopment of the TYPO3 Phoenix User Interface with Ext JS

T3CON10

* Bild austauschen

* fehlende Bildverweise ersetzen

Dienstag, 5. Oktober 2010

http://t3con10-frankfurt.typo3.org/sessions/speaker/paper-detail-view/?tx_ptconfmgm_controller_detail_paper%5Buid%5D=132&tx_ptconfmgm_controller_detail_paper%5Bpid%5D=323


Development of the TYPO3 Phoenix User Interface with Ext JS

Nils Dehl <[email protected]>Christopher Hlubek <[email protected]>

01.10.2010






mailto:[email protected]




Inspiring people toshareDevelopment of the TYPO3 Phoenix User Interface with Ext JS

Christopher Hlubek Nils Dehl

twitter: nilsdehltwitter: hlubek



AgendaIntroduction

Challenges of implementing the TYPO3 Phoenix UI

Choosing Ext JS

The Phoenix JS UI architecture

Next steps

Questions



Introduction



Challengesof implementing the TYPO3

Phoenix UI



Smooth workflow &rich user experience1



Traditional web interface

Web > Page Web > List Web > Preview

Page load

WorkspaceTemplate



Phoenix user interface

Web > PageWeb > List

Web > Preview

Page load

WorkspaceTemplate

Single page



Single page workflow

Load everything at once

Intelligent initialization

Manage browser history



Extensibility2Dienstag, 5. Oktober 2010

Insert menu item

Insert section

Add column


Add dialog

Add form fieldChange input

type



Extensibility

Extend everything

Don‘t worry about extensibility

Easy API

1st level concept



Development with many (unknown) people

Consistency

Intuitive concepts

Simple vs. Flexible

3



Robust API(safe and maintainable)

Using it right should be simple

Good documentation

Stable vs. Extensible

4



Choosing Ext JS



ExtJSvery rich component library

cross-browser compatible

great component model

many nice abstractions, f.e. Data Stores

uses Layout Managers

easy to extend



Ext Direct

ControllerAction

Client

Server

ControllerActionRPC



The Phoenix JS UI architecture



JavaScript UI architecture

Initialization Configuration

Base Components

Base UI

I18NSchema

informationSecurity

ACLs

ExtDirectServices



JavaScript UI concepts

ModuleInitialization

Helper API

Event container

Configuration



Creating ModulesApplication.createModule(‘F3...SomeModule‘, {configure: function(registry) {

registry.set(‘form/type/...‘, ‘value‘);},initialize: function(application) {

application.afterInitializationOf(‘F3...SomeModule‘,function(someModule) { ... }

);}

});


Initialization



Module 3Module 2

Module 1

t

Initialization order

Module 4?Dienstag, 5. Oktober 2010


Application initialization

for

ever

y M

odul

e:

init

ializ

e()

DOM onReady afterInitializationOfUserInterfaceModule

addContentArea

...

t

createModule

createModule

createModule

Application.afterBootstrap

initialize viewport

...for

ever

y M

odul

e:

confi

gure

()



Initialization process

Application

Module A Module B

confi

gure

()

confi

gure

()

regi

ster

eve

nts

regi

ster

eve

nts

afte

rBoo

tstr

ap

afte

rBoo

tstr

ap

initi

aliz

e()

initi

aliz

e()

afte

rIni

tializ

atio

n ...

afte

rIni

tializ

atio

n ...


Configuration



Registry

menu

main

content

title "Content"



Registry

menu

main

content

title "Content"

registry.set('menu/main[]/content/title','Welcome'

)

"Welcome"



Registry

menu

main

content

title "Content"


)

"Welcome"

registry.append('menu/main[]', 'management',{title: 'Mgmt'}

)

management

title "Mgmt"



Registry

menu

main

content

title "Content"


)

"Welcome"registry.append(

'menu/main[]', 'management',{title: 'Mgmt'}

)

management

title "Mgmt"

registry.set('menu/main[]/management/title', 'Manage'

)

"Manage"



RegistryOrder independent configuration

Needs compilation after

Create any JSON structure

Menus

Form definitions

Grid columns

...



Next StepsRefine the API

Implement more features

Create lots of custom components

Implement the new design

And for that...



We need you!



?????????????


inspiring people to share.


Development of the TYPO3 Phoenix User Interface with Ext JS

Technology

Transcript of Development of the TYPO3 Phoenix User Interface with Ext JS