Thursday, January 12, 2012

Learning Objective C - Part 2

Topics Covered

In this post, I will be making notes/pointers on following topics

  • How to add a UI element to Interface Builder.
  • How to declare controller variables of type IBOutlet, and IBAction
  • @property and @synthesize

 

Here is a link to first part of this post : Learning Objective C - Part 1

 

Once we create an iOS project in Xcode, we will be presented with couple of files, as shown in the following screen shot.

 

FileList

The files which end with ".storyboard" file names form the UI components of the application. (Atleast, that is my understanding as of now… will change this post if I find otherwise).  As the name indicates, the one with _iPhone will be the iPhone UI, and the one with _iPad will be the iPad UI. At this time, I think we will have to create separate UI for these different devices, but we can link these UI elements to the same code/objects that we create in our application. This gives us the flexibility of tailoring our UI to different device sizes, which will result in a better app experience for the end user.

It is now time to add several UI elements into the application. You can select UI elements from object library, and adjust their properties. Here is an example of an iPhone Screen.

NewImage

In the above example, I have added a text box, and a button. There is also a label, which is invisible here.

The text box, and the label forms the outlets here. We will handle the button through actions.

 

Declare Controller variable types for IBOutlet and IBAction

Because we are following MVC architecture, we will be going through the controller to perform something in the application from the UI layer (View). Inorder to achieve this, following steps have to be done

  • Declare appropriate variables in Controller object to hold reference of these UI elements
  • Create "Getters" and "Setters" for these variables in controller. This will allow the UI layer (View) to access these objects.
  • Link the actual UI Objects to these variables.

Below is the code which does all the above.

#import <UIKit/UIKit.h>

 

@interface BasicViewController : UIViewController

{

IBOutlet UITextField *txtName;

IBOutlet UILabel *lblMessage;

}

 

@property(nonatomic, retain) IBOutlet UITextField *txtName;

@property(nonatomic, retain) IBOutlet UILabel *lblMessage;

 

-(IBAction) doSomething;

-(IBAction)makeKeyboardGoAway;

 

@end

 

In the above code, we declare the text and label objects using IBOutlet. Remember that we have not linked them to the UI yet.

The @property declaration indicates to the compiler that the attributes txtName and lblMessage needs to be treated as properties, and we will need to generate "Getters" and "Setters" to access these. Later, we will use "@synthesize" in the ".m" file to generate these properties.

@implementation BasicViewController

 

@synthesize txtName;

@synthesize lblMessage;

 

-(IBAction)makeKeyboardGoAway

{

[txtName resignFirstResponder];

}

 

 

-(IBAction)doSomething

{

[txtName resignFirstResponder];

NSString *msg = [[NSString alloc] initWithFormat:@"Hello %@",txtName.text];

 

lblMessage.text = msg;

 

 

}

 

The method declarations indicate actions that can be linked to different events.

Once these outlets and actions are in place, it will show up in the popup .

Xcode

Sunday, January 08, 2012

Switching between UI design mode, and Source Code mode in XCode 4.2.1

The Problem

While learning iOS programming, at one point, I was working on adding some UI elements into the iPhone storyboard in Xcode 4.1. However, I clicked something by mistake, and now, the storyboard, instead of UI, was all XML code. I had no idea how to switch back to UI mode to drag and drop UI elements.

 

The Solution

To switch between code-mode, and UI mode, right -click on the .storyboard file, and choose "Open As…". There, select "Source Code" to view the file as code, and select "Interface Builder - IOS Storyboard" to get back to UI format.

NewImage

Tuesday, January 03, 2012

Android List View–Part 1 Basics

List views are an important part of many android applications because of a number of reasons. Most importantly, is the ability to display large number of data pieces, in limited space provided by a mobile device like an android phone.

In this tutorial, we will be looking into the basics of Android List views. I will also provide a link to completed project at the end of this post.

Overview of steps to make a ListView work

  1. Declare the data source. This can be for example, a String array, ArrayList, Database Cursor..etc.
  2. Declare and instantiate an adapter.
    • As part of instantiation, link the adapter to data source.
    • Specify the UI resource for each line of ListView.
  3. Attach the adapter to ListView User Interface
  4. Perform data modification operations on the underlying data source.
  5. Notify the adapter of any data change. This will result in the ListView being updated with latest data.

 

2. Declare and Instantiate an Adapter

The first step in making a ListView work is to instantiate an adapter. In this post (Part 1), I am keeping things pretty simple. We will look into complex List views (eg: a ListView with Images, text..etc) in Part 2.

If you look at the source code, the line of code which initialize the adapter is as follows:

//Initialize array adapter to be attached with list
adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,arrData);

Here, we are using an ArrayAdapter object, as the adapter, because we are working with an ArrayList Object. (look at data type of arrData).

  • The first parameter(this) we pass is the context.
  • The second parameter (android.R.layout.simple_list_item_1) is a view/UI resource that is packaged with Android. This is simply a textView. For now, we will be using this. But, in part 2, we will be using our own view/UI to define how each item in the list view looks.
  • The third parameter (arrData) is the ArrayList object. This is where all our data is stored, for the sample application. More often than not, we will be using database cursors with ListViews. If this is the case for you, then use CursorAdapter instead of ArrayAdapter.

 

3. Attach the adapter to ListView User Interface Object

Once we instantiate the adapter, and link it to our data source, it is time to link the ListView UI object to the adapter. To do this, first we will have to get a reference to the UI object within our application. Following line of code does exactly that.

ListView     lstData = (ListView) findViewById(R.id.lstData);

The object lstData refers to the UI element that we added to main.xml (refer to the code). Once we have a reference to the UI element, following line of code attaches the adapter to the UI.

//Attach the adapter to list view.
lstData.setAdapter(adapter);

This completes all the steps needed to make the ListView work with a set of data.

4. Perform Data modification on underlying data source

However, there still is an issue of data being modified by the application. If/When the underlying data is modified, we have to let the adapter know that there is a change. Unless we do this, the changes will not be reflected in the UI.

Probably you are thinking “Why should I do this notification when data is changed? Cant android just keep track of the data, and detect the changes?”. I will let you ponder on that, and do leave your thoughts as comments.

 

5. Notify the adapter of any data change. This will result in the ListView being updated with latest data.

One important point to note here is that, we are notifying the adapter, that the data has changed. We are not directly communicating with the LIstView UI object. Once the adapter knows about data change, it is then responsible for modification of UI. More about this in Part 2, which will be about custom adapters, and more complex ListView.

Following line of code lets the adapter know that underlying data has changed

adapter.notifyDataSetChanged();

That’s it for simple ListView documentation. We will talk more about ListViews in part 2.

 

References

Base Adapter
http://developer.android.com/reference/android/widget/BaseAdapter.html

 

Source Code

https://github.com/gopalnair/SimpleListView/tree/master/SimpleListView