SlideShare a Scribd company logo
1 of 17
What’s New in Sencha Themer 1.2
and Architect 4.2
Sandeep Adwankar
Sr. Product Manager
Sencha Themer
• Design themes in an interactive visual
environment – no code
• Quick configurations for global variables
that cascade across all components
• Support for component Uis
• Live updates – No compile, build, reload
• Package themes, and share with ease
2
Sencha Themer 1.2 – What’s New
• Support for Ext JS 6.5 and Cmd 6.5
• Create amazing looking applications
with 300+ new Sass Variables
• Easily theme new Ext JS 6.5 modern
components - Dialog, Date Panel
• Style enhanced form validations and
menus
• Support for ExtReact based applications
3
Themer 1.2 – Theme new Ext JS 6.5 components
• Easily theme datepanel borders, panel
headers, panel body, panel cell, panel
focused cell, caption
• Easily theme Dialog header, body, and
tool, as well as different states of tools –
disabled, hovered, pressed, and focused
• Uniquely theme each of these new
components with “ui” config
4
Themer 1.2 – Theme Form Validations and Menu
• Style Form error validations with error
message fonts, line heights
• Style Menu header, icon colors, menu
body, menu item
5
Themer 1.2 - Theme ExtReact Components
• Theme all ExtReact components for
React application
• Create UIs for distinct look and feel of
ExtReact components
6
Inspect and Style with Component Tree
• Directly connect app to Themer with
bookmarketlet or app.json changes
• In “Inspect” mode, click on the app and
view component tree
• View and modify selected component’s
styles and UIs
7
Easily Theme Grids and Make Them Unique
• Visually theme grid cells, rows, columns,
column header, paging toolbar
• Uniquely theme each of the grid
subcomponents
8
Themer Demo
Sencha Architect
• Drag-n-drop visual app builder
• Best practices code generator that
minimizes manual coding
• Support for premium components
including D3, Pivot Grid, Calendar,
Exporter
• Integrates Cordova for hybrid apps
Architect 4.2 – What’s New
• Support for Ext JS 6.5 and Cmd 6.5
• Visually build apps with new Ext JS
components , plugins and configs
• Create apps with ES6 code
• Import themes from Themer 1.2
11
Architect 4.2 – Drag and drop new Ext JS Components
• Drag and drop new components Dialog
and Date Panel
• Easily configure components and plugins
using config panel
12
Architect 4.2 – Visually configure new Grid Configs
• Use new Grid configs to allow users to
select rows, cells, or columns
• Each of these selection modes is now
configurable using the simple new
selectable config
13
Architect 4.2 – Write ES6 code in updated code editor
• Write code using arrow functions, the let
keyword, object de-structuring, and
many of the cool new features in ES6
• As you save an Architect project, Cmd
compiles and transpiles your code
14
Architect 4.2 – Import themes from Themer 1.2
• Easily import custom themes created
using Sencha Themer
• Architect copies theme package and
applies theme to app
15
Architect Demo
Questions?

More Related Content

Similar to Sencha Themer 1.2 and Architect 4.2

System Integration Demo- Revit and Excel
System Integration Demo- Revit and ExcelSystem Integration Demo- Revit and Excel
System Integration Demo- Revit and Excel
Ufuoma Okeme
 

Similar to Sencha Themer 1.2 and Architect 4.2 (20)

Ext JS Upgrade Adviser EA Launch
Ext JS Upgrade Adviser EA LaunchExt JS Upgrade Adviser EA Launch
Ext JS Upgrade Adviser EA Launch
 
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and BeyondSencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
 
FMX 2017: Extending Unreal Engine 4 with Plug-ins (Master Class)
FMX 2017: Extending Unreal Engine 4 with Plug-ins (Master Class)FMX 2017: Extending Unreal Engine 4 with Plug-ins (Master Class)
FMX 2017: Extending Unreal Engine 4 with Plug-ins (Master Class)
 
XPages Application Layout Control - TLCC March, 2014 Webinar
XPages Application Layout Control - TLCC March, 2014 WebinarXPages Application Layout Control - TLCC March, 2014 Webinar
XPages Application Layout Control - TLCC March, 2014 Webinar
 
Application Layout Control
Application Layout ControlApplication Layout Control
Application Layout Control
 
7 Source Control and Release Management
7 Source Control and Release Management7 Source Control and Release Management
7 Source Control and Release Management
 
East Coast DevCon 2014: Engine Overview - A Programmer’s Glimpse at UE4
East Coast DevCon 2014: Engine Overview - A Programmer’s Glimpse at UE4East Coast DevCon 2014: Engine Overview - A Programmer’s Glimpse at UE4
East Coast DevCon 2014: Engine Overview - A Programmer’s Glimpse at UE4
 
System Integration Demo- Revit and Excel
System Integration Demo- Revit and ExcelSystem Integration Demo- Revit and Excel
System Integration Demo- Revit and Excel
 
Why Upgrade to v8.6?
Why Upgrade to v8.6?Why Upgrade to v8.6?
Why Upgrade to v8.6?
 
Visual studio 2012 - What's in it for me?
Visual studio 2012 - What's in it for me?Visual studio 2012 - What's in it for me?
Visual studio 2012 - What's in it for me?
 
DITA 1.3: What's New and Different
DITA 1.3: What's New and DifferentDITA 1.3: What's New and Different
DITA 1.3: What's New and Different
 
Extreact 6.6 Launch
Extreact 6.6 LaunchExtreact 6.6 Launch
Extreact 6.6 Launch
 
Cincom Smalltalk News
Cincom Smalltalk NewsCincom Smalltalk News
Cincom Smalltalk News
 
Catia sketcher workbench
Catia  sketcher workbenchCatia  sketcher workbench
Catia sketcher workbench
 
Bootstrapify Universal Theme
Bootstrapify Universal ThemeBootstrapify Universal Theme
Bootstrapify Universal Theme
 
Cross Site Collection Navigation using SPFx, Powershell PnP & PnP-JS
Cross Site Collection Navigation using SPFx, Powershell PnP & PnP-JSCross Site Collection Navigation using SPFx, Powershell PnP & PnP-JS
Cross Site Collection Navigation using SPFx, Powershell PnP & PnP-JS
 
Introduction to dax7 IDE
Introduction to dax7 IDEIntroduction to dax7 IDE
Introduction to dax7 IDE
 
Cross Site Collection Navigation
Cross Site Collection NavigationCross Site Collection Navigation
Cross Site Collection Navigation
 
Agile MDD
Agile MDDAgile MDD
Agile MDD
 
Catia Software Summer training
Catia Software Summer training Catia Software Summer training
Catia Software Summer training
 

More from Sandeep Adwankar

More from Sandeep Adwankar (16)

Building Products with Data at Core
Building Products with Data at Core Building Products with Data at Core
Building Products with Data at Core
 
PWA - ADT Magazine Webinar
PWA - ADT Magazine WebinarPWA - ADT Magazine Webinar
PWA - ADT Magazine Webinar
 
Sencha Tooling - Senchacon Conference
Sencha Tooling  - Senchacon ConferenceSencha Tooling  - Senchacon Conference
Sencha Tooling - Senchacon Conference
 
Adding powerful ext js components to react apps
Adding powerful ext js components to react appsAdding powerful ext js components to react apps
Adding powerful ext js components to react apps
 
Sencha Tooling Presentation at Senchacon Conference
Sencha Tooling Presentation at Senchacon ConferenceSencha Tooling Presentation at Senchacon Conference
Sencha Tooling Presentation at Senchacon Conference
 
Building ext js apps with ES2015 using sencha visual studio code plugin
Building ext js apps with ES2015 using sencha visual studio code pluginBuilding ext js apps with ES2015 using sencha visual studio code plugin
Building ext js apps with ES2015 using sencha visual studio code plugin
 
Build great looking web app themes with themer 1.1
Build great looking web app themes with themer 1.1Build great looking web app themes with themer 1.1
Build great looking web app themes with themer 1.1
 
Create winning themes for your ext js apps
Create winning themes for your ext js appsCreate winning themes for your ext js apps
Create winning themes for your ext js apps
 
Ext JS 6.5 Launch Webinar
Ext JS 6.5 Launch WebinarExt JS 6.5 Launch Webinar
Ext JS 6.5 Launch Webinar
 
Froala - Code Rage Webinar
Froala - Code Rage WebinarFroala - Code Rage Webinar
Froala - Code Rage Webinar
 
Ext JS 6.6 Launch Webinar
Ext JS 6.6 Launch WebinarExt JS 6.6 Launch Webinar
Ext JS 6.6 Launch Webinar
 
Application Development Trends Webinar
Application Development Trends WebinarApplication Development Trends Webinar
Application Development Trends Webinar
 
Ext Web Components - Dev Week 2019
Ext Web Components - Dev Week 2019Ext Web Components - Dev Week 2019
Ext Web Components - Dev Week 2019
 
Ext JS 6.7 Launch Webinar
Ext JS 6.7 Launch WebinarExt JS 6.7 Launch Webinar
Ext JS 6.7 Launch Webinar
 
Ext angular Launch webinar
Ext angular Launch webinarExt angular Launch webinar
Ext angular Launch webinar
 
Product Camp Silicon Valley 2018 - PM Technical Skills
Product Camp Silicon Valley 2018 - PM Technical SkillsProduct Camp Silicon Valley 2018 - PM Technical Skills
Product Camp Silicon Valley 2018 - PM Technical Skills
 

Recently uploaded

AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesAI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
VictorSzoltysek
 
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdfintroduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
VishalKumarJha10
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
Health
 

Recently uploaded (20)

AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
 
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM TechniquesAI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
 
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
 
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
 
Microsoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdfMicrosoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdf
 
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
The Guide to Integrating Generative AI into Unified Continuous Testing Platfo...
 
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected WorkerHow To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
 
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) SolutionIntroducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
 
How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.js
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdfintroduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
introduction-to-automotive Andoid os-csimmonds-ndctechtown-2021.pdf
 
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdfAzure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
Azure_Native_Qumulo_High_Performance_Compute_Benchmarks.pdf
 
Exploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdfExploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdf
 
Define the academic and professional writing..pdf
Define the academic and professional writing..pdfDefine the academic and professional writing..pdf
Define the academic and professional writing..pdf
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
+971565801893>>SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHAB...
 
10 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 202410 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 2024
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf
 
8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students
 

Sencha Themer 1.2 and Architect 4.2

  • 1. What’s New in Sencha Themer 1.2 and Architect 4.2 Sandeep Adwankar Sr. Product Manager
  • 2. Sencha Themer • Design themes in an interactive visual environment – no code • Quick configurations for global variables that cascade across all components • Support for component Uis • Live updates – No compile, build, reload • Package themes, and share with ease 2
  • 3. Sencha Themer 1.2 – What’s New • Support for Ext JS 6.5 and Cmd 6.5 • Create amazing looking applications with 300+ new Sass Variables • Easily theme new Ext JS 6.5 modern components - Dialog, Date Panel • Style enhanced form validations and menus • Support for ExtReact based applications 3
  • 4. Themer 1.2 – Theme new Ext JS 6.5 components • Easily theme datepanel borders, panel headers, panel body, panel cell, panel focused cell, caption • Easily theme Dialog header, body, and tool, as well as different states of tools – disabled, hovered, pressed, and focused • Uniquely theme each of these new components with “ui” config 4
  • 5. Themer 1.2 – Theme Form Validations and Menu • Style Form error validations with error message fonts, line heights • Style Menu header, icon colors, menu body, menu item 5
  • 6. Themer 1.2 - Theme ExtReact Components • Theme all ExtReact components for React application • Create UIs for distinct look and feel of ExtReact components 6
  • 7. Inspect and Style with Component Tree • Directly connect app to Themer with bookmarketlet or app.json changes • In “Inspect” mode, click on the app and view component tree • View and modify selected component’s styles and UIs 7
  • 8. Easily Theme Grids and Make Them Unique • Visually theme grid cells, rows, columns, column header, paging toolbar • Uniquely theme each of the grid subcomponents 8
  • 10. Sencha Architect • Drag-n-drop visual app builder • Best practices code generator that minimizes manual coding • Support for premium components including D3, Pivot Grid, Calendar, Exporter • Integrates Cordova for hybrid apps
  • 11. Architect 4.2 – What’s New • Support for Ext JS 6.5 and Cmd 6.5 • Visually build apps with new Ext JS components , plugins and configs • Create apps with ES6 code • Import themes from Themer 1.2 11
  • 12. Architect 4.2 – Drag and drop new Ext JS Components • Drag and drop new components Dialog and Date Panel • Easily configure components and plugins using config panel 12
  • 13. Architect 4.2 – Visually configure new Grid Configs • Use new Grid configs to allow users to select rows, cells, or columns • Each of these selection modes is now configurable using the simple new selectable config 13
  • 14. Architect 4.2 – Write ES6 code in updated code editor • Write code using arrow functions, the let keyword, object de-structuring, and many of the cool new features in ES6 • As you save an Architect project, Cmd compiles and transpiles your code 14
  • 15. Architect 4.2 – Import themes from Themer 1.2 • Easily import custom themes created using Sencha Themer • Architect copies theme package and applies theme to app 15

Editor's Notes

  1. Take a look what’s new in Sencha Tools, and what’s on the on the horizon for Tools. We will demonstrate the innovations in Sencha Cmd, Architect, Themer, and our new plugin for Visual Studio Code. We will also discuss the Ext Electron Package for native desktop packaging, and what we have planned for adopting the modern and open web tooling based on NodeJS, NPM and Webpack.