Michael Gaigg: Über UI/UX Design

5Feb0

Use FontAwesome font in WPF apps

Posted by Michael Gaigg

What seems to be so trivial on the web feels like jumping through hoops in WPF. But yet again, it's actually that difficult really. Here is how to do:

Custom Fonts in WPF

  1. Download the TrueType font (.ttf) you are interested in, e.g.
    WPF_fonts_FontAwesome01

    Find system name

  2. Find the system name of the font which is most likely different to the filename
    WPF_fonts_FontAwesome02

    Find system name

  3. Add the file to your WPF solution preferably in its own directory like 'fonts'
  4. Check the properties of the font file and make sure the Build Action is set to 'Resource'
    WPF_fonts_FontAwesome03

    Check properties

  5. Add the style reference to App.xaml

Here is how this little snippet will look like:

24Apr0

Touch Event Support for jQuery UI

Posted by Michael Gaigg

Swipe

Swipe

Problem: jQuery UI doesn't support touch gestures

We are customizing a map application with swipe functionality which is based on some legacy code mash-up with dojo and jquery/jquery ui. Everything was nice and dandy until we tried swiping on the iPad for the first time. Bad awakening. jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that our mouse event simply don't work on touch devices. One might think the jQuery toolkit would take care of it... but no!

Solution:

Solution A: For every mouse/keyboard event, provide the equivalent touch event: touchstart, touchmove, touchend,...

Solution B: Use a hack called jQuery UI Touch Punch that adds simulated events (that mimic touch events) to your app and respond to the mouse events you already have in your app. It's really simple:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.js"></script>

Add the jquery and jquery ui libraries (if you don't have them already or if you use older versions) plus the reference to your local copy of the touch-punch file (download the Development version!!)

Solution C: Go to github and get the really nice swipe story map template which works "out of the box" (but didn't satisfy our complex requirements)

19Apr0

Recommended usage of Dojo Topic (Publish/Subscribe)

Posted by Michael Gaigg

Communication between multiple object instances can be implemented using the global messaging mechanism of dojo/topic. It's like a centralized hub for publishing and subscribing to topics that are not bound to a particular object.

While the dojo reference guide documents a good usage example, I believe and strongly encourage you to implement pub/sub with the following signature:

// widget:
require(["dojo/topic"], function(topic){
	topic.publish("/filter/changed", this, { title: "My Blog", author: "Michael Gaigg" });
});
 
// controller:
require(["dojo/topic"], function(topic){
	topic.subscribe("/filter/changed", function (sender, args) {
		console.log("Title: " + args.title + " by " + args.author);
		this.headerWidget.updateTitle(args.title);
	});
});

While the topic.publish allows you to define any combination of parameters I found passing two parameters - sender and args - the most consistent and useful:

One could use the sender to implement conditions within the subscriber. But the biggest advantage by far is that the signature is always the same and the amount and order of the arguments can be neglected. The code becomes more readable and easier to maintain.

One more note: Any widget can publish topics but only the controller should subscribe to these topics and then redirect actions back to the appropriate widgets, that is without introducing widget-specific logic at the controller level.

4Mar0

Using REPLACE in a SQL UPDATE

Posted by Michael Gaigg

When moving domains there will be a need to replace old url's and other strings to reflect the new names.

In my case the images of my blog articles were still pointing to the old domain which didn't physically exist anymore. Result: broken images and links.

Quick Solution

A quick SQL replace does the trick:

UPDATE blog_posts SET post_content = REPLACE(post_content, 'old-server.com', 'new-server.com') WHERE post_content LIKE '%old-server.com%'

This SQL statement is perfect for updating wordpress blogs that moved to a different domain/host.

Easy and efficient 🙂

6Nov0

HTML5 Boilerplate

Posted by Michael Gaigg

HTML5

When starting a new project it will probably take you at least 15-20 minutes of getting your stuff together. Many times I found that exactly these routine tasks are the most annoying which keep us from being productive (and happy). So, go get the html5boilerplate.com and be happy 🙂

This project by 5 driven guys, Nicolas Gallagher, Hans Christian Reinl, Mathias Bynens, Paul Irish, Cãtãlin Mariş, and Divya Manian is a great starting point for any HTML based web development. Simply awesome!

The boilerplate bundle includes:

29Oct0

Immediate Window in VS 2012

Posted by Michael Gaigg

The immediate window is an essential tool during debugging, I use it all the time. Just now I accidentally closed it and couldn't find it anymore by looking in View > Other Windows.

Don't panic, there is an easy way to get it back:

  1. Press Ctrl+W, A
  2. This will open the command window
  3. Type "immed"
  4. Voila, you got your Immediate Window back

BTW: in the immediate window you can type "cmd" and you will get the command window 😉

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:

Enjoy!

13Mar0

Proposing: Feature Spotlight

Posted by Michael Gaigg

Feature Spotlight

Feature Spotlight

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:

<span id="spot" class="spotlight"></span>

Implementation inspired by CSS3 Spotlight.

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 😉

Page 1 of 212

About Me

Michael Gaigg is Lead UI Engineer in Esri's Professional Services Division.

He has been designing map applications for 15 years and is author and curator of UI Patterns for Maps.

Categories

Popular Posts

Error: Feed temporarily unavailable.