My First XAML Data-Driven UI Recipe

Before XAML in particular and .NET in general, my typical data-driven UI “recipe” was to build on a Tab Control—usually just a bunch of forms in Tabs. The Tab aesthetic is directly connected to the “classic” desktop metaphor—directly coming from Xerox PARC. Next to the desktop there are filing cabinets—and in a drawer of the file cabinets are folders—folders with Tabs.

With the release of Windows 8, Microsoft reinforces what Apple has already started: a move away from the 1920s “modern” office space to the ancient world of the laminar tablet. In the same way the human eye jumps from one space on the surface of stone bas relief to another, our eye can see the flat panel display change in response to our touch. This flat panel aesthetic expressed in XAML leads me to these controls:

  • The DockPanel will allow the ‘root’ panel display to be subdivided into smaller panels and provide dynamic flow resizing (via LastChildFill="True").
  • The Frame will usually be the “last child” of the DockPanel and provide the means to let the eye “jump” from one interactive display to another.
  • The ItemsControl with a WrapPanel template loaded in the Frame takes advantage of the flow resizing literally making the layout of items flexible.

XAML

This four-control approach is not meant to be a Microsoft-only solution. This approach actually comes from Web design (with display: inline-block) and should be replicated in, say, Adobe Flex. The Web influence on this approach can also be seen through the use of the Frame element because it leads to the Page Navigation controls clearly mimicking the loading of HTML pages.

today’s @denisejacobs links

Great resource: A CSS Sticky Footer bit.ly/hKajhJ

Great resource: CSS Fixed Footer http://bit.ly/AWWBf

Great resource: In the Woods – Vertical Centering With CSS http://bit.ly/E8Z42

New posts on http://denisejacobs.com: “On Banishing Your Inner Critic” and “On-Demand Inspiration” #creativity #inspiration

Great resource: 960 Grid System http://960.gs/

Great resource: Responsive web design is boring! | Opinion | .net magazine http://bit.ly/oXpbMt

Check out this SlideShare presentation : Pragmatic responsive design http://slidesha.re/p5BF9C

I’ll be presenting “The Art of Disciplined Creativity” at webafternoon.com in Atlanta 10/22. @kurafire @bendotorg @jenseninman there too!

ASP.NET Web Forms Interview Questions

иконопис
MVP Chalermvong and his session - ASP.NET Performance Up!

Learning how to work with ASP.NET Web Forms is the other thing of “New Things Learned in the Labor Camp”
 I’ve avoided confronting ASP.NET “classic” directly for years. Instead, I made the right decision to learn things about Web programming and Web design that Microsoft notoriously undervalued in its professional communication for years until the rise of Scott Guthrie from ASP.NET “classic” to ASP.NET MVC.

Sadly, there is a job market full of IT shops that are deeply invested (often emotionally invested) in ASP.NET “1.9”—the way of seeing the Web through the Microsoft looking glass just before ASP.NET 2.0 was released in 2005.

For years I’ve “run away” from confronting ASP.NET Web Forms directly. The following interview questions I’ve slapped together “finally” engage—directly. By the way to show that I’m super serious about this matter, I’ve literally spent hours over about two weeks building samples for ASP.NET for Web Forms in my studio.

What are ASP.NET Web Forms?

ASP.NET Web Forms is a technology that breaks down a plain-old HTTP Request into a series of clearly defined events (classified broadly under initialization, load and render)—these events describe the “life cycle” of a familiar model, the data-entry form in a Web page. ASP.NET is based on the event-driven programming paradigm made popular and traditional by Microsoft in the 1990s.

What is a ‘Post Back’?

The ‘Post Back’ is the concept developed by Microsoft that stands between the post HTTP verb and the first event recognized by an ASP.NET Page. Typically, the Page.IsPostBack Boolean is checked in the Page.OnLoad event handler. When Page.IsPostBack == false then the get HTTP verb is the request. Microsoft has defined a conventional Jscript function, __doPostBack(), that invokes the ‘Post Back.’ ASP.NET Web Forms seem crude and extravagant in the 21st century when a page-level post action is regarded as expensive and disruptive (ASP.NET AJAX was supposed to remedy this).

Why do ASP.NET controls require a parent form?

Without a parent form element, the ‘Post Back’ concept is not implemented. Conventional hidden fields in the form store event metadata (__EVENTTARGET, __EVENTARGUMENT, __VIEWSTATE).

See also: “TRULY Understanding ViewState”

What is the AutoPostBack property?

The AutoPostBack property is a Boolean that is apparently defined independently and conventionally in the System.Web.UI.WebControls.ListControl, System.Web.UI.WebControls.CheckBox and System.Web.UI.WebControls.TextBox. When AutoPostBack == true an event associated with these controls (select, check, blur) will cause a Post Back.

See also:
System.Web.UI.PostBackOptions and System.Web.UI.Page.AutoPostBackControl.


super smart msft peeps

What is a Cross-Page Post Back?

By default, an ASP.NET page “posts back” to itself (frequently). A Cross-Page Post Back declares that one Web Form should post to another Web Form—not back to itself. Input captured in the posting page can be captured in the receiving page via the Page.PreviousPage property.

Tip: The Page.IsCrossPagePostBack property is always null. During a cross page Post Back Page.PreviousPage.IsCrossPagePostBack will be true.

See also:
Button.PostBackUrl.

What is a Server Transfer?

An ASP.NET Server Transfer allows a Page executing on the Server to Transfer execution to another Page. It can be thought of as a call to another procedure from the currently executing procedure. In terms of a POCO class, a Server Transfer is a method call in a procedure of one class with a member from another class—the catch is that no arguments can be passed in the method call. After a Server Transfer, the new page running has access to all of the Request, Session and Application-scope data in the old page. Importantly, there is a Page.PreviousPage property which can be used with FindControl() to locate controls on the old page.

According to Microsoft MVP Karl Moore, “So, in brief: Response.Redirect simply tells the browser to visit another page. Server.Transfer helps reduce server requests, keeps the URL the same and, with a little bug-bashing, allows you to transfer the query string and form variables. 
Don’t confuse Server.Transfer with Server.Execute, which executes the page and returns the results. It was useful in the past, but, with ASP.NET, it’s been replaced with fresher methods of development. Ignore it.”

See also: “ASP.NET Server.Transfer Method”

What is a Master Page?

The ASP.NET Master helps keep Web Forms DRY. They share visual elements among several ASP.NET pages providing the “consistent look and feel” Web designers expect. ASP.NET Master pages also centralize HTML page “meta” information, much of the angle-bracketed ceremony that make Web page markup noisy.

How does a Master Page affect the Control.FindControl function?

The ASP.NET Master adds one or more ContentPlaceHolder controls to the visual tree. These in turn demand Content controls, which implement INamingContainer—a “naming container” affects the ID attributes of child controls “inside” the container. So: a control named foo inside a naming container, bar, can be located by Control.FindControl("bar$foo") where Control would be an instance of the Master page in our example.


The ASP.NET Dream Team

How do Web Forms handle Validation?

ASP.NET handles Validation with PostBack-dependent server controls. These server controls share a ControlToValidate property, pointing to the input-related server control to Validate. There are validation controls for marking input as required, checking input for a data type, testing input with a Regular Expression and testing input with custom code.

One little annoyance: custom validators don’t work with blank input—so they must be paired with the validation control for marking input as required (RequiredFieldValidator).

What are Validation groups?

Validation groups allow more than one “validation context” to exist in a Web Form. For example, a layout with a GridView might have an EditItemTemplate with one Validation Group for editing while another form used for inserting new rows into the grid will have another Validation Group. Validation groups are declared with the ValidationGroup property.

What is a “Partial Page Update”?

The “Partial Page Update” is made possible with the UpdatePanel and the ScriptManager, which is the heart of ASP.NET AJAX. This extension to ASP.NET introduced in version 2.0 dramatically reduces the need to do the “classic” PostBack by implementing the “asynchronous PostBack” a.k.a. the “Partial Page Update.”

Today’s @denisejacobs links



AG test of a great grids system

You like the new look of kintespace.com?

Картини
Leaf /

Apart from yours truly, there are three sources to credit for anything you may like about the new look of kintespace.com:

  • The 960.gs Grid System

  • Tomoko Matsushita for suggesting that I use photographic backgrounds (actually I already had this idea but she helped to remind me). The background used, as of this writing, for the kintespace.com home page is from Japan, by the way, not Africa

  • June Edmonds for finally having the time to lecture me at length about color (the last time we tried to get into something technical was in 2008!). This 2011 talk led directly to me using Adobe’s kuler.adobe.com with some semblance of technique.

My interpretations of June’s color talk


June teaches me to look for these high-level concepts when approaching color:

  • Start with one ‘base’ color and then look for its compliment (using a tool like Adobe’s kuler.adobe.com).
  • Tint variations of the ‘base’ color means white has been added to the “pure” color.
  • Tone variations of the ‘base’ color means black has been added to the “pure” color.
  • Neutrals (grays) are not colors.

Back when I wrote “CSS Biggest-Box, Five-Color Strategy,” I was completely ignorant of this approach—so that stuff has to be abandoned for my ignorance.

My ‘sole’ contribution to the new design


I don’t want to misrepresent others in case what follows sucks among the accepted pundits. I consciously used transparency effects to ‘replace’ the “need” rounded corners. My assertion is that right-angle corners in Web design are so “boring” and “old-fashioned” is because these hokey corners define solid fills—and it is actually the solid fills that are “boring” and “old-fashioned.” The cure for boring solid fills is transparency effects.

Here are some flippant statements about rounded corners:

My preference for transparency effects does not free me from the problems Web designers have with Microsoft Internet Explorer. I’m using the jQuery Color Plugin to get transparency effects—which is still in beta—and my guess is that this beta status is in part because of Internet Explorer. The relatively timid reaction my stackoverflow.com question, “IE9 ‘tearing’ background images behind scrolling blocks with background transparency,” suggests this to me.