ExtJS 4–Managing dynamically loaded views with single controller

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

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

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

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

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

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:

Adding/Firing custom event using JavaScript

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)

Enjoy.

Ever forgot “alert()” when deployed to production

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:

Using C# 4 to implement lazy initialization

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<T> within .NET 4.

Her are some samples and expiations from MSDN:

Enjoy :-)

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

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.

ASP.NET 4.0 New features – URL Routing

Hi all, In this series of posts I am going to write about ASP.NET 4.0 new features. I will try to concentrate on the important features since there are many new cool ones. At this point of writing I am using the VS.NET 2010 Ultimate Beta 2 version. So lets introduce the first feature:

URL Routing:                  

URL Routing is the ability to use “friendly” URL’s instead of of using the once we know so far. So instead of using the knows URL’s like:

http://www3.cet.ac.il/FieldsPage.aspx?ID=Science

http://www.google.com/search?q=vs.net+2010&rls=com.microsoft:en-us&ie=UTF-8&oe=UTF-8&startIndex=&startPage=1

where we have a protocol , a host name , a directory list, a page and a query string in the format: field1=value1&field2=value2&field3=value3...

We can use a “friendlier” version like:

http://www.Developers.com/software/aspnet

These “friendly” URL’s has the following benefits:

1. They are more readable ( Actually it is debatable but lets go with the flow)  
2. They are more SEO friendly (Search engine optimization)

The idea is to map these URL’s to a physical files by configuring your application. Up until now, this feature existed in ASP.NET MVC, now we can use it in ASP.NET 4.0. So how do we do it and where do we do it:

All we need to do is adding the routing data some where in the application , A good place to do it is in the Application_Start event so it will happen only once. Here is a sample code that demonstrate how to achieve the routing:

Adding routing to the global.asax:

protected void Application_Start(object sender, EventArgs e)
{
  //Routes: An object of type RouteCollection that contains all the routes
  ConfigureSiteURLRouting(System.Web.Routing.RouteTable.Routes);
}

private void ConfigureSiteURLRouting(System.Web.Routing.RouteCollection routeCollection)
{
  routeCollection.MapPageRoute("RouteCategory",       // A friendly name to descrive the route
                               "Books/{bookName}",    // The url format
                               "~/Book.aspx");        // The actual web page to handle the request

}

Getting the url values in the destination page:

Now once I am navigating to http://localhost:1559/Books/ASPNET in my development environment I am actually running the page “book.aspx” which has the following code for getting the book parameter:

string bookName = Page.RouteData.Values["bookName"] as string;

Programmatically Generating outgoing URL’s :

Just like we can map incoming URL’s to our real pages, we can generate them for the outgoing request as well. So in order to generate a URL in the following format  we can use the Page.GetRouteUrl method to perform just that.

Enjoy

Ajax ToolKit:Fix ResizableControl handler position problem

One of the controls available in the Ajax ToolKit is the ResizableControlExtender which makes a panel (div) resizable. One of the major bugs this control has his the ability to set the location for the handler (The place holder for the mouse with the resize cursor) to the left bottom corner of the ResizableControl target. There are many solutions out there , but as I tried them most of them simply do not solve the problem. After downloading the ResizableControlBehavior.js file and learning how it works , here is a simple solution to the problem:

1. Set the HandleOffsetY and HandleOffsetX properties of the ResizableControlExtender control to 3.

2. During this point the handler will be set in the top right corner as the following code from the ResizableControlBehavior.js  indicates: 

Ajax Tip: Set position for ModalPopupExtender

Hi all, Ever wanted to set the location of the Modal windows you open using the ModalPopupExtender available when using ASP.NET Ajax toolkit?

Well there is a very simple way to do it using BLOCKED SCRIPT

1. Get the position you want the modal window to show. You can do it using ASP.NET Ajax library using Sys.UI.DomElement.getLocation method like this:

var location = Sys.UI.DomElement.getLocation($get("div1")); 

In this case I used some div control to set the modal windows next to it.

2. Get the Modal window reference by using it’s panel or div element.

Microsoft ASP.NET Ajax DOM Events

Hi all, Lately I add to deal with a lot of cross browser stuff (Needless to say is is very ugly and in frustration times I wish we only had IE :-) )

Anyway , one cool way to solve lots of these issues is of course to use a Framework that does all the Cross browser JS for you.I am using Microsoft ASP.NET Ajax Library. Here is a nice example of how to handle mouse clicks in a way that will work on IE, Chrome and Firefox.

When trying to work with the mouse event (And writing cross browser code) you get familiar with the phrase :”JavaScript Madness”. For example: When wanting to know which mouse button was clicked and we want to use the “event” object JavaScript offers we see there is little cross browser compatibility regarding the number representing which button was clicked. In IE we have “event.button” with the values of 1, 4, 2 but we don’t have “event.which” which works for Safari Netscape and some other browsers. The “event.which” value was originally used in Netscape, and the “event.button” value was originally used in Internet Explorer. Later browsers used both, and messed them both up.

So here is a Sample code to illustrate how simple it is when using the framework and the DOM options it provides:

<script>

RoundedCorners control – how does it really work?

ASP.NET Ajax toolkit has many cool controls, one of them is the RoundedCorners control. I think any ASP.NET developer meets the problem of how to create a control with rounded corners sometime during his career. Most of us solve this issue using images by creating 4 images , one for each corner. Here is a good example of how to achieve this using image and table.

There is another solution that is not yet cross browser one. there is the css 3 new upcoming feature for giving each control a raduis. Mozilla already supports it and calls it “moz-border-radius”, I even wrote about it in my blog:CSS 3 new amazing feature - border radius. But what I want to discuss today is another cool solution that is actually cross browser one. The RoundedCorners control that is available in the ASP.NET AJAX toolkit.

Let's say we have a simple div control:

and we want to make it rounded. Here is the server RoundedCorner control definition to achieve this:

So how does the control work:

As it turns out, the control does not use any images , it does it using a very nice technique. If you look at the source code that is created for our div ( using any tool, I used the IE 8 developer tool bar) you will see the following code:

<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 3px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 3px" __roundedDiv="true"></DIV>
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 2px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 2px" __roundedDiv="true"></DIV>
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 1px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 1px" __roundedDiv="true"></DIV>
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 0px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 0px" __roundedDiv="true"></DIV>
<DIV style="BACKGROUND-COLOR: red; HEIGHT: 1px; MARGIN-LEFT: 0px; FONT-SIZE: 1px; OVERFLOW: hidden; MARGIN-RIGHT: 0px" __roundedDiv="true"></DIV>