A collection of useful information

Anyone that has ever built a large scale web application using ajax has probably incurred many of the same issues. One of the major problems is that ajax calls are asynchronous. This poses an interesting problem with creating and updating elements on the page accurately. Unless you reload that entire section of the page you will soon see that some object ID’s are saving to the wrong places. Another problem is long requests that are no longer valid. Most modern web browsers will only allow 2 ajax requests to be processed simultaneously  The remainder of the requests will be queued up and run in turn. This means that if you are still processing an old request, you are losing half your call speed if not all of it. The last problem that I was really interested in dealing with is visualizing the data that was actually being transfered through the requests. You can read more about that here: validator

The AJAX wrapper

This little library allows us to make both POST and GET calls using ajax while enabling us to track the ID of each request and also stop one or all of the requests from happening. There are 4 functions that you have direct access to.

Get

Post

RemoveRequest

ClearRequestQueue

 

Conclusion

Using this little helper library, you can resolve some of the rather tricky issues that come up when dealing with complex ajax applications. Plus this will allow you to implement the validator quickly and simply.

 

I haven’t done many really “major” projects in PHP till a few months ago. In the past I’ve just dumped out values to the screen and have always been able to find the problem. Unfortunately, my current project has given me some troubles that I wasn’t able to resolve without a little help from a debugger. Like many of you, I wanted to use a debugger (becomes habitual with .NET) but wasn’t sure exactly how to go about it. I searched around the internet for quite some time before I finally found a solution that works great and can be done in less than 30 minutes!

Interested!? With debugging, you will save 30 minutes in less than a day of coding. Well here are my findings, I hope this will help someone get debugging setup quicker and easier than I did.

(These steps are for a Mac. Sorry PC guys… I do know you can do something simular with WAMP, I just haven’t done it.)

 

Step 1 – Get the tools

If you are doing PHP developement, you will need to test your site as you go along. This requires an instance of PHP to be running somewhere either locally or on an external server. For many reasons, I would recommend running a local instance that mirrors your production server as best as you can. That being said, I know that you may already have an instance running. The method for setting up this debugger will require you to install and use a little piece of software called MAMP. MAMP is the mac equivalent to WAMP (Mac-Apache-MySQL-PHP). You can get ahold of a free copy here. The setup wizard will guid you through the install process but once it’s installed, you will want to open the main application and make the correct changes to your ports.

You should see a screen simular to this one. Make sure these are the default ports if you want to have apache be your localhost server. A simple click of the set default ports button will do the trick. Once you’ve updated the ports, you will need to restart the server. (Also conveniently a simple button push)

The second tool you will need is called MacGDBp. You can get a free copy of it here. This tool will act as your debugger and use XDebug to step through your code. Install the application and then jump into the “Preferences” panel.

In this panel, you will need to setup a connection between your local files and the files the server sees. Notice on the second line, the url http://localhost/LitRoost/… This is the corresponding URL to to my local path of /Users/christensenmckay/litroost. The local path is where I have my project files located on my computer. A quick hint about MAMP, the root directory for MAMP is /Applications/MAMP/htdocs. You will need to place current versions of your code within that path in order for MAMP to process them.

 

Step 2 – Configuration

Up till this point, we’ve done a little setup, but now we are going to configure XDebug. This is usually a bit of a process which requires installing XDebug and appropriately configuring it. Fortunately for you, MAMP already comes with it installed, you simply need to turn it on!

Open up the MAMP folder in your finder (/Applications/MAMP) from there, you need to find the php.ini file.

Open the file up in an editor that will NOT embed rich text into the file contents. The program that you use for writing your code is probably a good safe choice. Once the file is open, look for the section that says [xdebug]. You will see a line that says “zend_extension” commented out. Go ahead and uncomment it, you can add these lines while your at it.

Save your new php.ini file and restart your MAMP server. Since both XDebug and MacGDBp are both setup to run on the same port (9000), when you open a webpage on your localhost MacGDBp will intercept it and start debugging it.

 

Step 3 – Debugging with pleasure!

Open your MacGDBp application, make sure you have a php page within your MAMP servers web path (htdocs folder). Go to any browser and open a php file on your localhost. You will notice that the page seems to load indefinitely… now click on your MacGDBp application and you’ll notice that your code is displayed and it has hit a breakpoint on the first line of code. You are now free to debug!

One caveat I have noticed is that when I make a change to my page with MacGDBp still open, the change isn’t reflected in the code I’m debugging. One simple remedy is to restart MacGDBp when you need to push a new code change to debugging. XDebug is supported by several php suits that will allow debugging within the same application that you code in. In my case, I use DreamWeaver for most of my work and it doesn’t support debugging so this works great for me. Hope this helps you in your bug extermination adventures!

Hey everyone, sorry it’s been so long since my last post and I promise I’ll wrap up the Words With Friends one, as I’m sure there are a bunch of you out there just waiting to see the guts of it.

Today I want to change gears a little and post a fun little experiment I just built. I’m not sure why, but for some reason when I sat down tonight I just had an itch to make a webpage that would scroll letters from the top to bottom at different speeds (like The Matrix background). So here it is! I’m using jQuery to accomplish this task and it turns out, it’s not even very complicated. If you haven’t checked out jQuery, I strongly recommend it. I really love the feel of use of C#, but jQuery is probably the closes thing I’ve found to it.

You can see a live demo here.

 

HTML and CSS 

First things first, lets check out the html. It couldn’t be more simple, all we have is a <div> tag in our body tag.

We then apply a little CSS to the background and create a class which we will use for our elements as they are created by javascript.

 

The jQuery

Now for the cool part! I’m going to be using jQuery to make this task simpler. As I mentioned before, jQuery is a javascript library that makes life in the web world so much better. There are really only 3 parts to the script.

Part 1: Setting it up

As you can see, the setup is pretty darn simple. We create a few variables to hold the height and width of the <div> we will be running this animation in, we have a fallingID which will keep a numeric count to be used for creating element id’s, and last but not least, we have the fallingString variable which will give our program the characters to show. I’ve also included a ‘getRandomInt’ function that creates random numbers and actually returns values in a Normal distribution. (if you know stats that will make sense)

Part 2: Detecting window size changes

Here we detect if the size of the window has changed and if so, we simply update our variables representing the size of the div. We are only doing this because our <div> is matched to 100% height and width of the window, so it’s size changes as the windows does.

Part 3: Making the action happen. There are two pieces to this one, one part fires an event to create and start a new letter falling, while the other creates the letter and the animation.

Here we use the ‘setInterval’ function to fire off a function call every 10 ms. The function we are calling is the CreateObject function here:

So here is a little more to bite off, but don’t worry, I’ll step you through it. One the first line, we are simply using the .append()method to add our new <div> to the ”FallingContentWrapper” <div>. We then define how the <div> should be built by assigning it the class we created above and also assigning it an id based off the ‘fallingID’ variable. For its content, we simply grab some random index from our string display whatever character is at that index.

The next couple lines deal with css so we will use the .css() function. The top one of the two gets a random number from 0 to the width of our <div>. This will cause the letters to be spread out randomly across the screen. The second one sets the font size to a random number just to add a cool depth effect.

Lastly, we have an animate function. This is where jQuery really shows it’s stuff. Using the .animate() function, I’m going to be  setting the ‘top’ css property to be the height of our outer <div>. I then get a random number from 500-6000. This number will determine how long our animation takes to complete in milliseconds. The last piece is the completed function which will fire whenever the animation has completed (500-6000 ms). Once the animation is complete, we will want to remove the <div> that we created so that we don’t end up with thousands of elements on our page. To do that, we use the .remove() method which will remove the element from our outer <div>.

We are DONE! Here is our entire page all at once. Notice you need to reference the jQuery library and point it to the correct location.

 

Hope you all enjoy making your own changes to this and I’d love to hear back and see some cool things you’ve done based off this concept.

 

Silverlight Gauge Control (creating a custom UserControl)

I had some time the other day while waiting for a Microsoft’s SQL Server to install so in order to get through the bordom I built this fun little control. Its pretty strait forward as far as designing a control goes, but I figured I’d post the code and give an entry level tutorial on how to make a custom control in Silverlight.

As you can see, the control allows for setting three markers and toggling their positions. It allows you to set the value of the dial and as well as Min and Max properties.

 

Custom UserControls and Silverlight

Silverlight and WPF provide an exelent framework and tools to help you create controls that not only look but perform in your own unique way. UserControls are a great way for you to create a control that might be used several times throughout an application, and needs to maintain some sort of unique functionality. There are two types of controls in Silverlight and WPF, (UserControl and Custom Control). Though I won’t go into great detail on their differences, a UserControl forces you to derive from the UserControl base class which has a limited set of built in properties. Custom Controls on the other hand allow you to derive from a higher level control.

For instance, if I just wanted to make a control that simply made some changes to the behavior of a textbox, I would likely want to use a Custom Control because I could derive form the TextBox control and my control would automatically inherit all the events and properties that are associated with a textbox. That saves  me a lot of work in the end! For a control like this I could have actually derived from a Slider control and it would have given me several properties that I had to implement myself, but all in all the work was very minimal and a custom control is a more time intensive task.

Now that that is out of the way, lets get onto the building of the control.

 

The Layout

As I said earlier, the layout is pretty strait forward and I didn’t do any binding to the properties I created in the background. Instead I just set the values in the property setters.

 as you can see from the image, I’ve placed the entire control into a Viewbox to keep the proportions correct. You can see the little blue dot over the red circle. It has been lined up with the center of the control and the bottom of the gauge. This allows the gauge to rotate freely around the gauge. The Grid will rotate centered at that point.

In order to build the parts easier I built them vertically and rotated them afterword. This created an offset angle that needed to be factored in to the rotation.

This obviously only really comes into play when I need to assign the Dial a value. So I created a couple simple functions to translate the values and placed them in the controls code behind.

The functions speak for themselves, but they perform the appropriate rotational translations on the objects. One thing to note is the use of the max property in the ConvertValue which allows the control to adjust the maximum value of the gauge.

One thing I wanted the control to be able to do was to allow the user to determine the background color as well as the color for the inner half circle. In order to accomplish this, I bound to some of the default properties exposed by the user control.

If you look at the golden text, you can see the bindings I have done to the UserControl properties. Just as a brief explanation of the binding, I gave the UserControl a name in it’s opening tag. I can then reference that name in the ElementName= portion of the binding. Once I have referenced the object, I can then bind to its properties, in this case I wanted the BorderBrush property.

When you start looking at more of the xaml for the control, you will notice several binding statements, they ultimately allow the control to simply make use of the properties already made available by the UserControl object.

 

Wire it up

Now that the view has been built and we are happy with the look of everything, its time to wire everything up. First off, jump into the code behind file where you can create properties for each of the rotating grids. Here is the dependency property for the DialGrid.

Dependency properties are special public properties that allow you to expose the property and also bind data to it. All the different properties that you set in a typical control, like the “Text” property of a TextBlock, are actually implemented using dependency properties. In the setter of this property, I’ve added several other function calls and operations including setting the tooltip for the control.

Once you’ve created these properties for the values and visibility of the different controls, the backend is done. It’s now time to add the control to your application.

 

Implementation

So now for the last step if you are wanting to implement it into your own solution. Here is the code from my control being implimented into my mainWindow.

All you need to do is add the control to your solution then add a reference in xaml at the top of you MainPage.xaml file. It should look something like this:

This will add a reference to your project file so any other controls that you create on your own (assuming you don’tuse a different namespace) can be accessed by using the ‘<local:’ tag now.

In conclusion, you can see that creating a custom user control is actually pretty strait forward. There are obviously new things to deal with, but once you get a hang of them, its actually not much different than building something on you MainPage. Hopefully you’ve been able to see how convenient it is to have the ability to create these usercontrols and use them countless times within your other views.

I’ve posted the entire solution file for download so you can see the source code for creating and implementing the control.

Get the complete solution file here: Guage Controls