Completing the Dialog Widget - Building Our UI - Developing Web Components (2015)

Developing Web Components (2015)

Part II. Building Our UI

Chapter 9. Completing the Dialog Widget

Jason Strimpel

This chapter focuses on completing the dialog widget that will be used throughout the rest of the book.

Styling the Widget

I am not a UI/UX expert, nor am I a designer. The selected styles were based on the default styling for jQuery UI. The drag handle image is a portion of a jQuery UI sprite as well.

The intent of this styling is not to advise on styling in the sense of aesthetics or usability, but rather to describe how to apply any styles to a widget.

Adding CSS

The dialog CSS is very minimal. It could easily be stored internally in the dialog widget JavaScript and then applied directly to the elements in question upon instantiation of a dialog widget. However, this approach would not scale well or lend itself to ease of maintenance.

For instance, if you wanted to add a positioned background image it would require setting each property individually as opposed to being able to simply apply all styling in the value of the background property of a selector in a stylesheet. Additionally, applying the CSS via JavaScript is not nearly as efficient as allowing the browser to apply the styles defined in a stylesheet. Lastly, it makes overriding the CSS properties more difficult—because the CSS is applied inline if done via JavaScript, a higher level of specificity is required than when overriding CSS set in a stylesheet.

With those caveats in mind, here’s the CSS for our simple dialog widget:

[role="dialog"] {

display: none;

}

[role="dialog"] {

width: 400px;

height: 200px;

position: absolute;

border: 1px solid #bbb;

border-radius: 5px;

font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";

}

[role="dialog"] h2 {

background: #bbb;

font-size: 16px;

font-weight: normal;

padding: 10px;

margin: 3px;

border-radius: 5px;

padding: 5px;

color: #eee;

}

[role="dialog"] p {

margin: 0;

padding: 10px;

font-size: 12px;

color: #333;

}

I reserve using !important for state overrides such as error messages, to ensure that the proper error styling takes effect regardless of specificity, and overriding the styles set via JavaScript (inline styles). In this case we are overriding one of the latter, which is being set by ApacheChief:

[role="dialog"] .apache-chief-resize {

background: url(jquery-ui-icons.png) -64px -224px !important;

width: 16px !important;

height: 16px !important;

}

Concatenating the JavaScript

The JavaScript was concatenated using grunt-preprocess. The dialog widget dependencies were included inside a closure so as to create the minimal global footprint:

(function (global, $) {

// @include components/jquery/dist/jquery.sj

// @include components/chapter-6_duvet/duvet.js

// @include components/chapter-7_shamen/shamen.js

// @include components/chapter-8_apache-chief/apacheChief.js

// @include components/chapter-2_voltron/voltron.js

// @include dialog.js

})(window, jQuery);

Summary

Congratulations—you now have a fully functioning dialog widget! More importantly, you have a better understanding of how other UI libraries implement similar components. This understanding was gained by breaking the dialog widget into smaller, reusable widgets, each of which handled a specific requirement (resizing, dragging, cloning, etc.). Armed with this knowledge you now have an understanding of “one layer of abstraction below your everyday work,” so you can make more informed design and implementation decisions. The end result is the development of better software and easier maintenance of this software, which will make you a more productive and happier engineer. And doesn’t everyone want to be happier?