Category Archives for Tech Tips

Switch Sencha Cmd Versions Any Time.

​Sometimes it is handy and necessary to change the Sencha Cmd version without having to play around with your path and hand-juggle multiple versions.

Here are some simple steps to check which version is running, see which versions you have installed and finally a step to actually change the currently running version.

​Scotts-MacBook-Pro-2016:​scottsalisbury$ sencha switch --list
Sencha Cmd 6.5.2.15
Looking for versions at: /Users/scottsalisbury/bin/Sencha/Cmd
 
Current version
   6.5.2.15
 
Newest version installed
   6.6.0.13
 
Locally available versions
   6.5.0.180
   6.1.2.15
   6.2.0.103
   6.0.2.14
   6.0.1.76
   6.5.1.240
   6.5.3.6
   6.2.1.29
   6.5.2.15
   6.1.3.42
   6.6.0.13
Scotts-MacBook-Pro-2016:​scottsalisbury$

​Scotts-MacBook-Pro-2016:​scottsalisbury$ sencha switch 6.0.1.76
Sencha Cmd 6.0.1.76
 
Successfully switched to version 6.0.1.76.
Run 'sencha help' to see the available commands on this version.
Scotts-MacBook-Pro-2016:​ scottsalisbury$

Change Font Size in Eclipse

​Here are some simple steps to change the font size in Eclipse.  You can also hit [ctrl][shift][++] to increase the font size but replaceing ++ with - - does not shrink the text.

Java Examples to Create JSON Arrays and JSON Objects

In the spirit of creating simple, copyable Java based JSON examples, here are some JSON Array and JSON Object processing samples. To keep it super easy to read, there is no database access or any other logic to clutter up the simple use cases presented here.

These examples are using the json-simple api that is common in many Java implementations.

Get the json-simple jar:  download json-simple-1.1.1.jar

Get the source for json-simple on github: download json-simple source

Check out the Google archive for more info on json-simple here: Read about it on Google

If you would like the eclipse project that contains the code below:  download java-json-simple eclipse project

Check out json.org for a long list of JSON parsers across many different languages.

 

This example creates a simple, single record style JSON Object.

 

This example creates an outer JSON object for “root” containing a JSON Array which contains 2 record style JSON Objects.

 

This example creates an outer JSON object for “root” containing a JSON Array which contains 2 record style JSON Objects.  Each of the record style JSON Objects contains a JSON Array.

Editing Files Outside of the Eclipse Workbench

Like a lot of people, I work with at least two editing tools in my day-to-day programming.  For Java I generally use Eclipse but for JavaScript I use vscode because I think it's lightyears ahead of Eclipse's JavaScript tooling.  Other people use other editors for their own reasons but if the files belong to an Eclipse workspace, you need to tell Eclipse to keep an eye out for external changes made to its own project files.  

Otherwise Eclipse will simply not see changes made by other editors.

Here is a link to the Eclipse documentation that deals with this.

In Eclipse, goto Preferences->General->Workspace 

On Windows, Window->Preferences->General->Workspace 

On Mac, Eclipse->Preferenes->General->Workspace

Check the box for "Refresh using native hooks or polling"

Java – Which JDK Version was Used to Compile

java.lang.UnsupportedClassVersionError

The above error means you have deployed code that was compiled from a more recent JDK than the JVM you are deploying to.

Which version of java built my jar or *.class file?

Maybe you have supporting jar files that contain code from Java 1.8 but you are deploying to java 1.5 – that is when you’ll see java.lang.UnsupportedClassVersionError.

Most of the time you will be aware of the JDK and JVM versions you are working with but occasionally you may have supporting code that will need to be recompiled at an earlier version. If you have lots of code, the question will be which code needs to be recompiled.

You can determine this by unzipping one class from each jar file and testing the version like so:

// on Windows run this
javap -v SomeJavaProgram.class
// on Mac, Linux, Unix, run this
javap -v SomeJavaProgram.class | grep major

If running from Windows, you will get a fairly large amount of output. You will find the text, “major version” within the first 10 lines.
If running from Mac, Linux, Unix, you will see something like this:
major version: 48

Regardless of OS, you can map the Major Version back to the JDK with this list:

45.3 = Java 1.1
46 = Java 1.2
47 = Java 1.3
48 = Java 1.4
49 = Java 5
50 = Java 6
51 = Java 7
52 = Java 8
53 = Java 9

Sencha npm Tooling With Ext JS 6.6

Sencha tooling with npm has been announced for Ext JS 6.6.

This is awesome news!  This post is partly news item and partly tutorial.  As of June 4, 2018, Sencha made an early version of their new tooling available to their MVPs.  As a member of that group, I wanted to share some state-of-the-moment news and information for the new npm based Sencha tooling.

To learn about the Sencha MVP program and to become an MVP yourself, checkout this link: Sencha MVP Program.

Ext JS 6.6 is on the horizon and with the new release comes node packaging and node tooling to build your application.   See this link for a detailed discussion: Top Considerations for Web Development in a Free Open Source World.

This is super exciting because the same npm based build concepts in use with React, Angular and other frameworks are now in beta for Ext JS Modern and Classic.  Hooray!!  This breaks us out of the Sencha Cmd silo and makes Ext JS feel a lot more open.

To begin, make sure npm is current on your system. with npm -v 

Determine the the version of node and npm currently available here.

Get npm here if you don’t have it.

Your Sencha forum user id and password is required to get access – but first you must be a member of the Sencha MVP Program.

When prompted for user id, use your sencha support id, but replace the (at sign) @ sign in your email address with (two dots) ..

example: myemail..gmail.com

You will be asked for you Sencha forum password

You will be asked for your email address, this is your Sencha support forum email address.  Same as above but with the @ sign, not the dots

// login here!
npm login --registry=http://test.npm.sencha.com --scope=@sencha
// then install from here
npm install -g @sencha/ext-gen

Depending on your setup, for mac or linux, you may need to run with sudo.

The above screenshot shows what you will see after a successful installation.

Below, is an easier to read and copyable version of the screenshot above.

Welcome to Sencha ExtGen v0.0.191 - The Ext JS code generator
Quick Start:
ext-gen app MyAppName
ext-gen app -i
Examples:
ext-gen app --auto --template universalclassicmodern --classictheme theme-triton --moderntheme theme-material --name CoolUniversalApp
ext-gen app --auto --template classicdesktop --classictheme theme-triton --name CoolDesktopApp
ext-gen app --interactive
ext-gen app -a --classictheme theme-graphite -n ClassicApp
ext-gen app -a -t moderndesktop -n ModernApp
Run ext-gen --help to see all options

I conducted some tests based on the above examples and they were all successful.   They all built successfully and ran as expected.  The -i or –interactive options prompt for the template type but does not (yet?) prompt for the theme.

Below is the output from the ext-gen –help with some color coding to draw your attention to the current list of templates and themes.  Think of templates as the type of app you are wanting to create:  classicdesktop, moderndesktop, universalclassicmodern, universalmodern – see the template descriptions in red below for more details.

Themes are out-of-the box ways to effect and control the look of the app.  Here is a list of the stock themes available in Ext JS 6.5.3 (not sure if this is the same list that will be available for Ext JS 6.6 or not).  There is a lot to say about themes, creating custom themes and so forth that are beyond the scope of this article but I’m sure Sencha will move this forward the way they always have.

Sencha ExtGen v0.0.191 – The Ext JS code generator

Quick Start: ext-gen -a

ext-gen app (-h) (-d) (-i) (-t ‘template’) (-m ‘moderntheme’) (-c ‘classictheme’) (-n ‘name’) (-f ‘folder’)

-h –help show help (no parameters also shows help)-d –defaults show defaults for package.json-i –interactive run in interactive mode (question prompts will display)-t –template name for Ext JS template used for generate-c –classictheme theme name for Ext JS classic toolkit-m –moderntheme theme name for Ext JS modern toolkit-n –name name for Ext JS generated app-f –folder folder name for Ext JS application (not implemented yet)-v –verbose verbose npm messages (for problems only)

Examples:ext-gen app –template universalclassicmodern –classictheme theme-graphite –moderntheme theme-material –name CoolUniversalAppext-gen app–template classicdesktop –classictheme theme-graphite –name CoolDesktopAppext-gen app –interactiveext-gen app -a —classictheme theme-graphite -n ClassicAppext-gen app -a -t moderndesktop -n ModernApp

Templates:You can select from 4 Ext JS templates provided by Sencha ExtGen

classicdesktop (default)This template is the default template in ext-gen. It contains 1 profile, configured to use the classic toolkit of Ext JS for a desktop application

moderndesktopThis template is similar to the classicdesktop template. It contains 1 profile, configured to use the modern toolkit of Ext JS for a desktop application

universalclassicmodernThis template contains 2 profiles, 1 for desktop (using the classic toolkit), and 1 for mobile (using the modern toolkit)

universalmodernThis template contains 2 profiles, 1 for desktop and 1 for mobile. Both profiles use the modern toolkit.

Theme Names:classic themes: theme-classic, theme-neptune, theme-neptune-touch, theme-crisp, theme-crisp-touch theme-triton, theme-graphitemodern themes: theme-material, theme-ios, theme-neptune, theme-triton 

And finally, here are the npm commands I used to build for testing and production the way Sencha Cmd has historically done.

cd into the app folder and execute the appropriate build command.

npm run build-desktop-testing
npm run build-desktop-production
npm run build-phone-testing
npm run build-phone-production
This is a brief state-of-the moment look at npm for Ext JS.  I’m excited to see what comes next and I will continue to provide updates as things move along.

To review Sencha Cmd for Ext JS 6.5.3 (pre npm and pre ExtJS 6.6), take a look at the article I did on Ext JS – Create Workspace and/or Classic or Modern or Universal App in 5 minutes

Check out Pinch Hitter Solutions at phs4j.com.  
Check out Scott's youtube channel at Motivated Code Pro.

Ext JS – Calculate Duration Between Two Dates

Ext JS – How to calculate duration between two dates in typical intervals such as years, months, days, hours, minutes or seconds.

The results for the first set of dates,
dt_1 = ‘2018-06-11 03:10:14 AM’
dt_2 = ‘2018-06-11 11:17:23 PM’

The results for the first set of dates,
dt_1 = ‘2018-06-11 03:10:14 AM’
dt_2 = ‘2018-06-11 11:17:23 PM’

0 Years
0 Months
0 Days
20 Hours
1207 Minutes
72429 Seconds

The results for the second set of dates,
dt_1 = ‘2017-06-11 03:10:14 AM’
dt_2 = ‘2018-06-19 11:17:23 PM’

1 Years
12 Months
373 Days
8972 Hours
538327 Minutes
32299629 Seconds

Ext JS – Create Workspace, Classic, Modern, Universal App in 5 Mins

This tutorial has been tested with:

Ext JS 6.5.3 Commercial

Ext JS 6.2.0 GPL  –  If you are using the GPL version, replace ext-6.5.3.57 with ext-6.2.0 below.  

1 – Downloads

Download the current version of Sencha Cmd:
Download Sencha Cmd

Choose DOWNLOAD with JRE INCLUDED (unless you have a good reason not to)

Windows version works the same way, though 64bit provides only the JRE INCLUDED version.

If you don’t have a commercially licensed version of ExtJS, download the GPL version from here: Download GPL Version of Ext JS  then check your email for the ExtJS Download Link.

If you do have a commercial license and haven’t downloaded it yet, you can download the most recent sdk from here: Download Commercial Version of Ext JS

Be mindful that ExtJS versions change frequently so replace the versions mentioned above and below with the current versions available when you are using these instructions.

Unzip the ExtJS sdk (ext-6.5.3.zip) to a convenient location (remember this location, you will need it later) – Sencha does not include a formalized installation process, you just just need to unzip the sdk to the desired location.

I unzipped mine to ~/motivatedcodepro  – You can unzip yours to wherever it’s convenient for you.

Assuming you are using ~/motivatedcodepro as your unzip location you will end up with this:

~/motivatedcodepro/ext-6.5.3.57 

You DO NOT need to create folder ext-6.5.3.57 on your own, unzipping ext-6.5.3.zip will take care of that for you.

2 – Now that the sdk is installed, lets create a Sencha workspace:

Skip this step if you don’t want or need to use a workspace.

sencha -sdk ~/motivatedcodepro/ext-6.5.3.57/ generate workspace ~/motivatedcodepro/starterworkspace

We are telling sencha cmd that the sdk is located at ~/motivatedcodepro/ext-6.5.3.57/

And to generate the workspace at ~/motivatedcodepro/starterworkspace  (starterworkspace folder will be created automatically)

Once completed, the runtime framework will be installed in starterworkspace.  This allows your projects to share the sdk and other assets.

cd ~/motivatedcodepro/starterworkspace

3 – Next, lets generate some starter apps.

Note that all of the sencha generate app commands shown below will create a “starter app” for you to experiment with.  You can  runt this starter app from the browser at the end of these steps.

Create an ExtJS classic app in a workspace:

sencha generate app --ext classic classicapp classicappflr

We are telling sencha cmd to create an ExtJS classic app called classicapp in folder classicappflr within the ~/motivatedcodepro/starterworkspace folder.

Create an ExtJS classic app without a workspace:

sencha -sdk ~/motivatedcodepro/ext-6.5.3.57/ generate app –ext classic classicapp /your/chosen/folder/classicappflr

We are telling sencha cmd where the sdk is located and to create an ExtJS classic app called classicapp in folder /your/chosen/folder/classicappflr

Create an ExtJS modern app in a workspace:

sencha generate app --ext modern modernapp modernappflr

We are telling sencha cmd to create an ExtJS modern app called modernapp in folder modernappflr.

Create an ExtJS modern app without a workspace:

sencha -sdk ~/motivatedcodepro/ext-6.5.3.57/ generate app --ext modern modernapp /your/chosen/folder/modernappflr

We are telling sencha cmd where the sdk is located and to create an ExtJS modern app called modernapp in folder /your/chosen/folder/modernappflr.

Create an ExtJS universal app in a workspace:

sencha generate app --ext universalapp universalappflr

We are telling sencha cmd to create an ExtJS universal app called universalapp in folder universalappflr.

Create an ExtJS universal app without a workspace:

sencha -sdk ~/motivatedcodepro/ext-6.5.3.57/ generate app --ext universalapp /your/chosen/folder/universalappflr

We are telling sencha cmd where the sdk is located and to create an ExtJS universal app called universalapp in folder /your/chosen/folder/universalappflr.

4 – Now let’s test our installation:

To test any or all of these apps, cd into the appropriate folder and execute sencha app watch:

cd ~/motivatedcodepro/starterworkspace/modernappflr  (or /your/chosen/folder/ if you're not using a workspace)

sencha app watch

This will start the sencha cmd webserver and watch utility (a whole other subject) and will allow you to test your newly created apps.

Note that the server is running on port 1841

Point your browser to:

 http://localhost:1841/modernappflr

**Note that for non-workspace apps, you do not need to include the app folder in the url (modernappflr in this case).  The app folder is only needed when running in a workspace so sencha app watch will know which app to load from the workspace.

 

All done!  Here you should see the following: