Sunday, July 29, 2012

jquery constructor with context $(selector,this)

Inside the jquery event handler, quite often we need to select a sub element within the passed in event element, and do some operation on it. The passed in event element is accessible from the this object. That is the place you will see a lot of $("selector", this) get called.

$(selector, this) is another jquery constructor, the second parameter takes a context variable. In this case, instead of selecting the elements from the current document, it just selects the matched elements from the context parameter. In the event handler, "this" represents the DOM object that the current event happens on it, to use the jquery method on it, we need first converts it to jquery object with $(this).

Wednesday, July 18, 2012

Common jquery shortcut

$(...)
=>
jQuery()

All jquery methods are started by calling jQuery(), which can be written as $(...)
 


$(function(){...});
=> 
$(document).ready(function(){...});
The function will be called when document is ready.
Do not mix this shortcut with javascript self-invoked anonymous function, the ending () makes the js function to be invoked, and thbe leading () indicates this is not normal function.
(function(){
...
})();
 

$.fn.myFeature = function () { ... } 
=>
jQuery.prototype.myFeature = function () { ... } 
 
The function to create a jquery plugin by adding method into p


Sunday, May 27, 2012

MVC for asp.net web form developer

For asp.net web form deveoper, when starting work with MVC, you may need to know few key points.

1. MVC does not have the rich UI controls available on web form
Reading any MVC books, you will be supprised none of them talking much about ui controls. So how can you put the treeview, or gridview control to your web page? The answer is MVC is an open framework, it is created to to incooperate the new web technology easily, like HTML5, jquery, etc, so it cannot define the ui control's mark up as web form does. So by design, it depends you to select and use any ui markup you get, and for now the answer is jquery ui, or other third party jquery ui extension.

2. MVC does not associate request/response to a backend individual.
Unlike web form, each client request or response is assocated to a backend aspx file, MVC lets you associate a backend method in controller class to each client request and response, this allows to incooperate the partial page render, and other ajax features easily. This is much better than web form, and it is key improment in MVC.

3. MVC dependency: javascript, jquery, CSS, ajax
Unlike what you heard from most MS experts, or MVC books, MVC does not depend on lambada expression, Linq or Entity Framework. In my opinion, you better avoid those topic when first learning MVC, as they have nothing to do with the key points of MVC. The really dependency of MVC are jquery, CSS and ajax. As they are the necessary elements to make a good MVC project.

In addition, I did not see much value in using Entity Framework, or Workflow Framework in your project, it allow you do certain things more easy, but on the other hand, you lose the fine control of the project due to those generated code. It has the same issue as the generated typed Dataset in ADO.NET. I would rather to spend a little more time and know exactly which line of code is doing what, than save some time but having a bunch of files doing things magically without I know the details. There are too many genius in Microsoft, but not enough commonsense.

Thursday, May 3, 2012

xib, view and viewcontroller

It is a little confusing how xib, view and viewcontroller works together in ios application. When app starts, it creates an instance of viewcontroller class, viewcontroller class asks to load xib file by calling initnibwithname mtheod, this will load the xib file into memory. At this moment, the owner of the xib file is viewController instance. It is more clear if this is done with [NSBundle loadNibNamed] method. The next step is mapping the outlet from xib resource objects to the viewcontroller instance's IBOutlet, usually this involves passes a view object to viewcontroller's view property. Once this is done, it totally depends on viewcontroller to decide how to display its view property on screen. So basically, what xib file does is creating all resource objects and associating them to the specified IBOutlet variable, and leave the owner to use it. Note the instance asks to load the xib must be the type specified in xib's file owner type, so that the IBOutlet settings can be matched between the real owner and xib file. Jonathan

Monday, April 2, 2012

jquery mobile and jquery version mismatch problem

In order for jquery mobile javascript works properly, the version of jquery library used in the page must match the jquery mobile's version. For example, the current version 1.0.1 of jquery mobile requirs the jquery version of 1.6.2. If the latest jquery version (1.7.2) is used, then it may not work.
A simple example is creating a two-page html file, then clicking the link from the first page to show the second page will not work. Taking half hour to figure this out.

Jonathan

Wednesday, March 21, 2012

Know which one is accessed in objective C: Instance variable or property

It may create some subtle bugs if you do not pay attention on which one is accessed inside a objective c method, as property and instance variable have the same name.
If you access from outside, then you know you are accessing the property as instance variables can not be accessed from outside of the class instance methods.
However if you access the variable or property by name from inside the class, it really depends on whether the key word "self" is used or not.
If you access through self, like self.myVariable, then the property is used and most likely, it is also retained.
If you access through the variable alone, then the instance variable is used and no property related feature, like retain, will apply.
So if next time you ios app crashes, pay attention to which one you are access inside your member method.

Wednesday, February 1, 2012

This pointer and function pointer in javascript

As shown below, Java or c# will pass current "this" pointer from caller to callee implicitly

void caller()
{
callee(); //caller will be invoked on this pointer used to invoke caller
}


In Javascript, when calling callee() inside caller(), if the invoking object is not specified as this.callee(), it does not implicitly pass the current "this" pointer to invoke callee(). And the global Window object will be used as "this" to invoke function callee.

When invoking constructor in javascript, inside the constructor, the "this" pointer is the current class, not the window object.

Another related issue is, in javascript, function defined in one class can be assigned to another object as method, (Note function is a standalone unit of statements and a method is attached to an object and can be referenced by the this keyword), and when invoking the method from another object, its this pointer is the assigned object, and has nothing to do with the class or instance that defines the function.

Sample code:
function bar()
{
alert(this.constructor.name);
}

function somefunc()
{
alert(this.constructor.name);
}

function apple()
{

this.bar = somefunc;
bar(); //call global bar
his.bar(); //call somefunc

this.internalMethod = function() {
alert("internal method this: " + this.constructor.name);
}
}


//to test the above code, calling following method from html page script section
var myApple = new apple();
myApple.internalMethod(); //myApple is this pointer used to invoke the method
var me = myApple.internalMethod;
me(); //window is used as this pointer to invoke the method


Full js file for testing

function Apple() {
try {
alert("constructor: "+ this.constructor.name);
this.color = "red";
this.bar = somefunc;
bar();
this.bar();

this.internalMethod = function() {
alert("internal method this: " + this.constructor.name);
}

this.internalMethod();

this.getInfo();
}
catch (ex) {
alert("exception: " + ex);
}
}

Apple.prototype.getInfo = function() {
alert(this.color + ', type: ' + this.constructor.name);
};

function bar() {

alert("bar method this: "+ this.constructor.name);
}

// anti-pattern! keep reading...
function somefunc() {
this.getInfo();
alert("somefunc this: "+ this.constructor.name);
}

Full html file for testing

var myApple = new Apple();
myApple.internalMethod();
var me = myApple.internalMethod;
me();