Development of the TYPO3 Phoenix User Interface with Ext JS

* Bild austauschen * fehlende Bildver weise ersetzen T3CON10 Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Development of the TYPO3 Phoenix User Interface with Ext JS 01.10.2010 Nils Dehl <nils.dehl@dkd.de> Christopher Hlubek <hlubek@networkteam.com> Dienstag, 5. Oktober 2010

Christopher Hlubek Nils Dehl twitter: hlubek twitter: nilsdehl Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Agenda Introduction Challenges of implementing the TYPO3 Phoenix UI Choosing Ext JS The Phoenix JS UI architecture Next steps Questions Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Introduction Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Dienstag, 5. Oktober 2010

Challenges of implementing the TYPO3 Phoenix UI Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

1 Smooth workﬂow & rich user experience Development of the TYPO3 Phoenix User Interface with Ext JS Inspiring people to share Dienstag, 5. Oktober 2010

Traditional web interface Web > Page Web > List Web > Preview Template Workspace Page load Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Phoenix user interface Web > List Web Template > Page Workspace Web > Preview Single page Page load Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Single page workﬂow Load everything at once Intelligent initialization Manage browser history Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

2 Extensibility Development of the TYPO3 Phoenix User Interface with Ext JS Inspiring people to share Dienstag, 5. Oktober 2010

Insert section Insert menu item Add column Dienstag, 5. Oktober 2010

Add form ﬁeld Change input type Add dialog Dienstag, 5. Oktober 2010

1s Extensibility tl ev el co n ce Extend everything p t Don‘t worry about extensibility Easy API Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

3 Development with many (unknown) people Consistency Intuitive concepts Simple vs. Flexible Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

4 Robust API (safe and maintainable) Using it right should be simple Good documentation Stable vs. Extensible Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Choosing Ext JS Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

ExtJS very rich component library cross-browser compatible great component model many nice abstractions, f.e. Data Stores uses Layout Managers easy to extend Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Ext Direct Controller RPC Action Client Controller Action Server Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

The Phoenix JS UI architecture Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

JavaScript UI architecture Base UI Base Components Initialization Conﬁguration ExtDirect Schema Security Services I18N information ACLs Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

JavaScript UI concepts Conﬁguration Initialization Module Helper API Event container Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Creating Modules Application.createModule(‘F3...SomeModule‘, { conﬁgure: function(registry) { registry.set(‘form/type/...‘, ‘value‘); }, initialize: function(application) { application.afterInitializationOf(‘F3...SomeModule‘, function(someModule) { ... } ); } }); Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Initialization Dienstag, 5. Oktober 2010

Initialization order ? Module 2 Module 3 Module 4 Module 1 t Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Application initialization create Module addContent initialize for every Module: for every Module: conﬁgure() initialize() Area viewport create Module create ... ... Module afterInitializationOf Application. DOM onReady UserInterfaceModule afterBootstrap t Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Initialization process Module A Module B afterInitialization ... afterInitialization ... register events register events afterBootstrap afterBootstrap conﬁgure() conﬁgure() initialize() Application initialize() Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Conﬁguration Dienstag, 5. Oktober 2010

Registry menu main content title "Content" Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Registry registry.set( 'menu/main[]/content/title', menu 'Welcome' ) main content title "Welcome" "Content" Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Registry registry.set( 'menu/main[]/content/title', menu 'Welcome' ) main registry.append( 'menu/main[]', 'management', content {title: 'Mgmt'} ) title "Welcome" "Content" management title "Mgmt" Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Registry registry.set( 'menu/main[]/content/title', menu 'Welcome' ) main registry.set( 'menu/main[]/management/ content title', 'Manage' ) title "Welcome" "Content" registry.append( 'menu/main[]', 'management', management {title: 'Mgmt'} ) title "Mgmt" "Manage" Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Registry Order independent conﬁguration Needs compilation after Create any JSON structure Menus Form deﬁnitions Grid columns ... Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

Next Steps Reﬁne the API Implement more features Create lots of custom components Implement the new design And for that... Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

We need you! Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

???? ?? ?? ? ?? ? ? Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010

inspiring people to share. Dienstag, 5. Oktober 2010

Development of the TYPO3 Phoenix User Interface with Ext JS

by Nils Dehl

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

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