Sencha Tooling - Architect 4.1 and themer 1.1v2

1. © 2016 Sencha Inc
Accelerating WebApplication Development with
Sencha Architect 4.1 and Themer 1.1
Sandeep Adwankar
Sr. Product Manager

2. © 2016 Sencha Inc
Architect 4.1 EA
2

3. © 2016 Sencha Inc
Sencha Architect 4.1 – What’s New
• Support for Ext JS 6.2.1 and Cmd 6.2.1
• Drag and drop Premium Components
- D3 , Calendar, Pivot grid, Exporter
• Better Grid Support
- Row widget, header resizer for Classic
- Row expander for Modern
- Grid Builder support in Modern
• Extend Controller and Models
• Asset Manager to manage frameworks
3

4. © 2016 Sencha Inc
Architect 4.1 – D3 Adapter
Integrates the D3.js library with Ext JS
core and provides some of the most
commonly used D3 visualizations as
ready to use components in Ext JS.
- Integration with data stores to update the
visualizations as data changes
• Data Store for regular data
• Tree Store for hierarchical data
- Pan/zoom interactions
4

5. © 2016 Sencha Inc
Architect 4.1 – Calendar Component
Provides all the building blocks needed
to include advanced calendaring
capabilities in Ext JS applications.
- Day, Week, & Month views
- Store to define events
- Time zone support
- Drag, Resize & Validation
- Google’s Calendar API integration
5

6. © 2016 Sencha Inc
Architect 4.1 – Pivot Grid
Powerful data analysis capabilities
available in both Classic and Modern
Toolkit.
- Drag-and-drop configurator
- Plugins for drilldown, range editor,
exporter, etc.
- Different layouts and styling elements
- Optimized for touch-devices
6

7. © 2016 Sencha Inc
Architect 4.1 – Data Exporter
Supports export for native XLSX format,
as well as many other common export
formats such as HTML, CSV, and TSV.
- Capability to configure the exports for
visible or invisible (hidden columns) data
- Column styling in the exported
documents
- Available in both toolkits, for Grids and
Pivot Grid
7

8. © 2016 Sencha Inc
Architect 4.1 – Grid Enhancements
Exciting new functionality such as ‘row
body widgets’ that will allow you to add
components to the row body, such as
grid inside a grid.
- Available for both toolkits
- Can be linked to parent grid record
- Can put any component within the row
body, not just grid inside a grid
8

9. © 2016 Sencha Inc
Architect 4.1 – Modern Row Expander

10. © 2016 Sencha Inc
Architect 4.1 – Modern Tree Grid

11. © 2016 Sencha Inc
Architect 4.1 – Modern UI Builder
• Similar to classic apps, there is now
support for UI builder in Modern apps.
• Auto-generate grid view columns,
store, model, editors, controller actions
and mock data.

12. © 2016 Sencha Inc
Architect 4.1 – Manage Ext JS frameworks, Cmd
• Sencha Architect now has option to
manage frameworks where you can
choose to install or remove framework
or Sencha Cmd versions.
• You can find the Manage
Frameworks option in File tab in
Preferences menu.

13. © 2016 Sencha Inc
Architect 4.1 – Import and Export Configs
• Import configs – Paste config values
and apply to a class
• Export configs – Export config values
to clipboard that you can copy to other
projects

14. © 2016 Sencha Inc
Sencha Architect 4.1 EA release
• Run multiple instances of Architect on
your computer
• Updated version of Electron Container
• EAAvailable:
http://pages.sencha.com/ext-js-tools-ea-2016.html

15. © 2016 Sencha Inc
Demo
Architect 4.1
15

16. © 2016 Sencha Inc
Themer 1.1 EA
16

17. © 2016 Sencha Inc
Sencha Themer – Now Part of Pro Bundle!
• Design themes in an interactive visual
environment - no code
• Quick configurations for global theme
variables
• Support for component UIs
• View live style update to your Ext JS app –
No compile, build, reload
• Package your theme, apply to your app
and share with ease
17

18. © 2016 Sencha Inc
Themer 1.1 – Easily Connect app to Themer
• Directly connect your app to Themer
• Update app.json and view connected
apps from View -> Connected Apps
18

19. © 2016 Sencha Inc
Themer 1.1 – Directly Theme your app
• Inspect mode provides fine-grained
control over style selection in Your App
• Modify Sass variables and see
changes live
• Inspect mode allows freezing and
locking state of all components in
preview app
• Easy way to theme component states
such as – hover, pressed, open
19

20. © 2016 Sencha Inc
Themer – Support for Classic and Modern Toolkit
20

21. © 2016 Sencha Inc
Themer – Theme with innovative color selectors
• Color Palette showing base,
background and text color with 5%
lighter and darker
• Material Design based Color Palette
21

22. © 2016 Sencha Inc
Themer – Comprehensive view of all updated styles
• View all Sass variables that you can
style
• As you style you app, filter view to see
updated Sass variables and their
values
22

23. © 2016 Sencha Inc
Themer – Uniquely configure individual Ext JS component
with UIs
• Easy to create a “UI” configuration
• Configure “UI” like any other Ext JS
component
23

24. © 2016 Sencha Inc
Themer – Easy way to add web fonts
• Add Google font URL to use web font
in your app
• Apply the web font to any component
24

25. © 2016 Sencha Inc
Theming Contest – Theme App to win $2500
• Download new contest app
https://www.sencha.com/sencha-theming-
contest-2016/
• Use Themer 1.1
• Theme App and send us your theme
at contest@sencha.com
25
New Theming Contest App

26. © 2016 Sencha Inc
Demo
Themer 1.1
26

27. © 2016 Sencha Inc
Q & A
27