Michael Gaigg: Über UI/UX Design

4Apr0

Multiline TextBox control (TextArea) in Silverlight

Posted by Michael Gaigg

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:

<TextBox TextWrapping="Wrap" Width="300" Height="80" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" />

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!

2Aug0

Silverlight Form Submission using the Enter Key

Posted by Michael Gaigg

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:

<TextBox x:Name="txtInputField" KeyUp="txtInputField_KeyUp" />

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.

9Feb0

Add Shortcut Icon to your Webpage

Posted by Michael Gaigg

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...

<head>
	<link rel="SHORTCUT ICON" href="favicon.ico">
	<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
	<title>My Title</title>
</head>

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

Include it in your WordPress Blog

Update: Maria mentions that it is shockingly simple to include a favicon to your wordpress blog - http://wordpress.org/extend/plugins/shockingly-simple-favicon/

Show me your shortcut icon!

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

4Dec0

Highlights of Week 48/2010

Posted by Michael Gaigg

9Nov0

Web GIS: Principles and Applications [Paperback]

Posted by Michael Gaigg

Web GIS

Web GIS


I'm happy to introduce a new book which was co-authored by my colleague Pinde Fu: "Web GIS: Principles and Applications".

I'm really excited about this, not only because good GIS resources are scarce but also because he used screenshots of applications that I have designed over the past years, e.g. geodata.gov, GeoPortal Toolkit, Loma Linda Medical Center Response System, HydroViewer.

How much better can it get when your design ends up in a book?

Audience

While the content of the book is targeted at readers at all skill levels I can see it as a great teaching source as well as invaluable resource for managers and aspiring GIS developers to understand the principles of web applications.

Content

The content of the book is focused on the conceptual level (you won't find code samples) by trying to be systematic and as comprehensive as possible which I believe was done superbly. Nevertheless the authors do cover important new developments like geospatial Web services (REST), geobrowsers, cloud computing, geoportals, mashups, mobile GIS, Gov 2.0, geotagging, ArcGIS APIs for JavaScript, Flex, and Silverlight.

Table of Contents

  1. GIS in the Web Era
  2. Technical Basics
  3. Geospatial Web Services
  4. Geospatial Mashups
  5. Mobile GIS
  6. Geoportals
  7. NSDI in the Web 2.0 Era
  8. Web GIS Applications in E-Business
  9. Web GIS Applications in E-Government
  10. Hot Topics and New Frontiers
Suggested reading:
14Oct0

ArcGIS Silverlight App: World Bank Data Mapper

Posted by Michael Gaigg

World Bank Data Mapper

World Bank Data Mapper

The World Bank Data Mapper is the latest mapping application published by the Esri Applications Prototype Lab (thanks Richie).

The app is built using Esri's ArcGIS API for Microsoft Silverlight and the recently published (free) web API of the World Bank that provides access to up to 50 years of economic, financial and health data.

Besides mastering some technical challenges (missing cross-domain access file, amount of web requests) the map viewer looks sharp and straight forward without the usual template-related overkill of functionality - great job visualizing all this economic data. Let's see which other - maybe analytical? - mapping tools will follow...

Oh, of course, have a look at the working app and download the full source if you are interested to see how the pros did it.

30Jun0

HTML5 and the Future of Adobe Flash [and Silverlight]

Posted by Michael Gaigg

Really interesting research note by Gartner.

Key findings:

  • HTML5 will become the mainstream of the Web during the next decade.
  • HTML5 is a potential threat to the continued adoption of plug-in based RIA approaches (including Flash/Silverlight).

Recommendations:

  • Enterprises should try avoid becoming dependent on any one browser or client-side technology.
  • Enterprise developers should “design for standards” and not browsers or runtimes.
  • Developers should favor the lightest-weight technology that will meet their requirements.
  • Architects should consider hybrid approaches […]
  • Before purchasing or committing to a new UI technology or platform, enterprises should first invest in a user-centered design process based on objective data about user behavior.

Complete Analysis: http://www.adobe.com/enterprise/pdfs/html5_flash.pdf

On a personal note I especially like the following part (btw: brilliantly written):

The average enterprise will continue to make ineffective use of any and all available UI technologies.

The average enterprise will continue to make ineffective use of any and all available UI technologies.