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.
/// <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" />
… initialize your controls here …
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:
An awesome discussion on the local web design group email list reminded me about the FaceBook Developer Tools page:
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"/>
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"/>
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.
Yoda has decided to add his daily words of wisdom to Tumblr.
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
Yes, yes. Launched a twitter bot, I have. Send you words of wisdom when tweet #yoda you do.
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:
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:
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.
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
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:188.8.131.52)+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:
If you skip to the 404 error in the reference documentation, you will see that 404.3 means "MIME map policy prevents this request"
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:
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