Orlando Code Camp 2010 Thoughts and Comments

This past weekend I had the pleasure of attending the 5th annual Orlando 'Code Camp' seminar in Sanford, Florida. It was help at Sanford Community College, which if I must say has quite the impressive campus for only being a Community College. The facilities there were quite adequate and it was a beautiful Florida spring day, so all in all you couldn't do much better for the setting.

I have been a member of the Orlando .NET User Group (a.k.a. 'ONETUG') for a couple of years now, but this is the 1st event I have been able to participate in with the group. Unfortunately depending on where in Orlando an event takes place, I am anywhere from 45 to 90 minutes away, so getting to event during the week is difficult. However, this was held on a Saturday, so I was able to make it no problem. The event is organized by group leader Esteban Garcia, who I applaud for doing a great job.

The event consisted of 70+ sessions spread out by topic (.NET, Silverlight, Services, etc) that went from 8:30am to 4:30pm. Each session lasted 1 hour, with a 15 minute break in between. PERFECT! I like this format of 1 hour on the nose. To be honest, most the attendees have at least a little knowledge on each subject and attend sessions to be further informed or maybe pick up a few new ideas. At this time limit it is difficult to learn an entire topic, but when classes begin to go longer than 1 hour, I sometimes begin to look at the clock. And the extra 20 minute to .5 hour (say 90 minutes total instead as a comparison) are still not enough to learn an entire subject. Therefore I think an hour on the nose is perfect. I never felt like I was looking at the clock ready to move on to the next session.

I have had the privilege of going to some of the pricey training events like VSLive!, and I must say that Code Camp offered a day on par to that of a single day at VSLive!. Except you don't have to pay the $1900 per person like at VSLive! This is because Code Camp was FREE!! The presenters were area authors, consultants, Microsoft MVPs, and experienced professionals so the content was of quality like a VSLive! in my opinion. Topics ranged from "What's new in ASP.NET 4.0", "LINQ 4.0", "jQuery vs. AjaxControlToolkit" to "Silverlight Databinding and Validation" plus much, much more. To top it all off, a nice boxed lunch was included for FREE, and a slew of raffle items were given away as well. It is quite impressive that all of this could be done without charging for it. The sponsors helped with that and did a nice job.

By the end of the day everyone was waiting around to see who would win the 'Xbox 360", and to get to that you had to wait over an hour of announcements, sponsor speeches, and other raffles, so they also had this planned well to help get the sponsors some more exposure. I unfortunately didn’t win any prizes, but the overall day was a success.

If you live in Florida or another are that has a .NET user group, I highly recommend attending your local .NET user group sessions and Code Camp activities when you can. These are wonderful opportunities to help keep us current in this ever changing industry of software development.

For more information, check out the following link:

Orlando Code Camp

Domain Driven Design (DDD) Free Book Download

I have not yet ventured far into the world of Domain Driven Design, but if you are interested there is a book named, Domain Driven Design Quickly that is an overview of Eric Evans' DDD. It can be downloaded for free (after registration) from the following InfoQ link:
InfoQ: Domain Driven Design Quickly
From the above link: "This book is a short, quickly-readable summary and introduction to the fundamentals of DDD; it does not introduce any new concepts; it attempts to concisely summarize the essence of what DDD is, drawing mostly Eric Evans' book, as well other sources since published such as Jimmy Nilsson's Applying Domain Driven Design, and various DDD discussion forums"

How To: Create A Scrolling News / Information Marquee using JavaScript and Server Side Code

Have you ever wanted to add a continuous news scroller at the bottom of your web page, that was dynamically populated from database data at runtime? This will show you all of the pieces needed to create the scroller and update it server side in code behind. The main parts are the news scroller itself, built using JavaScript, and the content that populates the scroller which is done server side in VB.NET. I will say while this is not overly complex, it does have several parts and pieces that go together, so beginners may get a bit confused. If this is the case, just take your time and try this on a new blank page before attempting to inject this into existing logic. Also remember that all JavaScript is case sensitive, so be careful when making calls to the functions.

Let's get right into the code. I will give credit to dhtmlgoodies where I was able to get some of the initial concepts for scrolling. I have since greatly expanded on the basics by populating the contents server side, impoving the scrolling visually, and an AJAX asynchronous postback behind the scenes each time the scroller has moved across the page to get updated data. I will leave out the AJAX portion of this because it is an entire post in itself, and we will just get the server side populated scroller working 1st. To being we are going to create a placeholder 'DIV' tag on the page. The 'innerHTML' code will be created and set server side. This is just the container:

Notice above, the call to initialize the marquee. This is a call to a JavaScript method which will be explained a little later on. For now we need to make sure that call is made, so that the scrolling effect will begin when the page has completed loading. Within this call I sent it a page defined variable value, which is exposed server side. You might ask, why do it this way and not just declare inline document.getElementById...etc. Well I often use ASP.NET Master and Content pages, and the control naming structure for content pages is a bit more complex than calling a control directly. In this situation exposing the value server side is a much easier alternative to hardcoding its value. If you are using a traditional page, you can probably streamline this method and extract the control's ID directly.

Next, here is the .css class that was defined in the 'DIV' element above and the class defining the style of the text that will be inside of that DIV. You can modify this as needed, however the classes must exist as named or the JavaScript will not work properly.

        .ScrollingMarqueeStyle
        {
            padding-top:3px;
            height:25px;
            background-color: #000;  
            position:absolute;
            left:0px;
            z-index:1000;
            bottom:0px;  
            display:none;  
            width:100%;
            overflow:hidden;
            
            /*Border that hovers over the scrolling marquee*/
            border-top: solid 2px red;    
        }
        body > div.ScrollingMarqueeStyle
        { 
         /* Firefox */
            position:fixed;
        } 
        .ScrollingMarqueeStyle .MarqueeTextObj
        { 
         /* Text within marquee */
            position:absolute; 
            color: #FFF;
            font-weight:bold;
            white-space:nowrap;
            font-family: Trebuchet MS;
            font-size: 16px; /*This is the size of the scrolling text*/
        }
        /* Applies to custom classes used in <Span&rt; tags within the scrolling text */
        .DescriptionText
        {
            color:#66FF33;
        }

Now let's take a look at the JavaScript that works the magic behind the scrolling marquee. There are (5) functions: InitHorizontalScrollMarquee, MoveScrollingMarquee, PositionScrollingMarquee, Stop_MoveScrollingMarquee, and Resume_MoveScrollingMarquee. These can all be placed either within a tag in the head of the page, or within a .js file that is referenced by the page.

        // Higher = Faster, Lower = slower and more smoothly   (equates to pixels per move on the screen)
        var marqueeSteps = 1;
        // Lower value = Faster  (# equates to Milleseconds - ms between moves.  Watch out for CPU usage if too low)
        var marqueeSpeed = 25;
        // Make the marquee stop moving when user moves his mouse over it, set to 'true' to enable, 'false' to disable.
        var marqueeStopOnMouseOver = true;
        // "top" or "bottom" position set here
        var marqueePosition = 'bottom';

        /* Don't change anything below here */
        var marqueeObj;
        var marqueeTextObj;
        var marqueeTmpStep;
        var marqueeTextObjects = new Array();
        var marqueeHiddenSpans = new Array();
        var marqueeIndex = 0;

        var hScrollRefreshIntervalId;

        function PositionScrollingMarquee(e, timeout) {
            if (document.all) e = event;
            if (marqueePosition.toLowerCase() == 'top') {
                //Place the marquee at the top of the page
                marqueeObj.style.top = '0px';
            }
            else {
                //Place the arquee at the bottom of the page
                marqueeObj.style.bottom = '-1px';
            }
            if (document.all && !timeout) setTimeout('PositionScrollingMarquee(false,true)', 500)
        }


        function MoveScrollingMarquee() {

            //Get left-side position of the marquee
            var leftPos = marqueeTextObj.offsetLeft;

            //Subtract step count set at global level and kept track of in InitMarquee (Move DIV left)
            leftPos = leftPos - marqueeTmpStep;

            //Left position of DIV + [array value] + width of a single 'marqueeTextObj'
            var rightEdge = leftPos + marqueeHiddenSpans[marqueeIndex].offsetLeft + marqueeTextObj.offsetWidth;

            //If the right edge calculated above is less than 0, this means the ENTIRE marquee is off
            //the left side of the page.  At this point reset the scrolling marquee to the right side of the page to re-scroll.
            if (rightEdge < 0) {


                //Reset the marquee to be just off the right side of the page which is done
                //by making its left position the width of the page
                leftPos = document.documentElement.offsetWidth;
                marqueeTextObj.style.left = leftPos + 'px';

                //Set marquee properties
                marqueeTextObj.style.display = 'none';

                marqueeIndex++;
                if (marqueeIndex >= marqueeTextObjects.length) marqueeIndex = 0;
                marqueeObj = marqueeTextObjects[marqueeIndex];

                marqueeTextObj.style.display = 'block';

            }

            //Move the DIV to the left position calculated above.  This is where the 'magic' happens
            //and the 'scrolling' occurs.
            marqueeTextObj.style.left = leftPos + 'px';

        }

        function Stop_MoveScrollingMarquee() {
            if (marqueeStopOnMouseOver) marqueeTmpStep = 0;
        }


        function Resume_MoveScrollingMarquee() {
            marqueeTmpStep = marqueeSteps;
        }

        function InitHorizontalScrollMarquee(MarqueeDivControlID) {

            //Get the marquee object properties using the ID passed in from the calling code:
            marqueeObj = document.getElementById(MarqueeDivControlID);


            var spans = marqueeObj.getElementsByTagName('DIV');
            for (var no = 0; no < spans.length; no++) {

                //Find the 'MarqueeTextObj' class and set its properties
                if (spans[no].className == 'MarqueeTextObj') {
                    marqueeTextObj = spans[no];
                    spans[no].style.display = 'block';

                    marqueeTextObjects.push(spans[no]);
                    var hiddenSpan = document.createElement('SPAN');
                    hiddenSpan.innerHTML = ' '
                    spans[no].appendChild(hiddenSpan);
                    marqueeHiddenSpans.push(hiddenSpan);
                }
            }
            if (marqueePosition.toLowerCase() == 'top') {
                marqueeObj.style.top = '0px';
            }
            else {
                if (document.all) {
                    marqueeObj.style.bottom = '0px';
                }
                else {
                    marqueeObj.style.bottom = '-1px';
                }
            }

            //Set the left position of the marquee = to the width of the page which essentially places 
            //its leftmost part at the right end of the page.
            marqueeTextObj.style.left = document.documentElement.offsetWidth + 'px';

            //Define the mouse events; these are wired up to the varibale named 'marqueeStopOnMouseOver' which is false by default.
            marqueeObj.onmouseover = Stop_MoveScrollingMarquee;
            marqueeObj.onmouseout = Resume_MoveScrollingMarquee;
            if (document.all) window.onscroll = PositionScrollingMarquee; else marqueeObj.style.position = 'fixed';

            marqueeObj.style.display = 'block';
            marqueeTmpStep = marqueeSteps;

            //setInterval() returns an interval ID, which later can be passed to clearInterval(): to stop repeat calls if desired;
            hScrollRefreshIntervalId = setInterval('MoveScrollingMarquee()', marqueeSpeed);

        }

I will touch briefly on the JS code, but I tried to comment up the code well so you can read the documentation within. Basically, 'InitHorizontalScrollMarquee' is called, and finds the DIV we created server side with the class named 'MarqueeTextObj' to set its properties. Look closely at the JS variables defined prior to all of the functions. These dictate a lot of the behavior attributes like position (top or bottom), speed, and the ability to pause scrolling when hovering over with the mouse. Lastly, the 'setInterval' JS function (basically a timer) is wired up to call the 'MoveScrollingMarquee' method on interval. This method when called in turn moves the entire 'DIV' with text to the left by the step amount specified. The end result is a scrolling marquee!

Now, let’s move onto the code behind that will actually populate the marquee. Now the code I will provide simply creates a DataTable and populates it with City names and their respective temperatures. This entry is not going to dive into how to call a database and build up a custom object, list of objects ADO.NET type, entity, etc.; I assume most already know how to do this. So for my example I am going to build up some static data, but certainly you would extract this data dynamically from the database and iterate through it as I do to build out the 'InnerHTML' that will be set on our server side 'DIV' control we added to the page earlier.

This code example also does everything directly behind the page which is also not a great practice and does not follow any n-layer or design pattern guidelines. This code would need to be farmed out to its respective spots within the application, but again that is not the purpose of this entry. So below is the code needed to build the elements that go into the scrolling marquee:

Imports System.IO

Partial Public Class WebForm1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        'This is where you would make calls to get a business object, list of objects, DataTable, DataSet, etc.
        'Since that is not the purpose of this entry, I will just manually build out a DataTable with (2)
        'columns:  City and Temperature (of coarse it could be anything, and formatted however needed)
        Dim dt As New DataTable()
        dt.Columns.Add("City")
        dt.Columns.Add("Temperature")

        'Now add some dummy values
        Dim dr As DataRow
        dr = dt.NewRow()
        dr("City") = "New York"
        dr("Temperature") = "50"
        dt.Rows.Add(dr)
        dr = dt.NewRow()
        dr("City") = "Miami"
        dr("Temperature") = "75"
        dt.Rows.Add(dr)
        dr = dt.NewRow()
        dr("City") = "San Diego"
        dr("Temperature") = "60"
        dt.Rows.Add(dr)
        dr = dt.NewRow()
        dr("City") = "Chicago"
        dr("Temperature") = "45"
        dt.Rows.Add(dr)

        'Call a local method that will build up the HTML to be assigned to our server sode DIV control named 'ScrollingMarquee':
        BuildScrollingMarquee(dt)

    End Sub

    Private Sub BuildScrollingMarquee(ByVal MarqueeValues As DataTable)

        Dim sb As New StringBuilder

        'Begin the HTML formatting by starting the DIV tag; the class name must be 'MarqueeTextObj' so it is recognized by JS
        sb.Append("
")

        'Loop through each datarow in the DataTable passed in, and extract and append the data to the StringBuilder.
        'The format for the HTML should be City: [CityName] - Temperature: [Temperature Value]...
        For Each dr As DataRow In MarqueeValues.Rows
            'Add the string to the StringBuilder with HTML tags
            sb.Append("City: " & dr("City").ToString() & " - Temperature: " & dr("Temperature").ToString() & "; ")
        Next

        sb.Append("
")

        '*****Populate the scrolling marquee at the bottom of the page with data in the StrignBuilder formatted above*****
        'Set the 'InnerHTML' of the server 'DIV' control
        Me.ScrollingMarquee.InnerHtml = sb.ToString.Trim()

    End Sub

    Protected ReadOnly Property ScrollingMarqueeDivControlID() As String
        'This returns the ControlID of the DIV containing the Horizontal scrolling marquee content.
        'It will be exposed as a JS varibale in the source behind the page to be used within JavaScript.
        Get
            Me.EnsureChildControls()
            Return Me.ScrollingMarquee.ClientID
        End Get
    End Property

End Class

The code behind shows that in Page_Load() we build up a DataTable with some data to be placed into the marquee. We then pass that DataTable to a local method that uses a StringBuilder to create properly formatted HTML. The 'BuildScrollingMarquee' method iterates through each DataRow in the passed in DataTable and uses its values to place into the StringBuilder. This is a spot where you can modify formatting, values, colors, you name it, to make the marquee text formatted as you wish. This in conjunction with the .css styles are the (2) main spots that will dictate styles and formatting if you need to make adjustments. Below is a picture of how the marquee looked as I formatted it:
So that's it! You now see how to combine JavaScript code with .NET code to dynamically populate and present a nice horizontal scrolling marquee. One last quick word - before posting back that something isn't working or there are issues, try running this code exactly as is in a new ASP.NET web form before modifying. This code has been tested and works, so take it a step at a time to get this code working before moving forward. As you being to become familiar with the code you can see where the many enhancements could be made to how the data is pulled, when, on what interval, styles, formatting, etc. This code hopefully gets you started with what you need by showing you the framework to dynamically populating a scrolling marquee.

Dealing With The 'Unrecognized Element 'extendedProtectionPolicy'' Exception

Recently I began using Windows 7 Ultimate in addition to VS.NET 2008. I had to refresh a reference to an existing WCF service which did just fine. However, upon deploying the application back out to the production Windows Server 2003 server, I began to see the following exception being thrown:

"Unrecognized element 'extendedProtectionPolicy' "

I actually could have seen this listed as a 'Warning' prior to compile with the following message as well:

"The element 'transport' cannot contain child element 'extendedProtectionPolicy' because the parent element's content model is empty."

This is all in reference to the following configuration element that appeared in my client's .config file in regards to the WCF service being consumed:

Regardless of where the issue is noticed, it appears this is caused by the usage of multiple platforms. It appears that the configuration is only created when consuming the service on my Windows 7 development box, but then not recognized by other platforms such as Windows Server 2003. The 'ExtendedProtection' configuration as I understand is to help prevent attacks during the credential challange process. However due to its staged rolluot, it is not fully supported and hence the above errors are generated.

The fix? Simple for the time being. Just remove the tag and redeploy the configuration. Depending on the configuration, it may be embedded between a set of "Transport" tags. If this is the case remove the inner "extendedProtectionPolicy" tag, and shorthand the end of the transport tag "/>"