Michael Gaigg: Über UI/UX Design » Code Samples & Tips

Multiline TextBox control (TextArea) in Silverlight

Michael Gaigg — Wed, 04 Apr 2012 17:51:39 +0000

This is one of those things that can drive you crazy. There is no 'TEXTAREA' equivalent in Silverlight. One needs to use the TextBox control with some tweaks instead. I'm terrible in remembering details like these, so here for my records:

Some remarks:

TextWrapping=True will make sure that any text entered will actually wrap to the next line
Height is important
AcceptsReturn is useful to avoid accidental submission of the form
Horizontal and Vertical scrollbars are set to "auto", but feel free to set to "Visible" if that's your preference

Enjoy!

Proposing: Feature Spotlight

Michael Gaigg — Tue, 13 Mar 2012 17:02:12 +0000

Let's say you want to highlight a feature on the map, e.g. a user has searched for a landmark, typically one would place a marker on the map and zoom to that location. The downside is that the user still needs to 'search' for the visual clue (the marker) on the map. I think the missing link here is to 'black out' the whole map and only highlighting the area surrounding the landmark. This provides a natural focus on the feature and is a really elegant alternative I believe. Optionally one could use the modal area to add a description or even photos (get creative for yourself). And yes, leave the marker also for browsers that don't support CSS3. The code is as simple as could be, here is the CSS class called 'spotlight':

    .spotlight {
        display: block;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
	z-index: 100;
        border: 0;
        pointer-events: none;
        /* this is the sweet spot */
        background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(rgba(0,0,0,0)), to (rgba(0,0,0,0.8)), color-stop(0.8, rgba(0,0,0,0)));
        background-image: -moz-radial-gradient(50% 50% 45deg,circle closest-side,transparent 0,transparent 100px,rgba(0, 0, 0, 0.8) 120px);
    }

And here the HTML defining the spotlight container:

Implementation inspired by CSS3 Spotlight.

Silverlight Form Submission using the Enter Key

Michael Gaigg — Wed, 03 Aug 2011 05:21:46 +0000

Sounds ridiculously simple but still I need to look it up over and over again. So here it is, documented once and forever: How to catch the Enter key (to trigger a search form submission for example). XAML:

Code-behind (C#):

private void txtInputField_KeyUp(object sender, KeyEventArgs e)
{
   if ((e.Key == Key.Enter) && (txtInputField.Text.Length > 3)) // feel free to remove the length limit
   {
      // submit form or whatever you want to do
      this.SubmitForm();
   }
}

Note: I've added a clause so that the form is only submitted when the user has typed a minimum of 3 characters which makes sense when hitting a service for example. Feel free to remove that.

Add Shortcut Icon to your Webpage

Michael Gaigg — Thu, 10 Feb 2011 04:57:59 +0000

Ok, nothing earth shattering but hopefully still useful to somebody out there.

Creating Icons in the Correct Size and Format

A shortcut icon must be square in size and at least 16 x 16 pixels. It's important to save it in .ico format. Either create a bitmap using any image editor and rename it, or use the free online tool http://www.convertico.com/.

Include it in your page

Include the following code block into your main template or master page. If you don't have that, well, then include it into every page...

Ah, yes, add it to the default.aspx of your Silverlight web project will do the magic as well.

Show me your shortcut icon!

Send me your page with shortcut icon and if I like the icon I will bookmark it ;)

Including Tweets into your Webpage

Michael Gaigg — Sat, 22 Jan 2011 04:33:52 +0000

Very simple and effective. I started off researching into php libraries for twitter before I settled on a very pragmatic approach which I'd like to share here. I separated the code into smaller bits for clarity and better understanding. Somewhere in your code include this HTML snippet (style the HTML using CSS id selectors):

Copy and paste the actual PHP tweet retrieval code into the section above. Don't forget to rename the screen_name to whatever your twitter handle is ;)

print("Latest Tweets");

error_reporting(-1);
ini_set('display_errors', true);
			
$user = new SimpleXMLElement('http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=michaelgaigg&count=3',null,true);

foreach($user->status as $status){
	print("");
	print("".renderUrls($status->text)."");
	print("");
}

Add this PHP helper function (maybe you have a tools class) that will parse the tweet and detect hyperlinks which are then wrapped into the HTML A tag so that they become clickable.

function renderUrls($originalString) {
	$returnString = "";
	$stringToArray = explode(" ",$originalString);
	foreach($stringToArray as $key=>$val) {
		//$URL_Validation = ereg("^[^@ ]+@[^@ ]+\.[^@ ]+$", $val, $trashed);
		$returnString .= (substr($val,0,7) == "http://") ? "".$val." " : $val." ";
	}
	return $returnString;
}

That's it, no magic!

Automatically Populate a Switch Statement for an Enum

Michael Gaigg — Wed, 20 Oct 2010 04:39:42 +0000

This one goes out to Selim - I love your 'lazy' way of programming. Here is one gem you showed me in Visual Studio:

How to automatically populate a switch statement for an enum

1.) Define your enumeration

[caption id="attachment_941" align="alignnone" width="165" caption="Define an enumeration"][/caption]

2.) Start typing "switch"

[caption id="attachment_942" align="alignnone" width="524" caption="Type 'switch'"][/caption]

3.) Hit the [tab] key

[caption id="attachment_943" align="alignnone" width="524" caption="Hit the 'tab' key"][/caption]

4.) Type the reference to your enumeration

[caption id="attachment_944" align="alignnone" width="524" caption="Add reference to your enum"][/caption]

5.) Hit the [Enter] key

[caption id="attachment_945" align="alignnone" width="524" caption="Hit the 'Enter' key"][/caption]

6.) Voila, all case statements are auto-populated.

Additional Tip

If two cases are identical, simply leave the first one blank (without break;) and the compiler will automatically move on to the next statement.


case FoodItem.Cake:
case Default:
     // do something here that applies to Cake and default
    break;

How to use the Google Font API

Michael Gaigg — Tue, 10 Aug 2010 15:10:21 +0000

[caption id="attachment_798" align="alignright" width="124" caption="Google fonts available"][/caption] If you love typography and want some new fonts for your next web project then Google Font API might be worth looking into. It's

easy to implement (as I will show)
well supported by IE, Firefox, Safari and obviously Chrome
open-source
free (I should have mentioned first huh?)

End Result

[caption id="attachment_802" align="alignnone" width="209" caption="Tangerine font"][/caption]

Code Example








This text is in Tangerine.

Implementation

The important parts in above code are to embed the font into your page through the

Link

The link element referencing the google api and your desired font family.

In above case I was referencing two variants delimited by a comma, the regular and the bold variant. Each variant will download an additional font and should be used only when really needed and used on the page to keep loading times as short as possible. The variant parameter can be omitted for use of default.

One can chose to include multiple fonts by using the pipe symbol, same rules as above apply.

Style

Use the font within your style sheet by simply referencing the font-family:

body { font-family: 'Tangerine', arial, serif; }

Above examples specifies fallback fonts (arial, serif) that will be displayed (depending on browser) while the font is not loaded yet or if the browser doesn't support the Google Font API (e.g. iPhone, iPad, iPod, or Android). Oh yes, the fonts are rendered as text and therefore support CSS3 features like text-shadow and rotation.

Tools

Font previewer

Use the Font previewer to play with some style attributes, get the resulting CSS code and see how the end result will look like.

WebFont Loader

Look into the WebFont Loader for getting more control over loading the right fonts at the right time. The WebFont Loader is a JavaScript library co-developed by Google and TypeKit that also lets you control how browsers behave while the font is still loading as well as using multiple web-font providers.

What about you?

Post your link if you are using the Google Font API already. I'd like to see some really creative uses. Are you using any other Font library?

jQuery: Handle Dropdown (select), Checkboxes and Radio selections

Michael Gaigg — Mon, 29 Mar 2010 18:35:12 +0000

Almost daily I work with lists, be it dropdown, checkbox or radio selections. I need to select values, submit selections, hide/show containers depending on the selection etc. I tend to forget all these cool jQuery notations that make every programmers life easier. How nice would it be to have a little cheat sheet? So I decided to summarize my findings (and share them with you). Obviously jQuery is powerful and gives you a multitude of possibilities so this list is neither exhaustive nor covers all possible application scenarios. Mix, match, combine and extend the samples as you wish and feel free to post your additional solutions in the comments section. See the test page.

Dropdown

I'm using the following sample list:

Get value of selected item

Pure and simple, despite what you might read in other tutorials:

alert("Selected value: " + $("#ddlCategories").val());

Change text of a particular item

Let's target item with value 'videos':

$("#ddlCategories option[value='videos']").text("Videos and tapes");

Change color of a particular item

This could be useful to show that the category is currently unavailable or a certain item is out of stock.

$("#ddlCategories option[value='videos']").css("color", "#CCC");

Get number of options

Don't forget to subtract options that don't count, e.g. the empty "- Select a category -" option.

alert("Number of options: " + ($("#ddlCategories option").length - 1));

Set a particular option

Set the option 'videos' to be the selected item.

$("#ddlCategories option[value='videos']").attr("selected", "selected");

Checkboxes

Our sample checkbox list:


	None

	Books

	Videos

	DVDs

Check all items in the checkbox list

This could be invoked e.g. through a link named 'Check all'.

$("input[name='chkCategories']").attr("checked","checked");

Uncheck all items in the checkbox list

Same here, uncheck all, a very common requirement.

$("input[name='chkCategories']").removeAttr("checked");

Make the second item being checked

List is zero-based, so the second item is nth(1) ;)

$("input[name='chkCategories']:nth(1)").attr("checked","checked");

Show the value of each checked item (requires a container!)

In this case we simply alert the value, but we could might as well write it to another output field, container or whatever you may wish.

$('#chkCategoriesContainer :checkbox:checked').each(function() {
	alert($(this).val());
	//$('#outputField').append(', '+$(this).val());
});

Radio

Our sample list again:


	None

	Books

	Videos

	DVDs

Get value of checked item

alert("Selected value: " + $("input[name='rdoCategories']:checked").val());

Append item to container

The item will be added to the DOM and is available to jQuery immediately.

$('#rdoCategoriesContainer').append('Audio tapes
');

How to Disable Button on form submit in .NET

Michael Gaigg — Wed, 28 Oct 2009 00:34:49 +0000

This problem seems to be almost too obvious to be posted here but it took me quite some time to actually figure it out how to do it correctly - so I'd might just share it with you. Disabling the submit button helps users comprehend that their action is in process and waiting for a response can be expected. It also prevents them from clicking the same action more than once which could lead to serious troubles (duplicate entries, application exceptions, etc.)

Problem

How do I disable a form submit button on a .NET page that does client-side validation? The problem is that the button cannot simply be disabled because it would not be enabled again if the client-side validation prevents the form from being submitted.

Solution

.NET


<asp:Button runat="server" ID="btnSubmit" Text="Submit" OnClientClick="SubmitForm(this);" />

JavaScript:


function SubmitForm(source) {
    ret = true;
    if (typeof (Page_ClientValidate) == 'function') {
        Page_ClientValidate();
        ret = Page_IsValid;
    }
    if (ret) {
        source.value = "Processing...";
        source.disabled = true;
        __doPostBack(source.name, "");
    }
    return ret;
}

The importance of the JavaScript parseInt radix

Michael Gaigg — Wed, 08 Oct 2008 00:18:06 +0000

Problem: Just recently I had to implement an HTML form that allows users to enter percentage values. Like every good programmer I added client-side validation to check that the input values are between 0 and 100. Using the JavaScript function parseInt(txtValue) with txtValue being the value of the input field our tester was able to submit the form [...]