Phil Bernie Consulting

Well it seems Iron Speed are at it again with their ridiculous licensing policies. I received an email from Iron Speed which contained the following information:

Beginning with our upcoming Version 6.1, Iron Speed Designer can be installed only on one machine at a time. Simply uninstall Designer to move to a different machine. As with earlier releases, your software license permits one named user to run on one machine.

For years, power users have purchased extra licenses so they can run on multiple machines. If you’d like to use the product this way, we are pleased to offer a special one-time 30% discount on additional licenses for yourself or other currently licensed developers on your team. Please contact your sales representative to assist you with a purchase or email sales@ironspeed.com.

This offer expires on April 23, 2009 and will not be repeated.

There are 2 things that annoy me with this “incredible offer”. First is that they’re actually making it harder for you to run multiple instances of the designer. From what I’m reading, you can no longer activate and deactivate instances, you actually need to uninstall your copy of Iron Speed to transfer it between machines.

Second, they are giving you the opportunity to buy more licenses so you can run the software you already own on more than one machine. It’s completely absurd. If you do any sort of consulting work, there’s no doubt you’ll have multiple machines. I personally have 2 laptops and a desktop. At any given time, depending on the job I’m doing, I could be on any one of the three computers. It’s just not viable to have 3 licenses of a single product to use on those machines. Throw in the fact that I can’t even run Iron Speed from within a virtual machine and you suddenly question whether Iron Speed have any idea what they’re doing when it comes to licensing and marketing.

Iron Speed have a decent product, but the ridiculous nature of their licensing continues to annoy me so much that I will refuse to purchase from them.

Well Iron Speed launched their latest version of their Iron Speed Designer 5.1 and I thought I’d comment on two of the new features that they included, but weren’t necessarily covered in too much detail in the release notes.

1. You can now launch visual studio 2008 by clicking Ctrl + Shift + V and it will open the page you are currently working on in Visual Studio 2005 or 2008. This is an absolutely brilliant feature and I’ve already used it a bunch of times in the 2 hours since I installed 5.1
   
2. Iron Speed has been able to detect changes to the .html files for a while now, but it always baffled me as to why it couldn’t detect changes to the corresponding .vb/.cs files.
   
   
   
   They’ve now included the ability to detect changes to the codefile you are working on and optionally select to reload it in Iron Speed. I can’t remember how many times I’ve blown away changes because I forgot to refresh the code file.

I’ve been using Iron Speed since version 4 and I’m glad to see that they are continually developing their product and putting those nice finishing touches on to help make the users life easier.

The full feature list is available from their website.

Iron Speed has the ability to add Infragistics tab controls as a code customization to your web application. The problem with the default implementation is that it uses the URL property to specify the content for the tab. This is ok if you want to display static content within your tabs, but makes it hard to interact with the content within the tabs.

An alternate method to using the URL property of the tabs is to define <ContentTemplate> within the tabs and place user controls within the content templates. The advanelemente of this is that the usercontrols are rendered to the page which means you are able to interact with them.

The aim of this tutorial will be to add an Infragistics tab control to an Iron Speed page and place user controls within those tabs rather than using the Target URL property.

The first thing to understand about the Infragistics tab control is the tab control hierarchy. I spent a bit of time in the documentation and the examples there are really quite poor at explaining how you can add controls to infragistics tabs.

At the top of the hierarchy, is the <igtab:UltraWebTab> element which declares the Tab control on the ASPX page.

Next element is the styling elements which define what each of the tab states will look like. These are:

<DisabledTabStyle />
<DefaultTabStyle />
<HoverTabStyle />
<SelectedTabStyle />
<DefaultTabSeparatorStyle />

I won’t explain too much what these do now, however later on I will define some styles for my tab controls.

The next element in the hierarchy is the <Tabs> element. This element is the key to the Tab control as it is where you define your tabs and tab layouts.

Under the <Tabs> element you have a child element called <igtab:tab> which has another child element called <ContentTemplate> This is where you define your user controls, or any other html you want to appear in the tab.

Let’s take a look at a defining a basic set of tabs within an Tab control.

<igtab: ultrawebtab id=”MyWebTab” runat=”server” SelectedTab=”1″>
<Tabs>
<igtab:tab text=”Employee Details”>
<ContentTemplate>
<h2> Employee Details </h2>
</ContentTemplate>
</igtab:tab>
<igtab:tab text=”Address Details”>
<ContentTemplate>
<h2> Address Details </h2>
</ContentTemplate>
</igtab:tab>
</tabs>
</igtab:ultrawebtab>

This simple code will define a very simple tab control with 2 tabs. As you can see, the tabs are defined under the <Tab> element using the <igtab:tab> element. Within each <igtab:tab> element there is a content template element which has some basic HTML within it.

Now that you have some basic tabs defined, you can place whatever you like into the <ContentTemplate> element including Iron Speed record and table controls. All you need to do is drag a code driven tab control onto the page from the toolbar as shown below

and then modify the html. all you need to do is copy your table control HTML into the <ContentTemplate> of the tab and it will render perfectly in your web browser. Here’s an example from an application I have been working on recently:

<igtab: ultrawebtab id=”MyWebTab” runat=”server” SelectedTab=”1″>
<Tabs>
<igtab:tab text=”Employee Details”>
<ContentTemplate>
<h2>Employer Details</h2>
<div class=”wizardTable”>
<GEN:RECORD NAME=”EmployerRecordControl”>
<!– Begin Record Panel.html –>
REST OF DESIGNER GENERATED CODE GOES HERE
<!—End Record Panel.html–>
</GEN:RECORD>
</div>
</ContentTemplate>
</igtab:tab>
</tabs>
</igtab:ultrawebtab>

Also, it’s really easy to work with these controls all on the same page because Iron Speed doesn’t render them in tabs, but just renders the HTML output. In the image below, I’ve actually got 2 controls defined in two tab controls but only the HTML is rendered so you can work with the controls really easily

The best part is that because your controls are all defined on the same page, the save button has access to all the controls within the tab so when you hit the save button all your controls defined in the tabs will also be saved.

Here’s some screen shots of what the tabs look like within my application:

The first tab in my application

The second tab in application.

So as you can see it’s really easy to use Iron Speed controls and nest them within Infragistics tabs.

Iron Speed Designer is a great tool for rapid application development, however the web interfaces it builds can be a little cumbersome at times. Recently I decided to see if I could implement blowery compression to see if I could improve performance. Below is a guide to outline the steps I took to enable blowery for an Iron Speed application.

Setting Up Blowery

Blowery setup was pretty easy. All I had to do was download the binaries, extract them and copy the following dll’s over to my applications bin folder:

blowery.Web.HttpCompress.dll
ICSharpCode.SharpZipLib.dll

Once I’d copied these files over to my bin directory I modified my web.config file to include the following sections:

In the Configuration section, I added the following configSection:

<sectionGroup name="blowery.web">
      <section name="httpCompress" type="blowery.Web.HttpCompress.SectionHandler, blowery.Web.HttpCompress"/>
</sectionGroup>

And in then added the following section directly under my appSettings as per the installation instructions

<blowery.web>
    <httpCompress preferredAlgorithm="gzip" compressionLevel="high">
      <excludedMimeTypes>
        <add type="image/jpeg"/>
        <add type="image/gif"/>
      </excludedMimeTypes>
      <excludedPaths>
        <add path="NoCompress.aspx"/>
      </excludedPaths>
    </httpCompress>
  </blowery.web>

I also added this to the HttpHandlers section:

<add verb="GET" path="ScriptResource.axd" type="Microsoft.Web.Handlers.ScriptResourceHandler" validate="false"/>

And finally added the following to my HttpModules section:

<add name="CompressionModule" type="blowery.Web.HttpCompress.HttpModule, blowery.web.HttpCompress"/>

Small bug with scriptresource.axd

Once I had installed the compression module, I was getting some javascript errors which were related to ScriptResource.axd. To fix this I added it to the excludedPaths section the blowery.web config section

<<blowery.web>
    <httpCompress preferredAlgorithm="gzip" compressionLevel="high">
      <excludedMimeTypes>
        <add type="image/jpeg"/>
       <add type="image/gif"/>
      </excludedMimeTypes>
      <excludedPaths>
        <add path="NoCompress.aspx"/>
        <add path="ScriptResource.axd"/><!--just to be sure-->      </excludedPaths>
    </httpCompress>
  </blowery.web>

Once I’d completed that, I saved the config file and blowery compression was enabled for my Iron Speed application.

This article will show you how to use the ModalPopupExtender from the AjaxControlToolKit in conjunction with an Iron Speed Designer generated application to insert a new record into a ShowTablePage using a Modal Popup Window. I’m going to assume that you are pretty familiar with Iron Speed and have already generated an application. What I will now do is extend a standard “ShowTablePage” to allow you to add records to the table by using a modal popup window.

Setup

Before we begin, you need to have a few things setup on your machine. I’ll assume you have Visual Studio already installed and that you also have the AjaxControlToolKit installed. If you don’t have these installed, then you will need to set them up before proceeding. Once you have these installed, you need to take the following steps:

1. Open your Iron Speed application up in Visual Studio. You can do this by going to File -> Open -> Web Site which will bring up the “Open Website” dialog
   
   
   
2. In the “Open Website” dialog, select your Local IIS and choose your website that Iron Speed Designer would have already created for you. Your Iron Speed project will not be opened in Visual Studio
   
   
   
3. In the Solution Explorer, right click on the “Bin” folder and add the following references:
   
   
   
   1. In the .Net tab select “System.Web.Extensions”
      
      
      
   2. Then in the “Browse” tab navigate to the directory where you installed the AjaxControlToolKit. Then go to the “SampleWebSite\Bin” directory and select the AjaxControlToolKit.dll and add it as a reference also.
      
      
      

Rebuild your solution from within Visual Studio and you are now ready to start using the AjaxControlToolKit with your Iron Speed application.

Setting Up The ModalPopupExtender

Now that your application is setup, you need to setup your page for use with the ModalPopupExtender. For this demo, I’ll be setting up my “ShowTaskTablePage” with the ModalPopupExtender functionality.

1. First you need to register the AjaxControlToolkit assembly on the page using the Register Page Directive. To do this open up the ShowTaskTablePage.html file in Visual Studio and insert the following code at the very top of the page:
   
   <%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″ %>
   
2. Next you need to add your ModalPopupExtender underneath your generated table control on the page. You can either drag one onto the page from the toolbox or add one using the following code:
   
   <cc1:ModalPopupExtender ID=”ModalPopup” runat=”server”
   TargetControlID=”hiddenButton”
   BackgroundCssClass=”modalBackground”
   PopupControlID=”panel1″
   DropShadow=”true”
   OkControlID=”btnSavePopup”
   OnOkScript=”onOk()”
   CancelControlID=”btnCancelPopup”
   BehaviorID=”ModalPopup”>
   </cc1:ModalPopupExtender>
   
   At this stage, the ModalPopup has a number of properties that have values but need controls to be setup for them otherwise the modal popup won’t work.
   
3. The first property we’ll set up on the ModalPopup is the PopupControlID. This property defines the control that will be displayed inside the ModalPopupExtender once we show it on the page. I’ve assigned a value to it called “panel1″ which is a panel that will house an “Add Record Control” that is generated by Iron Speed Designer.
   
   I’ll add the panel below the ModalPopupExtender using the following code:
   
   <asp:Panel ID=”panel1″ CssClass=”modalPopup” runat=”server”>
   </panel>
   
4. Now I need to open up Iron Speed Designer and insert the “Add Record Control” onto the Show Table page. I simply added a new “Add Record” control to my page and configured it to use my Task table that I defined in the database.
   
   
   
   
   
   The final customization I made was to remove the Save and Cancel buttons from the control
   
   
   
   And now my control has been added to the page in the Iron Speed Designer under my Table Control
   
   
   
5. Now I want to move the Add Record control to be inside the panel that I created earlier so that when the modal popup is activated it will show up inside the panel. To do this I switch to HTML view in Iron Speed, cut all the generated control text and move paste it into the page so it is nested within the panel control tags I created earlier. Your code should look something like this:
   
   <asp:Panel ID=”panel1″ CssClass=”modalPopup” runat=”server”>
   <GEN:Insert TYPE=”Panel” />
   <!– the rest of your panel code goes here –>
   </GEN:RECORD>
   </asp:Panel>
   
6. Now when we created the control we chose to create it without buttons. You now need to add those in manually via visual studio. You will need to add two buttons to your panel, one for the “OkControlID” property and one for the “CancelControlID” property on the ModalPopupExtender. You need to make sure that you add your buttons inside the panel that we created earlier. I added mine below the Add Record control like so:
   
   </GEN:RECORD>
   <asp:Button runat=”server” ID=”btnCancelPopup” text=”Cancel” CausesValidation=”false”/>
   <asp:Button runat=”server” ID=”btnSavePopup” text=”Save” CausesValidation=”false”/>
   </asp:Panel>
   
   These controls need to go inside the panel because they will be visible when the ModalPopup is shown and will be used to control the actions of the popup.
   
7. One annoying thing about the ModalPopupExtender is that it requires an ASP.NET control to be assigned to the TargetControlID. So what I’m going to do is assign a hidden button to the TargetControlID. This button will never get used because I’m going to manually show the ModalPopup using a javascript function assigned to the “New” button on the table control. So under the panel insert the following code to add a hidden button and then hide it inside a div so it still gets rendered to the page, you just never have to see it:
   
   <div style=”display:none; visibility:hidden;”>
   <asp:Button runat=”server” ID=”hiddenButton” CausesValidation=false />
   </div>
   
8. The ModalPopup has the ability to run some JavaScript when the Ok event is fired from within the ModalPopup. This Ok script should be defined on the page and should correspond the value set for the “OnOkScript” property. I’ve simply created a script that returns true, but you can put any valid javascript you like in there. I’ve added my script just below the body tag in the html page.
   
   <script type=”text/javascript”>
   function onOk()
   {
   return true;
   }
   </script>
   
9. The last little thing you might want to do is to add some styles to your Styles.css stylesheet in the styles folder. I added the following styles to mine:
   
   .modalBackground {
       background-color:Gray;
       filter:alpha(opacity=70);
       opacity:0.7;
   }
   
   .modalPopup {
       background-color:#ffffdd;
       border-width:1px;
       border-style:solid;
       border-color:Silver;
       padding:3px;
       width:500px;
   }
   
   This is the final stage in the setup and we are now ready to use the ModalPopupExtender.

Using the ModalPopupExtender

Using the ModalPopupExtender is pretty easy once you know how. We want to use this particular ModalPopupExtender to show when the “New” button is clicked on the table control. To make this happen we need to do the following steps.

1. We need to write a little javascript function that will show the ModalPopupExtender. You can see this script below:
   
   function ShowModal()
   {
   $find(“ModalPopup”).show();
   }
   
   As you can see this script is fairly self explanatory, it finds the instance of the modal popup extender we want to show and calls the “show()” method.
   
2. Once we have created our Javascript function we need to setup our table button to call this function when it is clicked. This is easily done in the Iron Speed Designer by right clicking on the button and selecting “Properties”
   
   
   
   Then in the Properties dialog select the Attributes tab and add a new Attribute Called Button-OnClientClick and enter the value to be “ShowModal();return false;”
   
   
   
   The reason we add the “return false;” is that we no longer want the page to post back and do whatever function it previously did. Setting return false; stops the button from performing a postback action to the server.
   
3. Once you have done that, you are ready to view the ModalPopup in action. Build your application and click the New button to test it out.
   
   
   

This is pretty cool, but we want to be able to save the data we capture in the control back to the database. Lets look at some code for adding the data to the database.

Adding Data To the Database from the ModalPopupExtender

Ok we’re on the home stretch now and thanks to the power of the AjaxControlToolkit and the Iron Speed generated code, this final step can be achieved in just a few lines.

1. First we need to add a bit of extra javascript to our onOk() function. As you saw earlier, we were just returning true, however now we want to simulate a postback from the webpage so we can save the data in the Add Record control in the ModalPopupExtender. To do this, we have to find the btnSavePostBack button and force a postback in Javascript because the modal popup extender blocks it by default. Here’s the code to make it happen:
   
   function onOk()
   {
   var btn = $get(‘btnSavePopup’);
   if(btn)
       {
        __doPostBack(‘btnSavePopup’,”);
       }
   return true;
   }
   
   
2. Now that we have setup the code to postback to the server, we need to create an event handler in the codebehind that will save the data in the Add Record control and refresh the Table Control.
   
   Protected Sub btnSavePopup_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSavePopup.Click
   ‘Save Record To the Database
   Try
   Utils.DbUtils.StartTransaction()
   Me.TaskRecordControl.SaveData()
   Utils.DbUtils.CommitTransaction()
   Catch ex As Exception
   Utils.DbUtils.RollBackTransaction()
   Finally
   Utils.DbUtils.EndTransaction()
   End Try
   
   ‘Reload data in the table control and rebind it
   Me.TaskTableControl.LoadData()
   Me.TaskTableControl.DataBind()
   End Sub
   
   As you can see, this is just standard vb.net code for saving and rebinding the controls.
   
3. Now this final step is where the magic happens. Ironspeed renders it’s table controls in updatepanels so you get “SmoothPanelUJpdates”. What we’re going to do here is add a trigger to the TablControlUpdatePanel that is wrapped around the TableControl which will force the table to update when the save button is clicked on the ModalPopupExtender. All you need to do is add the following code into the LoadData() method at the top of the codebehind:
   
   Public Sub LoadData()
   ‘ LoadData reads database data and assigns it to UI controls.
   ‘ Customize by adding code before or after the call to LoadData_Base()
   ‘ or replace the call to LoadData_Base().
   Dim trigger As New AsyncPostBackTrigger()
   trigger.ControlID = “btnSavePopup”
   Me.TaskTableControlUpdatePanel.Triggers.Add(trigger)
   LoadData_Base()
   End Sub
   
   

And that’s it, we’re done! Here’s some screen shots of the modal popup extender in action


No Tasks are in the List


I added some data and now we’re ready to save it


Click the save button and the table is updated without posting back to the server!

Today I had a really annoying problem with Iron Speed Designer. I was getting an error after building my application that simply said “Object reference not set to an instance of an object”.

I searched the forums for ages looking for the solution, but came up empty handed. After nearly going bezerk looking for the error in my application, I realised that last night I had deleted a table from the database and subsequently from my application, however I noticed today that the ASPX files and associated folder were still there. I also noticed that in the App_code folder there were still references to this old table.

I went through and cleaned out all the references to the table in the following locations:

Presentation Layer

App_Code Folder

App_Code\Business Layer folder

App_Code\Data Access Layer folder

After that I was able to recompile successfully.

Iron Speed Designer is a great tool for generating all sorts of application code, however there are some times you need to write and execute your own stored procedures. I had that very problem today when I needed to execute an update stored procedure from within my code.

Unfortunately, Iron Speed doesn’t use the Microsoft enterprise library, however there’s no reason you can’t just use the standard ADO.NET methods.

Here’s the code I placed in the click event of my button to execute my custom stored procedure in the database.

Dim conn As New SqlClient.SqlConnection(ConfigurationManager.AppSettings(“DatabaseQSDU1″))
Dim procName As String = “usp_my_proc“
Dim cmd As New SqlClient.SqlCommand(procName, conn)

cmd.Connection.Open()
cmd.CommandType = CommandType.StoredProcedure
cmd.ExecuteNonQuery()
cmd.Connection.Close()

 

As you can see it’s pretty straight forward. The only thing I did have a small problem with was that Iron Speed puts a “Provider=SQLOLEDB” in the connection string by default. I had to remove that to make the connection string compatible with the format the SqlConnection was expecting.