Here's another weekly report, which collects input from the various core developers (thanks, guys!) and tries to massage it into a (mostly) coherent and appealing blog post ...

Form API

We introduced a new property on some form widgets called placeholder. Perhaps you already know what to do with it? If, for example, a TextField is empty, the placeholder will be displayed in a light grey font to give hints on what to enter. Five widgets did get this placeholder feature:

• TextField
• PasswordField (well, it only displays dots anyway)
• TextArea
• ComboBox
• DateField

To see the placeholder feature in action, take a look at the form demo in the online demobrowser.

Another new feature in the input fields is the possibility to filter the input. The following code snippet shows how it could be used.

var textfield = new qx.ui.form.TextField();
textfield.setFilter(/[0-9]/);

This feature in the input fields allowed us to improve the spinner and the ColorSelector.

ComboBox

A ComboBox is like a TextField with a drop down of predefined values. A ComboBox is often used to improve usability. For instance, an app developer could add the least recently used (LRU) values to the drop down. This is quite convenient for the user when required to enter a value.

Of course, there are other use cases for the ComboBox. The main difference to the SelectBox is that the user can enter individual values or choose from the pre-defined ones. A question remains: should the ComboBox have a text value set initially?

This question can really only answer the app developer depending on his/her specific use case. At least the ComboBox shouldn't set any text value per default. But this was the behavior implemented so far, the ComboBox used the value of the first element of the drop down to initialize the text field. Also by looking at other toolkits and OS interfaces we decided to account for that common behavior: the ComboBox initializes with an empty value for the TextField (of course, if no value was set programmatically). That's the way it's implemented in the current SVN trunk. So you might consider adjusting your code when working with the trunk.

An XmlHttpRequest oddity

Two failing qx.io.remote unit tests exposed what looks like a bug in Safari 3 and Firefox 1.5: If a qooxdoo application has a qx.ui.embed.Iframe with another qooxdoo app running inside, some AJAX requests sent by the inner app using relative URI paths will lead to 404s: The XmlHttpRequest implementation in both browsers seems to treat URIs as if it was running in the topmost browser frame, so that, in a case like the qooxdoo Test Runner where the embedded application is located in a subdirectory of the outer application, that directory will be omitted from the GET requests sent to the server.

Granted, this use case is fairly specific and both browsers are obsolete, but we'd still like to hear from anyone out there who might have run into this issue before.

RPC Perl

Tobias Oetiker has put forth the first release 0.1 of the RpcPerl contribution, a server-side implementation of the qooxdoo RPC in Perl, making this the fourth contribution kit (i.e. archive) online at sourceforge.net. The new release is a brushed-up, but fully backwards compatible version of the so far unreleased software. Taking this opportunity, a new piece of documentation has been added that details the process of creating a SourceForge release from a contribution.

Online Demos

All demos at demo.qooxdoo.org are back to a standard-port, non-redirect implementation, so all issues with blocking firewalls and lost fragment identifiers should be gone .

Bugfixes

For a complete list of bugs fixed during the last week, use this bugzilla query.

Community Award

As you should already know, qooxdoo has been chosen as a finalist in the annual SourceForge.net Community Choice Awards. It would really be great if you supported the project byvoting for qooxdoo in the category Best Visual Design. Thanks!

Have a nice weekend.

Brian Arnold created a fun sample drum machine simulator using HTML5 <audio>.

PLAIN TEXT JAVASCRIPT:

1.  
2. function playBeat() {
3.         if (isPlaying) {
4.                 var nextBeat = 60000 / curTempo / 4;
5.                 // Turn off all lights on the tracker's row
6.                 $("#tracker li.pip").removeClass("active");
7.                 // Stop all audio
8.                 stopAllAudio();
9.                 // Light up the tracker on the current pip
10.                 $("#tracker li.pip.col_" + curBeat).addClass("active");
11.                 // Find each active beat, play it
12.                 $(".soundrow[id^=control] li.pip.active.col_" + curBeat).each(function(i){
13.                         document.getElementById($(this).data('sound_id')).play();
14.                 });
15.                 // Move the pip forward
16.                 curBeat = (curBeat + 1) % 16;
17.                 // Schedule the next one
18.                 setTimeout(playBeat, nextBeat);
19.         }
20. }
21.  

That's not all Brian is working on:

I'm also working on something like the ToneMatrix or Tenori-on (Flash and actual devices, respectively) in pure HTML/JS. It works too, but the sounds aren't exactly designed to be great together (it's currently working on a C scale) and so if you're careful, you can get some decent sound but otherwise, it'll hurt your ears.

Alex MacCaw has released Machsend, a Yahoo! Browser Plus plugin that enables P2P file transfers from inside the browser.

It showcases what can be done with a BP plugin, leaving you wish cross browser functionality.

I guess it is kinda fun to hack the browser :)

[Cross posted from Telerik Watch]

Smell that? That's a freshly baked release from Telerik that's just about ready to "officially" launch. The Q2 2009 release is one of the biggest releases in Telerik's history, again delivering simultaneous updates to all 7 Telerik product lines at one time. An update of this scale is bound to have lots new and interesting stuff, and we can't wait to put it in your hands so you can start playing with it. The official launch of Q2 2009 is Monday, July 6th, and to help you jump-off with the new bits and maximize your productivity with the Telerik tools, we'll be running another release "Webinar Week."
But before I reveal the schedule for the Webinar Week, let me tell you about the prizes!
There will be two ways to win prizes during the Q2 Webinar Week:

1. Every webinar will award 1 or 2 (depending on the products covered) individual product suite licenses to the people that attend the live event. All you have to do to enter is show-up to the live event and you will be in the pool for a randomly selected winner at the conclusion of the webinar (winners will be notified via email, so don't register with a spam address unless you don't care to claim your prize).
2. For every live webinar you attend during the webinar week, you will also be entered in the drawing for the Webinar Week Grand Prize: a Telerik Premium Collection license (valued at $1300) and a pass to the 2009 PNP Summit (a $1900 value)! The more webinars you attend live, the better your odds are at winning the prize valued at over $3000.

Plus, to get things kicked-off with a bang, we will be giving away a Premium Collection license to the winner of the first live webinar drawing (instead of a individual suite license), so you definitely don't want to miss the live events.

Now for the schedule. Things get kicked-off on Tuesday, July 7th and run through the end of the week. Webinars will be held everyday at 11:00 AM Eastern Time and all will be recorded for Telerik TV on-demand viewing. The topics covered will be:

• Tuesday, July 7th - Q2 2009: What's New?
  Join me for a general overview of the Q2 release and high-level intro to what's new
  PRIZE: 1 Premium Bundle Collection license
  Register for webinar now
• Wednesday, July 8th - RadControls for ASP.NET AJAX and WinForms
  Join me again for a more in-depth look at what's new in the RadControls for WinForms and ASP.NET AJAX
  PRIZE:1 RadControls for ASP.NET AJAX license, 1 RadControls for WinForms license
  Register for webinar now
• Thursday, July 9th - OpenAccess ORM
  Join Telerik DE Gabe Sumner for a closer look at what's new in Telerik OpenAccess ORM
  PRIZE: 1 OpenAccess ORM license
  Register for webinar now
• Friday, July 10th - RadControls for Silverlight / WPF
  Join Telerik DE Evan Hutnick for a closer look at what's new in the RadControls for Silverlight and the RadControls for WPF
  PRIZE: 1 RadControls for Silverlight license, 1 RadControls for WPF license
  Register for webinar now

Registration links for the webinars will be available very soon, so be sure to register early to save your seat. The Q2 2009 Webinar Week is the best way to get started with the Telerik Q2 2009 release, and with all the great prizes to go around, you definitely don't want to miss these free events. We'll see you live next week!

Below are the slides for a recent techstars session:

It covers some basic stuff for web performance, scalability and availability, such as:

1. Common architecture pattern for horizontal scalability;
2. How to do load balancing;
3. Cost effective load balancing options;
4. Cloud computing does not solve scalability issue;
5. how to optimize web performance;

A list of free tools available are also mentioned, such as YSlow, RockStar Web Profiler and RockStar Optimizer.

You may have seen the press release this week regarding WaveMaker 5.1.  Many of you have been using 5.1 for awhile.  In fact, I blogged about 5.1 at the beginning of June.

Since we’re on the subject of 5.1, I thought I should inform you all about 5.1.1.  As you probably guess from the release number, this is a bug fix release.  You can see the full list of 5.1.1 fixes in Jira.  The primary addition in 5.1.1 is Debian\Ubuntu packages, both 32 bit and 64 bit.  Download links are available, http://dev.wavemaker.com/wiki/bin/view/WM5_Documentation/Dev+Builds.

We continue our efforts to provide regular releases to the community.  We are actively working on the 5.2 release.  Our 5.2 work is heavily biased towards the cloud.  We will launch the second beta of the hosted version of WaveMaker Studio.  WaveMaker 5.2 will including both the hosted Studio configuration as well as the on-premise version, which most of you are using.  Both version will enable you to easily deploy your application to Amazon EC2 from the Studio Deployment page.  We’re also improving our web services and security capabilities and, of course, we’ll provide bug fixes.  I’ll provide more information on 5.2 later this month, as we get closer to the release.

This post announces an update to Graded Browser Support. The GBS page on the YUI site always has the most current information. This post includes a list of changes, the updated chart of browsers that receive A-grade support, and our GBS forecast. The discussion section breaks out some of the strategy behind the current GBS update.

GBS Changes for Q3 2009

This GBS update adds A-grade support for Firefox 3.5 and for Safari 4.0. A-grade support is discontinued for Firefox 2, Opera on Mac OS X, and IE6 on Windows 2000. With this update, Windows 2000 drops from the A-Grade testing matrix and the testing surface is reduced to 14 browsers on 4 OS platforms (down from 15 browsers on 5 platforms).

• Initiated A-grade support for Firefox 3.5, Windows XP
• Initiated A-grade support for Firefox 3.5, Windows Vista
• Initiated A-grade support for Safari 4.0, Mac OS 10.4
• Initiated A-grade support for Safari 4.0, Mac OS 10.5

• Discontinued A-grade support for IE6, Windows 2000
• Discontinued A-grade support for Firefox 3.0, Windows Vista
• Discontinued A-grade support for Firefox 2.0, Mac OS 10.5
• Discontinued A-grade support for Firefox 2.0, Windows XP
• Discontinued A-grade support for Opera 9.6, Mac OS 10.5

Win XP Win Vista Mac 10.4.† Mac 10.5.† Firefox 3.0.† A-grade A-grade Firefox 3.5.† A-grade A-grade A-grade Opera 9.6.† A-grade IE 8.0 A-grade A-grade IE 7.0 A-grade A-grade IE 6.0 A-grade Safari 3.2.† A-grade Safari 4.0.† A-grade A-grade

Notes:

• The dagger symbol (as in “Firefox 3.5.†”) indicates that the most-current non-beta version at that branch level receives support.
• Code that may be used on pages with unknown doctypes should be tested in IE7 quirks mode.
• Code that may appear in IE8’s "compatibility mode," which emulates but is not identical to IE7, should be tested explicitly in compatibility mode.

GBS Forecast

We expect to make the following changes in the Q4 2009 GBS update:

• Discontinue A-grade support for Firefox 3.0.x across all OSs.
• Discontinue A-grade support for Safari 3.2.x on Mac OS 10.5.
• Begin publication of A-grade matrix for smartphones
• Re-evaluate status of Google Chrome

Discussion

1. Opera: Opera continues to be an important independent browser manufacturer, but its sub-1% global marketshare is now superseded by other browsers whose user base is growing more rapidly (including Safari on Apple’s iPhone OS and Google’s Chrome on Windows). In many ways, the X-grade browser class, which is full of excellent small-marketshare browsers, is the right category for Opera at this point. However, for developers of global products, Opera’s strong position in Russia and eastern Europe (source: StatCounter) argues persuasively for its continued inclusion in the A-grade. Hence, our advice remains that you continue to test your applications in the latest version of Opera on Windows XP. We’ve dropped A-grade support for Opera on Mac OS 10.x to reduce the testing surface and accommodate future inclusion of browsers with rapidly growing marketshare.
2. Chrome: One of the most common questions we get about GBS today is: "What about Google Chrome?" It’s a fair question. Chrome is an excellent, innovative browser that adheres to web standards, and it has a rapidly expanding marketshare. Chrome remains an X-grade browser today because its marketshare is still very small on a relative basis. If Chrome maintains its current marketshare growth, it will be reclassified as A-grade within one or two quarters. Note that Google’s developer page for Chrome suggests that "if you’ve tested your website with Safari 3.1 then your site should already work well on Google Chrome." This is good advice.
3. Safari on the iPhone OS: The OS that drives Apple’s iPhone and iPod Touch devices is another ascendant category of browser traffic. Is Safari for the iPhone OS an A-grade browser? Our answer: No, but that doesn’t mean you can ignore it in your product planning and testing. We regard the emerging class of full-featured browsers on handheld devices to be a category that requires its own GBS matrix. Such a matrix should include testing advice for browsers including Safari on iPhone as well as the browsers that ship with Google’s Android OS and Palm’s Pre OS. Treating these browsers as X-grade today is the right decision based on their marketshare — remember, X-grade browsers are expected to support current web standards and to perform well in browsing well developed sites. But the rapid growth of web traffic coming through these browsers, their unique form factors (much smaller screens), and their new interaction paradigms (including touch-screen gestures) argue for an intentional and sometimes differentiated approach to web-application design and implementation. While most content should "just work" and work well, these devices need to be considered at the product-design stage. Providing an "A-grade" experience for your application may not be a question of whether your app runs in the browser but whether your app’s usability on a small touchscreen retains its usability. With this in mind, we’ll begin delivering a smartphone GBS matrix beginning in Q4 2009.

We’d love to hear your take on these issues and others in the comments section.

The GBS Archive

• GBS Update, 2009-01-28
• GBS Update, 2008-07-03
• GBS Update, 2008-02-19

#graded-browsers {} #graded-browsers table {margin-bottom:1em;margin-top:1em;} #graded-browsers caption {margin:1em;} #graded-browsers th,#graded-browsers td {padding:.6em;border:1px solid #fff;font-family:verdana;font-size:11px;} #graded-browsers th, #graded-browsers th abbr {color:#000;} #graded-browsers th {background-color:#ddd;font-family:verdana;font-size:11px;} #graded-browsers th, #graded-browsers td {border-width:0 1px 1px 0;border-collapse:collapse;} #graded-browsers td.xgrade {color:#555;background-color:#FFFBCF;} #graded-browsers td.cgrade {color:#555;background-color:#FFBFBF} #graded-browsers td.na {color:#AAA;} #graded-browsers td.agrade {background-color:#CFC;} #graded-browsers tr.first th {text-align:center;} #graded-browsers tr th {text-align:right;} #graded-browsers abbr {cursor:help;} #graded-browsers p.gbs-dagger-note {font-size:11px;font-family:verdana;}

Good news everybody! The dates and venue for this year’s jQuery Conference have been determined.

The conference will be held September 12th and 13th at Microsoft Cambridge in Boston, MA.

This will be a 2 day conference with multiple tracks on each day. We’re in the process of planning out the schedule, talking with speakers, and setting up the conference web site.

Watch the jQuery blog or jQuery Twitter feed for notification when registration opens.

While this venue is larger than those that we’ve had in the past (Harvard Law School in ‘07 and the MIT Stata Center in ‘08) we do expect to sell out all the available seats, as has happened every year so far. That being said, the venue is quite incredible, easily one of the best spaces available for a conference:

A brief synopsis of some of the content that you’ll be able to expect:

The annual conference of jQuery users and developers. There will be talks on jQuery, jQuery UI, plugins, complex application development, and more - all from the top jQuery developers. Case studies from some of the leading users of jQuery will be included along with a 3 hour tutorial for those just getting started.

You can see the schedules from past jQuery conferences here: 2008, 2007. There will be a nominal fee (likely around $100-$150) to help us cover to cost of food for both days and shirts.

Looking forward to seeing everyone in Boston this fall!

Note: If you are interested in sponsoring the conference, please contact John Resig.

Update: There have been a lot of questions asking if there will be a conference on the west coast (San Francisco) or in Europe. While we don’t have any immediate plans to hold conferences in those locations, this year, we would like to hold them in the future. In the meantime I recommend checking out Full Frontal (UK, November) and Fronteers (Amsterdam, November) - both of which should shape up to be excellent JavaScript conferences.

Update: Thanks to Jeff for adding the event to Upcoming.

One of the reasons that make a software popular is its extensions and plugins. jQuery has plenty of plugins that do almost anything you want, from simple button hide to full blown galleries. Plugins let non developers easily add functionality they need to their websites and there are times when one might include more than one javascript library such as prototype.js, YUI or mootools with jQuery.

For those of you who have never seen one, the placenta is to the baby what Stephen Baldwin is to Alec Baldwin. It's what your liver would look like if it got into an accident on the autobahn with one of those aliens from Mars Attacks! and their bloody carcasses threw jellyfish at each other.

— Joel Stein

John Gunther has released GChart 2.5, a client-side library that adds a new canvas-rendering option for sharper, better looking, alpha-transparent, pie, line, and area charts.

John told us:

Canvas-rendering corrects GChart's most serious visual quality limitations (including the most often mentioned problem by its users: the banded-filled pie slice).

Coupled with its existing feature set and ease of GWT integration, the canvas-rendering option makes GChart an excellent choice for those who want to add basic charts to a GWT application without a lot of fuss.

To access these features, you'll need to plug an external canvas library into GChart (GWTCanvas in the gwt-incubator is reccommended) as described in detail in the setCanvasFactory method.

With the external canvas in place, the next step is to tell GChart you want a curve to be "continuously filled" by invoking setFillSpacing(0).

With each such continuously filled curve, GChart automatically exploits your external canvas library to improved the quality and speed of that curve's rendering. Specifically, banded-filled pie slices become solid filled, dotted connecting lines become continuously connected, and (the biggest stretch) bar charts become area charts. See the setFillSpacing method's javadocs for a detailed description of how each existing symbol type implements this new "continuously-filled", canvas-powered, rendering option.

Note that GChart's previous HTML-only rendering is still available, and is the default rendering mode if you don't bother to plug in an external canvas.

Check out the demo

Modernizr (via). Neat idea and an unobtrusive implementation: a JavaScript library that runs feature tests for various HTML5 features (canvas, box shadow, CSS transforms and so on) and adds classes to the HTML body element, allowing you to write CSS selectors that only apply if a feature is present. Detected features are exposed to JavaScript as boolean properties, e.g. Modernizer.multiplebgs.

Paul Baukaus linked to jsescape, a little form that shows escaping and unescaping across a number of encodings.

Andrea Giammarchi had his own post on encodings in a different way.... as he talked about
en-code which you can check out in action here on the page that lets you do simple encodings, especially for source code, in short order.

I'm in the process of working on, and improving, test suite support in TestSwarm (an upcoming project of mine). However, there isn't a lot of information on which unit testing frameworks developers actually use to test their code (whereas there is more information on which JavaScript libraries are used).

It will be of great help to me if you could quickly fill out the question below. I will release the results of the survey as soon as possible. Thanks!

» Which JavaScript Unit Testing Frameworks do you use?

Loading...

More information on the frameworks listed above:

• JSUnit
• Selenium Core
• JSSpec (MooTools)
• UnitTestJS (Prototype)
• QUnit (jQuery)
• DOH Unit Testing (Dojo)
• YUITest 2
• YUITest 3
• Mochitest
• ScrewUnit
• JsUnitTest
• jsUnity
• JsTestDriver
• Crosscheck
• Env.js
• FireUnit

As preparation for an upcoming tech talk about Placemaker I thought it would be good to take a bit of the pain out of the geolocation service by making an interface for it. Placemaker works the following way: you post some content or a URL to it, it goes through the content or gets the content from the URL and analyzes it. It then finds geographical locations in the text and disambiguates them (for example to skip names like "Jack London" and not consider it the city London). Finally you get it back as XML.

The annoying thing is that Placemaker only support POST request and does not have a JSON output - for now. GeoMaker allows non-developers to enter some text or a URL, filter the results (using YUI datatable) to remove false positives (no system is perfect) and get the embed code for a Yahoo Map or a list of microformatted locations as copy+paste. See the screencast to get the end user experience:

Of course, every time you build something like that, red-blooded developers will ask for an API to do the same thing (and pointing them to Placemaker wasn't enough). So here it is:

http://icant.co.uk/geomaker/api.php takes two parameters: url of the web document to load and output which could be map, kml, microformats, csv, or json (with callback for JSON-P). Using this you can analyze a url in JavaScript and get the data back as an array:

PLAIN TEXT HTML:

1. <script>function geomaker(o){
2.   for(var i=0,j=o.length;i<j ;i++){
3.     // o[i] will have lat, lon, title and match
4.   }
5. }</script>
6. <script src="http://icant.co.uk/geomaker/api.php?url=http://ajaxian.com&output=json&callback=geomaker"></script>

The Ajaxian.com output right now would be:

PLAIN TEXT JAVASCRIPT:

1. geomaker(
2.   [
3.     {"lat":"42.3586","lon":"-71.0567",
4.      "title":"Boston, MA, US","match":"Boston"},
5.     {"lat":"42.3586","lon":"-71.0567",
6.      "title":"Boston, MA, US","match":"Boston, MA"},
7.     {"lat":"40.7075","lon":"-106.918","title":"Clark, CO, US",
8.      "match":"Clark, Co"},
9.     {"lat":"42.3115","lon":"43.3658","title":"Georgia",
10.      "match":"Geo"},
11.     {"lat":"44.9601","lon":"7.16229",
12.      "title":"Rey, Piedmont, IT","match":"Rey"}
13.   ])
14.  

While writing the next jQuery tutorial I needed to identify and locate where the mouse was on the page. Tracking mouse position on the page with jQuery is easy. You don’t need to check what browser the script is running like it is used to be with plain JavaScript. To identify where the mouse is in jQuery all you have to do is to read event object’s .pageX and .pageY properties. Example: $().

We saved the cherry of the Q2 2009 release for a final highlight of our pre-release teaser – a mysterious new product is to appear in Telerik’s portfolio in a matter of days. The new addition pays tribute to Telerik’s community and its incessant support for our products and services – the tool is absolutely free, no strings attached! (While with Q2 it will be released as Beta version, with its official launch later during the quarter it will *remain free*).

 

The product is designed to address web developers’ urge to create perfected applications. It will be able to address your advanced needs since its up-to-date with the latest web technologies – AJAX, JavaScript, LINQ, client-side databinding, Silverlight and more. This new tool will be distributed as a separate installation as well as part of RadControls for ASP.NET AJAX and RadControls for Silverlight installers.

 

If you got already hooked on Telerik’s new product, stick around for Q2 Release!

Modernizr is a new library that detects various HTML5 and CSS3 features and lets you know so you can use them:

Writing conditional CSS with Modernizr

Now, once your page loads, Modernizr will run and go through all of its tests. It will automatically add all the classes to the <body> element of the page, and these classes will be along the lines of body.feature or body.no-feature, with the former indicating that the current browser supports that specific feature and the latter indicating that the browser does not support the feature.

Additionally, it will create a new JavaScript object in the global scope, called Modernizr. This object will contain properties for each of the features that Modernizr detects for, and their value will be set to TRUE or FALSE depending on the browser's support for it.

What you can do from this point on is write pseudo-IF/ELSE statements in your CSS. Let's look at an example from the Modernizr.com site itself:

PLAIN TEXT CSS:

1.  
2. .cssgradients #main {
3.     background: -webkit-gradient(linear, left 0, right bottom,
4.         from(rgba(255,255,255, .82)),
5.         to(rgba(255,255,255, 0))) 0 0 no-repeat;
6. }
7.  

In the above example, we're doing an "IF" condition in CSS: IF the browser supports both CSS gradients, THEN apply this background property to the #main element (instead of the original background property).

Writing conditional JavaScript with Modernizr

When leveraging Modernizr in your JavaScript, it's as straight-forward as it can be to do IF-conditions based on what the browser currently supports:

PLAIN TEXT CSS:

1.  
2. if (Modernizr.cssgradients) {
3.     // perform some actions you only want to
4.     // execute if the browser supports gradients
5. }
6.  

We are seeing a growth in these kinds of tools and shims to get HTML5 features into developers hands. Another great site to help is the new HTML5 Doctor.

In this blog post I will try to explain how CSS z-index works and a how to avoid a few common mistakes. First of all the z-index is used to control the z-order of positioned HTML elements. Simply put it controls the stacking order of HTML elements. To set it set the "z-index" CSS attribute of your element to some integer value.

 

Z-index works only for positioned elements

Positioned elements are elements whose "position" CSS attribute is set to "relative", "absolute" or "fixed". The default "position" is "static" which means that by default setting z-index has no effect.

Z-index is NOT measured in pixels

Z-index accepts only integer values. Setting it in pixels or percentage does not work.

Default stacking order when z-index is not set depends on element definition in the document

Consider we have two positioned HTML elements div1 and div2. If div2 is defined after div1 in the HTML document it will be higher in the stack than div1 if no z-index is set. Here is some sample code:

<html> <head> <style type="text/css">
    #div1,
    #div2{
        position: absolute;
    }
    
    #div1
    {
        width: 100px;
        height: 100px;
        top: 100px;
        background: red;
    }
    
    #div2
    {
        width: 100px;
        height: 100px;
        top: 150px;
        left: 50px;
        background: blue;
    }
    </style> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> </body> </html>

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

This is what the browser renders:

To put div1 on top of div2 we need to use the z-index. If we set the z-index of div1 to 1:

#div1
    {
        width: 100px;
        height: 100px;
        top: 100px;
        background: red;
        
        z-index:1;
    }

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

the page will look like this:

Z-index of child elements depends on z-index of parent elements

This is a common pitfall. Setting higher z-index of some child element will do nothing if its parent has low z-index. Here is an example (child1 has its z-index set index set to 100000):

<!DOCTYPE html> <html> <head> <style type="text/css">
    #div1,
    #div2{
        position: absolute;
    }
    
    #child1{
        position: absolute;
        width: 80px;
        height: 80px;
        background: yellow;
        z-index:100000;
    }
    
    #child2
    {
        position:absolute;
        width: 80px;
        height: 80px;
        background: green;
    }
    #div1
    {
        width: 100px;
        height: 100px;
        top: 100px;
        background: red;
        z-index:1;
    }
    
    #div2
    {
        width: 100px;
        height: 100px;
        top: 150px;
        left: 50px;
        background: blue;
        z-index:2;
    }
    </style> </head> <body> <div id="div1">div1
            <div id="child1">
                child1
            </div> </div> <div id="div2">div2
          <div id="child2">
                child1
          </div> </div> </body> </html>

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

Here is the output:

Child1 is below child2 even though its z-index is 100000. The key here is that div2 (the positioned parent of child2) - has higher z-index than div1 (the parent of div2). To make child1 appear on top of child2 (and div2) we have to decrease the z-index of div2 so it is less than div1:

    #div2
    {
        width: 100px;
        height: 100px;
        top: 150px;
        left: 50px;
        background: blue;
        z-index:0;
    }

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

Here is the final output:

RadControls for ASP.NET Ajax and their z-indexes

RadControls for ASP.NET Ajax are rendered using HTML and CSS so they fully obey to the rules mentioned above. To control the stacking order of RadControls you still need to use the z-index. Some of our controls come with a predefined z-index. You can find the complete list z-index help topic.

 

I hope this helps,

Atanas

The stateless nature of the Http protocol brings quite a deal of concerns about the handling of the IObjectScope in a web application. Few questions usually arise when dealing with entity containers (like the DataContext in Linq to SQL or the IObjectScope in Telerik OpenAccess ORM): where to initialize the scope, where to dispose it, how to integrate with the Page’s lifecycle, etc.. In this post we share our views on the best-practices approaches that secure safe and consistent use of the IObjectScope in web scenarios.

The desired result of the used patterns is to have one object scope, initialized on every postback and shared between various pages, or user controls that are part of a web application. 

The first approach (and maybe the easiest way of accomplishing that goal) is using a Master Page. It’s is very easy to have the object scope as a member of the Master Page and then access it from any page that has the appropriate master page set. That way the scope initialization is done in only one place and the code is efficiently used e.g. we save repeats of the same code in various places.

public partial class ScopeHolder : System.Web.UI.MasterPage
{        
  private IObjectScope scope;

        public IObjectScope Scope
        {
            get
            {
                if (scope == null)
                {
                    scope = ObjectScopeProvider1.GetNewObjectScope();
                }
                return scope;
            }
            set { scope = value; }
        }

The disposal of the scope is maybe as important operation and we are executing it in the same generic manner – in the Page_Unload event handler of the master page.

  public void Page_Unload(object sender, EventArgs e)
  {
       scope.Dispose();
       base.Dispose();
  }

Accessing the object scope now is really easy. Loading it in Page_Init on any page that requires it is a common way of working with it.

public partial class _Default : System.Web.UI.Page 
{ 
    private ScopeHolder myScopeHolder; 
    private IObjectScope cashedScope; 
         
    protected void Page_Init(object sender, EventArgs e) 
    { 
        myScopeHolder = (ScopeHolder)Master; 
        cachedScope = myScopeHolder.Scope; 
    }

This approach of handling the object scope has its faults as well. The most obvious one – projects that do not use Master Pages, or more concerning, projects that can’t use such pattern like most CMS web applications could not benefit from this approach.

The solution that was proven as very successful so far is using the HttpContext.Items collection to store the object scope and access it from any independent component on the page. We implemented a sample ScopeFactory helper class that provides the necessary logic for the operation:

    public class ScopeFactory 
    { 
        public static IObjectScope GetPerRequestScope(HttpContext context) 
        { 
            string key = HttpContext.Current.GetHashCode().ToString("x") + Thread.CurrentContext.ContextID.ToString(); 
            IObjectScope scope; 
            if (context == null) 
            { 
                scope = ObjectScopeProvider1.GetNewObjectScope(); 
            } 
            else 
            { 
                scope = (IObjectScope)context.Items[key]; 
                if (scope == null) 
                { 
                    scope = ObjectScopeProvider1.GetNewObjectScope(); 
                    context.Items[key] = scope; 
                } 
            } 
            return scope; 
        } 
    }

From here on, every component in the web application obtains the object scope in the same generic manner:

IObjectScope scope = ScopeFactory.GetPerRequestScope(HttpContext.Current);
//Do some data-access..

So, to summarize in the end, there are numerous ways of handling the object scope when working with OpenAccess. After all it is a choice that the developer has to make.  These two have proved to cover most of the user cases.