" Hi my name is Lee.
I'm a writer an engineer a trainer and a public speaker.
I create fixes & I fix headaches...
Welcome to my dev blog."

Blog

Goodbye Sencha, Hello Google

Posted on in 

Within 4 years working for Sencha, I’ve done 86 trips. 28 live trainings, I spoke at 38 webinars and events (including SenchaCon, FITC and O’Reilly). I’ve visited 15 countries and I’ve attended 3 SenchaCons. I’ve spoken with many customers. I’ve worked with every public, EA and beta version since Sencha Touch 0.8, and Ext JS 4.1. I’ve created many applications like https://www.leeboonstra.com/spotifinder/ and https://github.com/savelee?page=1&tab=repositories&utf8=%E2%9C%93&q=sencha. Also I wrote a book about Sencha Touch for O’Reilly: https://www.amazon.com/Hands–Sencha-Touch-Real-World-Approach.

However, all good things come to an end.

Read More

Reverse Engineer the Sencha FontAwesome package to get an overview of icons.

Posted on in 

Ext JS 6, ships with a copy of the font-awesome icon font. Remember the Wingdings Font from back in the days? Icon Fonts are somehow similar like that. An icon font is a (fontface) font, and every (unicode) character maps to an icon. Icon fonts are great, because they are all vectors. Therefore you can easily change the color or size, and they will always have best quality. Perfect on retina displays. You no longer need to open Photoshop to modify the icons. Because it’s text, you can add shades, change colors, backgrounds and sizes all with CSS code. (You just can’t make 3D icons / multi color icons, because it’s text.)*. Also, icon fonts won’t spam your screenreaders.

In Ext JS 6, font-awesome icon font is a code package, which is included in the SDK, and free to use. It’s version 4.4. which includes 585 vector icons! You can use font packages, by enabling font awesome in your app.json file: (when you generated the application with Sencha Cmd, this should be already there.) "requires": [ "font-awesome" ],

Now you can start using the font, by adding the iconCls property to your component. For example:

1
{ xtype: ‘button’, iconCls: ‘x-fa fa-globe’ }

The iconCls is supported on: buttons, panel titles, menu’s, tree node items, grid actions, separators and ux status bars. (That probably covers most of the places you want an icon for, but if you want icons in for example templates, you can use the below trick as well, and set icons manually.) The big question is, how do I know, which icons are included out of the box? The easy answer is, you can use the font awesome cheatsheet: http://fontawesome.io/cheatsheet/ Everything 4.4 and below will be available. But the best answer is, you can reverse engineer this from the package yourself! Browse to: myapp/ext/packages/font-awesome/sass/etc/

Let’s first dive into: _variables.scss. This Sass file, shows the font version number, and the CSS prefix. For Ext JS 6.2 this is:

1
2
$fa-version: "4.4.0" !default; 
$fa-css-prefix: fa !default;

The _variables.scss file sets all the used variable names for every icon. However, we still don’t know how the icon will look like. Therefore, open your browser and use the Icomoon font app: https://icomoon.io/app/#/select Click the Import Font button. Now browse to myapp/ext/packages/font-awesome/resources/fonts/ and select: fontawesome-webfont.svg

This will import all the font-awesome icons, which are in Ext JS. Within the Icomoon app, select all the font-awesome icons. (Select the first, hold shift and select the last.) Then press the Generate Font button in the bottom of the app. You will now see an overview of all the icons with its used unicode. (If you want, you can download the font here, so it also saves an HTML file, with this overview.) Ok, so now we know how the fonts look like, and what it’s unicode is. I could now, look into this list, pick the icon that I want. Copy the unicode, and lookup the variable name in _variables.scss. For example, the icon with the double music notes, has the title: uniF001, so unicode: f001, which matches Sass variable name: $fa-var-music. Once you know the variable name, copy it and open _icons.scss. Search in this file for the variable name, and it will reveal to you. For the $fa-var-music variable, it contains this Sass line:

1
2
3
.#{$fa-css-prefix}-music:before { 
content: $fa-var-music !important;
}

Which will be compiled as the following CSS:

1
2
3
.fa-music:before { 
content: $fa-var-music !important;
}

As you can see the CSS class fa-music, will create another node in your HTML DOM, before the element that has this CSS class, with the content that contains the unicode of the music note icon. iconCls, just adds this node in the DOM tree. How does it know how to style the icon (for example, the color and its font-size?) That’s what the class .x-fa is for. Note: The x-fa class should be used in Ext JS applications instead of fa which is the class you get if you download the font package from font-awesome.com itself. The fa class sets some properties that may collide with the Sencha theme properties, whereas x-fa sets only the font-family:

1
2
3
.#{$prefix}fa:before { 
font-family: FontAwesome !important;
}

The default font-size and colors are set in _variables.scss:

1
2
3
4
5
6
7
$fa-font-path: "../fonts" !default;
$fa-font-size-base: 14px !default;
$fa-line-height-base: 1 !default;
$fa-version: "4.4.0" !default;
$fa-border-color: #eee !default;
$fa-inverse: #fff !default;
$fa-li-width: (30em / 14) !default;

For the rest it’s up to you to style the icons as you like. You can do this in your theme package or app stylesheet. *The Wingdings font was developed by Microsoft in 1990, it is actually a dingbat (a printer character used for typesetting) font. None of the characters were mapped to unicode back then, and is only available on (legacy) Microsoft platforms, therefore you should not use Wingdings for the web.

Asynchronous JavaScript: Promises

Posted on in 

JavaScript is single threaded, causing code to execute from top to bottom, so two bits of code cannot run at the same time. For example, you might download a JSON file from an (external) server and you’d have to wait until you retrieve that file. Instead of blocking the thread, there are ways you can streamline this code execution by using asynchronous JavaScript.

Read More

Advanced Cmd: How to integrate Ext JS with Maven

Posted on in 

This last article, will show you, how you can integrate Ext JS with tools like Maven. Please understand, Maven is not a required Sencha setup, though it is possible to build your Sencha projects with Maven.

Read More

Advanced Cmd: How to modify Sencha builds

Posted on in 

This guide, will discuss builds, and how you can modify it, with Apache Ant.

Read More

Advanced Sencha Cmd: Dealing with a multi Ext JS app infrastructure

Posted on in 

This guide will describe how to deal with an infrastructure, that contains multiple Ext JS apps. I will discuss:

  • Local workspaces
  • How to split builds
  • How to modify file paths and output settings

Read More

Working With Sencha App Templates: Boilerplate Ext JS 6 code.

Posted on in 

Software in a day

Maybe you have experienced this before. You meet with a client (or worse your boss ;) ), he explains what kind of application he wants, and then he asked you the big question: How long will it take?. Being realistic (and add a little more time on top of that), you say: “a month!”. “A month? It’s just an application with 3 screens. I was thinking tomorrow.” You know, software in a day.

Read More

Simple Techniques for Solving Common Sencha Coding Problems

Posted on in 

Often when I’m teaching a Sencha Training class, students ask me to look at their apps because there’s a problem they don’t know how to fix. Since I didn’t write the code, it’s hard sometimes for me to give them a quick answer. However, I do have a set of simple techniques that filter out the most obvious problems.

Read More