User Interface – Full Frontal Nerdity 2 Electric Boogaloo

Creating A Simple DisplayFor Template In ASP.NET MVC

When building web applications, the DisplayFor and EditorFor HTML helpers are extremely useful to quickly build pages from your model. However, sometimes you would like a bit more control over their display.

For example, by default, boolean fields show as a disabled dropdown with the value selected. I would prefer to simply output the value – true or false – as plain text.

In order to replace the template used, first create a folder inside of the Shared folder under Views called DisplayTemplates.

Then create a partial view file matching the name of the data type, in this case Boolean.cshtml

Inside the Boolean.cshtml file, add the following code:

[csharp]
@model Boolean?

@(Model.HasValue? Model.Value.ToString() : "")
[/csharp]

That’s all you need to do. Any views that use DisplayFor on a boolean will pick up the new format automatically.

You can do a lot more than what is shown here. This is a pretty good guide to creating simple and advanced EditorFor templates. The same concepts apply for DisplayFor, just a different folder (DisplayTemplates vs EditorTemplates):

Extending Editor Templates for ASP.NET MVC

Customize Title Bar Colors In Windows 10 WinJS Apps

In my previous post, I showed how to set the title bar color in Windows 10 C#/XAML apps. It’s easy to do the same thing in a Windows 10 Javascript app as well, the syntax is slightly different. I added this code to the main js file for the app (example: default.js), right before the app.Start() method call.

[javascript]
var titleBar = Windows.UI.ViewManagement.ApplicationView.getForCurrentView().titleBar;
titleBar.backgroundColor = Windows.UI.Colors.blue;
titleBar.buttonBackgroundColor = Windows.UI.Colors.blue;
titleBar.foregroundColor = Windows.UI.Colors.white;
titleBar.buttonForegroundColor = Windows.UI.Colors.white;
[/javascript]

That’s all it takes.

Customize Title Bar Colors In Windows 10 XAML Apps

Windows 10 apps can have customized title bar colors (for example, the Mail and Calendar apps) instead of the default white (or accent color in an upcoming Windows 10 update). Changing the title bar color in a Windows 10 XAML app is easy. In the constructor for your main XAML file (ie..MainPage.xaml.cs), you get a reference to the title bar from the ApplicationView object’s GetForCurrentView() method. You can then set the colors of both the title bar and the window controls by setting the properties:

[csharp]
public MainPage()
{
this.InitializeComponent();
var t = ApplicationView.GetForCurrentView().TitleBar;
t.BackgroundColor = Colors.Indigo;
t.ForegroundColor = Colors.White;
t.ButtonBackgroundColor = Colors.Indigo;
t.ButtonForegroundColor = Colors.White;

}
[/csharp]

That’s all it takes. You could easily implement user customizeable title bar colors for your app as well.

Creating Simple Text Notifications in Windows 8 with C#

Windows 8 introduces a much improved notification system that allows your applications to notify users in a variety of ways, from local application notifications to push notifications and badges on live tiles.

The simplest type of notification is a toast notification, which is a message that appears temporarily in the corner of the users screen and then fades away. Various applications have used them for notification of events like users signing on or off, messages received, etc. Windows 8 supports them at the OS level, so you can provide consistent notifications in your applications.

The notification system is in the Windows.UI.Notifications namespace, so the first step is to include the namespace in your code:

using Windows.UI.Notifications;

The notification templates are XML documents, so you also need to include the Windows.Data.Xml.Dom namespace:

using Windows.Data.Xml.Dom;

Creating the notification is simple. First, you use the ToastNotificationManager to get a template to work with for your notification. The GetTemplateContent method returns an XML document containing the template of the type you pass to the method as a ToastTemplateType value. In this case, we just need a simple text template, so we will pass it ToastText01:

XmlDocument x = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText01);

The Xml document that is returned looks like this:

<toast>
    <visual>
        <binding template="ToastText01">
            <text id="1"></text>
        </binding>  
    </visual>
</toast>

Pulling out the <text> element and appending a text node to it will set the text for the notification:

XmlNodeList toastTextElements = x.GetElementsByTagName("text");
toastTextElements[0].AppendChild(x.CreateTextNode("Copied to clipboard."));

Once the text is set, you create a ToastNotification object and pass the XML template to the constructor:

 ToastNotification toast = new ToastNotification(x);

Finally, you call the CreateToastNotifier method of the ToastNotificationManager and pass the ToastNotification object to the Show method to display it:

  ToastNotificationManager.CreateToastNotifier().Show(toast);

That’s all it takes. There are additional templates you can use that include spaces for images and formatted text. For more information on available templates, see http://msdn.microsoft.com/en-us/library/windows/apps/hh761494.aspx

Tab Bar Controller Changes in Xcode 4

I am in the process of learning iOS development, and the tutorial I am using on the using tab bars was written for Xcode 3. In the tutorial, you add a third tab to the two that are created by default. It instructs you to use the attributes page for the tab bar controller to add another item:

Unfortunately, this option is gone in Xcode 4, and the method of adding a new tab is completely different. Here is a step by step demonstration of how to add a Tab Bar Item in Xcode 4.

Hopefully this will help someone who is confused by the change.

Highlighting Table Rows with jQuery

When working with a table of data, it is helpful to add some type of highlight to the row to indicate the current row. This is extremely easy to do with a few lines of code in jQuery.

I have a table that has rows with two editable text boxes in them. When one of the text boxes receives focus, the row it is in becomes highlighted. When exiting, the row is no longer highlighted.

I have created a CSS class called highlight that adds a light yellow background:

.highlight { background:#FFFFCC;}

The table is just standard <tr>, <td> and <input> tags. The <input> tags do not have event handlers specified as attributes, they will be added in code.

The code is very simple. Two event handlers are added to all input textboxes, one for focus and one for blur. In the focus, the highlight class is added to the parent <tr> tag of selected texbox. On blur, the class is removed. I used the closest() function, which finds the closest element. It’s a shortcut to using .parent().parent() to get to the <tr> tag of the current row:

$('input').focus(function() {

 $(this).closest('tr').addClass('highlight');

});

$('input').blur(function() {

 $(this).closest('tr').removeClass('highlight');

});

The event handlers are added to all <input> tags. You will want to get more specific with the selector if you need to narrow down which elements cause highlighting. In the context of the event handler function, $(this) refers to the element that fired the event (the textbox).

That’s it. With a little CSS and jQuery, the table becomes more usable.

Working example