* Bild austauschen

                                                   * fehlende
                                        ...
Development of the TYPO3 Phoenix
                   User Interface with Ext JS
                                         01...
Christopher Hlubek                            Nils Dehl




                               twitter: hlubek                ...
Agenda
                            Introduction

                            Challenges of implementing the TYPO3 Phoenix ...
Introduction




                                                                                   Inspiring people to
  ...
Dienstag, 5. Oktober 2010
Dienstag, 5. Oktober 2010
Challenges
                             of implementing the TYPO3
                                     Phoenix UI



     ...
1                 Smooth workflow &
                                              rich user experience
                    ...
Traditional web interface

                    Web > Page                       Web > List                    Web > Previe...
Phoenix user interface


                                                    Web > List
                                  ...
Single page workflow

                            Load everything at once
                            Intelligent initializ...
2                 Extensibility

                     Development of the TYPO3 Phoenix User Interface with Ext JS   Inspir...
Insert section
         Insert menu item
                                             Add column




Dienstag, 5. Oktober ...
Add form field
                                                         Change input
                                      ...
1s
                     Extensibility




                                                                                ...
3         Development with many
                                      (unknown) people
                            Consist...
4          Robust API
                                       (safe and maintainable)

                            Using it...
Choosing Ext JS




                                                                                   Inspiring people to...
Dienstag, 5. Oktober 2010
Dienstag, 5. Oktober 2010
ExtJS
                            very rich component library

                            cross-browser compatible

     ...
Ext Direct

                                                                         Controller
                          ...
The Phoenix JS UI architecture




                                                                                   Insp...
JavaScript UI architecture
                                                        Base UI

                              ...
JavaScript UI concepts

                                                           Configuration

                         ...
Creating Modules
                      Application.createModule(‘F3...SomeModule‘, {
                        configure: fun...
Initialization




Dienstag, 5. Oktober 2010
Initialization order




                                                ?
                            Module 2           ...
Dienstag, 5. Oktober 2010
Application initialization
           create
           Module                                                            ...
Initialization process

                                             Module A                                             ...
Configuration




Dienstag, 5. Oktober 2010
Registry
                     menu
                            main
                               content
               ...
Registry                             registry.set(
                                                                       ...
Registry                             registry.set(
                                                                       ...
Registry                             registry.set(
                                                                       ...
Registry
                            Order independent configuration

                            Needs compilation after

...
Next Steps
                            Refine the API

                            Implement more features

               ...
We need you!




                                                                                   Inspiring people to
  ...
????
                                                         ??
                                                         ...
inspiring people to share.


Dienstag, 5. Oktober 2010
Upcoming SlideShare
Loading in …5
×

Development of the TYPO3 Phoenix User Interface with Ext JS

5,029 views

Published on

The upcoming TYPO3 version 5.0 - codename Phoenix - will be a revolution. Not only on the server-side there will be fundamental changes in the way of programming the system and its extensions also the backend interface will feature many revolutionary ideas of working with a content management system. The implementation of the user interface needs to address these new concepts and allow for a flexible yet robust architecture.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,029
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Development of the TYPO3 Phoenix User Interface with Ext JS

  1. * 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
  2. 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
  3. 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
  4. 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
  5. Introduction Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010
  6. Dienstag, 5. Oktober 2010
  7. Dienstag, 5. Oktober 2010
  8. 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
  9. 1 Smooth workflow & rich user experience Development of the TYPO3 Phoenix User Interface with Ext JS Inspiring people to share Dienstag, 5. Oktober 2010
  10. 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
  11. 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
  12. Single page workflow 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
  13. 2 Extensibility Development of the TYPO3 Phoenix User Interface with Ext JS Inspiring people to share Dienstag, 5. Oktober 2010
  14. Insert section Insert menu item Add column Dienstag, 5. Oktober 2010
  15. Add form field Change input type Add dialog Dienstag, 5. Oktober 2010
  16. 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
  17. 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
  18. 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
  19. Choosing Ext JS Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010
  20. Dienstag, 5. Oktober 2010
  21. Dienstag, 5. Oktober 2010
  22. 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
  23. 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
  24. The Phoenix JS UI architecture Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010
  25. JavaScript UI architecture Base UI Base Components Initialization Configuration 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
  26. JavaScript UI concepts Configuration Initialization Module Helper API Event container Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010
  27. Creating Modules Application.createModule(‘F3...SomeModule‘, { configure: 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
  28. Initialization Dienstag, 5. Oktober 2010
  29. 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
  30. Dienstag, 5. Oktober 2010
  31. Application initialization create Module addContent initialize for every Module: for every Module: configure() 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
  32. Initialization process Module A Module B afterInitialization ... afterInitialization ... register events register events afterBootstrap afterBootstrap configure() configure() initialize() Application initialize() Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010
  33. Configuration Dienstag, 5. Oktober 2010
  34. Registry menu main content title "Content" Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010
  35. 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
  36. 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
  37. 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
  38. Registry Order independent configuration Needs compilation after Create any JSON structure Menus Form definitions Grid columns ... Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010
  39. Next Steps Refine 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
  40. We need you! Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010
  41. ???? ?? ?? ? ?? ? ? Inspiring people to Development of the TYPO3 Phoenix User Interface with Ext JS share Dienstag, 5. Oktober 2010
  42. inspiring people to share. Dienstag, 5. Oktober 2010

×