"Ext JS 4 First Look" and "Mastering Ext JS" - book review

Hello. In this post I shall explain my thoughts on two books, Ext JS 4 First Look and Mastering Ext JS written by loiane Groner.

Ext JS 4 First Look

It is an intruductory book for Ext JS 4 framework, specifically version 4.2. You can find lot of comments and posts across the Internet about previous version of Ext JS 4, 4.0 and 4.1, it is said that were buggy. So my advice is use Ext JS 4.2 for your future projects. Not sure about Ext JS 5, it is a new release.

In about 300 pages Loiane managed to cover all aspects of Ext JS 4 framework. It has lot of useful information and you can get a general understanding about the framework's capabilities. However is a bit techincal, so I recommend reading each chapter at least twice. It also a good practice to try and write the code from the book on the a real machine and see how it works. From this point of view I think it needs more code examples. So if you want to learn Ext JS 4 framework, I think this book is a good start. 4/5

Mastering Ext JS

In this second book about Ext JS 4 you get to develop real world Ext JS 4 based application (using sakila sample database). It has lot of code and reading it is a bit dificult task since you need to understand what the code does. While reading it I set up my working environment and started coding from the book. It begins ok, all things that were necessary were covered in the book. However when you get deep into it like 150 pages which is middle of the book, you can clearly see that some application modules are not finished, or a code is missing. I managed to find code base here. It easens up things a little, if you copy code form github. But I also found that some php files had commented code and weren't working. It has a bit of inconsistency with the book. You get the feeling it is not made for beginner web developer :) I managed to find solutions to most of the problems while developing my practice app here: http://masteringextjs-practices.rhcloud.com/ but that was the case because I already knew PHP 5, firebug, MVC architecture, Aptana, JavaScript basics, html etc...

- still in development. Use vlado as user and 123456 as password to log in. You can change to different language, now English US and MK(Macedonian) available. If you get loading errors or it doesn't want to show up, refresh the tab. Still things to be done. 

Notes: 

• Some php file had commented code out in the github package. Why should I bother understanding what the php code does when I learn Ext JS?

• It happened to build a production version of the app and when uploaded to server it doesn't work as it works locally. Charts aren't drawn, login window stays after loging in, loading notification stays forever.  Not sure why it does that, a testing is neccesarry. Ok I set up Siesta as mentioned in chapter 12 - Debugging and Testing, I run the test from the book and get error Application.js not found in Firebug. :) Ok I deployed (prebuild app) masteringextjs4 zip package from github to my server and try the tests, some strange error appears, "j is undefined" :D So now I cannot test even the prebuilt application. Maybe I have missed to read some guide or whatever, but overall I am a bit lost as Ext JS beginner.

I give points for ingenuity. Really good use of available learning resources like Sakila sample database. You will get to work with MySQL db, MySQL Workbench, exporting/importing data. Also PhpMyAdmin which is a really good admin tool.

All in all it is a good book, but you will not learn much if you don't code the code yourself and try to debug yourself. It is very techincal and as I said cover each chapter twice. Once reading, once, coding. It contains lot of general information about Ext JS 4 and lot of advices about tools to develop. According to my experience reading it I give it 3.75/5

Playing around with Android

After some playing with my code on CheckerBoard application, I got to some interesting results.

I wanted to cover all colors from the visible spectre but didn't had the real success . Anyway here is what I achieved so far :)

I used some settings in Android manifest like:

android:screenOrientation="portrait"
android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

in the activity tag. The first one makes sure your app always runs in portrait mode. The second removes the title bar with the battery and notifictaions area.

For publishing an update to the same application you should export your application with changed version code number in AndroidManifest.xml like this:




<manifest xmlns:android="http://schemas.android.com/apk/res/android"
android:versionCode="2"

If your version code was 1, make it 2, if it was 2 make it 3 and so on...

 

First Android Application

In this short tutorial I will show you how to convert the screen of your Nexus 7 into checker board.

I assume you have installed java 1.6 or 1.7, Eclipse classic (Juno) with plugin for Android and these Android packages: Android 4.2.2, 4.0.3 and 2.3.3 with SDK, Documentation, Google APIs, ARM EABI, Samples for SDK and Tools all 3 packages.

First create Android application in Eclipse and call it CheckerBoardApp. Leave everything default except when creating the project set Theme to none. You can also rename the java package from example to... lets say CheckerBoardPkg or you can leave it default.For publishing your app on Google Play you must change the package name to something different than example because it will not be accepted

Once you have the new application generated add new java class in the main src folder and call it CheckerBoard.

Add this code in it and save:

package com.checkerboardpkg.checkerboardapp;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

public class CheckerBoard extends View {

    private final int TILE_WIDTH_HEIGHT = 160;
    private Paint currentPaint = null;
   
    public CheckerBoard(Context context) {
        super(context);
        currentPaint = new Paint();
        setFocusable(true);

    }

    @Override
    protected void onDraw(Canvas canvas) {

        canvas.drawColor(Color.BLACK);

        int currentColor = 0;
       
        for (int i = 0; i < 8; i += 1) {
            for (int j = 0; j < 5; j += 1) {
               
                // set up color and Paint object
                if ((i + j) % 2 == 0) {
                    currentColor = Color.WHITE;
                } else {
                    currentColor = Color.BLACK;
                }
                currentPaint.setAntiAlias(true);
                currentPaint.setColor(currentColor);
               
                // draw rectangles to form checker board
                canvas.drawRect(j * this.TILE_WIDTH_HEIGHT, i
                        * this.TILE_WIDTH_HEIGHT, (j + 1)
                        * this.TILE_WIDTH_HEIGHT, (i + 1)
                        * this.TILE_WIDTH_HEIGHT, currentPaint);
            }
        }
    }
}


Basically what we do here is we create 8 rows and 5 columns of rectangles into the Canvas. We check the counters i and j if their sum is even or odd number and we change the color to white and than black appropriatelly. Each rectangle is 160x160 pixels so we get exactly 800x1280 screen which is the exact size of Nexus 7 screen resolution.


Now you must set the content of main acitivity to be the CheckerBoard view. We do that by adding this line

setContentView(new CheckerBoard(this));

as last statement in

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setContentView(new CheckerBoard(this));
    }

function in MainActivity.java class.

Now the code is ready but to see it in action you must create Android Virtual Machine to run it on.
In Eclipse press Window -> Android Virtual Device Manager and that click New. Name it Nexus7AVD, Device: Nexus 7, target: Android 4.2.2, and set RAM to 512. It is 1024 by default but it may not start up if on Windows with low memory. Set SD card to 100 MB. Click OK.

Then press start and then launch. Wait some time while the AVD is not started. After you see the batery icon on top, your AVD is ready to run so go to Eclipse and right click on the project node in package explorer and click Run as -> Android Application.

Here is what you should see:

 

Mine app was called TileGame, but you should see CheckerBoardApp instead