June 2006 - Posts
In a previous post I talked about a popup mechanism for ASP.NET 2.0. Since that time we have been using it here and there and noticed room for improvement, hence version 2.
Basically I kept the same principle as before with the PopupManager and PopupWindow classes. However I dropped the PopupWindowBase class from the design.
PopupManager
We use this class for factoring PopupWindow objects and for taking care of the results of the popup window. The following image shows the different Methods:
You use the PopupManager as main class for both the parent (page that contains the button for the popup window) as child (the page that is shown in the modal dialog box) page.
PopupWindow
On the parent page, we need to create an instance of the PopupWindow and configure it. First you need to set the page that need to be shown in the modal dialog box. And secondly you need to assign it to a button (any control which implement IButtonControl).
When you want to pass data to the child page you can use 2 possibilities:
1. Pass data via the querystring as displayed in the code below
PopupManager popupManager = new PopupManager(this);
PopupWindow popup1 = popupManager.CreatePopupWindow("Popup1",
"SelectCountry.aspx?myvar=myvalue");
2. Pass the data via the ControlParameters Dictionary.
popup2.ControlParameters.Add("country", txtValue1);
Via the ControlParameters Dictionary you can register all controls (that implement the ITextControl interface) that contain data you want to pass to the child page. With this, you're actually telling the PopupWindow to generate client side code that will fetch the value entered in the browser (client side) and add it to the QueryString.
Suppose you have 2 boxes, one for the country and one for the region as shown in the next picture:
In the first popup, the user selects the coutnry from a list. When the popup is closed the country will be set in the first textbox.
When the user clicks on "popup 2" linkbutton, we want to pass the value of the first textbox as parameter to the page shown in the modal dialog box. The problem is that we're still on the client side and that we need to extract the value from the textbox in javascript code and add it to the querystring for the second popup.
The following code is generated by the PopupWindow after the user selected the country.
<script type="text/javascript">
<!--
//Defines the Param Class
function Param(name, value)
{
this.Name = name;
this.Value = value;
}
//Adds the parameters to the url
function GenerateUrl(url, params)
{
var paramDelimiter;
if (url.indexOf('?') > 0)
paramDelimiter = '&';
else
paramDelimiter = '?';
//loop over the params and add them to the url
for (i=0;i<params.length;i++)
{
url += paramDelimiter + params[i].Name + '=' + params[i].Value;
paramDelimiter = '&';
}
return url;
}
function Popup1()
{
var params_Popup1 = new Array(1);
params_Popup1[0] = new Param('__pid', 'Popup1');
params_Popup1[1] = new Param('__cid', 'c53e6be8-9b0d-4f24-94d6-732e3aa00c10');
var url_Popup1 = GenerateUrl('SelectCountry.aspx?myvar=myvalue', params_Popup1);
window.showModalDialog(url_Popup1,null,
'status:yes;dialogWidth:300px;dialogHeight:200px;
center:yes;edge:Raised;help:yes;resizable:no;scroll:yes');
}
function Popup2()
{
var params_Popup2 = new Array(2);
params_Popup2[0] = new Param('__pid', 'Popup2');
params_Popup2[1] = new Param('__cid', 'cc7438c7-4fa9-4894-983c-f075dd6f5a8f');
params_Popup2[2] = new Param('country', document.getElementById('txtValue1').value);
var url_Popup2 = GenerateUrl('SelectRegion.aspx', params_Popup2);
window.showModalDialog(url_Popup2,null,
'status:yes;dialogWidth:300px;dialogHeight:200px;
center:yes;edge:Raised;help:yes;resizable:no;scroll:yes');
}
// -->
</script>
The function Param() is the javascript way of defining a Param class.
The function GenerateUrl() takes a base url and extends the URL parameters based on an array of Param objects.
The Popup1() and Popup2() functions are called from the button onclick events. These functions contain the call to the showModalDialog. You can clearly see in Popup2(), that an additional parameter was generated. This parameter takes its value from the txtValue1 BOM (browser object model) element.
The __pid parameter stores the popup id, needed to identify popup 1 or 2. The __cid is the call id needed to fix an issue with the showModalDialog. The problem is that the showModalDialog doesn't request the page from the server anymore when opened for a second or n-the time. However, when the URL changes, it has to request the page again from the server and that's why we always add a unique guid in the url.
version 2.1
In version 2.1 there were 2 changes:
- whenever you call the GetPopupResult() method, you get the result and the session state will be cleared out. This way you can tell when you are in a postback situation of the popup or from somthing else. If the GetPopupId returns null, you are not in a postback from the Popup, if it contains a value, you get the Id from the Popup window.
- The SetPopupResult & GetPopupResult work now with a object type instead of a generic type. This causes less unexpected results.
Conclusion
This release of the ASP.NET popup adds features to pass control parameters to the popup window and fixes a caching issue of the showModalDialog.
v 2.0 Download the Visual Studio 2005 project code here (includes a sample)
v 2.1 Download the Visual Studio 2005 project code here (includes a sample)
Does this post relate to you? Well it depends, if you use Visual Studio WYSYWIG features, you're not affected that much. However if you're old school and regularly change HTML code by hand, like tables etc, you should read on.
Since long time we are used to develop HTML in a specific way. However, this coding style is no longer permitted when working with ASP.NET 2.0.
Since ASP.NET 2.0 each aspx page is automattically generated with the XHTML DOCTYPE element. This means we can't just write our HTML anymore like we used to.
For example:
<table border="1" cellpadding="0" cellspacing="0" height=100%>
<tr>
<td>
Hello World
</td>
</tr>
</table>
The code above adds a height attribute to the table element. Browsers used to accept this, however they aren't allowed anymore since the should follow very strict rules now. From the moment a browser sees the XHTML Doctype declaration, it should obey the XHTML rules. Therefore, it won't process the height attribute anymore. Without the XHTML Doctype declaration, the browser processes the HTML in "quirks mode" based on browser specific rules. So, the result is then unpredictible.
Besides the height attribute their are a number of different rules. For example the font tag is not allowed anymore.
Agree, both the height attribute and font tag are really old school and nowedays we should rely on CSS. Thanks to this post, I was able to regain the height feature of before and being compliant with XHTML.
So, where is it heading? Well, my advice is to use the Visual Studio/Web Developer properties and try to minimize the hand coding. Note that you can always use the Check accesibility option from the tools menu. When using the WYSYWYG features of visual studio you'll notice much more use of CSS.
Conclusion
I think the XHTML compliancy of ASP.NET 2.0 is a good thing because it will result in stricter results. This will eventually solve our browser agnostic issues we faced previously.
You can check MSDN on this subject here and XHTML specificatio on W3C here. w3schools have a good tutorial to get you started.
Analysis and Project Management
In this phase we will describe how the analysis phase usually runs. We’ll also see the tools we can use to support the analysis and PM jobs.
Off course, these two aspects aren’t limited to the project startup, but we only focus on the definition and setup of the tools we can use.
Gathering Requirements
Whenever you agree on the start of a new project, you must first think about the functionalities of the application. We won’t go into details on how this process should be done. Usually both people from the business know what they want to achieve (or at least have a vague idea) and it is up to an analyst to get the requirements and put them on paper.
The requirements can be written out in several formats, either it is a full written text describing the required application, or either is a bulleted list of features.
Setup Project Management Tools
After requirements have been delivered, it is time to arm yourself with Project Management facilities. In this area dev teams think of tools like Microsoft Excel or Microsoft Project, which are both good to perform time planning and sizing. Now don’t get me wrong here, I do like these tools a lot, but they have there place and usage but in .NET Stratego we are discussing useful means for smaller teams.
Microsoft Excel
When looking at Excel, you probably agree that it is simple and it works rapidly. However, when you want to automate things a bit, you wind up in making more and more complex formulas and gradually inserting VBA code into it. Additionally, it is quit static and sharing the Excel between team members for time tracking for instance isn’t really what it is meant to do.
Microsoft Project
Microsoft Project on the other hand is capable of lifting these issues, though it is hard to work with. Creating an initial planning in MS Project is pretty doable; however, the hard part is keeping it alive. Projects have a lot of unforeseen events that could change your initial planning and reflecting these changes is hard in MS Project.
MS Project has a server version that allows users to track their tasks. They can also use it to indicate their time spent on it. As this is great IMHO, it is not really pragmatic and is targeting the bigger organizations. It takes a lot of time both for project managers and operational people to keep this running.
Gemini
Recently I stumbled upon a great tool in this area, which is called Gemini from countersoft. I was able to install it in 10 minutes and used it directly without reading any manual. Especially this last part increased my affinity for Gemini. I just hate it when you need to work through manuals, guides, etc just to understand what it is and what it can do.
Countersoft really managed to create a product that is easy and transparent. Every day I discovered new features realizing it has more power to it that I initially thought.
Another amazing thing about it is its pricing. You can use it for free for teams up to 10 people. A commercial license is only € 215 for unlimited usage.
Though, you can extend and configure Gemini substantially, the settings and features delivered out of the box are just fine. Since I want to make this guide also a bit practical I’ll briefly discuss with you a few settings to tweak it towards my suggested development strategy.
Configuring Gemini
I won’t describe the installation settings you need to do like a connection string for the Gemini database. Instead I want to point to some interesting settings (which can be found in the manual)
You can download the manual from the website of countersoft.
- Though not Gemini specific, you can tune IIS a bit as described in chapter 3.3
- Make sure you set the Date Format and globalization settings as described in chapter 4.4, 4.5
- Standard everyone can see all projects; this is a setting I wouldn’t recommend when you want to work with different projects for different customers. So turn this setting of in that case as described in chapter 4.7
- If you do like alerts, please configure the Mailplugin chapter 4.22 and optionally you can check if both the creator and assignee gets an alert every time something changes on an issue (chapter 4.9).
As I’m also pretty new to Gemini, I’m sure I will take a look at more advanced features like the source control integration and the plugin model. Perhaps some custom reporting could integrate this tool better with the chosen methodology.
Follow up reading
Introduction
Part I
Part II
Part III
Part IV
Part V
Conclusion
This is the first post of a series in which I will describe .NET Stratego. This is my code name for a .NET Development Strategy for small to medium teams working on one or more projects simultaneously. You can find a lot of documentation on methodologies and technical topics, but the focus of this writing is the supporting process when developing in .NET. We’ll cover topics like tracking issues and bugs, having an automated build & deploy cycle, source control management, etc. The goal is to have a consistent approach using today’s available products and tools.
.NET is a very generic environment allowing you to solve one problem using various different solutions, which is both good and bad. Surely, .NET can be used to fit anyone’s needs in every project; the drawback is that it is hard to select the right solution for the given problem.
It is sometimes hard for a non-specialist to pick the right tool for the job. You can get the screw slammed into the wood with a hammer, though it is not as efficient as using screwdriver. Furthermore, you can use a flat screwdriver or a cross model, the latter will make the job even easier.
So, in this Development Strategy we try to draw the borders on how you can develop business oriented applications. We’ll cover the complete process from the first idea or word spoken about the new application to the rollout and use in production.
Reader's Pre-Requisites
The reader of this document should have knowledge on Microsoft .NET and experience in building business applications.
In this document we’ll refer to some tools and 3the party products. This document will briefly describe them, but further documentation should be found by the respective suppliers.
Approach
The picture below display’s the process which we will apply. Every box will be explained in a different post.
Basically the Analysis & PM phase defines how to gather the requirements and which tools we’ll use for it.
The plan & design phase describes in detail what we will build and how it will be build. This will form the basis for a detailed sizing.
The preparation of the development environment contains steps we need to take to setup and configure the tools we need to support the development
In the develop phase we’ll describe some guidelines like code and name standards. Additionally we will describe how to automate the build and deploy process.
The rollout phase consists of steps needed to get the application in production.
Follow up reading
Introduction
Part I
Part II
Part III
Part IV
Part V
Conclusion
I would like to welcome Jeroen Bynens and Bart ten Velde as new members of dotnet6.com.
Though Jeroen is quit new to the .Net scene, he is dedicated to his job. I had the opportunity to work with him on several occasions and his work is pretty amazing. He has an incredible sence of detail which makes his code very structured.
At the moment I'm working together with Bart on a project and I noticed his drive to knowledge sharing, hence the invitation for blogging on dotnet6.com which he gladly accepted.
welcome both, and enjoy your blog life @ dotnet6.com