0
Advanced Techniques
  for Ext Designer

    JARRED NICHOLLS, SENCHA
     AARON CONRAN, SENCHA
Agenda
Agenda
     Quick Designer Overview
         Productivity Tips
Advanced Component Configuration
What is Ext Designer?
• User Interface Builder for Ext JS
• Rapidly arrange and configure Ext JS components visually
• Grea...
Designer Interface
                                                                    Project Component/Store
Component T...
Project Workflow


1. Create/Configure      2. Export Project to Disk
                                                      ...
What do we get?
Exporting Project

     Top-level
     comps are
      exported



Generates two files per Top-level Component
           -...
Generated Code
      UI configuration class (.ui.js)
      Directly extends Ext JS
      component
      Updated on project...
Generated Code
      Implementation class (.js)
      Extends UI config class
      Never overwritten
      Business logic ...
Why is this good?
Component-oriented by design
Object-oriented by design
First-class Ext JS components generated


Promote...
Power User Features
Transform
Convert to related components
 - TextField => TextArea
 - Column => NumberColumn
 - Panel => FormPanel
Transfers...
Duplicate
Copy a component
  - All configurations
  - Be careful of uniqueness
(id)
Becomes a sibling

Great for repetitive...
Quick Set
Type in values
JSON style
Great for fast typers
Convenient
  - Filter/Set box focused on cmp.
select
  - Already...
Promote to Class
• Ability to subclass within Designer
• Promote child items to top-level
components

• Top level componen...
Comps can be
Top-level   arranged and
comps are   used in the UI
 exported    and still be
              exported
Advanced Component
   Configuration
UI Design Scope
       Ext Designer    IDE / Browser




                 80%               20%




0%                    ...
Ext Designer                   IDE / Browser
Create and configure comps
Arrange layouts                Custom Styling
Organ...
Function-type
Configurations
Example: Grid Column Renderer
Make the column top-level (Promote
• Drag a grid out onto the canvas
to Class)
• Promote ind...
Example: Grid Column Renderer

Add function config to implementation file
Plugins
Add a Plugin
Scenario 1 - Top Level
Add a Plugin
 Scenario 1 - Top Level




Scenario 2 - Descendant
User Extensions
Integrating UX’s
Designer cannot currently show nor configure UX
components
Still need to design UI layouts to account for ...
Integrating UX’s
Designer cannot currently show nor configure UX
components
Still need to design UI layouts to account for ...
Add a User Extension




Ext.Component
replaceWith override
Conclusion
Any problem in that 20% can be solved w/ implementation.

Solving a problem may require advanced Ext JS knowled...
Resources

Ext Designer Forums - http://www.sencha.com/forum/forumdisplay.php?50

Learning Center: http://www.sencha.com/l...
Advanced Techniques for Ext Designer
Upcoming SlideShare
Loading in...5
×

Advanced Techniques for Ext Designer

4,946

Published on

Designer enables developers and non-developers alike to rapidly prototype their UI and Data Stores. In this session, learn how to best utilize and integrate the Ext Designer with your project. Discover the features and advanced techniques of the Ext Designer that promote reusable component-oriented development across all of your projects. We'll also show you Designer working with Sencha Touch projects.

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

No Downloads
Views
Total Views
4,946
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
205
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide


  • Advanced Techniques <==> Getting around what Designer can’t do at the moment.
  • Advanced Techniques <==> Getting around what Designer can’t do at the moment.
  • Advanced Techniques <==> Getting around what Designer can’t do at the moment.
  • Real quick itemization of what Designer is and does

    It’s so simple, that it can’t do “everything”. But we can work around that reality and still benefit from what the Designer does give us.



  • top level components are exported as javascript classes, but we don’t have to sacrifice our UI design in order to break down our component hierarchy into individual classes.
  • Sample of exported component
  • Sample of exported component






  • top level components are exported as javascript classes, but we don’t have to sacrifice our UI design in order to break down our component hierarchy into individual classes.

  • 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’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.
  • Note we’re not speaking about issues outside of UI creation (i.e. implementation and behavior) as those issues are (for now) outside of the product’s scope and don’t apply...as important as they are.

    Yes, there are more limitations that what’s listed...we know. But we’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.

  • 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.
  • 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.

  • scenario 1 - like any other plug-in...just add it to the plugins array config
  • scenario 2 - a sub-component won’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.



  • 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.

  • More info on the Designer, and where to seek help.
  • Transcript of "Advanced Techniques for Ext Designer"

    1. 1. Advanced Techniques for Ext Designer JARRED NICHOLLS, SENCHA AARON CONRAN, SENCHA
    2. 2. Agenda
    3. 3. Agenda Quick Designer Overview Productivity Tips Advanced Component Configuration
    4. 4. 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
    5. 5. Designer Interface Project Component/Store Component Toolbox Active Component Flyout Menu Trees Design Canvas Component Configurations Toggle Design/Code Mode Export/Preview Actions
    6. 6. 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
    7. 7. What do we get?
    8. 8. Exporting Project Top-level comps are exported Generates two files per Top-level Component - User interface (.ui.js) - Implementation (.js)
    9. 9. Generated Code UI configuration class (.ui.js) Directly extends Ext JS component Updated on project export Can contain sub-components Never edited directly
    10. 10. Generated Code Implementation class (.js) Extends UI config class Never overwritten Business logic & behavior Dynamic configurations
    11. 11. 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
    12. 12. Power User Features
    13. 13. Transform Convert to related components - TextField => TextArea - Column => NumberColumn - Panel => FormPanel Transfers applicable configurations Great for quick changes to UI
    14. 14. Duplicate Copy a component - All configurations - Be careful of uniqueness (id) Becomes a sibling Great for repetitive components - e.g., Back-to-back ComboBox
    15. 15. Quick Set Type in values JSON style Great for fast typers Convenient - Filter/Set box focused on cmp. select - Already filtering...
    16. 16. 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
    17. 17. Comps can be Top-level arranged and comps are used in the UI exported and still be exported
    18. 18. Advanced Component Configuration
    19. 19. UI Design Scope Ext Designer IDE / Browser 80% 20% 0% 100%
    20. 20. 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
    21. 21. Function-type Configurations
    22. 22. 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
    23. 23. Example: Grid Column Renderer Add function config to implementation file
    24. 24. Plugins
    25. 25. Add a Plugin Scenario 1 - Top Level
    26. 26. Add a Plugin Scenario 1 - Top Level Scenario 2 - Descendant
    27. 27. User Extensions
    28. 28. Integrating UX’s Designer cannot currently show nor configure UX components Still need to design UI layouts to account for a UX
    29. 29. 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
    30. 30. Add a User Extension Ext.Component replaceWith override
    31. 31. 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.
    32. 32. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×