Sencha ExtJS and jQuery, Intellisense and getting started
It's probably been quite a while since I blogged anything really useful. So I have been working for the past few months at a company called AgilityNOW, making some modifications, adding new features, and learning the framework architected by the two business entrepreneurs. Their framework is designed around ExtJS, Microsoft ASP.NET with ASP.NET WebMethods for web services. The mainly JavaScript based ExtJS front end consumes said web services and the ASPX pages/server side is mostly for serving up the data and CRUD operations. I have been learning about ExtJS, which has a pretty steep learning curve and I wanted to begin sharing some of my experiences about getting started with ExtJS and their controls in this type of environment. Since I have been doing server side ASP.NET using the ASP.NET UI controls for such a long time, it is especially hard for me to step away from the ASP.NET framework and begin using 100% JavaScript based UI that consumes web services. There are some benefits to doing it this way, and elimination of the postbacks and viewstate is nice but I still was very reluctant to go down this path if it weren't required by the company. My experience for the past few months have been exclusive to ExtJS, since jQuery is not allowed (from my understanding of the reasons why, it is that mixing the frameworks will cause confusion without a standard framework and there is a valid point there). I have a lot of positive experience with jQuery and I still think it is easier to use, but I will write about my experience with ExtJS to help others who are having the same difficult time learning how to use it. I've also been trying to decide on what kind of Testing framework to suggest to be used here, I've used a few that could be helpful but ExtJS adds its own complexity to the testing situation.
First off, ExtJS and jQuery were from my limited understanding, originally frameworks used for difference purposes. Originally jQuery started out as a DOM manipulation framework and not really trying to provide heavy functional controls. The jQuery UI was released a while after jQuery started, sometime in 2007. ExtJS from my understanding was really built from the ground up to be UI centric and provide controls that are used to build full featured UI from. ExtJS has a good object oriented design / architecture and their UI controls are meant to be used together to create great looking, theme-able UIs. Every UI framework, including ASP.NET, has their own ways of doing things and once you understand them the pieces start to fall together and you can progress more easily building great UI. The difficult part is getting started and making sure that you have a solid foundation to begin with.
And so my first helpful tip on working with ExtJS will be adding Intellisense support to your web pages if you are working with Visual Studio 2010. There are patches and updates that get the Intellisense to work under VS 2008, and I will post that in a later article but for now I show you the simplest method for enabling it.
Adding JavaScript Intellisense with ExtJS revolves around making sure that your ExtJS code is separated out into ".js" files. This is just good programming practice but a lot of developers may get used to entering their JavaScript inline to the web pages. To use the Intellisense hints below, they must be at the top of a ".js" file for Visual Studio to recognize them. I know that they do not work on ASPX pages for obvious reasons, but I haven't tried using them on ".html" or other file types yet.
/// <reference path="~/scripts/ext/adapter/ext/ext-base.js" />
/// <reference path="~/scripts/ext/ext-all.js" />
You can also add more of your own .js references, and have one .js file reference another for Intellisense purposes, for instance:
/// <reference path="~/scripts/ext/adapter/ext/ext-base.js" />
/// <reference path="~/scripts/ext/ext-all.js" />
/// <reference path="~/scripts/HomePage.js" />
/// <reference path="~/scripts/AboutUsPage.js" />
Ext.onReady(function() {
… initialize your controls here …
});
For simplicity I used web page naming conventions for our JavaScript includes and assuming we have a HomePage.aspx or HomePage.html we would have a corresponding HomePage.js include file. When working with ExtJS, you will want to use fully qualified namespace naming conventions or class naming conventions for the files names. If you are designing UI components with ExtJS, many times you will have classes that are reusable and do not necessarily have to be tied to a page.
The last tip you will need to know is that you must press CTRL-SHIFT-J to manually tell Visual Studio to reload your JS references. If there are javascript warnings or errors (quite possible) in your javascript references, they will be shown on the Output window in Visual Studio.
Unfortunately, the Intellisense does not give you insight into the many class properties that you have to initialize when you are building the controls, but it does help for some of the simpler dom manipulations. Sencha has updated the ExtJS documentation site recently, and it has a great autocomplete/suggestion search box format that really helps find things quickly (the old version of the doc site was not so good).
Here is a link to the Sencha Ext JS docs for any versions of their framework:
http://docs.sencha.com/
FaceBook’s Like / Share feature and your website thumbnail image
An awesome discussion on the local web design group email list reminded me about the FaceBook Developer Tools page:
http://developers.facebook.com/tools/
At the bottom of this page is a tool called the URL Linter. It will check your website for FaceBook properties and meta data that FB expects, and it shows you what thumbnail image you may have entered in your HTML metadata. One of the users in the discussion group (thanks Dede!) mentioned that it also has the side effect of refreshing FaceBook’s cache of your thumbnail.
Sites wanting to display a thumbnail image when a user enters their URL for the Share or Like feature on FaceBook have to put specific HTML markup on the home page. The Linter tool mentions FaceBook’s Open Graph protocol properties a lot, as this is the new system that handles rendering the thumbnail image for your website.
One of the easiest ways to learn something is by example, just remember that my examples may not be perfect or will become outdated. Here is a sample of Subtle Technology’s home page HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server" profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="image_src" href="http://www.subtletechnology.com/SubtleTechnologyFBThumbnail.png" />
<meta property="og:title" content="Subtle Technology Inc - Technical blurbs by Michael Urvan"/>
<meta property="og:type" content="company"/>
<meta property="og:url" content="http://www.subtletechnology.com/"/>
<meta property="og:site_name" content="SubtleTechnology"/>
<meta property="fb:admins" content="1321525614"/>
<meta property="og:description"
content="A blog about Microsoft .NET, Silverlight, FaceBook, Twitter, and other technologies for Subtle Technology Inc by Michael Urvan"/>
<meta property="og:image" content="http://www.subtletechnology.com/SubtleTechnologyFBThumbnail.png"/>
</head>
The image_src is the old method of specifying the thumbnail image for your web site, and FaceBook will probably continue to support that method. Remember that the thumbnail image is grabbed and cached by FaceBook systems, and using the URL Linter tool will help refresh that cache if you are seeing an old Thumbnail Image when you try to test the Share or Like FaceBook feature. Remember that FaceBook servers may abide by cache period metadata returned in the HTTP headers by your webserver or caching pragmas in your HTML markup.
Tumblr Yoda Bot
Yoda has decided to add his daily words of wisdom to Tumblr.
http://yodabot.tumblr.com
Donation 4 CURE
I watched some of the WOW4CURE live game-a-thon coverage as it was happening. It was quite entertaining with some lively quips in response to my pointless virtual banter; even The Police got involved due to the gamers' rowdy sod-stomping antics. I kid though - I hardly saw them stand up over several hours, much less make enough noise worthy of constibulary involvement. It had all the same antics, and yet was more entertaining than most reality TV shows. In the end, it was a cause worthy of encouragement so I had to donate.
Props to the gamers lending their time to this cause. Thank you Jann / CURE for the thank you letter, I look forward to donating in the future.
CURE Childhood Cancer - http://www.curechildhoodcancer.org/
Technorati Tags:
philanthropy,
cancer
Twitter Yoda Bot
Yes, yes.
Launched a twitter bot, I have. Send you words of wisdom when tweet #yoda you do.
ASP.NET Page Life Cycle Diagram / cheat sheet
An ASP.NET developer needs to understand the ASP.NET Page Life Cycle and refer to a life cycle reference from time to time. Here is a good reference that comes from an MSDN team member blog. I've used other diagrams before, but this one is recent and comes from an MSDN source:
http://blogs.msdn.com/b/aspnetue/archive/2010/01/14/asp-net-page-life-cycle-diagram.aspx
Here is also an older one that does not come from an official source, but looks reasonably accurate and includes a PDF version for printing:
http://spazzarama.wordpress.com/2009/02/04/aspnet-lifecycle/
Video Card Performance Reference
Futuremark has one of the best quick reference and comparison web pages for video card benchmarks. You can browse the benchmarks of all the video cards from ATI and Nvidia and compare them. It's a great reference tool when deciding on a new video card. Here is the link.
They provide a simple dropdown list, and although the pick list itself isn't sorted alphabetically (maybe it is sorted by review date), you should be able to find almost every popular desktop video card chipset variation listed.
Sharing C# .NET assemblies and classes with a Silverlight project - reusing common code
Generally you wouldn't want the business logic placed into a Silverlight application... except for instances like mimicking a pure desktop application. For example a twitter client, video games, or other types of Silverlight applications that won't require any shared user data access (in the case of twitter, that is your backend). That being said, there are ways to share client and server code for a Silverlight project using a WCF back end.
Moving existing code to Silverlight (reusing old C# code)
If your project fits this description, you can modify the .csproj file to switch it between using the standard .NET assemblies and the Silverlight assemblies.
The key to switching the build type is finding this line in the non-Silverlight assembly project's .csproj file:
<Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
and changing it to:
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\Silverlight\v3.0\Microsoft.Silverlight.CSharp.targets" Condition="" />
Now your project will be using the Silverlight assemblies, but some of the <References> lines in the csproj will need to be removed or changed. Here is what a typical Silverlight project has for the references:
<Reference Include="System.Runtime.Serialization" />
<Reference Include="System.Windows" />
<Reference Include="mscorlib" />
<Reference Include="system" />
<Reference Include="System.Core" />
<Reference Include="System.Xml" />
<Reference Include="System.Net" />
<Reference Include="System.Windows.Browser" />
If your project references any other assemblies that you have written, or any 3rd party assemblies, you will have to remove those references or perform the same csproj operation on them so that they are built against the Silverlight assemblies as well. All assemblies used by a Silverlight application must have been built against Silverlight .NET assemblies. If you try to add a reference to an assembly that did not, Visual Studio should display a warning.
Sharing source code via two proxy projects
If you want the source code to be shared with the server logic and client logic (maybe validation), then you can create two separate Visual Studio projects. Place the .cs files in a common/shared folder path, and when you 'add existing item' to the project you will use VS's "Add as Link" dropdown (the 'Add' button on the Add Existing Item screen has a dropdown arrow on it). Now you can have two primary projects (one Silverlight, one full .NET / WCF) referencing either of the new projects built on different platforms(one Silverlight, one full .NET / WCF), but the source code will be the same for both projects.
Also worth mentioning is the patterns and practices Project Linker Tool located here: http://msdn.microsoft.com/en-us/library/dd458870.aspx
Prism / Composite Application Guidance for WPF and Silverlight
Sharing code between WPF and Silverlight for a small utility class may work short term, but you will want to examine Prism - the Microsoft patterns and practices Composite Application Guidance located here: http://www.codeplex.com/CompositeWPF
Silverlight or Sketchflow error 2104 unable to download the application with IIS
Any time you receive a blank web page when trying to view or deploy a Silverlight application to your web server, it is possibly the result of a missing .xap MIME type handler. Occasionally it has to do with file permissions, if you just created a new web site and directory. Back in early 2008 when I first started working with Silverlight, it was difficult to find information about why the Silverlight app wouldn't display. If I remember correctly, Visual Studio at that time did not generate the Javascript code in the HTML app page to bubble up the error in Silverlight 2 so there was no indication. The first place that you should check when you have a strange issue with a web page hosted on IIS is to examine the web site access logs. The logs should give you an indication of whether it is file access permissions, authentication problems, or (in this case) missing mime type mappings.
Here in the access log you can see the xap file error:
2009-10-15 08:54:08 W3SVC1512438873 192.1681.1.22 GET /WebAdmin/WebAdmin.xap - 80 - 192.168.1.44 Mozilla/5.0+(Windows;+U;+Windows+NT+6.0;+en-US;+rv:1.9.0.14)+Gecko/2009082707+Firefox/3.0.14+(.NET+CLR+3.5.30729) 404 3 50
For IIS, you can find the detailed explanation of IIS HTTP status codes listed here:
http://support.microsoft.com/default.aspx/kb/318380
If you skip to the 404 error in the reference documentation, you will see that 404.3 means "MIME map policy prevents this request"
I describe how to find the error in javascript Internet Explorer below... but in FireFox you would need to use the Tools menu to open the Error Console and scroll to the end to find the javascript error.
When you navigate your web browser to the page in IE, you are greeted with a blank web page and the only indication of a problem (on IE) is the little javascript error icon in the bottom left corner of the browser as seen here:
Double clicking on the icon shows the following error:
Right click on the website in IIS select Properties, and click on the HTTP Headers tab:
click on MIME Types... click New.. and enter ".xap" for Extension and "application/x-silverlight-app" as the MIME-Type:
The older .xaml is for Silverlight 1 and .xbap is for WAML Browser Application for WPF deployments. If you want xbap add a similar entry with "application/x-ms-xbap". For more info on XBAP go here: http://xbap.org/
For anyone hosting on an asp.net web host provider like GoDaddy or DiscountASP, you can configure the mappings yourself in web.config. Here is an article that has tips on web hosting with Silverlight: http://www.wpflearningexperience.com/?cat=12
This article contains information about setting the mime types using web.config:
http://blogs.iis.net/bills/archive/2008/03/25/how-to-add-mime-types-with-iis7-web-config.aspx
How to list, clear or delete isolated local storage used with Silverlight
Using Isolated Local Storage in Silveright is simple enough, but I was curious about how to clear the local storage... To delete Silverlight specific local application storage, bring up any Silverlight application and right click on it. The only popup menu option given is 'Silverlight'. Select it, and on the Microsoft Silverlight Configuration dialog, select the Application Storage tab:
At this point you can select and delete isolated storage for any Silverlight application you may have used.
The MSDN documenation on the Silverlight Configuration dialog is at http://msdn.microsoft.com/en-us/library/cc645084(VS.95).aspx
For ASP.NET applications and WCF services you use the storeadm.exe Isolated Storage Tool, accessible by using the Visual Studio Command Prompt.
Available command line options are shown in the MSDN documentation as storeadm [/list][/machine][/remove][/roaming][/quiet]
storeadm /list will show you all of the local stores currently on the machine.
storeadm /roaming /remove will clear the current user's local storage whereas storeadm /machine /remove will clear the machine local storage.
The MSDN documentation is at http://msdn.microsoft.com/en-us/library/ezabwsbk(VS.100).aspx