Advanced Techniques for Ext Designer
1 like1,577 views
1. Ext Designer is a UI builder for Ext JS that allows rapidly arranging and configuring Ext JS components visually. It generates first-class Ext JS components that can be exported and used in an IDE or browser. 2. The Designer workflow involves creating and configuring components and data stores, exporting to disk, importing into an IDE, and implementing business logic and behavior. 3. Advanced configuration techniques in Designer include function-type component configurations, adding plugins, and integrating user extensions, while still leveraging the visual design capabilities of Designer.
Advanced Techniques for Ext Designer
- 2. Advanced Techniques for Ext Designer JARRED NICHOLLS, SENCHA AARON CONRAN, SENCHA
- 3. Agenda
- 4. Agenda Quick Designer Overview Productivity Tips Advanced Component Configuration
- 5. What is Ext Designer? • User Interface Builder for Ext JS • Rapidly arrange and configure Ext JS components visually • Great for quickly prototyping UIs • Generates first-class Ext JS components • So simple, a salesman your grandmother could use it Written in Ext JS, running in an embedded WebKit browser
- 6. Designer Interface Project Component/Store Component Toolbox Active Component Flyout Menu Trees Design Canvas Component Configurations Toggle Design/Code Mode Export/Preview Actions
- 7. Project Workflow 1. Create/Configure 2. Export Project to Disk 3. Import/Open Files in IDE Components and Data Stores 4. Implement Business Logic & Behavior 5. Rinse & Repeat as Necessary
- 8. What do we get?
- 9. Exporting Project Top-level comps are exported Generates two files per Top-level Component - User interface (.ui.js) - Implementation (.js)
- 10. Generated Code UI configuration class (.ui.js) Directly extends Ext JS component Updated on project export Can contain sub-components Never edited directly
- 11. Generated Code Implementation class (.js) Extends UI config class Never overwritten Business logic & behavior Dynamic configurations
- 12. Why is this good? Component-oriented by design Object-oriented by design First-class Ext JS components generated Promotes: 1) Reusability 2) Extensibility 3) Separation of concerns 4) Robustness
- 14. Transform Convert to related components - TextField => TextArea - Column => NumberColumn - Panel => FormPanel Transfers applicable configurations Great for quick changes to UI
- 15. Duplicate Copy a component - All configurations - Be careful of uniqueness (id) Becomes a sibling Great for repetitive components - e.g., Back-to-back ComboBox
- 16. Quick Set Type in values JSON style Great for fast typers Convenient - Filter/Set box focused on cmp. select - Already filtering...
- 17. Promote to Class • Ability to subclass within Designer • Promote child items to top-level components • Top level components are rendered to canvas Work on individual components • Fundamental for Advanced Component Configuration
- 18. Comps can be Top-level arranged and comps are used in the UI exported and still be exported
- 19. Advanced Component Configuration
- 20. UI Design Scope Ext Designer IDE / Browser 80% 20% 0% 100%
- 21. Ext Designer IDE / Browser Create and configure comps Arrange layouts Custom Styling Organize comp hierarchy - Custom resources (CSS, Create data stores and icons, etc.) bindings - Relative paths to resources Preview individual comps - Ext JS themes Preview compiled UI / layout Advanced comp configuration Generate comp and store - Function-type configs classes - Plugins - User Extensions - UX’s et cetera, et cetera
- 23. Example: Grid Column Renderer Make the column top-level (Promote • Drag a grid out onto the canvas to Class) • Promote individual column to a class Add function config to implementation file
- 24. Example: Grid Column Renderer Add function config to implementation file
- 25. Plugins
- 26. Add a Plugin Scenario 1 - Top Level
- 27. Add a Plugin Scenario 1 - Top Level Scenario 2 - Descendant
- 28. User Extensions
- 29. Integrating UX’s Designer cannot currently show nor configure UX components Still need to design UI layouts to account for a UX
- 30. Integrating UX’s Designer cannot currently show nor configure UX components Still need to design UI layouts to account for a UX Add a placeholder component - BoxComponent - TextField or TextArea Assign a ref to the placeholder Replace the component dynamically in implementation file
- 31. Add a User Extension Ext.Component replaceWith override
- 32. Conclusion Any problem in that 20% can be solved w/ implementation. Solving a problem may require advanced Ext JS knowledge, but almost always is a minute task. We can and should reap the benefits of the Designer when applicable. Every version of the Designer will bring more from the IDE and Browser under its own wing, closing the gap further.
- 33. Resources Ext Designer Forums - http://www.sencha.com/forum/forumdisplay.php?50 Learning Center: http://www.sencha.com/learn/Ext_Designer designer.feedback@sencha.com
Editor's Notes
- #4: Advanced Techniques <==> Getting around what Designer can&#x2019;t do at the moment.
- #5: Advanced Techniques <==> Getting around what Designer can&#x2019;t do at the moment.
- #6: Advanced Techniques <==> Getting around what Designer can&#x2019;t do at the moment.
- #7: Real quick itemization of what Designer is and does It&#x2019;s so simple, that it can&#x2019;t do &#x201C;everything&#x201D;. But we can work around that reality and still benefit from what the Designer does give us.
- #11: top level components are exported as javascript classes, but we don&#x2019;t have to sacrifice our UI design in order to break down our component hierarchy into individual classes.
- #12: Sample of exported component
- #13: Sample of exported component
- #20: top level components are exported as javascript classes, but we don&#x2019;t have to sacrifice our UI design in order to break down our component hierarchy into individual classes.
- #22: Designer gets us most of the way there in creating our UIs, but there are some problems that lie outside of the Designer GUI. That doesn&#x2019;t stop us from making full use of the Designer and what it has to offer. As these limitations close up, this dark green will continue to approach that 100% marker. We can overcome any limitation with a little bit of elbow grease.
- #23: Note we&#x2019;re not speaking about issues outside of UI creation (i.e. implementation and behavior) as those issues are (for now) outside of the product&#x2019;s scope and don&#x2019;t apply...as important as they are. Yes, there are more limitations that what&#x2019;s listed...we know. But we&#x2019;re hitting the big ones today and you can apply the same strategy on all others. Designer will evolve and bring more under its umbrella in time.
- #25: Somewhat a contrived example, as TemplateColumns are almost always a better choice. However, this illustrates that we can promote a grid column to an exported class, and then add a function-type config to it in the implementation file.
- #26: Somewhat a contrived example, as TemplateColumns are almost always a better choice. However, this illustrates that we can promote a grid column to an exported class, and then add a function-type config to it in the implementation file.
- #28: scenario 1 - like any other plug-in...just add it to the plugins array config
- #29: scenario 2 - a sub-component won&#x2019;t have a ref until after initComponent, so you can add the plug-in and initialize it in the same step. This is the tricky scenario, but in reality is as simple as calling the private initPlugin method.
- #33: This is a community contributed helper method to handle easily replacing placeholder components in any container. Using the configured ref, you can call replaceWith on the placeholder in initComponent and swap it with the UX you wish to load. Simple and elegant workaround.
- #35: More info on the Designer, and where to seek help.