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.

Easy Data Updating With jQuery and AJAX

I am currently working on a project for a client that involves updating an existing legacy ASP application to make it easier to use, but I am not yet able to completely replace the entire application. Wherever possible, I have been getting around limitations by adding in AJAX code to pages to make them more interactive using jQuery.

As example is an order list in the back end administration section. It has a column with a checkbox next to the order id, and a column with a dropdown list of status codes (with the current status for each order selected), along with the rest of the basic order information.

In order to update the status of an order, you have to check the box next to the order #, select the new status, and the click on an Update Status button at the bottom of the page to post the page back and save the changes. It works, but it is clunky and annoying when you have a lot of orders to update. Also, you could easily forget to check an order or to click on update to save your changes.

Ideally, the order status should update immediately after selecting the new status, without any other steps. Using the onchange handler on the dropdown list, along with jQuery’s post() function, I can do just that with an ajax request to a separate page to handle to status update.

Continue reading “Easy Data Updating With jQuery and AJAX”

Make Content Panels Using jQuery

One common design problem is how to display a large amount of content on a page and still make it easily accessible. Often times, a table of contents is used at the top with links within the same page to sections below. This gets pretty unwieldy if you have a lot of content, and splitting it up into multiple pages can be annoying and hard to navigate.

An easy and elegant alternative is to use a dropdown list with content panels made of individual divs. The dropdown acts as the table of contents, and each time a selection is made, only that panel is displayed.

Example:

contentpanel

With a little bit of jQuery and CSS, it’s very simple to create this kind of ui.

Continue reading “Make Content Panels Using jQuery”

Creating a modal window with jQuery UI

A common need in a web application is to open a separate window to display some information or get input. As most modern browsers have popup blockers, it is difficult to use window.open reliably, and it also detracts from the user experience.

A better solution is to have a modal dialog that pops up within the same page over the current content. You see this very commonly on sites, and it is extremely easy to achieve with jQuery UI,  a library that adds rich UI elements to jQuery, such as dialog boxes, date and color pickers, buttons, sliders, and tabs.

Continue reading “Creating a modal window with jQuery UI”