Brisbane ALT.NET beers is happening Thursday 5th November from 6pm. The venue will be the riverside pig 'n' whistle, same as last time.
If you have not been before, ALT.NET beers is an informal pub-based meeting of ALT.Neters. Beer and wedges are likely.
Please RSVP at the new EventBrite page: http://altdotnetbrisbane.eventbrite.com
This is part 2 of my series on the jQuery UI Dialog. Part 1 – The Default Dialog covered the most basic usage of the dialog widget. In this second part I will demonstrate a simple modal dialog.
A modal dialog is a dialog that takes focus, and disables the rest of the application until it is closed. They are used to force the user to acknowledge something, or to gather some input. It is worth pointing out that modal dialogs can be annoying for users so you should consider carefully if it is absolutely necessary. User Account Control (UAC) in Windows Vista and Windows 7 is an example of an annoying usage of modal dialogs.
The dialog widget is usually configured by passing the dialog() method an anonymous object containing a set of key value pairs that describe the options required. The anonymous object is created using javascript’s object literal notation. My favourite javascript author, Douglas Crockford, describes the notation:
In the object literal notation, an object description is a set of comma-separated name/value pairs inside curly braces. The names can be identifiers or strings followed by a colon.
A simple code example is:
var myObject = {
firstProperty: 'value 1',
secondProperty: 2
};The options I will use to create a modal dialog are:
| height |
The height of the dialog |
| modal |
Boolean indicating if the dialog should be modal |
| overlay |
Creates a partially transparent modal overlay layer. Very web 2.0. |
View a Demo
And here is the code:
<!-- See part 1 for html preamble -->
<body>
<p>Some text on the page.</p>
<div class="make_me_a_dialog">Content of div</div>
<script type="text/javascript">
$(document).ready(function() {
$('.make_me_a_dialog').dialog({ bgiframe: true,
height: 200,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
}
});
});
</script>
</body>
</html>
This series is going to document increasingly complex usages of the jQuery UI Dialog widget. This first part of the series will demonstrate how to display the default dialog.
Other series members:
jQuery UI Dialog: Part 2 – The Modal Dialog
The jQuery UI Dialog is a powerful client-side dialog control. It is bundled as part of the jQuery UI suite and as such it is available on the Google CDN. Some of its more interesting features are:
- Modal / non-modal dialogs
- Support for resizing and dragging
- Support for buttons
- Support for Theming
- Stacking
- Partially transparent modal overlay layer
The simplest usage of the dialog control is to select a div, and call the dialog() function.
View a Demo
Here is the complete code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Default dialog</title>
<link href="ui-darkness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
</head>
<body>
<p>Some text on the page.</p>
<div class="make_me_a_dialog">Content of div</div>
<script type="text/javascript">
$(document).ready(function() {
$('.make_me_a_dialog').dialog();
});
</script>
</body>
</html>
Maybe you are like me and regularly work on multiple projects. If not, please send me a cheque for the $0.00001 worth of bandwidth you have wasted.
Sometimes a week or two can pass between looking at a project and I find when I go back to it I lose a couple of hours just trying to work out where I was up to. To solve this problem I have started a development journal for my more neglected projects. At the end of every coding session I record a few key pieces of information to help orientate me the next time I come back to it. Here is an example entry:
----------
2009-08-19
----------
WORKING ON:
Testing the graph navigator code that produces cycles. Discovered and addressed a few edge cases such as non-cyclic journeys where the shortest spanning tree visits every node.
NEXT THING TO DO:
Complete the scenarios in BuildingCyclesTests using the style of the first two already completed scenarios.
TESTS:
63 passed, 0 failed, 1 skipped, took 13.21 seconds
It is just a plain text file that I have added to my visual studio solution items so that I can edit it in visual studio.
The traditional, Paul Graham style of technology start-up is:
- Someone has an idea
- They try to validate their idea
- The idea is implemented
- The idea is communicated to the market
While the importance of step 2 has always been emphasized the weakness of the above remains that the product may not gain significant visibility to the market. The products never reach critical mass and so they fade gradually into obscurity.
Recently I have noticed a new model emerging that promises far less risk at the tail end of the product cycle:
- Build a personal brand. This is usually done by making open-source contributions.
- Develop a product that is related to your brand.
- Use your brand to reach a market
The advantage here is that the market is ready and waiting and has a degree of trust in the entrepreneur. Here are some examples of development tool isvs that are using this strategy:
I am sure there are others but that is all I can think of right now. Personally, I think it is great that these people are able to leverage their excellent contributions to produce a viable business.
WebAii is a proprietary, but free, functional testing framework from ArtOFTest. It has become more visible since telerik started bundling it with their ASP.NET AJAX UI Controls framework...
Between 2nd October and 18th October my current team was using Team Foundation Server for source control and integration. On Sunday I merged the changes from TFS back into our old subversion repository, effectively throwing away the two weeks of work that one of the guys spent setting up TFS. Why did we make this decision and what did we learn?
Executable specifications are the holy grail of software development. The idea is to specify the behaviour of a system in some structured way that can be automatically verified. It is something that I am interested in so I have been keeping an eye on the options that are available for .NET...
There has always been an employment back-channel. Maybe there was a time when people would pick up the phone when they needed to fill or find a job. More recently people might have sent an IM in that situation. But now it seems that twitter is the medium on which employment transactions occur...
If you are using fluent nhibernate then mapping nullable columns is easy – just call the .Nullable() method for the property mapping’...
From time to time I find that I have properties on my action parameter that don’t get bound. Most commonly for me this occurs when the action parameter type as a property called ‘Id’...
I continue to be interested in the architecture of the plain, standard, web application. Each of the web application frameworks defines an architecture for the plain web application. Think of Rails and Django (MVC + Active Record), or sharp architecture and Codebetter.Canvas (Asp.net MVC + NHibernate + DDD). This is a starting point from which more advanced and specialised web applications can grow.....
I always like to have a side project. Something I work on in my own time, as a way to sharpen my saw and hopefully build something useful. In May
I wrote about what was then my new project. To build a web site, and possibly a web service, that solves the traveling salesman problem. Now that the
site is live I am writing this post to document what the process has been like....
TestDriven.Net is a Visual Studio add-in to help with testing in general and TDD in particular. It allows the user to run a test or group of tests by right-clicking and selecting 'Run Test(s)' from the context menu...