Shortlink

extraParams in Ext JS 4

A Store instance in Ext JS4 uses a Proxy object to connect to the server. If you want to pass parameters to the proxy dynamically you can make use of the extraParams property. Let’s discuss a simple example to see the use of extraParams property.
Let’s say you have two list boxes ‘country’ and ‘city’. Based on the value selected from the country list box, the city list box has to be populated. The city list will be loaded from the server, through a cityStore that we have configured. When the country value changes you will pass the country as a parameter to the cityStore and load the cities in the listbox.
The code for the cityStore is given below.

var cityStore = Ext.create(“Ext.data.Store”,{
fields : [“name”],
autoLoad : false,
proxy : {
type : “ajax”,
url : “citiesServlet”,
reader : {  type : “json”}
}
}});
The cityStore is populated by sending a request to a ‘citiesServlet’. The city combo box can be mapped to the cityStore. The country and city combo boxes are declared as shown below.

                                           {
           xtype : “combo”,
        displayField : “name”,
        fieldLabel : “Country”,
        store : {
        fields : [“name”],
        data : [
                {name:”India”},{name:”UK”},{name:”USA”}
              ]
        },
          listeners : {
        change : function(source,newValue,oldValue){
        cityStore.proxy.extraParams = {“country” : newValue};
        cityStore.load();
        },
        }
        },
        {
        xtype : “combo”,
        store : cityStore,
        displayField : “name”,
        fieldLabel : “City”
        }

 You can notice that in the change event listener of the country combo box , the selected value  is passed as a parameter to the cityStore’s proxy object using the extraParams property and load method is invoked. Since the cityStore is mapped to the city combo box, the combo box gets automatically populated with the data fetched from the server.
Shortlink

Dive into Android Development – IV

Like many other native applications, Android applications are also single threaded.  There is only one thread ie., the UI thread in the application. So for performing a continuous activity, you need to create a separate worker thread and run it. But you cannot update the UI components from that worker thread you have created. UI components have to be played upon only from the UI thread, failing to do so will lead to unpleasant user experience.
Android provides a number of ways to update UI components from a different worker thread. One of them is using the runOnUiThread method on Activity class, which accepts the Runnable object.
Say you want to display the current date and time in a TextView object from a separate thread. This is how you can do it.
   
    final TextView dateTxt = (TextView)findViewById(R.id.dateTxtView);
    this.runOnUiThread(new Runnable(){
        public void run(){
                      dateTxt.setText(new Date().toString());
        }
    });
dateTxtView is a TextView component. This code starts a separate thread but accesses the dateTxt component from the UI thread only.
What if you want to update the time every one second, let’s use a java.util.Timer class for this purpose. The Timer will run for 1000 milliseconds. The code is shown below.
   
    final TextView dateTxt = (TextView)findViewById(R.id.dateTxtView);
    Timer timer = new Timer();
    timer.schedule(new TimerTask() {
             public void run() {
                 runOnUiThread(new Runnable(){
                    public void run() {
                       dateTxt.setText(new Date().toString());
                    }
                 });
            }
    }, 0, 1000);

The Timer class’ schedule method accepts a TimerTask instance that starts a thread, after a delay of 0 seconds, and runs every 1000 milliseconds . This thread encapsulates another worker thread that updates the dateTxt with the latest time.

Shortlink

Seven Languages in Seven Weeks

I have been a great fan of Bruce Tate for years now. I just randomly picked up his book ‘Better, Faster, Lighter Java’  before my flight from Chennai to Delhi few years back. I completed the whole book at one shot during the journey. I had never come across a technical book written in such an entertaining manner before that. I started patronizing open source frameworks like Hibernate, Spring during my talks and assignments with much aplomb after reading this book. I used Bruce Tate’s ‘Bitter EJB’ as a shield to argue with those who were blindly in love with EJB during it’s time.
I stopped reading his books and articles for a year when I was writing my book on Spring 3.0, so that I don’t copy his words,phrases or his style of writing even sub-consciously. After completing my book, I bought a Kindle and the first book that went into it was Bruce Tate’s Seven Languages in Seven Weeks.

Seven Languages in Seven Weeks is an enjoyable book for those who take pleasure in coding in different languages. It talks about Scala, Erlang, Clojure, Ruby, Haskell, Io and Prolog. I wonder why Groovy was  left out, probably Ruby is first of its kind.
I happened to lay my hands on this book last weekend to refer to a couple of points and the excitement caught me on. Every time I read this book I land up learning something new.  
You can get a copy of the book from http://pragprog.com/book/btlang/seven-languages-in-seven-weeks. It’s worth spending seven weekends on it, if not for seven weeks. 
Shortlink

Dive into Android development – III

Now that we are off the starting trouble in Android development, let’s develop a simple login page. We will create username/password fields with a login button. If the username is “Admin” and password is “Admin123” we will display a valid message, else we will display an error message. 
An unformatted UI is shown below:
Let’s create a new project “DiveIntoAndroid3” and complete the basic rituals discussed in the earlier post. To construct the UI you will use the main.xml file present in the res/layout folder. The UI design of Android applications are present in an XML file similar to Flex, Sliverlight etc. Opening the main.xml file will provide you a template, where you can drag and drop the UI components from the palette. You can switch between the design view and the code  by clicking the  tabs ‘Graphical Layout’ and ‘main.xml’ below.
Let’s drag and drop TextView and EditText components and a button. You can change the id of each component from the main.xml. We will play with the layout later. The final UI looks like below.

                             

The ‘id’ atrributes of the components have been changed.
Now, let’s jump into some code in our Acitivity class. We can get reference to the components by using findViewById method. We can register a OnClickListener for the button and have the logic written as shown below.

public class DiveIntoAndroid3Activity extends Activity {
private EditText userNameTxt;
private EditText passwordTxt;
private TextView message;
private Button loginBtn;
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        userNameTxt = (EditText)findViewById(R.id.userNameTxt);
        passwordTxt = (EditText)findViewById(R.id.passwordTxt);
        message = (TextView)findViewById(R.id.message);
        loginBtn = (Button)findViewById(R.id.loginBtn);
        
        loginBtn.setOnClickListener(new OnClickListener() {
              public void onClick(View view) {
 if(“Admin”.equals(userNameTxt.getText().toString())&&     “Admin123”.equals(passwordTxt.getText().toString()))
                   message.setText(“Credentials are valid”);
          else
                 message.setText(“Credentials are invalid “);
}
});
    }
}

Running this application will give you the simple login functionality that you are looking for.
Shortlink

Dive into Android development – II

We had Eclipse IDE with Android plugins configured in the earlier post. Let’s start with our traditional hello world example. The application should pop up a Hello World dialog box.
Let’s create a simple Android project in Eclipse, call it ‘DiveIntoAndroid2‘. Eclipse will ask for a target platform and we’ll choose ‘Android 2.2’. You will have to specify a root package name for the project and let that be ‘com.durasoft’. Clicking finish button will give you a project structure as shown below.
You will write the code in the DiveIntoAndroid2Activity.java file. An Activity in Android is equivalent to a window with all the UI components in it. So typically an Android application is nothing but a collection of activities and DiveIntoAndroid2Activity is one such activity which will be launched when you execute the application.
Let’s create a dialog box with the message “Hello World”.  There are a number of ways to implement this, but let’s take the simplest route. 
      AlertDialog.Builder alertDlgBuilder = new AlertDialog.Builder(this);
        AlertDialog alertDlg = alertDlgBuilder.create();
        alertDlg.setMessage(“Hello World”);
        alertDlg.show();

If you have worked with Java Swing or AWT or WinForms working with UI components in Android will be a breeze. Let’s not add more code this time and we’ll just focus on executing it.
Execute the application by right clicking the project in project explorer and selecting ‘Run As’ Android application. The application will automatically launch the Android emulator that we had already created during the setup. 
The emulator will be launched and will take time to start and initialize, similar to starting a mobile device as shown below.
After you unlock by dragging the lock bar to the right side, the application get’s launched and you get the output as shown below.
I had created an AVD called ‘Froyo’,  targeting the Android 2.2 platform and had selected it as default. So when I ran the application Froyo got launched.
Btw what is Froyo?