0item(s)

Uw winkelwagen bevat geen artikelen.

Product was successfully added to your shopping cart.
Swipe to the left

juli 2019

Modernize your application with Ext JS 7.0

By Margreet van Muyden 9 juli 2019 5 Views No comments

As an Engineer at Sencha, I spend a lot of time visiting customers, screen-sharing with them, and helping them build awesome looking UIs. One trend I see within our customer base is the need to extend the lifespan of these web applications.

The need for businesses to reach their customers and employees through web applications is well established and common to most business sectors. Businesses are investing more in each web app they build and expect apps to provide long term value, both internally and to their client base. Web apps are becoming the new Enterprise Application.

I see a lot of Ext JS version 5.x and 6.x apps in production that are feature rich, do the job required, but are starting to get a bit long in the tooth. As more and more users have become familiar with web apps, the bar for quality, usability and application look and feel is quite high. In fact, many of the legacy apps are now overdue for a complete rework.

If you are using Ext JS 5 or Ext JS with a Classic Toolkit application, the release of Ext JS 7 provides a simple, low-cost way to modernize the look & feel of your application with just 2 lines of code!

When you migrate to Ext JS 7 you will be able to use the new modern looking Material Theme for Classic Toolkit. This theme utilizes Material Design developed by Google that describes visual components and layout of an application, possible interactions, and the unified expression of qualities like color, shape, and motion. Material design is not just about the visual aspects of an app, but also about motion. What makes this new theme interesting, are it’s guidelines on interface motion, giving us developers the opportunity to not only produce a bright, shiny, new UI, but also use motion to give the end user a much improved experience.

You would need to literally modify 2 lines of code in your application to take full advantage of the Material Design

  • First, reference the new NPM package @sencha/ext-classic-theme-material in your package.json file (in case your are using modern tooling):
    <span class="st0">"dependencies"</span><span class="sy0">:</span> <span class="br0">{</span>
    <span class="st0">"@sencha/ext"</span><span class="sy0">:</span> <span class="st0">"~7.0.0"</span><span class="sy0">,</span>
    <span class="st0">"@sencha/ext-classic"</span><span class="sy0">:</span> <span class="st0">"~7.0.0"</span><span class="sy0">,</span>
    <span class="st0">"@sencha/ext-classic-theme-material"</span><span class="sy0">:</span> <span class="st0">"~7.0.0"</span><span class="sy0">,</span>
    ...
    <span class="br0">}</span><span class="sy0">,</span>
  • Second, specify the new theme for your build profile in app.json file:
    <span class="st0">"classic-material"</span><span class="sy0">:</span> <span class="br0">{</span>
    <span class="st0">"toolkit"</span><span class="sy0">:</span> <span class="st0">"classic"</span><span class="sy0">,</span>
    <span class="st0">"theme"</span><span class="sy0">:</span> <span class="st0">"theme-material"</span>
    <span class="br0">}</span><span class="sy0">,</span>

And re-build your application. Done!

New Material theme for Classic Toolkit (as well as Material theme for Modern toolkit) supports CSS variables, and provides APIs to get and set colors. It is now possible for you to make a color picker with only verified material colors. You can live update the look and feel of your application without the need of an external server or Sencha Cmd.
The material theme provides APIs to get colors that give you a nested object with all the material colors and weights.

Ext.<span class="me1">theme</span>.<span class="me1">Material</span>.<span class="me1">getColors</span><span class="br0">(</span><span class="br0">)</span>

The material theme provides you with APIs to set colors that can be used as follows:

Ext.<span class="me1">theme</span>.<span class="me1">Material</span>.<span class="me1">setColors</span><span class="br0">(</span><span class="br0">{</span>
    <span class="st0">'darkMode'</span><span class="sy0">:</span> darkMode<span class="sy0">,</span>
    <span class="st0">'base'</span><span class="sy0">:</span> base <span class="sy0">||</span> me._materialBaseColor<span class="sy0">,</span>
    <span class="st0">'accent'</span><span class="sy0">:</span> accent <span class="sy0">||</span> me._materialAccentColor
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>

Justifying using resources to upgrade an existing app can be a difficult sell, but moving from v5 or v6 to Ext JS 7.0 should be a simple step. Implementing the material design theme will give your users a better experience and extend the life of your application. If you need any assistance putting a bright, new, shiny face on your app, contact me for help.

Try Ext JS 7.0
Check our special offers valid until August 31, 2019:
Ext JS Single Developer Perpetual license incl. 36 months subscription
Ext JS Perpertual 5-pack license incl. 12 months subscription