Following September’s launch of the new Microsoft CDN (Content Delivery Network Service), in which you can reference ajax libraries in cache, Microsoft recently added SSL support, thus confirming Microsoft’s announcement back then. This new feature is necessary in websites that have SSL enabled pages and script library references in them. What would happen until now was a message displaying “This page contains both secure and non-secure items…”.

SSL support is now enabled with the scripts hosted on the Microsoft AJAX CDN. Simply use an “https” moniker with any script references on your site that point to the CDN, and they will now be served over SSL. For example, below is how you can reference jQuery over SSL:

 For more information, check out the Microsoft Ajax Content Delivery Network website. At the bottom there’s a useful list of ASP.NET Ajax Libraries hosted on the CDN.

Technorati Tags: Ajax, ASP.NET

On the previous article, I introduced jQuery and showed how to enable it in your web app, along with a little insight on the basics. Now I’ll start showing some of the most useful methods you will find in the library, along with a sample for each. jQuery API is normally split into the following categories:

• jQuery Core – Core of the library: jQuery function, object assessors, extensibility and interop methods.
• Selectors – Filtering and selection operators and attributes to use in jQuery function – #().
• Attributes – Generic attribute manipulation methods, including class, text, html and value attributes.
• Traversing – DOM traversing and selection filtering mechanisms.
• Manipulation – Element manipulation methods, like text, html and boundary content.
• CSS – CSS manipulation within elements.
• Events – Eventing portion of the API. Handles typical object UI events. Very useful.
• Effects – Some nice effects are made available out of the box like fades.
• Ajax – Ajax requests and events.
• Utilities – General auxiliary methods for browser and feature information and array manipulation.
• Internals – Other core methods that you probably won’t need.

In my opinion, each one of these categories is important and has something you might want to use in your web site development routine. Element selection, value manipulation, DOM traversing, visibility handling, eventing, styles and appearance, async calls, etc. You’ll want this jQuery behavior in your code from the moment you end up reading this set of articles. So, the best thing for me to do in order to make you productive with this is to explain and show an example of the most useful features and common usage examples of the jQuery API.

For starters, let’s see how we can manipulate style attributes in DOM objects using jQuery. You often need to change element style attribute values dynamically whether it’s for animation purposes, highlighting, or UI perception logic. The normal javascriptian way of doing it is like this:

document.getElementById("MyDOMobject").style.display = "none";

This line of code would make the element in question invisible. The same could be done in jQuery the following way:

$("#MyDOMobject").css("display", "none");

So after “grabbing” my element named “MyDOMobject” with the jQuery marker $, I’ve used the css(name, value) method. What this does is change a given style attribute name to the specified value. On the other hand, in order to read a given style attribute value, the css(name) signature should be used.

Similarly, the attr() method allows you to read/change a given element attribute. For instance, the following line of code…

$("div:first").attr("id");

… would search for the first div in the document, and return the value of the “id” attribute. Pay no attention to the selection part, we will discuss that later (I’m just throwing some bones here and there to spice things up!).

To change the value of an attribute, we do this:

$("input[type=checkbox]").attr("disabled", "true");

This last bit of code selects all document checkboxes and disables them by setting the “disabled” attribute to true. Similarly, we have methods to change element text, html and values. You have the text(), html() and val(), just like the css() method. For instance, you can set the html code within a div element with html() like this:

$("div:last").html("jQuery example from .net Brainwork!");

Output: “jQuery example from .net Brainwork!”.

The text() method has the same purpose, except that it escapes all html:

$("div:last").text("Another jQuery example from .net Brainwork!");

Output: “Another jQuery example from .net Brainwork!”

The val() method gets or sets the value attribute in the appropriate elements like in this example, where all text fields values are changed:

$("input[type=text]").val("jQuery val() demo from .net Brainwork!");

The same method with no parameters returns the value of all affected elements.

This subset of jQuery methods will allow you to perform come of the most common tasks when manipulating DOM elements with javascript. But one of the most powerful and interesting features in this API is the selection and filtering mechanism.

Like I’ve been demoing previously, you can write jQuery selection queries over the DOM using various criteria like the type of element, its relative position in the element tree, attribute values, etc. For instance, in the previous example I created a jQuery object by specifying “input”, which queries all input fields in the document as a result. I could also do:

// Select all document divs
$("div")

// Select all spans
$("span")

// Select all paragraphs
$("p")

 I then added an extra condition, a squared bracket filter to select only the text input fields. The square brackets allow you to input specific conditions based on the element’s attributes:

// Select using a value criteria
$("input[value='brainwork example']")

// select all text fields with values greater than 10
$("input[type=text][value^=10]")

Now I’ll talk about some filters jQuery has to offer. These filters allow you to apply relative positioning, type and DOM depth constraints to your element selection criteria. I’ll start by talking about hierarchy filters. These are targeted to element positioning, and they’re nothing but a simple operator between elements that adds some significance between them. For instance, the following example selects all input fields that are next to a label, though the “+” operator:

$("label + input[type=text]").val("Another Brainwork example!");

 “label” and “input” are the objects and “+” is the filtering operator. According to the previous example, the following input would be selected…

    Blog Name: 

On the other hand, this wouldn’t…

    Blog Url:  

Besides the “+” operator, which selects the next adjacent elements, there’s the “~” operator, that matches all sibling elements after the first specified element. For instance, consider the following scenario:

The following example selects all input fields after input field named #testfield, that have values greater than 5:

$("#testfield ~ input[type=text][value=5]").css("color", "#334455");

 You also have the “>” operator to select child elements, and you can also include no operator if you wish to select all descendants:

// select all child div elements inside the #menu element and change their border to red
$("#menu > div").css("border-color", "red");

// Select all input fields inside the form and change their text color
$("form input").css("color", "black");

Neat That does it for hierarchy, now onto positioning! jQuery uses the “:” operator to define some sort of filtering criteria over affected elements. Some of the most basic ones are:

$("p:last").css("color", "green"); // last paragraph on the document gets green text
$("tr:even").css("background-color", "red"); // even rows gets red background color
$("td:gt(2)").css("background-color", "blue"); // TD with index higher than 2 gets blue back color
$(":header").css("color", "black"); // matches all header  elements and changes their text color to black

Then there are specific filters that select input fields of some type, like these examples:

// Selects all input, textarea, select and button elements, and hides them
$(":input").hide()

// changes all text input field's color to red.
$(":text").css("color", "red")

// clears all password fields
$(":password").val("")

// clears all file input fields that are children of #divupload element
$("#divupload > input:file").val("")

Don’t forget to check out the full API reference for other filters. In the next article I’ll talk about CSS a bit more and also the eventing features of the API.

Technorati Tags: jQuery, Javascript

Technorati Tags: ASP.NET, javascript, jQuery

Saw a great vide this weekend about Silberlight 4’s new OOB capabilities. Joe Stegman, Director of Program Management on the Silverlight team, went on camera in Channel 9 to talk about Silverlight 4′s Out of Browser improvements. OOB means that you can run a Silverlight application on your desktop, outside the usual browser enviroment.

Check it out here: Channel 9

Technorati Tags: Silverlight, Silverlight 4

At the Professional Developers Conference 2009, Microsoft announced public beta of Office Professional Plus 2010 productivity suite. In all the fanfare, Stephen Chapman of Microsoft Kitchen managed to grab a Microsoft roadmap pointing next Windows operating system’s arrival.

Microsoft launched Windows 7 on October 22 and now the plans of Windows 8 roadmap were spotted on the Interwebs. The successor to Windows 7 is tentatively codenamed as Windows 8 and is expected to be next “Major Release” in 2012. On the contrary, Windows 7 is being treated as “Release Updates” – to what? Maybe the wild Vista code.

This means there will be a three year gap till next Windows Operating system and their rival Apple believes in keeping two year gap – between Leopard and Snow Leopard. In these two-three years, both OS-making giants want the consumers to get used the new technologies incorporated in their OS and be ready for new ones.

Before you start making Windows 8 features wishlist, start using Windows 7 extensively and then list down what you wish to see next. Obviously, Gamers would love to go for DirectX12 and who knows what would be incorporated in it.

Technorati Tags: PDC 2009, Windows 8

A lot has been talked about recently regarding Internet Explorer 9. At the PDC, Steven Sinofski talked about IE9’s new development lines and there are some interesting features and improvements being taken care of. For starters, the standards! IE9 will support CSS 3.0 and HTML 5, which was already expected.

Performance-wise, Microsoft is making a huge investment. Performance disadvantages of IE8 are widely known and the team wants to change this in the 9th iteration of Internet Explorer.

Javascript rendering engine and DOM processing are getting huge improvements. Steven admitted that script performance in IE was the worst, and this was shown in a chart ported in the IEBlog, on the left.

Also, DirectX will be put into the equation. PC hardware will be taken into account on web page text and image rendering and animations.

Technorati Tags: Internet Explorer 9

A lot has happened in PDC 2009. Although I couldn’t make it this year, I’ve been watching it very closely from the keynotes, session contents, technologies, attendees, the space, chill out zone and merchandising. XAML-wise, there were some glorious days.

Some cool WPF 3 and 4 apps were shown in day 2 of this year’s PDC, like Saesmic, a Tweeter and Facebook desktop client for MAC and Windows, Pivot, from Microsoft labs, Fishbowl, another facebook desktop client, and I’ve been inspecting every one of them. Aside from the release of Silverlight 4 Beta, IE 9 video demo, Office 2010 Beta, these apps made the delights of the participants as well.

Saesmic

In the day 1 Keynote, featuring Ray Ozzie, Chief Software Architect at Microsoft, Saesmic was announced as a feature-rich native application for Windows now available.

Partnered with Microsoft, engineered for Windows and optimized for Windows 7, this preview version of Seesmic for Windows combines the best features from Saesmic web and provides them in a native Windows environment.

Fully functional with Twitter, Seesmic is a simple yet powerful client application that allows you to:

• Manage and post from multiple twitter accounts
• View aggregated Home, Replies, Private and Sent columns.
• Create and save searches
• View and add to your Twitter lists
• Create unlimited columns
• Enable choice of multiple image and url shortening services
• Manage notification of your messages. 

Pivot

My favorite. It requires an invite for you to install it, but it’s worth it. Pivot makes it easier to interact with massive amounts of data in ways that are powerful, informative, and fun.

A lot has been done in terms of user interaction and data accessibility. The team has made a significant effort in designing an interaction model that accommodates the complexity and scale of information rather than the traditional structure of the Web. Like I said, it requires an invite code, which you can get by submitting your email at the Pivot website.

I would strongly recommend taking some time to read the developer’s information, available at the website. It is interesting to see how data collections are treated and the general architecture of this platform.

Fishbowl

Another sample shown from the uxlabs team at Microsoft is Fishbowl. Fishbowl is a trial application and a sample demonstrating a unique user experience with Facebook content, optimized for Windows 7.  It is available for download by technology enthusiasts and Facebook power users. Since it’s currently a trial version, they don’t support it. But who cares, right??

Technorati Tags: PDC 2009, Silverlight, WPF, XAML

 The Microsoft Internet Information Services (IIS) team, announced today the release of Windows Cache Extension 1.0 for PHP, a PHP performance optimizer/accelerator created to increase the speed of PHP applications running on Windows and Windows Server.

This is a production-ready release that is provided under an open source BSD license, with the source code hosted and maintained here, and the documentation hosted on php.net.

You can find more details on this release on IIS team Product Unit Manager Mai-lan Tomsen Bukovec’s blog.

WinCache extension is a significant open source contribution from Microsoft to the PHP on Windows community. The extension code is hosted and maintained on PHP Extensions Community Library (PECL) and is available for everyone to view, branch, compile, and contribute to.

The IIS team also invites the PHP development community to join it in development of this caching extension for PHP on Windows. There have already been some contributions from the community whileWinCache was in the pre-release mode, and IIS team is looking forward to having others join this new PHP on Windows caching project.

Also, in time for this release, an independent PHP company – Ibuildings – has conducted a benchmark test with the WinCache RTW bits and published the results.

The release of this production-ready PHP accelerator for Windows is an important step towards making the Windows operating system an even better platform for hosting PHP applications.

WinCache extension significantly improves performance of PHP applications and lowers CPU load on the server. This, together with the fact that no application code changes are necessary to take advantage of the caching, makes WinCache a must have extension when running PHP on Windows.

More information about the WinCache extension for PHP can be found as follows:

• The PECL documentation on WinCache
• The PHP on Windows feature team blogs (Kanwal, Ruslan, and Don)
• The WinCache community forum
• The IIS.NET documentation on WinCache
• The WinCache on PECL source code, licensed under BSD
• How to file bugs on WinCache in PECL

Source: Port 25

Technorati Tags: IIS

 Microsoft also announced yesterday the Office 2010 Beta (Professional Plus) availability.

 You can check out all about the Office 2010 productivity apps at http://www.microsoft.com/2010/en and download the beta from the top right link. You need to register to get the software but it will all be worthwhile. Included apps are Word, PowerPoint, Outlook, Excel, OneNote, Access, Publisher, InfoPath, SharePoint Workspace and Communicator.

Here’s what you need to know:

This is pre-release software, so please read the following to get an idea of the risks and key things you need to know before you try the Office Professional Plus 2010 Beta.

• Protect your PC and data. Be sure to back up your data and please don’t test Office Professional Plus 2010 Beta on your primary home or business PC.
• Uninstall any previous versions of Microsoft Office. We highly recommend that previous versions of Microsoft Office be removed from your test machine before installing Office Professional Plus 2010 Beta.
• Technical details/updates. Before installing the Beta please read the Release Notes.
• Get Started with Microsoft Office 2010. Get all the technical information you need here.
• Keep your PC updated. Be sure to turn on automatic updates in Windows Update in case we publish updates for the Office Professional Plus 2010 Beta.

Technorati Tags: Office 2010, PDC 2009

 Yesterday at PDC 2009, Microsoft unveiled the Beta version of Silverlight 4. This latest version has a lot of new features and everyone’s talking about it. Amongst the new features there’s:

New Features for Application Developers

• Comprehensive printing support enabling hardcopy reports and documents as well as a virtual print view, independent of screen content.
• A full set of forms controls with over 60 customizable, styleable components. New controls include RichTextbox with hyperlinks, images and editing and Masked textbox for complex field validation. Enhanced controls include DataGrid with sortable/resizeable columns and copy/paste rows.
• WCF RIA Services introduces enterprise class networking and data access for building n-tier applications including transactions, paging of data, WCF and HTTP enhancements.
• Localization enhancements with Bi-Directional text, Right-to-Left support and complex scripts such as Arabic, Hebrew and Thai and 30 new languages.
• The .NET Common Runtime (CLR) now enables the same compiled code to be run on the desktop and Silverlight without change.
• Enhanced databinding support increases flexibility and productivity through data grouping/editing and string formatting within bindings.
• Managed Extensibility Framework supports building large composite applications.
• Exclusive tooling support for Silverlight, new in Visual Studio 2010. Including a full editable design surface, drag & drop data-binding, automatically bound controls, datasource selection, integration with Expression Blend styling resources, Silverlight project support and full IntelliSense.

Upgraded developer tools

• Fully editable design surface for drawing out controls and layouts.
• Rich property grid and new editors for values
• Drag and drop support for databinding and automatically creating bound controls such as listbox, datagrid. New datasources window and picker.
• Easy to pick styles and resources to make a good looking application based on designer resources built in Expression Blend.
• Built in project support for Silverlight applications
• Editor with full intellisense for XAML and C# and VB languages.

Empowering richer, more interactive experiences

Silverlight 4 introduces additional capabilities to enable creation of ever more rich, appealing high-performance interactive experiences and innovative media experiences:

• Fluid interface enhancements advance application usability through animation effects.
• Webcam and microphone to allow sharing of video and audio for instance for chat or customer service applications.
• Audio and video local recording capabilities capture RAW video without requiring server interaction, enabling a wide range of end-user interaction and communication scenarios for example video conferencing.
• Bring data in to your application with features such as copy and paste or drag and drop.
• Long lists can now be scrolled effortlessly with the mouse wheel.
• Support conventional desktop interaction models through new features such as right-click context menu.
• Support for Google’s Chrome browser.
• Performance optimizations mean Silverlight 4 applications start quicker and run 200% faster than the equivalent Silverlight 3 application.
• Deep Zoom enhancements include hardware acceleration to support larger datasets and faster animation.
• Multi-touch support enables a range of gestures and touch interactions to be integrated into user experiences.
• Multicast networking, enabling Enterprises to lower the cost of streaming broadcast events such as company meetings and training, interoperating seamlessly with existing Windows Media Server streaming infrastructure.
• Content protection for H.264 media through Silverlight DRM powered by PlayReady.
• Output protection for audio/video streams allowing content owners or distributors to ensure protected content is only viewed through a secure video connection.

Go beyond the browser- Sandboxed applications

• Place HTML within your application enabling much tighter integration with content from web servers such as email, help and reports.
• Provide support for ‘toast’ notification windows, allowing applications to communicate status or change information while the user is working on another application through a popup window on the taskbar.
• Offline DRM, extending the existing Silverlight DRM powered by PlayReady technology to work offline. Protected content can be delivered with an embedded license so that users can go offline immediately and start enjoying their content.
• Control over aspects of UI include window settings such as start position, size and chrome.

For Trusted applications

• Read and write files to the user’s MyDocuments, MyMusic, MyPictures and MyVideos folder (or equivalent for non-windows platforms) for example storage of media files and taking local copies of reports.
• Run other desktop programs such as Office, for example requesting Outlook to send an email, send a report to Word or data to Excel.
• COM automation enables access to devices and other system capabilities by calling into application components; for instance to access a USB security card reader.
• A new user interface for requesting application privileges access outside the standard Silverlight sandbox.
• Group policy objects allow organizations to tailor which applications may have elevated trust.
• Full keyboard support in fullscreen mode richer kiosk and media applications.
• Enhancements to networking allow cross-domain access without a security policy file.

As you can see… There’s a lot to get your hands dirty. I’m already working on this at home (with some Batman: Arkham Asylum in the mix…) and I must say this is a very powerful release with a lot to get you into this technology if you haven’t done so already. Stay tuned for more of PDC.

Technorati Tags: PDC 2009, Silverlight

One of the first novelties straight from PDC 2009 is the release of ASP.NET MVC 2 Beta for Visual Studio 2008. You can download ASP.NET MVC 2 Beta from Microsoft Downloads here.

 For the newcomers, here’s a quick description of the technology:

“ASP.NET MVC 2 is a framework for developing highly testable and maintainable Web applications by leveraging the Model-View-Controller (MVC) pattern. The framework encourages developers to maintain a clear separation of concerns among the responsibilities of the application – the UI logic using the view, user-input handling using the controller, and the domain logic using the model. ASP.NET MVC applications are easily testable using techniques such as test-driven development (TDD).

 The installation package includes templates and tools for Visual Studio 2008 SP 1 to increase productivity when writing ASP.NET MVC applications. For example, the Add View dialog box takes advantage of customizable code generation (T4) templates to generate a view based on a model object. The default project template allows the developer to automatically hook up a unit-test project that is associated with the ASP.NET MVC application. Because the ASP.NET MVC framework is built on ASP.NET 3.5 SP 1, developers can take advantage of existing ASP.NET features like authentication and authorization, profile settings, localization, and so on.”

 New features in this release include:

 New RenderAction Method

Html.RenderAction (and its counterpart Html.Action) is an HTML helper method that calls into an action method from within a view and renders the output of the action method in place. Html.RenderAction writes directly to the response, whereas Html.Action returns a string with the output. RenderAction works only with actions that render views.

Strongly Typed UI Helpers

ASP.NET MVC 2 includes new expression-based versions of existing HTML helper methods. The new helpers include the following:

• ValidationMessageFor
• TextAreaFor
• TextBoxFor
• HiddenFor
• DropDownListFor

 TempDataDictionary Improvements

The behavior of the TempDataDictionary class has been changed slightly to address scenarios where temp data was either removed prematurely or persisted longer than necessary. For example, in cases where temp data was read in the same request in which it was set, the temp data was persisting for the next request even though the intent was to remove it. In other cases, temp data was not persisted across multiple consecutive redirects.

 Client Validation Library

MicrosoftMvcAjax.js now includes a client-side validation library that is used to provide client validation for models in ASP.NET MVC.

 “Add Area” Dialog Box

ASP.NET MVC 2 Beta includes a new Add Area context menu item when you right-click either the root project node or the Areas folder (if one exists). If a root Areas folder does not already exist, the command creates one, and it then creates the files and folders for the area that you specify.

 Calling Action Methods Asynchronously

The AsyncController class is a base class for controllers that enables action methods to be called asynchronously. This lets an action method call external services such as a Web service without blocking the current thread. For more information, see Using an Asynchronous Controller in ASP.NET MVC In the ASP.NET MVC 2 documentation.

 Blank Project Template

In response to customer feedback, an empty ASP.NET MVC project template is now included with ASP.NET MVC 2 Beta. This empty project template contains a minimal set of files used to build a new ASP.NET MVC project.

 Multiple Model Validator Providers

ASP.NET MVC 2 Beta lets you register multiple validation providers.

Multiple Value Provider Registration

In ASP.NET MVC 2 Beta, the single value provider that was available in ASP.NET MVC 1.0 has been split into multiple value providers, one for each source of request data. The new value providers include the following:

• FormValueProvider
• RouteDataValueProvider
• QueryStringValueProvider
• HttpFileCollectionValueProvider

These value providers are registered by default. You can register additional value providers that pull data from other sources.

 Download Microsoft ASP.NET MVC 2 Beta here (2.2 Mb).

Technorati Tags: ASP.NET MVC 2, PDC 2009