iPone Application: MoveMe (continued)

Finally, I finished my build of MoveMe application from scratch. That's the first demo application for beginner developers. I thought it is better if I build this application by myself. I added one piece by one piece. That's quite good experience. Since Object-C is new for me, it takes some time to gain experience.

Xcode is Microsfot VS like IDE. It is hard to compare two. My first impression is good. IB (Interface Builder) is something like .Net's new Expression Blend. As its name description, it is use for UI design and link UI components, actions(for events) to class codes. At first, I did not have any clue how to use it. I thought these connections or linking must be done through IB's UI such as property, tab or dropdown list. However, when I tried to link MoveMeView class to a component in IB's outlet, I was lost. Finally, by watching some YouTube demos on IB, I figured out the linking is done through drag with Control key and drop. It's quite innovative way. I have to understand IB or Mac's way to do it.

The second lesson I learned is that parameter names in a method has to be matched if it is a delegate method. For example, when I typed in the codes for MoveMeView.m codes, I missed i in the animation delegate method's parameter name "finished":

-(void) animationDidStop:(CAAnimation *) theAnimation finshed:(BOOL) flag

As a result, the animation of MoveMe button only works at the start and then no respond after I moved it. Finally, I found the mis-typing error. It is the signature of method not matched. In Objective-C, you can call a method on object that may not defined. It would not generate an error or cause compiling error. It is OK. That's very nice. However, it may cause some very hard find bug. After I corrected my mistake, the application finds it's matched animation delegate method, and works fine. The bug caused my animation never stopping.

Another good lesson I learned is the Frameworks in Xcode project. It is similar .Net project's References. Since I created a new iPhone project in Xcode from scratch. Xcode did not add animation framework class QuartzCore.framework, which is used in MoveMe example project. I typed in codes in MoveMeView.m file. It includes the QuartzCore's header files like this:

#import <QuartzCore/QuartzCore.h>

and when I typed animation class names and methods, Xcode does show them in intellisense. However, when I compile the application. I got some errors about references not found in xxx.o. I was confused and there was not further indication where in the codes where the error is. Eventually, I realized that it is the library files missing. I have to include animation's library into the build file. In Xcode, all the libraries are under Frameworks folder in the project.

It has been very productive period for me. I got my built MoveMe working. There are some similarities between Objective-C and .Net C#. With my knowledge and experience in .Net C#, it is not so hard to understand Objective-C. However, Objective-C does have its unique features and power. I would like to continue to learn it and to develop applications.

Read More...

Collapse...

iPone Application: MoveMe

I started to learn iPhone application development from Apple's iPhone Dev Center. The first application is MoveMe. The material on this application gives overall description on main items in the application, but it does provide hands-on information about how to build the application by steps.

I tried to create all the classes, resources files, and windows xib files from scratch. It is not so easy. XCode provides good IDE for coding, however, I could not find similar convenient ways as I have done .Net applications by VS.

I am still in the progress to get MoveMe build up and working. One thing I found out that the window xib file has to be specified in the Info.plist file (which is under Groups & Files->Resources):



I did not use MainWindow.xib file. Instead, I created MainMoveMe.xib file. When I first run it, I got crash exception. The problem was caused by this "Main nib file base name" in Info.plist.

After I got this window file, still I could not find a way to link delegate to MoveMeAppDelegate class in Interface Builder. Since I created this window file, I have link windows to classes through Interface Builder. Anyway, it is quite interesting experiences to learn and develop iPhone Application. I'll keep log my experiences.

Read More...

Collapse...

iPhone, Android and Windows Mobile

It is getting very crowed in mobile phone. iPhone from Apple is mainly for hight-end users. It is very existing mobile phone. However, it has some limitations. For example, you can only run one application at one time and limited openness in iPhone SDK APIs.

Google announced Android early this year, and formed Open Handset Alliance a group of more than 30 technology and mobile companies. It is based on Java framework. It supports multi-processes and is expected to be run over a wide range of handsets from 12 keypads low-end ones to high-end ones. The first mobile phone supporting Android is coming in just a few weeks time.

Microsoft also put a lots of investment and efforts on Windows Mobile and a few mobile companies have already used it.

I think early next year we will see more interesting mobile phones with great applications available on the market!

Read More...

Collapse...

Add Scripts to Client Side Page 2

I have changed the ClientSidePage class. In the following articles, I'll use my updated class as examples. It is very easy to use the class, first use the ClientSidePage class as base class, and then use the base class method MonitorChanges() to add a web control for monitoring any changes.

For example, here is the code to add a textbox control for monitoring:

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    base.MonitorChanges<TextBox>(MonitorChangeControl,
      CONTROL_ID_MONITORCHANGECONTROL);
  }
}

where MonitorChanges is a TextBox control placed on aspx page. It is directly accessible in the server-side code class, and CONTROL_ID_MONITORCHANGECONTROL is a constant defined in the server-side class. I prefer to define control ID in a region in a class so that can be be easily maintained in once place instead spread all over the places.

One change in the method is that it is a method with generic type T, where T is constrained with WebControl class. The first parameter is a web control or the parent control where a specified control can be found by control's ID. In some cases, you may place some web controls within a GridView's templates. Those controls cannot be directly accessible. You have find them by their parent container such as GridViewRow control. In this case, you can pass in the GridViewRow control.

With the method, I used another class to find a web control. This makes it easy to use. You don't need to add some codes to find the control. See my previous blog on Find a control in ASP.Net Page.

You can monitor as many web controls as you want. However, from my experiences, I found there are too many problems to directly monitor each editable web controls. Some times you don't know how many they. For example, a GridView control may be bound to a database with dynamical rows of data. As a result, it is very hard to maintain.

The second issue is you have to understand when to initialize these controls on the client side script. As I mentioned in my previous article, the ClientSidePage class registers two groups of scripts on client side page. One is the startup scripts, where the method assignInitialValuesForMonitorChanges() is called when the web page is loaded. However, some web controls may not have data values available in the first loading process if the control is bound to an object data source and the object will be created on server side codes. The control may be late postcalled back to set values. In this case, the client side array for initial values would be nulls. What I find out is that I have to call MonitorChanges at the time the control is bound to data on server side. Then I use another overloaded method to pass initial values to the client side script so that the array could be initialized with correct values.

protected void GridView_RowDataBound(object sender,
    GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
    GridViewRow row = e.Row;
    base.MonitorChanges<CheckBox>(row,
      CONTROL_ID_ISEMPLOYEECONTROL, true);
  }
}

What I find out is that I don't need to monitor each web controls. What I need is to monitor only one TextBox control. It is initialized as empty. If any other control values are changed, this monitored control's value will be something like "Some data may have been changed. Click on Save button to confirm the changes".

In order to achieve this, I added two methods on ClientSidePage class. The first one is SetScriptOnClientSide(). This method will register two groups of scripts to client side in the same way as CliendSidePage does: a group script for starup and a group script for script block. These two groups of scripts are customized scripts with a customer provided registry key. This will make sure ClientSidePage registered scripts will not be conflict with customized scripts. You add whatever scripts you want to the client side.

SetControlEventScript(). This method takes three parameters, one for WelControl object, a string for an event attribute, a string for script, and a position to indicate where to add the script to the controls' event attribute if it has some scripts defined already.

Here is one example I use these methods in one aspx web page server side codes:

private void SetScriptsForClientSidePage()
{
  string script;
  /* Monitor one text box control: MonitorChangeControl with its control ID*/
  base.MonitorChanges<TextBox>(MonitorChangeControl,
    CONTROL_ID_MONITORCHANGECONTROL);
  script = @"
<script language=""JavaScript"">
  function {0}
  {
    var v_elem = document.getElementById('{1}');
    if ( v_elem )
    {
      v_elem.value = '{2}';
    }
  }
</script>
".Replace("{0}", SCRIPT_FUNC_SomeValueChanged) /* constant for function name: "SOmeValueChaned()" */
 .Replace("{1}", MonitorChangeControl.ClientID)
 .Replace("{2}", SCRIPT_CHANGE_MESSAGE); /* Message like "Some data may have been changed. Click on Save button to confirm changes or click on Cancel to revoke changes." */
  base.SetScriptOnClientSide("script", null, script);
  
  /*Add scripts for one text box control: CurrentSales */
  script = string.Format("{0};",
    SCRIPT_FUNC_SomeValueChanged);
  string eventOnChange = "onchange";
  ScriptInsertPosition pos =
    ScriptInsertPosition.BeforeExistingScrit;
  base.SetControlEventScript(CurrentSales,
    eventOnChange, script, pos);
}

This private method is called in the Page_Load() event when the page is first time loaded: monitoring one text box control, adding client side script with a script function definition, and adding event script for a web control. After done this, I always to view the client side source to verify my scripts.

The next article will provide the codes of ClientSidePage class.

Read More...

Collapse...

Add Scripts to Client Side Page 1

I have read an excellent article on how to add client side scripts to monitor changes and prompt user if a redirection call is fired by Scott Mitchell. He later updated the class to disable prompt in case there is no need such as Save and leaving the page.

I have used this class in my project. I found there are some features missing and then further updated the class. In this article and later on articles, I'll discuss how to use this class.

Basically, the class ClientSidePage is used as a base class for an ASP.Net Web Page (server side codes). You can use this class to monitor changes made by client on the page for editable web controls by the method of MonitorChanges().

Here is the way how it works. This method will register two script array variables (page level) on client side, one for monitored control's IDs and another for initial values for those controls.

In order to make this to work, the ClientSidePage class registers two groups of scripts on the client side: startup script and script block. The startup script is a group of scripts that will be called when the client side web page is loaded. This is for initialization purpose, for example, setting the monitored array with initial values by a script function assignInitialValuesForMonitorChanges(), which is defined in the second script group. This function initializes the array of monitored values as original values, and set a page level variable, m_needToConfirm, to true. This is a flag for confirming changes.

The second group of script, script block, contains some client side function declarations, page level events, and variables such as variable m_needToConfirm, and function assignInitialValuesForMonitorChanges() as mentioned above. Another example is to set page event window.onbeforeunload is set to a script function confirmClose(). When a unload page request is made on client side, the window.onbeforeunload event is called. The function confirmClose() checks if the flag variable is set and any monitored control' values are changed or not by comparing control's value to the original values. If so, a prompt is displayed with a message to confirm leaving the page with two options: OK for leaving the page, and Cancel for staying.

By the way, in Google's Chrome beta version browser, the OK button is "Leave this page" and "Stay on this page" for Cancel.

Most browsers have view source option. You can view those groups of scripts by this option. I like Chrome's viewing source. It opens a new tab with page's source codes, and it is very nice to search. For example, you can search for the variables, arrays, or functions as mentioned above. The searched strings are highlighted with yellow color and there are marks on scroll bar to indicate their positions. You can easily location them and know if they exist right away. Maybe that's Google's strength: search everywhere and know where they are.

There are some cases that the prompt are not desired. For example, a user makes some changes on a page, and then click on a Save button to save changes. Normally the saving request is a postback call to the server side, where changes are saved and new/refreshed data are sent back to the client side. In this case, the prompt is not needed. Scott updated the class to handle this case. Read his articles for details.

Read More...

Collapse...

Mac Software Development

I have have done my software development mainly in Windows Platform, some in Unix long time ago. I have got an iMac in March this year. Since then I spend a lot of my time using it at home. I really enjoy it. Recently I have installed XCode on my Mac and watched training videos about iPhone Application Development API kit.

It is very interesting to learn Objective-C and Cocoa framework even they are very different from .Net languages and framework. iMac computer is very easy to use and very stable. From what I have seen from Apple's training materials, the Objective-C and Cocoa are also very straight forward in syntax. Objective-C for Mac applications uses MVC pattern. That's the one I have seen on Microsoft's P&P team as well. I think there are a lots similarities between both.

I'll spend some time to learn Mac application development. Maybe I'll get more and more involved in Mac software development. Enjoy the new adventure!

Read More...

Collapse...

Google Launches Chrome Web Browser Today

It is getting more crowded in the web browser war. I have IE that is a part of Windows, Firefox, an excellent open source browser with multi-tabs and add-ins, Safari for Mac, and others rarely used. Now Google enters the web browser competition with Chrome!

It is a positive thing for most end users for sure. I think Chrome will have some special offers for us. First, it is built based on IE but it is open source. Soon it will be available for Mac. That means that we could have alternative browser for IE in Mac with IE special features. Secondly, its infrastructure is sandbox so that each process has its own rights which mean more privacy. Another related benefit is that one process crashing would not affect others like tabs and mails.

I think the biggest thing why Google decides to have its own browser is that the current browsers have too many dependencies. Many of Google's products and great features are depending on browser and end user decisions. For example, Google released Google Gears which provides off-line browsing. That's a great feature for most end users. The browsing process would more smooth and faster. The real-time data can be updated by the back-end database store and processes when the Internet connection is available and there is need to fresh the data. However, it is an add-in. It will be up to the end user to install it. Without the installation, it would not work.

jQuery is another great feature for web browsing. It loads additional JavaScript libraries. There are already many jQuery add-ins or plug-ins available and Google shows great interest in it. However, many features will depend on end users to install them.

I guess that Chrome will install Google Gears and many other add-ins as components by default. This will make Chrome very unique and outstanding. Many advanced features will be available right away. That will shine Chrome for sure.

Welcome Chrome to the web browser world!

Read More...

Collapse...

jQuery

Today I read David Hayden's blog on jQuery. It is a quite interesting JavaScript library. I tried some tutorial examples and get some tastes on how to use and its initial power.

I downloaded the library jQuery-1.2.6.js source code. Then I created a test html file. I followed the instruction to save the js file in the same folder as the html file. Then I tried some example codes to hide a reference link <a...>, add a style class to the link, add a click event to the link, and some chained queries. Basically, this library provides API functions to manipulate DOM objects or elements, handle events, perform animation, and add Ajax to your web project. As David recommended, jQuary in Action is a good book for beginners.

I'll spend some time to try out and learn this great tool. Hopefully I can use this in my web projects.

Here is a training video program by a 12 years old child in google engEdu:



Here is very good reference to jQuery API libraries: Visual jQuery 1.1


50+ Amazing jQuery Examples. Unfortunately, some links are not available. However, some are really amazing web pages.

Read More...

Collapse...