Pini Dayan

ExtJS 4–Managing dynamically loaded views with single controller

Pini Dayan — Tue, 01 May 2012 14:15:00 +0000

Since lots of digging in the web had to be done in order to find answer to this I decided to write this down:

When facing with the problem of dynamic loading of widgets we need to understand exactly how to load the view dynamically and how to associate them with their controller.

Lots of questions should be answered in this scenario, for example:

1. Should there be an instance of the same type of controller many times for each of the views or should there be only one instance of the controller that manages all views?

2. Is there a single store or multiple stores for each view?

A quick sample will help to understand the problem: Let’s say we have a panel which displays list of employees. When clicking each employee we are showing the employee view in the middle. This view has some items like displaying the name of the employee and delete button, print button and so on. Since there can be only one instance of the same controller on the application controllers list we need a way to distinguish the view events. (Actually if we really want to we can create more than one controller instance but as we will see soon we don’t need to and this is not the way we want to go).

So here is the solution:

1. Create the view using Ext.create or Ext.widget.

2. Add it to some container panel.

3. Create a single instance of the controller or do nothing if it exists.

4. Make sure this controller listen to the events from the view and make sure each event from the view sends it reference to the controller.

5. When the controller needs to update something on that view or use one of its property access the view using the reference that the view send to him.

Here is the diagram for getting it to work:

In regards for the store issue, it depends, If we need a single store for all our views or we need multiple stores for each view, both cases can be done.

ExtJS 4– using config for creating automatic methods

Pini Dayan — Tue, 24 Apr 2012 13:31:00 +0000

Hi all,

When you define a class using ExtJS you can specify a config section (just like you can add many cool things). By using the config you can create automatic methods that will be generated for you, for example:

This will automatically create 8 methods for you. 4 methods for each property in the config section.

getXXXX – returns the current value

setXXXX – sets the property value to a new value

resetXXX – reverts the property value to its default value

applyXXXX– this is a template method that you can choose to define. It is called whenever setTitle is called.

This great thing happen due to a preprocessor that each ExtJS class has. Since each class you define is Ext.Class instance it has this preprocessor (config preprocessor).

Enjoy, Pini

ExtJS 4–Loading controllers dynamically

Pini Dayan — Tue, 24 Apr 2012 13:12:00 +0000

Hi all, Since I had to look it up really hard in the network I decided to write this important post in order to understand how to load a controller dynamically when using ExtJS 4.0.7 MVC.

So here goes, Lets say you are building a web application using ExtJS MVC and you wish to load some views and their corresponding controllers dynamically. this can be used to load certain views for different user roles or simply to provide a “bag” of widgets that can be added if the user wishes to add them to its page/workspace/dashboard.

So lets suppose we have a view that displays the widgets we can add, each widget is represented using a button with the widgets name. when clicking this button the following things happen:

1. the controller who listens to this event will fire an application event.

2. Another controller responsible for the container of the dynamic widgets will listen to this event and handle this event.

3. This controller will perform 2 things:

a. Add the view dynamically to the container:

b. Will create and add the controller for this view to the application controllers list:

4. The loadController function is available since I added it to the application instance like this:

By using the this.getController method we are actually instantiating this controller and adding it to the list of controllers.

Here is the internal code for this method:

function(name) {

var controller = this.controllers.get(name);

if (!controller) {

controller = Ext.create(this.getModuleClassName(name, 'controller'), {

application: this,

id: name

});

this.controllers.add(controller);

}

return controller;

}

Hoe this helps, Pini

JavaScript Callee property

Pini Dayan — Sun, 29 Jan 2012 08:25:20 +0000

Hi all,

It always amazes me how I discover another JavaScript feature I wasn’t aware of. The feature I want to discuss here in this post is the Callee property we have from the arguments property we have when we are in a function scope.

This property will return the current function being executed right now. In addition we have the caller property that we can use to get a reference to the calling function.Imagine you could even do crazy stuff like getting the caller function and its argument by doing something like:

arguments.callee.caller.arguments[0].

Here for example we are doing something nice:

Not every browser support this property although it was omitted by ECMA

How to easily search SQL stored procedures and objects

Pini Dayan — Tue, 26 Oct 2010 09:57:00 +0000

Hi all, Lately I have been working on a Migration project in which I had to move data from an old SQL DB into a new one with a different schema (slightly different). In order to understand the differences I downloaded several free tool in which I could compare both schema. There are lots of good tool for that but during the project I also had to look out for things like:

1. Which stored procedures and Tables FK uses a given column?

2. Which tables contains a given ID

and much much more questions of that kind. So instead of using a stored procedures and system tables to perform the task I have found out that there is a free tool from the “Redgate” company that does exactly that:It is called “SQL Search” and here are some snap shots to let you understand how it works. (BTW it is fully integrated with SQL management studio 2005, 2008).

(You can filter which object types you want to search in : Tables, SP, Views etc)

Once clicked you can see the text and move to the SP.

Here is the link for the download:http://www.red-gate.com/products/SQL_Search/index.htm

Enjoy!

ASP.NET Ajax 4/3.5 CDN support

Pini Dayan — Thu, 17 Jun 2010 11:53:00 +0000

Today I found out a cool nice thing. As we all know Microsoft ASP.NET Ajax 4.0 is shipped with the new caching support for the JS library it uses. This feature is called the CDN and basically it is working and increasing performance by spreading lots of servers around the world that store JS files like the ASP.NET Ajax 4.0 and the Jquery library files.

From Microsoft: “By taking advantage of the Microsoft Ajax CDN, you can significantly improve the performance of your Ajax applications. The contents of the Microsoft Ajax CDN are cached on servers located around the world”

For a list of all available files check this site.

What if your application is ASP.NET 3.5 and not 4.0 and you are not using or whishing to upgrade to the 4.0 version. Well you can still use the CDN. Microsoft added the 3.5 Js files to the CDN as well.

The 2 files available are the

http://ajax.microsoft.com/ajax/3.5/MicrosoftAjax.debug.js

http://ajax.microsoft.com/ajax/3.5/MicrosoftAjax.js

You can use them by using the Script manager like this:

<asp:ScriptManager ID="SCRIPTMANAGER1" EnablePartialRendering="false" runat="server">

 <Scripts>

     <asp:ScriptReference Name="MicrosoftAjax.js" 

                Path="http://ajax.microsoft.com/ajax/3.5/MicrosoftAjax.js" />                

 Scripts>

asp:ScriptManager>

Enjoy

Adding/Firing custom event using JavaScript

Pini Dayan — Sun, 16 May 2010 13:42:00 +0000

Today I found out a very cool way for adding custom events and fire them for any Client side object. This can be done using ASP.NET Ajax very easily. (Thank you Igor).

In order to create these events and fire them we will use the Sys.EventHandlerList Class. This class Creates a dictionary of client events for a component, with event names as keys and the associated handlers as values. It’s main method we need are the addHandler and getHandler. Lets see a simple example which is pretty self explanatory.

This sample creates a Book and a Library “classes”. The Library class will have a Add and a GetBook method that will fire an event when ever they are called. Here is the Code: (And again it is pretty self explanatory)

   11 <form id="form1" runat="server">

   12     <asp:ScriptManager runat=server ID="SM">

   13     asp:ScriptManager>

   14     <div>

   15 

   16     div>

   17 

   18       <script>

   19           function Enums() {

   21               throw Error.notImplemented();

   22           }

   23 

   24          Enums.ActionType = { Add: "Add", Get: "Get" }

   26 

   27 

   28           function Book(name) {

   29               this.Name = name;

   30           }

   31 

   32           function Library() {

   33               this.Books = [];

   34           }

   35 

   36           Library.prototype.Add = function(book) {

   37               this.Books[this.Books.length] = book;

   38 

   39               this.fireEvent(Enums.ActionType.Add, book);

   40           }

   41 

   42           Library.prototype.GetBook = function(bookName) {

   43               var retval = null;

   44               for (var x = 0; x < this.Books.length; x++) {

   45                   if (this.Books[x].Name == bookName) {

   46                       retval = this.Books[x];

   47                   }

   48               }

   49               this.fireEvent(Enums.ActionType.Get, retval);

   50               return retval;

   51           }

   52 

   53           Library.prototype.addHandler = function(eventId, handler) {

   54               if (!this._events) {

   55                   this._events = new Sys.EventHandlerList();

   56               }

   57               this._events.addHandler(eventId, handler);

   58           }

   59 

   60           Library.prototype.fireEvent = function(eventId, book) {

   61               var events = this._events;

   62               if (!events) {

   63                   return false;

   64               }

   65 

   66               var handler = events.getHandler(eventId);

   67               if (handler) {

   68                   handler(book);

   69               }

   70           }

   71 

   72           var lib = new Library();

   73           lib.addHandler(Enums.ActionType.Add, BookAdded);

   74           lib.addHandler(Enums.ActionType.Get, BookUpdated);

   75 

   76 

   77           function BookAdded(book) {

   78               alert("A book was added:" + book.Name);

   79           }

   80 

   81           function BookUpdated(book) {

   82               alert("A book was updated:" + book.Name);

   83           }

   84 

   85           lib.Add(new Book("C# book"));

   86           lib.Add(new Book("VB.NET book"));

   87           lib.GetBook("C# book");

   88 

   89 

   90     script>        

   91     form>

Enjoy.

Ever forgot “alert()” when deployed to production

Pini Dayan — Sun, 25 Apr 2010 09:04:48 +0000

As developers we often forget to remove debug code on the client side such as “alert” calls , “debugger” statements and so on. So in order to avoid our team leader throw a chair at us here is a simple solution to this problem:

On the page startup ( page load or when ever you find it necessary) simply override the alert method like this:

Set alert to work only in debug
var originalAler = window.alert;
window.alert = function(message) {
if (Sys.Debug.isDebug) {
   originalAler(message);
 }
}
What i am doing here is to save the original alert method in a variable(delegate) and when someone uses the alert message simply check if we are in debug mode (I used ASP.NET Ajax) and call the original alert.
Enjoy.
 

Using C# 4 to implement lazy initialization

Pini Dayan — Thu, 08 Apr 2010 10:02:00 +0000

Sometimes we wish to improve performance and improve memory usage by making sure the Object we create and initialize is really needed. A couple of scenarios that we might thing of are:

We have an object that is expensive to create and there might be situations when we don't really need it. Lets say we have an Employee object in memory and this Employee has a property by the name FormerEmployers that describe all the places he worked at. This information is initialized from a DB. If the consumer of this Employee object never reading this data there is no sense filling the memory and bringing this data.

We have an expensive Object to create but we want it’s creation only after other expensive objects have created. An example for this is a creation of some large arrays or lists when the application first loads but the other are not necessary immediately.

Up until now days we had to implement this laziness by ourselves. Now we can use the Lazy within .NET 4.

Her are some samples and expiations from MSDN:

To define a lazy-initialized type, for example, MyType, use Lazy (Lazy(Of MyType) in Visual Basic), as shown in the following example. If no delegate is passed in the Lazy constructor, the wrapped type is created by using ActivatorCreateInstance() when the value property is first accessed. If the type does not have a default constructor, a run-time exception is thrown.

// Initialize by invoking a specific constructor on Order when Value

// property is accessed

Lazy _orders = new Lazy(() => new Orders(100));

You can also pass a delegate in the Lazy constructor that invokes a specific constructor overload on the wrapped type at creation time, and perform any other initialization steps that are required, as shown in the following example.

// Initialize by invoking a specific constructor on Order when Value

// property is accessed

Lazy _orders = new Lazy(() => new Orders(100));

After the Lazy object is created, no instance of Orders is created until the Value property of the Lazy variable is accessed for the first time. On first access, the wrapped type is created and returned, and stored for any future access.

// We need to create the array only if displayOrders is true

if (displayOrders == true)

{

     DisplayOrders(_orders.Value.OrderData);

}

else

{

    // Don't waste resources getting order data.

}

Thread–safe Initialization

Some Lazy constructor overloads have a Boolean parameter named isThreadSafe that is used to specify whether the Value property will be accessed from multiple threads. If you intend to access the property from just one thread, pass in false to obtain a modest performance benefit. If you intend to access the property from multiple threads, pass in true to instruct the Lazy instance to correctly handle race conditions in which one thread throws an exception at initialization time. If you use a constructor that does not have the isThreadSafe parameter, the value defaults to true.

In multi-threaded scenarios, the first thread to access the Value property initializes it for all subsequent accesses on all threads, and all threads share the same data. Therefore, it does not matter which thread initializes the object, and race conditions are benign. If the first thread to initialize Value causes an exception to be thrown, that same exception will be thrown for all subsequent accesses of Value. It is not possible for one thread to raise an exception and another to initialize the object. The following example shows that the same Lazy instance has the same value for three separate threads.

// Initialize the integer to the managed thread id of the 

// first thread that accesses the Value property.

Lazy<int> number = new Lazy<int>(() => Thread.CurrentThread.ManagedThreadId);

Thread t1 = new Thread(() => Console.WriteLine("number on t1 = {0} ThreadID = {1}",

                                                number.Value, 

                                                Thread.CurrentThread.ManagedThreadId));

t1.Start();

Thread t2 = new Thread(() => Console.WriteLine("number on t2 = {0} ThreadID = {1}",

                                               number.Value, 

                                               Thread.CurrentThread.ManagedThreadId));

t2.Start();

Thread t3 = new Thread(() => Console.WriteLine("number on t3 = {0} ThreadID = {1}", 

                                               number.Value, 

                                               Thread.CurrentThread.ManagedThreadId));

t3.Start();

//Ensure that thread IDs are not recycled if the 

//first thread completes before the last one starts.

t1.Join();

t2.Join();

t3.Join();

Enjoy

ASP.NET 4.0 New features – HTML, JS, ASP.NET Snippets

Pini Dayan — Mon, 30 Nov 2009 09:55:00 +0000

In previous version of VS.NET we encountered the new snippet solution for creating a chunk of code that is usually reusable and then using it during programming or even lecturing. This feature was available for both C# and VB.NET coders. But we could not create or use snippets for the markup we are writing like HTML, JavaScript or even the ASP.NET page. VS.NET 2010 allows us to do just that!

Lets see some of the “out of the box” snippets we can use:

HTML Snippets:

AS you can see the same snippet sign is now available on the ASPX page side. So for example if I choose the checkbox snippet and double tab click it i will get the following markup:

JavaScript Snippets:

Let move even further and see a much useful sample. Most of us are writing JavaScript and lots of it in our web application, so lets see what is available out of the box for us in JavaScript :

alert snippet,control snippet,create snippet, do for while snippets, if else snippets and much much more. Here for example I am using the for snippet for creating a for clause.

ASP.NET snippets:

We have some useful control declarations as a snippets such as updatepanel, sqldatasource , all the validator controls and much much more.

Creating our own custom snippets:

Wouldn’t it be great to create our own snippets since we are the ones knowing what markup we most commonly using. So before showing how to accomplish this, Here is how you can see the entire list of snippets.

In the VS.NET 2010 , clicj the tool menu and open the “code snippets manager”

This snippet manager will now show you all the HTML, ASP.NET snippets or the JS snippets if you choose Jscript in the language select box. So in order to add them simply use this manager and read how to create the snippet files here.

Surround with feature:

Another cool thing we have in C# and is really useful is the “surround with” . We can for example write some JS code and then decide we want to surround it with a function. Simply select the wanted Js , right click and choose “surround with” .

Enjoy.