I sometimes describe dynamic web applications (PHP or ASP.NET) as 1 ½ tier applications.

Really all the application logic runs on one server (sometimes the database lives on a separate server with some logic in Stored Procedures) and the browser is the “client”. But in those applications the “client” is really not a client in the client server sense. It’s the TERMINAL.

The more we federate logic in our web applications to the user’s machine (inside or outside of the browser) the more we take load responsibility away from our server infrastructure.

I think NODE.js is a great potential alternative for the server side piece of a real web based client / server scenario.

However, in searching the web you find lots of posts about how to install NODE.js that are pretty intimidating.

I found it very easy to set up on Ubuntu so I thought I’d share the steps in case anyone would find them useful.

You can do the install on Ubuntu 11.10 using the Synaptic Package Manager.

On the Ubuntu Unity tool bar, click on the “Dash home” icon at the top of the bar.

Start typing “Synaptic” to search for the package manager and when it appears, click to fire up the Synaptic Package Manager.

In the Synaptic Package Manager enter node.js into the package search box.

As you see above, select NODE.js (I also selected the developer and debug packages) and then click on the “Apply” button.

When you’re done the Package Manager Dialog should look something like the one above.

Then open up text editor (in the image below, I’m using Geany)

Enter just the seven lines of code shown above which will serve as a test to confirm that NODE.js is installed correctly.

---

var http = require('http');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('NOTICE : Node.js is Running !!!\n');
}).listen(8100, "127.0.0.1");

console.log('Server running at http://127.0.0.1:8100/');

---

Now save the file where you want to execute it from.

I saved mine in the default directory for web content (/var/www/hello_node.js)

Once you have saved the file, open up a terminal window and go to the directory where you saved the file.

(Type “cd /var/www” and hit return.)

Then list the directory to make sure you newly created file is there.

(Type “ls” and then hit return.

Assuming all has gone well up to this point, type in the following command and hit return.

“node hello_node.js”

You should see the “Server Running” console trace message from our hello_node.js file as you see in the screenshot below.

Now open your browser (GetfireFox.com) and navigate to http://localhost:8100

8100 is the port we told our little app to listen on.

And there you go. We’re ready to start digging in to NODE.js

I’ll try to add instructions for Mac and Windows in the near future.

---

Web Standards based app building means more logic in our client side code (HTML and JavaScript).

When you’re moving from a language like C++, Java or C# that means adapting to find alternatives to language constructs in those languages.

So, this will be the first in an ongoing series on constructs in JavaScript.

I’m building a workout timer application and I’m doing in the 3 stages.

1. A standard, connected, web page with all logic on the client but no “new wave” features.
2. An enhanced version with Off Line, Local Storage, and other HTML5 goodness.
3. An enhanced experienced for “when connected” times.

I’ve been writing C# for more than a decade and, though I’m happy with other server-side dialects, I do love C#.

One of the constructs that I ran in to is Enumerated Types.

There is no actual ENUM type in JavaScript but there are was that we can get close.

One this to note is that we don’t get all the benefits that we get using the ENUM type in Java or C#. We don’t get type safety, for example.

We can fake enums in a few ways. First we can declare a pseudo-enum as a collection of dictionary pairs and then access the entries using a convenient dot syntax.

Like this – variable.entry

---

var Mode = { "NONE": 0,
             "PAUSED": 1,
             "WORK": 2,
             "REST": 3,
             "HIGH": 4,
             "LOW": 5,
             "LOW": 6 };

var TimerState = Mode.NONE;

---

We can also make our pseudo-enum immutable by freezing the object when the number of options for the emun will or should never be changed.

---

var DaysOfTheWeek = { "Sunday":1,
                      "Monday":2,
                      "Tuesday":3,
                      "Wednesday":4,
                      "Thursday":5,
                      "Friday":6,
                      "Saturday":7
                    }
Object.freeze(DaysOfTheWeek);

---

The Object.Freeze method was added to JavaScript in version 1.8.5 ( Read HERE )

Since JavaScript is loosely types, we could even make our pseudo-enum a collection of Object like this.

---

var SIZE = {
  SMALL : {value: 0, name: "Small", code: "S"},
  MEDIUM: {value: 1, name: "Medium", code: "M"},
  LARGE : {value: 2, name: "Large", code: "L"}
};

---

Since we don’t get type safety I could still assign any value that I wanted to a variable that I indent to contain only one of the enumerated values.

Example:

---

var DaysOfTheWeek = { "Sunday":1,
                      "Monday":2,
                      "Tuesday":3,
                      "Wednesday":4,
                      "Thursday":5,
                      "Friday":6,
                      "Saturday":7
 }

 var myDay = DaysOfTheWeek.Friday;

 myDay = 99;

 myDay = "JunkData";

---

None of these would cause a run-time error but the last 2 would break the semantic intent of the myDay variable.

We just need to write GOOD code.

I still find great value in using these pseudo-enums. In my particular application I’m writing some pretty complex JavaScript code to implement an interval time with various states. The use of this technique not only make the code easier to understand but most JavaScript aware editors that support auto-suggest will reflect on the pseudo-enum and provide assistance when using them.

---

Choosing an editor or IDE for development is a personal thing, like choosing a car. What is a perfect ride for one person offers no interest at all to another. Personally, I was never happy with only one car and usually want different ones in the garage so that I can choose the one that most closely matches my mood or the kind of driving that I need to do.

Some folks like the help and tooling of a fully integrated environment like Visual Studio. Others like the hardcore elitism of EMACS or Vi. I’m a pragmatist, I like tools that just help me get the job done.

For right now I’ll focus on tools for the client side of web development. Here’s what I’ve chosen. All of these tools are free. There is one commercial application that I’ll add at the end because I think it’s worth the money.

• jEdit
• Blue Griffon
• CSSEd
• Aptana Studio 3
• Firefox w/Firebug

jEdit is a good general programmer’s editor with syntax highlighting support and, though it’s feature rich, it doesn’t get in your way while you’re writing code.

jEdit is written in Java and so it runs on Linux. Mac and Windows. I especially like the rich plug-in repository where i can get and add all kinds of specific features that I’m interested in.

You can install jEdit via the Ubuntu Software Center.

And you can get plug-ins here – http://plugins.jedit.org/

Though jEdit is a great general purpose programmer’s editor, I tend to like something with HTML specific features when doing HTML work.

Though there are many HTML editors available for Linux and most of them are free, most of them lack any specific support for HTML5.

Read the rest of this entry »

I sometimes hear people rant about JavaScript and how it’s not a modern language with modern constructs. When comes to Object Orientation, you can write Object “Oriented” code in any language. We wrote Objected Oriented code in straight “C” 20 years ago. Though the language didn’t natively support advanced OO constructs.

JavaScript a script programming language with its own idea about Object Orientation.

While JavaScript’s current implementation does not support function overloading, we can simulate it using the loose type system included in JavaScript.

We can create a single function definition and then branch base don the different calling signatures of the function.

Here is a complete sample page that implements a JavaScript function that is “pseudo overloaded” with five different calling signatures.

---

<!DOCTYPE html>
<html>
  <head>
    <script language="JavaScript">
    function DoProcess(opmode, clock, args) {
       //------------------------------------------------------------------+
       // 1.) We can simulate function overloading by selectivly passing   |
       //     or not passing parameters.                                   |
       //------------------------------------------------------------------+
       //     Since JavaScript is "loosly" typed, function parameters are  |
       //     optional. An parameter that is specified by not recieved     |
       //     will be undefined. (myArgumant == null).                     |
       //------------------------------------------------------------------+
       if(opmode == null) {
         alert("NO OPMODE Recieved");
       }

       //------------------------------------------------------------------+
       // 2.)  We can simulate function overloading by selectivly passing  |
       //      DIFFERENT TYPES in the same parameter position.             |
       //------------------------------------------------------------------+
       //      AT this point we know we recieved SOME argument in the      |
       //      first position. We can test the TYPE and execute differnt   |
       //      code depending on what TYPE of parameter we recieved.       |
       //------------------------------------------------------------------+
       else if (typeof opmode == "number" ) {
          alert("Revieved NUMERIC opmode, value : " + opmode);
          }
       else if (typeof opmode == "string" ) {
          alert("Recieved a STRING opmode, value : " + opmode);
       }  

       //------------------------------------------------------------------+
       // 3.) We can simulate function overloading by passing a variable   |
       //     NUMBER of arguments.                                         |
       //------------------------------------------------------------------+
       //     In our function definition we can define as many function    |
       //     parameters as we like and then when callign our function we  |
       //     can choose to pass none, some, or all of them. Parameters    |
       //     that are not passed in teh function call will evaluate       |
       //     inside the function as undefined and we can decide what code |
       //     to execute based on that evaluation.                         |
       //------------------------------------------------------------------+
       if (opmode != null) {
          if ( clock == null) {
             alert("OPMODE Recieved BUT NO CLOCK ARGUMENT");
               }
            }

       //------------------------------------------------------------------+
       // 4.)  We can simulate function overloading by selectivly passing  |
       //      DIFFERENT SIZE ARRAYS in a parameter position.              |
       //------------------------------------------------------------------+
       //      In the same way we tested for TYPE above we can test that a |
       //      parameter is an array. In addition to logic branching on    |
       //      the type of a parameter, we can pass a variable number of   |
       //      items in an array. Note instanceof has issues working       |
       //      across frames / iframes                                     |
       //------------------------------------------------------------------+

         if (args != null) {
            if (args instanceof Array) {
               switch(args.length) {
              	  case 3:
                     alert("Recieved an Array: 3rd item = " + args[2]);
                     break;
              	  case 6:
                     alert("Recieved an Array: 6th item = " + args[5]);
                     break;
                  default:
                     alert("Recieved an Array but length is invalid");
                     break;
                  }
               }
             }            

       //------------------------------------------------------------------+
       // 5.)  We can simulate function overloading by selectivly passing  |
       //      a NAME/VALUE PAIR COLLECTION in a parameter position.       |
       //------------------------------------------------------------------+
       //      In the above example we tested to see if the parameter was  |
       //      an instance of teh Array type.                              |
       //      In this case we check to see if we have a parameter that is |
       //      an instance of the JavaScript Object type but NOT an array  |
       //      we know it's a name/vause pair collection. Note that        |
       //      objects CAN be other subtypes (not only arrays) so our code |
       //      needs to know about all the object types that we test for.  |
       //------------------------------------------------------------------+
         if (args != null) {
         	 if ((args instanceof Object == true) &&
         	     (args instanceof Array == false)) {
         	    alert("Recieved a collection in the args parameter.");
              alert("Values = [Work : " + args.Work +
                    "] and [Intensity : " + args.Intensity + "]");
         	    }
          }

    }
    </script>
  </head>
  <body>
  	<br /><br />
  	<center>
    <h3>Test Simulated Function Overloading in JavaScript</h3><br />
    <input type="button" value="Pass NO Arguments"
    onclick="DoProcess()" /><br /><br />
    <input type="button" value="Pass a numeric argument"
    onclick="DoProcess(999)" /><br /><br />
    <input type="button" value="Pass a String Argument"
    onclick="DoProcess('Im a STRING', 1)" /><br /><br />
    <input type="button" value="Pass a 3 item Array"
    onclick='DoProcess(777, 1, [5, 6, 7])' /><br /><br />
    <input type="button" value="Pass a 6 item Array"
    onclick='DoProcess(777, 1, [33, 66, 77, 88, 99, 100])' /><br /><br />
    <input type="button" value="Pass a collection"
    onclick='DoProcess(888, 1, {"Work":"3:00", "Intensity":"Maximum"})' />
    <br /><br />
  </center>
  </body>
</html> 

---

I’ve been doing a lot og Client Side Development lately and am plannign on doing a lot more. HTML5, JavaScript, CSS – Oh My.

I’m building a work-out timer and there is a LOT of JavaScript so as I started looking for a Testing Framework I found myself building a list of options for the various types of JavaScript tools (I’ll address CSS and HTML tools later.)

The “code protection” section happened less because I want to hide code and more that I want to minimize my growning JavaScript dependencies.

I’ll post about my choices in the near future but wanted to share the list first.

A few notes about the list below.

I’ve added the ones that I feel merit consideration for MY work. Feel free to suggest additions, but I have intentionally omitted many choices for a variety of reasons. Currency, Adoption, support, etc.

Some are commercial products and others are free.

In the Editors (and IDE) section, I know there are hundreds. In my list are some Windows Only choices and some Linux / Mac choices as cross platform is very important to me.

Here is the raw list, I’ll comment on each category as I make selections.

Testing

In the last post in this series [ read here ] I added the clock timing logic to the HTML workout timer.

The next feature to add is round and interval audio. I want to ring a bell at the beginning and the end of each round, a warning before a change in work state, etc.

This is quite a bit more difficult than it sounds because we need to support both the differences between HTML5 implementation specifics in each of the modern browsers as well as  support still popular older browsers that only support pre “5″ versions of HTML.

I wanted code that would play an Audio file in the current versions of Internet Explorer, Firefox, Chrome, Opera and Safari on Windows, Firefox, Chrome, and Safari on the Mac and on old HTML 4 browsers. As it turns out some current browsers will play .wav but not .mp3 files. Some with play .mp3 but not .wav and some will play both.

So, I built a small test application that would play in all !

The UI was simple enough:

Lets look at the code and I’ll call out the notable points of interest.

---

<!DOCTYPE html>
<html>
<head>
<title>Play Audio</title>
<script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="script/modernizr-latest.js" type="text/javascript"></script>
<script type="text/javascript">
    var currentFile = "";
    function playAudio() {

        var oAudio = document.getElementById('myaudio');
        // See if we already loaded this audio file.
        if ($("#audiofile").val() !== currentFile) {
            oAudio.src = $("#audiofile").val();
            currentFile = $("#audiofile").val();
        }
            var test = $("#myaudio");
            test.src = $("#audiofile").val();
        oAudio.play();
    }

    $(function() {
        if (Modernizr.audio) {
            if (Modernizr.audio.wav) {
                $("#audiofile").val("sounds/sample.wav");
            }
            if (Modernizr.audio.mp3) {
                $("#audiofile").val("sounds/sample.mp3");
            }
        }
        else {
          $("#HTML5Audio").hide();
          $("#OldSound").html('<embed src="sounds/sample.wav"
                                      autostart=false width=1 height=1
                                      id="LegacySound"
                                      enablejavascript="true" >');
        }

    });
</script>
</head>

<body>
  <div style="text-align: center;">
    <h1>Click to Play Sound<br /></h1>
    <div id="HTML5Audio">
    <input id="audiofile" type="text" value="" style="display: none;"/>
    <br />

    <button id="play" onclick="playAudio();">
        Play
    </button>
    </div>
    <audio id="myaudio">
        <script>
        function LegacyPlaySound(soundobj) {
          var thissound=document.getElementById(soundobj);
          thissound.Play();
        }
        </script>
        <span id="OldSound"></span>
        <input type="button" value="Play Sound"
               onClick="LegacyPlaySound('LegacySound')">
    </audio>

</div>

</body>
</html>

---

First, you will notice that I’ve included jQuery as I now do in all my web based UI and I’ve included Modernizr, which I’ll use to determine where the HTML5 audio tag is supported and if it is, what audio file format that I need to use for the browser that I happen to be running in.

I’ve created a “sounds” directory and sound files named “sample.wmv” and “sample.mp3″.

Note the declaration of an audio element on line 54. If the browser supports the HTML5 Audio element the code between lines 54 and 64 will be ignored. If the browser does not support HTML5 audio then that markup will be rendered (including the JavaScript). The actual LegacySound object that gets played on line 63 is only needed if the browser is not HTML5 and it will be created by some JavaScript when the page is loaded only if it is needed,

Lines 6 to 20 are a JavaScript function to play the HTML5 audio element. Note that I’ve used a technique to improve performance slightly if name of the audio file to be played has not changed since the last time the function was called.

Beginning on line 22 code will be executed when the document is ready (loaded).

Line 23 tests to see if the HTML Audio tag is supported.

Then we check to see which media file type is supported.

If the HTML5 Audio tag is not supported then line 32 hides the user interface elements that would be used with the HTML Audio and line 33 creates the embedded media object to be played by older browsers.

I’ve tested this code in all the browsers listed above as well as Netscape 7 for HTML 4 compatibility.

You can click [ HERE ] to download a working sample.

Password strength is a key factor in account security for weeb applications. As developers we all have a basic understanding of what a secure password is but the averge consumer of internet applications doesn’t so adding a visual indicator when your user selectes a password is a great feature.

There are many, many plugins that we could select from to implement this feature I’ve selected this one which makes things very easy.

http://plugins.jquery.com/project/password_strength

---

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master"
    AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.password_strength.js" type="text/javascript">
    </script>
    <style type="text/css">
    .password_strength {
	    }
    .password_strength_1 {
	    background-color: #fcb6b1;
	    }
    .password_strength_2 {
	    background-color: #fccab1;
	    }
    .password_strength_3 {
	    background-color: #fcfbb1;
	    }
    .password_strength_4 {
	    background-color: #dafcb1;
	    }
    .password_strength_5 {
	    background-color: #bcfcb1;
	    }
    </style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>Password Strength</h2>

    <table style="border-spacing: 0px; border-style: none">
      <tbody>
      <tr>
        <td style="text-align: right"><label>User Name:</label></td>
        <td>
           <asp:TextBox ID="username" runat="server" Width="200px"></asp:TextBox>
        </td>
      </tr>
      <tr>
        <td style="text-align: right"><label>Password:</label></td>
        <td>
            <asp:TextBox ID="password" class=password runat="server"
                ClientIDMode="Static" TextMode="Password" Width="200px">
            </asp:TextBox>
        </td>
      </tr>
      </tbody>
    </table>

<script type="text/javascript">
    $('form').attr('autocomplete', 'off');
    $('#password').password_strength();
</script> 

</asp:Content>

---

In the code above I’ve used in-line CSS and script for the sake of learning simplicity.

The CSS is used by the plugin to set the color that corresponds with the “level” of the password as entered.

The script block starting on line 50 turns autocomplete off for the form (we’re working with a password after all) and applies the password strength functionality to the ASP.NET textbox controll names “password:.

As with all the ASP.NET jQuery work that we’ve been doing, we must set the Client Id Mode to “static” so tha tthe ASP.NET runtime does not modify the client ID of the emitted HTML text box.

---

You can download a working sample [ HERE]

---

 As I’ve been swimming in the great jQuery lake I discovered the jQuery QuickSearch Plugin,

As WebForms developers we often display lots of data using a gridview control.

I though it would be neet to set up using the jQuery QuickSearch plugin with the Gridview.

Here’s how it works.

Ihave a GridView wired to some sample data. For demo simplicity I’m using an XMLDataSource and reading from an XML file in my App_Data directory.

When the user starts to type into the Filter Text Box the rows in the table are filtered, meaning rows that don’t match the character(s) entered are hidden from view.

As the user continues to type, the list is filtered further.

The ASPX Page Markup is as follows.
Read the rest of this entry »

The ASP.NET Ajax Control Toolkit contains a control extender for making a set of ASP.NET CheckBoxes mutually exclusive [ See HERE ]. In this post I’ll demonstrate implementing Mutually Exclusive CheckBoxes with jQuery.

ASP.NET Checkboxes are, of course, server-side controls. If you’ve been following along with this series, or you using ASP.NET WebMatrix or MVC instead of WebForms, you may want to be leveraging HTML elements instead of server-side controls so my sample code will demonstrate doing this with both HTML input elements (checkboxes) as well as ASP.NET CheckBox controls.

This requires two slightly different methods because of the way ASP.NET emits markup for the ASP.NET CheckBox controls.

Here is a screen shot :

Read the rest of this entry »

The Ajax Control Toolkit includes a ListSearch [ see HERE ] control extender that can me used to extend a list or drop down list with a filtering feature by which the control will start to narrow the available options in the list to the ones that include the characters that the user has entered.

So when we use a drop down list for the selection of an item, and we enter (set focus) on the control, then the control expands. 

Then when we start to type, we want the list to hide items that do not contain the character sequence that we have typed.

I’ve implemented this feature using Unobtrusive Fast-filter Dropdown

Implementing this plugin (abbreviated UFD) with an ASP.NET DropDownList is easy.

---

<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master'
    AutoEventWireup='true' CodeFile='Default.aspx.cs' Inherits='_Default' %>

<asp:Content ID='HeaderContent' runat='server'
                                ContentPlaceHolderID='HeadContent'>
    <link href='Content/themes/redmond/jquery-ui.css' rel='stylesheet'
                                                      type='text/css' />
    <link href='Styles/udf/ufd-base.css' rel='stylesheet' type='text/css' />
    <link href='Styles/udf/plain/plain.css' rel='stylesheet'
                                            type='text/css' />
    <script src='Scripts/jquery-1.4.4.js' type='text/javascript'></script>
    <script src='Scripts/jquery-ui-1.8.13.js' type='text/javascript'></script>
    <script src='Scripts/jquery.ui.ufd.js' type='text/javascript'></script>
</asp:Content>
<asp:Content ID='BodyContent' runat='server'
                              ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit
        <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>
    <p>
        You can also find
        <a href='http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409'
            title='MSDN ASP.NET Docs'>documentation on ASP.NET at MSDN</a>.
    </p>
    <hr />

    <label for='SelectCountry'>Choose a country:</label><br /><br />

    <asp:DropDownList id='SelectCountry' name='SelectCountry' runat='server'
                      ClientIDMode='Static'>
        <asp:ListItem Text='Afghanistan' Value='Afghanistan'></asp:ListItem>
        <asp:ListItem Text='Albania' Value='Albania'></asp:ListItem>
        <asp:ListItem Text='Algeria' Value='Algeria'></asp:ListItem>
        <asp:ListItem Text='Bahrain' Value='Bahrain'></asp:ListItem>
        <asp:ListItem Text='Bangladesh' Value='Bangladesh'></asp:ListItem>
        <asp:ListItem Text='Barbados' Value='Barbados'></asp:ListItem>
        <asp:ListItem Text='Cambodia' Value='Cambodia'></asp:ListItem>
        <asp:ListItem Text='Cameroon' Value='Cameroon'></asp:ListItem>
        <asp:ListItem Text='Canada' Value='Canada'></asp:ListItem>
    </asp:DropDownList>

    <br/>

    <script type='text/javascript' >
        $(function () {
            $('#SelectCountry').ufd({ log: true });
        });
    </script>

</asp:Content>

---

You can garb the working example [ HERE ]

---

I’m working on an HTML application. It’s a Workout Timer and will become an HTML5 experiment that is “desktop deployable” and will store user profiles using HTML5 local storage, etc.

Though the application is in the very early stages, I know where I’m going and I want everything to be highly configurable, and for those customizations to be savable by the user.

Using the following prototype code I’m displaying a “stop watch” type display.

---

<!DOCTYPE html>
<html>

<head>
<meta content='en-us' http-equiv='Content-Language'>
<style type='text/css'>

 .fighttimer {
     text-align: center;
     padding: 5px;
     width: 96%;
    }

</style>

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.fighttimer.js'></script>

</head>

<body>

<table class='fighttimer '>
    <tr>
        <td>&amp;nbsp;</td>
        <td>&amp;nbsp;</td>
    </tr>
    <tr>
        <td class='timecountdown'>00:00</td>
        <td>00</td>
    </tr>
    <tr>
        <td>
        <input type='button' class='timestart' value='Start' />
        <input type='button' class='timestop' value='Stop' />
        <input type='button' class='timereset' value='Reset' />
        </td>
        <td>&amp;nbsp;</td>
    </tr>
</table>

<script type='text/javascript'>
    $(function() {
        $('.fighttimer').fighttimer();
    });
</script>

</body>
</html>

---

I’m using a table for layout because I want all the features of the timer to be displayed in a grid and dynamically resizable by the end user.

Each part of the User Interface will be manipulated in JavaScript code.

Note in the markup above the inclusion of a JavaScript file on line $17 in which we define a jQuery plugin for our Timer Application.

Note also here JavaScript code block starting on line #42 where we wire up our custom plugin to elements whose class is “fighttime”.

In our case this is a single table object.

Read the rest of this entry »

One of the fundamental premises of ASP.NET is the “separation of concerns”. In ASP.NET WebForms Code and Markup go in separate files by default (.aspx / .aspx.cs). In ASP.NET MVC concern isolation is innate to the MVC convention. It therefore only makes sense to apply the same organizational construct to our use of JavaScript, especially as we federate more and more logic to the client side of our applications (meaning the browser.)

I’ve adopted  the practice of “Unobtrusive JavaScript” that appears below. FOr the sake of simplicity I’ve created this without using the standard WebForms template.

Lets suppose I have a page and I want to implement some jQuery / jQuery UI  features. Given this page …

I want to be able to drag & drop ….

And resize it ….

And I wanted to use jQuery UI features like a Pop-Up Calendar Picker.

Read the rest of this entry »

I stumbled upon a 3 article series on JavaScript Performance that the IE Team has published and thought I’d share it:

1. IE + JavaScript Performance Recommendations – Part 1
2. IE + JavaScript Performance Recommendations – Part 2
3. IE + JavaScript Performance Recommendations – Part 3

From HTML body onload to jQuery Factory Function Shorthand

---

As you continue implement user interface logic in your Web Application you’ll be coding in JavaScript and you’ll eventually encounter a scenario where you want to execute some JavaScript code when your web page is loaded. Working with jQuery you’ll discover this scenario immediately.

One of my teammates was asking be about web page loading events and jQuery Syntax so I though others might benefit from an explanation of the onload / ready syntax as well as an example of jQuery shorthand.

The native way of doing this is to wire up an event handler (function) for the onload event of the html element.

---

<!DOCTYPE html>
<html>
<head>

<script type='text/javascript'>
 function SomeFunction() {
 alert('I was run at startup !');
 }
</script>

<title>Sample Page</title>

</head>

onload='SomeFunction()'>
   My Web Page !
</body>

</html>

---

This works, but it’s not perfect.

Read the rest of this entry »

As I’ve been showing ways to use jQuery and JavaScript instead of the Ajax Control Toolkit, or just integrate client side code with ASP.NET I’ve reviewed a collection of requests for Modal Dialog samples.

While I’m working on one I thought I’d post a list of existing options that I’ve found.

Note that I have intentionally omitted ones that seemed to be image focused and only included the ones that had a broader custom application value.

Feel free to post others that you think merit consideration in the comments section !

---

Nyro Modal

The demo is not as pretty as some of the others but don’t let that fool you. This one is feature rich for developers.

---

jQuery Tools Overlay

Overlay is just one of the features in the jQuery Tools “Suite”. It’s really a whole UI package for jQuery.

---

jqModal

Described as minimalist but feature rich and easy to style with support for many features including events, callbacks and nested dialogs.

---

Read the rest of this entry »

Sorry – This Poll is Closed!

---

The Ajax Control Toolkit has an “Always Visible” Extender.

I’ve been working on finding / writing / showing client side alternatives to the Ajax Control Toolkit features.

As I examine ths useage of such a feature it seems that the needs of the specific usage scenarios.

Rick Strahl wrote a great one HERE that implements a cliet side status bar.

I wanted one that sort of looks like the Ajax Control Toolkit one.

Since I still don’t yet “think” in jQuery this plain old JavaScript and I’ll look to converting it to a jQuery plugin at some point in the future.

So, here is the experience ….

And then after scrolling down the page.

Read the rest of this entry »

For years I’ve said “JavaScript is inevitable”.  More and more all web developers are needing to add richness to their Web UIs and their UI Interactions.

The thing about Scripting Languages is that folks tend to learn by trial and error. There is nothing wrong with this, it’s how I learned JavaScript.

But, writing Client Side & Server Side code together can be tricky. I very frequently get email from customers experiencing a debugging problem whose answer is fund in confused or incorrectly mixed Client / Server coding.

So, writing good, clean MODERN JavaScript is not only important to but a service to anyone who will need to crack open your code in the future to make enhancements (including the original author).

So I got this book. “Eloquent JavaScript – A Modern Introduction to Programming”.

This is a great book except for the subtitle. Since it’s called an introduction, folks that have some JavaScript experience might pass this book up and that would be a shame.

I found it not only a tutorial but a style guide.

Coverage includes, Data Structures, Object Oriented JavaScript Programming, Functional Programming, Modularity, the DOM, HTTP Requests, as well as all the basics of JavaScript.

I encourage you to check it out [ HERE ]

---

Next up in this series on replacing the Ajax Control Toolkit functionality with client side logic is the ACT PopUp control extender.

I have to admit that I stumbled a little on this one.

Here are the examples provided by the Ajax Control Toollkit demo site.

One sample is a multi-select, but this usage seems unecessary. I’d just use a drop down.

Another was this calendar pop-up,but for this I would use one of the plethora of Date Selector controls that are available out three.

Still, there is a scenario where the user could benefit from some field specific associated data (but a lot more than a tool-tip.)

So I decided to implement a Pop-Up that shows a <div> element. Inside that div we can put anything. Markup, Client Side Controls, Server Side Controls, and JavaScript code (so if we wanted to we could put code in the pop-up that interacted with the corresponding DOM element that it was “Poped Up for”).

For such JavaScript to be reusable though, it needs to be responsible for its own positioning.

I’ve written this as plain old JavaScript. I plan in the near future to convert this to a jQuery Plugin.

Here’s what the finished code looks like in execution.

In the above screenshot I’ve bound a Pop-Up to the SECOND TextBox and when I click or tab into that TextBox the Pop-Up is displayed.

The JavaScript code automatically figures out where the TextBox is displayed and places the Pop-Up under the TextBox slightly indented.

Of course we want to make the feature as simple to call as possible.

Here is the markup that results in the above page.

---

<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master'
         AutoEventWireup='true' CodeFile='Default.aspx.cs'
 Inherits='_Default' %>
<asp:Content ID='HeaderContent' runat='server'
             ContentPlaceHolderID='HeadContent'>
<link href='Styles/FieldPopUp.css' rel='stylesheet' type='text/css' />
<script src='Scripts/FieldPopUp.js' type='text/javascript'></script>
</asp:Content>
<asp:Content ID='BodyContent' runat='server'
             ContentPlaceHolderID='MainContent'>
    <h2>Welcome to ASP.NET!</h2>
    <p>
        To learn more about ASP.NET visit
        <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>
<br />
Text 1 - <input type=text id='t1'><br />
Text 2 - <input type=text id='targettextbox'
                onfocus='SetPopup('divtopop','targettextbox', 'S');'
                onblur='SetPopup('divtopop','targettextbox', 'H');'>
<br />
Text 3 - <input type=text id='t3'><br />
<div id=divtopop class='boxover'>
This Field <br />
<hr>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.<br /><br />
<div style='text-align: center;'>[ Hide ]</div>
</div>
</asp:Content>

---

Notice the OnFocus and OnBlur event handlers that call the SetPopUp JavaScript Function.

Doesn’t this syntax suddenly seem cumbersome after working with jQuery for even a short while?  Even though this is pretty simple to use it will still be more elegant when implemented as a jQuery Plugin so that we can apply the functionality via a jQuery selector.

The JavaScript is somewhat more complex.

Read the rest of this entry »

Rey is a scripting dude, member of the jQuery project and management lead on Microsoft’s Script Junkie web site.

In this episode we talk about all of that and the coming wave of new client web development technology.
Resources

• ScriptJunkie.com
• Rey’s Blog
• PluginQuery

Listen

Subscribe

MP3

WMA

M4A

Zune

iPod

Download

3GP

iPod

MP4

MP3

M4A

M4V

PSP

WMV

Zip

WMA

Zune

---

No matter what flavor of ASP.NET you used (WebForms, MVC, WebMatrix) you probably are (or will be) doing more client side work.  

This is new to many developers, especially ASP.NET WebForms developers who have relied on Server-Side Controls for the majority of their UI rendering.  

As we move more logic to the browser, we require detailed manipulation of the client UI. One of the questions I get is ….. 

How do I put the cursor in a specific textbox ? 

This is useually refered to as setting focus. 

Consider the ASP.NET Page markup below…..  

---

<%@ Page Language="VB" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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">
<head runat="server">
<title>Set Focus</title>

<script type="text/javascript">
onload = function () {
document.getElementById("Text8").focus();
document.getElementById("Text8").value = "Enter Me First.";
document.getElementById("ASPTextBox8").focus();
document.getElementById("ASPTextBox8").value = "Enter Me First.";
    }

function SetMiddleTop() {
var txt = document.getElementById("Text2");
txt.focus();
txt.style.background = "pink";
    }

function ASPSetMiddleTop() {
var txt = document.getElementById("ASPTextBox2");
txt.focus();
txt.style.background = "pink";
    }
</script>
<style type="text/css">
.auto-styletd {
	text-align: center;
}
</style>
</head>
<body>
<div style="text-align: center;">
<br />TextBox Focus with JavaScript<br /><br />
<form id="MainForm" method="post" style="width: 700px;
                                         margin: 0 auto;" runat="server">
   <table style="width: 100%;">
	 <tr>
        <td class="auto-styletd">
		   <input id="Text1" style="width: 180px" type="text" />
		</td>
        <td class="auto-styletd">
           <input id="Text2" style="width: 180px" type="text" />
        </td>
        <td class="auto-styletd">
           <input id="Text3" style="width: 180px" type="text" />
        </td>
     </tr>
     <tr>
        <td class="auto-styletd">
           <input id="Text4" style="width: 180px" type="text" />
        </td>
        <td class="auto-styletd">
           <input id="Text5" style="width: 180px" type="text" />
        </td>
        <td class="auto-styletd">
           <input id="Text6" style="width: 180px" type="text" />
        </td>
     </tr>
     <tr>
        <td class="auto-styletd">
           <input id="Text7" style="width: 180px" type="text" />
        </td>
        <td class="auto-styletd">
           <input id="Text8" style="width: 180px" type="text" />
        </td>
        <td class="auto-styletd">
           <input id="Text9" style="width: 180px" type="text" />
        </td>
     </tr>
     <tr>
        <td class="auto-styletd">&amp;nbsp;</td>
        <td class="auto-styletd">
           <input name="ClickMe" type="button" value="Click Me"
		          onclick="SetMiddleTop();" />
        </td>
        <td class="auto-styletd">&amp;nbsp;</td>
	 </tr>
   </table>
   <br /><br />
   <table style="width: 100%;">
     <tr>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox1" runat="server" Width="180px"></asp:TextBox>
</td>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox2" runat="server" Width="180px"></asp:TextBox>
</td>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox3" runat="server" Width="180px"></asp:TextBox>
</td>
	 </tr>
	 <tr>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox4" runat="server" Width="180px"></asp:TextBox>
</td>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox5" runat="server" Width="180px"></asp:TextBox>
</td>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox6" runat="server" Width="180px"></asp:TextBox>
</td>
	 </tr>
	 <tr>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox7" runat="server" Width="180px"></asp:TextBox>
</td>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox8" runat="server" Width="180px"></asp:TextBox>
</td>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox9" runat="server" Width="180px"></asp:TextBox>
</td>
	 </tr>
   <tr>
<td class="auto-styletd">&amp;nbsp;</td>
<td class="auto-styletd">
<input name="ASPClickMe" type="button" value="Click Me"
onclick="ASPSetMiddleTop();" />
</td>
<td class="auto-styletd">&amp;nbsp;</td>
   </tr>
  </table>
</form>
</div>
</body>
</html>

---

  

Note first the onload() function, which is run when the page is loaded in the browser – that begins at line #10.  

Line #11 -  

 

Puts the cursor in HTML text element whose id is Text8 and the next line adds a bit of text.  

Read the rest of this entry »

I got email from a developer this week having trouble with WebForms validation.

The issue was that a combination of a control and an extender were causing havoc with the counter.

The developer wanted to prevent submission if the user entered more than 50 characters in a textbox.

Note:

• Using WebForms does not mean you have to do everything with Web Controls.
• jQuery ROCKS !

When you create an ASP.NET WebForms project using the default template in Visual Studio 2010 you get jQuery included by default.

I did a couple of Bingle searches (like Google only with BING) and found the maxlength.js library at http://www.javascriptkit.com

My .aspx page markup look like this….

Note how elegant this is.

I simply download and include the maxjength.js file and add two attributes to my html textarea.

data-maxsize – says how many characters can be entered into the textarea.

data-output – tells the maxsize script where to display the feedback.

Note that the textbox is not an ASP.NET Server Side Control. It’s a standard <textarea> element that I’ve specified  runat=”server” and an id so that I can retrieve the value in code-behind.

OR

I could omit  runat=”server”  and retrieve the value from the form collection.

Welcome to the power, simplicity, and elegance of jQuery !

For more information on maxlength.js you can go to the source here :

http://www.javascriptkit.com/script/script2/enforceform.shtml 

PS: Here is a working sample [ DOWNLOAD ]

HTML

Home – http://msdn.microsoft.com/en-us/library/aa737439.aspx

API – http://msdn.microsoft.com/en-us/library/ms533029(v=VS.85).aspx

How-to’s – http://msdn.microsoft.com/en-us/library/ms537623(v=vs.85).aspx

CSS

Home – http://msdn.microsoft.com/en-us/library/ms531205(v=vs.85).aspx

API – http://msdn.microsoft.com/en-us/library/ms531209(v=VS.85).aspx

How-to’s – http://msdn.microsoft.com/en-us/library/ms531212(v=VS.85).aspx

JavaScript (AKA Jscript)

Home – http://msdn.microsoft.com/en-us/library/hbxc2t98(v=VS.85).aspx

API – http://msdn.microsoft.com/en-us/library/yek4tbz0(v=VS.85).aspx

How-To’s – http://msdn.microsoft.com/en-us/library/4yyeyb0a(v=VS.85).aspx

JavaScript (as of IE9)

Home – http://msdn.microsoft.com/en-us/library/d1et7k7c(v=VS.94).aspx

API – http://msdn.microsoft.com/en-us/library/yek4tbz0(v=VS.94).aspx

How-to’s – http://msdn.microsoft.com/en-us/library/4yyeyb0a(v=VS.94).aspx

Internet Explorer

Home – http://msdn.microsoft.com/en-us/library/aa905850.aspx

IE9 Beta Guide – http://msdn.microsoft.com/en-us/ie/ff468705.aspx

- Thanks to Rey Bengo (http://blog.reybango.com/)

I wanted to share a great article by Jeffery Way over on Nettuts+ on best practices for JavaScript developer.

If your developing web applications, sooner of later JavaScript is inevitable.

I hope you find it useful.

[ Read the article HERE ]

I recently had an email exchange with someone asking me about how to approach writing their own WYSIWYG editor control for web applications.

Perhaps an interesting academic exorcize, or maybe he has some very specific application  but it got me thinking about how many implementations there are out there already !

While searching I found this great list which is lifted entirely from Mike Pope [ Click HERE to Read at Mike's Blog ] – THANKS MIKE !

Rich Editor Controls that you can use with ASP.NET

HTML Editors
As near as I can tell, all of these work in-browser and produce HTML or XHTML.

• RadEditor (Telerik). AJAX-enabled.
• WebHtmlEditor (Infragistics). Part of the NetAdvantage for ASP.NET suite (I think).
• Cute Editor (CuteSoft)
• FreeTextBox (FreeTextBox.com). Free for basic edition. Source code available (for a price).
• Peter’s Textboxes (Peter Blum). Suite of enhanced text box controls.
• UltimateEditor (Karamasoft)
• Asbru Web Content Editor (Asbru)
• ASP.Net XHTML WYSIWYG Editor (MoreNet)
• AspLib Component library (Astron Digital). Includes a WYSIWYG editor, among other things.
• ASPxHtmlEditor Suite (DevExpress)
• ComponentArt Editor for ASP.NET AJAX. (ComponentArt)
• EditLive! (Ephox)
• eWebEditor (eWebEditor)
• eWebEditPro (Ektron)
• InnovaStudio WYSIWYG Editor (InnovaStudio)
• FCKeditor (FredCK.com)
• Html TextBox (ActiveUp). Part of the ActiveUp.WebControls suite.
• Obout Editor for ASP.NET (Obout)
• pinEdit (Pintexx)
• PowerWEB TextBox for ASP.NET (Dart).
• RichTextBox (aspControls)
• RichTextEditor (Syncfusion)
• RTE ASP.NET Control. Released under an MS-PL license on CodePlex. Includes source.
• SmartText (Z-SoftNet)
• soEditor (SiteObjects).
• SPAW Editor v.2 (Solmetra)
• TinyMCE (Moxiecode). JavaScript based; open source under LGPL.
• Ueditor (Yardi). Free; source and restribution for a price.
• WebHtmlEdit Control (JitBit Software)

Word Processing, RTF, PDF, and more
These variously support other formats, notably non-HTML (e.g. RTF) and sometimes PDF.

• ASP.NET Rich Text Box (TX Text Control). Supports DOC, DOCX, RTF, TXT, HTML.
• Aspose.Editor (Aspose). Many formats, including HTML.
• TE Edit Control (Sub Systems). RTF editing.
• TextDynamic Server / wRTF2PDF (WPCubed).

Other/Not Sure
I’m not sure how exactly these fit into the picture; they’re listed at least in one location as being ASP.NET editors.

• Community Editor (BigByte). Desktop editing, it says; possibly not in-page HTML editing? Appears to be free.
• DevEdit NX (Interspire). Not 100% clear that it supports ASP.NET.

More Information

• A similar list is available at 123aspx.com.
• Daniel Walzenbach published a list as well in December 2007. With pictures!
• Scott Mitchell has an article on using FreeTextBox.
• “Building a WYSIWYG HTML Editor” A two-part article by Mitchell Harper. I’m pretty certain that this is for Internet Explorer only, tho.

 OK you AJAX Masters !

Check out ScriptLoader

ScriptLoader is a framework to manage your and third-part javascript libraries.

It will make you easier to call any script library(your or third-part) without injecting any dirty code.for that,you just configure some info in a configuration file.

http://sourceforge.net/projects/scriptloader/

If you reference an ASP.NET page that contains a scriptmanager in your js file like below you get intellisense for the entire Microsoft AJAX Library plus any additional scripts ref’d by the scriptmanager.  The easiest way to get the /// <reference/> entry in your js file is to drag n drop your .aspx page from solution explorer into  the contents of your js file.  VS magically adds the refJ

Since I tend to use stand-alone .js files I can just add this.

/// <reference name=”MicrosoftAjax.debug.js” />

to my consuming page and intellisense is wired to my JavaScript code.

Thanks to Marc Schweigert for the reminder !

 You’ve heard it. JavaScript is not a REAL programming language.

Well, it is NOW. Programming in JavaScript is inevitable.

And why not.

• It is ubiquitous. (Supported by all major browsers.)
• It supports good Object Oriented Development.
• There is TONS of code out there.
• There is a rapidly growing collection of rich, high quality JavaScript Frameworks and Libraries available.
• It’s been good enough to be implemented out of the browser in client technologies like Flash (ActionScript is for all intents and purposes ECMAScript, which is the new name for JavaScript)and SilverLight 1.0)
• And, Server side technologies like Aptana’s Jaxer

While I concede that “Web 2.0″ technologies like SilverLight 2.0 (Programmed in C#, VB, or any .NET language), and Flash/Flex, and JavaFX have a strong place in the future of the web….. programming the DOM with JavaScript is here to stay.

I think we need to stop trying to avoid JavaScript and start embracing it, even if only for it’s universal availability.

Microsoft is embracing JavaScript

• We’ve added great development and debugging support fir JavaScript in Visual Studio (see links below.)
• We’ve developed a GREAT set of JavaScript Extensions that are server independent, free, and open. [More Info Here]
• Created a JavaScript friendly controls framework. [ See videos #62, #63, and #64 HERE. ]

So, if your ready to take JavaScript beyond the basics, here are some of my favorites to get you started.

Some Books on JavaScript beyond the syntax !

Some JavaScript Tools

Aptana IDE (A GREAT, free AJAX IDE, great for JavaScript even if you’re not doing AJAX)

Antechinus JavaScript Editor

SplineTech JavaScript Debugger

Internet Explorer 8 Beta (With great built in developer tools.)

Some Microsoft JavaScript Links

Microsoft JScript Blog

Microsoft JScript Reference

Video: JavaScript Debugging in Visual Studio 2008

Video: JavaScript Intellisense in Visual Studio 2008

A few better than average JavaScript Web Sites

JavaScript.com

W3 Schools JavaScript Tutorials

JavaScript Kit

Dynamic Drive

In their blog, the JScript team at Microsoft is addressing incompatibilities between Microsoft JScript implementation and the ECMA Standard.

From their blog……

“…the first step is knowing where the divergences are. We in the JScript team are looking into where various browser based implementations diverge, where our engine is incorrect in its interpretation of the specification, what if any de facto compatibility conventions have been reached, and the value of codifying such conventions into the standard. We’ve published the first draft of JScript Deviations from ES3 as a starting point.”

Kudos to the JScript team. The haters are quick to slam the IE (and by association the JScript team) for IE’s incompatibilities.

It’s hard to be FIRST, be innovative, and do things exactly the same as everyone else.

Now that the browser “market” has matured and there is more than one browser that matters, I think it’s great that they are taking the heat and addressing the incompatibilities.

Credit where credit is due!

http://blogs.msdn.com/jscript/archive/2007/10/29/ecmascript-3-and-beyond.aspx

Microsoft makes JScript – our implementation of the ECMA 262 language specification.

Browser script programming is “born again” with the popularity of AJAX and RIA style application building.

So, Microsoft is looking for someone who can represent us and our work with JScript, our support of it, our standards participation, tools support, etc.

You would “champion” JScript to the world much in the way that I champion ASP.NET.

We’re looking for a senior level person with qualifications that include the following:

• A great working knowledge of web development technologies and especially client side programming in JavaScript/JScript
• A strong knowledge of developer communities and ideas around how to build one
• Great presentation skills
• Rich general solutions development experience.

If your interested, email Shreesh Dubey and convince him that you should interview !

Kirk has an interesting blog post on debugging Javascript (from a PHP page no less) in Visual Studio 2008 here:

http://blogs.msdn.com/kaevans/archive/2007/08/10/javascript-debugging-in-visual-studio-2008.aspx

The ASP.NET AJAX UpdatePanel gets updated in one of 3 ways.

1.) An implicit control event triggers an update (that is a control inside the UpdatePanel is getting updated, etc.)

2.) The UpdatePanel has a <Triggers> Collection, and one of the defined triggers gets fired.

3.) The UpdatePanel’s Update metod is explicitly called in the course of some server side logic.

BUT…….  What if I want to explicity trigger an update to the UpdatePanel from my client side JavaScript code ???

Ceck out his link on CodeProject for a solution.

http://www.codeproject.com/useritems/UpdatePanelScriptExtender.asp

Don’t wanna share your AJAX JavaScript code with any casual browser.

Ceck out this Script Encoder