jQuery Mobile Released!

Oct 16 2010

Hey everyone (if you still read this, anyway). Happy to report that I am currently working at a local company in Milwaukee and am pretty happy with it. But anyway, that’s not what’s important here.

Last night we saw the Alpha release of jQuery Mobile, a user interface system that works across a large chain of mobile browsers seen here. Currently it is just an Alpha release, 1.0 is planned for January 2011, but it looks almost good enough to use right now.

So that’s what I’m going to be doing next. I’m going to dive in head first and create a legitimate product that is based on the jQuery Mobile framework. Stay tuned, because it’s gonna be a wild ride.

No responses yet

.NET RESTful APIs? Dial M, for “Martin!”

Jun 08 2010

As I mentioned in a previous post, I have recently started working on iPhone Application development. One of the many ways an application can interact with data is via web services. As a (primarily) .NET developer, I have been looking for a way to create a lightweight RESTful API that will return JSON. One thing is for sure, things like ASMX which use SOAP will not do. So what is a developer to do?

Enter Martin

Martin is a web framework that allows for building REST services in ASP.NET. For a little history, Martin is based off Sinatra, a Ruby framework that does essentially the same thing; saying every method defines a route. A route (URI + Verb) invokes a single method. Martin is essentially built the same way by relying on System.Web.Routing from  .NET 3.5 Service Pack 1. In short you can build your own DSL (domain-specific language) and easily implement a version of it into your currently existing ASP.NET or ASP.NET MVC web site.

Implementing Martin

While, unfortunately, there is no actual documentation, the code mostly explains itself as long as you understand the basics of HTTP Verbs and URL Routing. The implementation process of the Martin framework is extremely simple, and takes only a few steps.

Global.asax:

protected void Application_Start(object sender, EventArgs e)
{
    Config.AddAction<DateAction>("Show/CurrentDate");
    Config.AddAction<PostDateAction>("Show/CurrentDateWithPost");
}

The URI “http://example.com/Show/CurrentDate” points to the class DateAction. This class has a single method that reflects one of four HTTP Verbs (Get, Post, Put, Delete), and will either return pure text, XML, or JSON. As a bonus, you can return custom objects in XML and JSON format, no manual writing involved! For example DateAction.cs would look like…

public class DateAction : ActionBase
{
    public override IResponse Get()
    {
        return Text(DateTime.Now.ToString()));
    }
}

So in short “http://example.com/Show/CurrentDate” is an HTTP Get that will return just the text of the current date and time. That said, there will be times you want to do either an HTTP POST and/or pass variable into your web service. For this I have created the example PostDateAction:

public class PostDateAction : ActionBase
{
    public override IResponse Post()
    {
        if (!String.IsNullOrEmpty(ValueOf<String>("name")))
        {
            return Text(string.Format("The current date is {0}, {1}.", DateTime.Now, ValueOf<String>("name")));
        }
        return Text(string.Format("The current date is {0}.", DateTime.Now));
   }
}

In this example, we can optionally pass in the variable “name.” In order to get the value of that parameter, we use the ValueOf(String key) function to retrieve the passed in name, and do something with it. Also, the ActionBase class also allows you to access RouteData or Request items that might be part of the request.


Unfortunately, there is not much documentation on this framework; with that said, it is written very well and can easily be interpreted and implemented. I was able to get a working demonstration of various HTTP Verbs and return types in a matter of 5-10 minutes.

The Martin framework can be downloaded from github, as it was recently moved there from Google Code. Let both the author and me know what you think.

In the mean time, happy coding!

Source: http://github.com/thegrubbsian/Martin

2 responses so far

Adding to My Repertoire – iPhone Development

May 29 2010

On a personal note, as of June 4th, I will officially be graduated from college. Five years has been quite the learning experience, and I will forever be grateful to those that gave me the opportunities to find my calling in web/mobile development.

Two weeks ago I started talking Stanfords CS193P course – iPhone Application Development. After learning the basics of Objective-C, I’ve found that I’ve really enjoyed it! Maybe it’s because it’s new, exciting, and different but that’s all the more reason to give it a shot. The mobile world is growing faster and faster as everyone starts to own smartphones, be it Blackberry, iPhone, Android, or webOS. To not try and get a piece of the pie would be irresponsible on my part as a developer.

Over the next couple of months, I’ll be adding another topic to my blogging, (as you might have guessed) iPhone development. During this summer I am going to try and make it a personal goal to become much better at it while also trying to take on some freelance work to help.

As always, more to come!

No responses yet

More On The Way – I Promise!

May 08 2010

Hey guys,

Between work, school, and my upcoming graduation I haven’t had much time to post stuff. I’m in the middle of writing two articles and one jQuery plugin, so stay tuned!

No responses yet

Stretching Your Layout With jQuery.fn.stretch()

Apr 08 2010

There are times where you need to make certain elements in your web sites or applications the same height. The primary example that comes to mind is a multi-column layout; most times your columns don’t line up just right, and then your design doesn’t look just right. I ran into this with a few recent web applications that I wrote, and instead of trying to just take a best guess at it, I did what any sensible person would do: write a plugin for it!

Say hello to $.stretch():

DownloadDevelopment (281b) Example

This simple plugin allows you to take multiple DOM elements on your page, and will set their heights to the height of longest element.

// Examples of uses for jQuery.fn.stretch()
$("div.container > div").stretch(); // Elongates all div elements in #container
$("div.column").stretch().css("margin", "0 5px"); // Elongates all columns and adds a left and right margin of 5 pixels

This comes in handy, especially with blogs (as they typically have multi column layouts) but is great anywhere you need to line up your elements more precisely. Just a little small thing that might make your life easier.

Back to work, Code Monkey!

No responses yet

Grabbing Text With jQuery.fn.innerText

Mar 20 2010

Lately I’ve been spending a lot of time helping people out on jQuery’s IRC as a way to keep myself sharp and help others out, both beginners and vets alike. That said, there has been one problem that has come up on more than one occasion, grabbing the text inside an element, but not from the element’s children. After helping multiple people out with this issue, I decided it would be best to post a generalized solution here.

Let’s say, for example, you have the following bit of HTML:

<element>
    Some arbitrary text
    <child-element> Even more arbitrary text!</child-element>
</element>
<element>
    Some arbitrary text
    <child-element> Even more arbitrary text!</child-element>
</element>

What you want is an array that have the values “Some arbitrary text” for its values. The easiest solution in jQuery for this would be to utilize the jQuery map function:

var textArray =
    $("element").map(function() {
        var clone = $(this).clone();
        clone.children().remove();
        return clone.text();
    });

This allows you to go over every element, and cut out the fat that is the nasty child elements, leaving a squeaky clean text array to everyone’s delight.

An easier, more apt way to do this would be to extend jQuery and make it so you can do something like: $(“element”).innerText(); Thankfully we can do that!

// Author: Josh Dean
// Purpose: Grab inner text of an element, but not it's child
// elements or the child elements' text.
// Example usages:
//
// $("ul#stats > li").innerText();
// <ul id="stats"><li>Grabs this text <span>...</span></li></ul>
// $("div.foo > p").innerText();
// <div class="foo"><p>Grabs this text too! <strong>...</strong></p></div>

jQuery.fn.innerText= function() {
    return $(this).map(function() {
        var clone = $(this).clone();
        clone.children().remove();
        return clone.text();
    }).get();
}

Hopefully this helps out the jQuery users who have been asking me and others for a solution!

No responses yet

IE7, display: table, And The Work Around

Feb 24 2010

Well, I finally did it, I set up a blog. Someplace where I could share both what I’m working on, and various solutions to everyday programming problems. With that in mind, why don’t we just get straight down to business?

Lately I’ve been working on a fancy navigation bar for the company I currently work for.  The code of the navigation is pretty familiar…

<div id="outer">
    <div id="inner">
        <ul id="menu">
            <li>Application  One</li>
            <li>Application Two </li>
            <li>Application Three </li>
        </ul>
    </div>
</div>

Pretty simple, right? However, the problem is this list needs to be centered. Since the <div> and the <ul> take up as much width as possible, it is impossible to just slap “margin: auto;” or “text-align: center;” in the CSS file. In modern web browsers, this isn’t a problem. All you need is the following CSS:

ul#menu
{
    display: table;
    margin: 0 auto;
}

This works since “display: table;” tricks the <ul> into acting like a table and shrink wrapping the entire width to the width of it’s contents, and then it’s easily centered. The problem comes to IE7 (and other versions of IE if you support them) as there is no support for the table value for the display property. Thankfully there is a universal solution that works cross-browser.

div#outer
{
    overflow-x: auto;
}
div#inner
{
    float: left;
    left: 50%;
    position: relative;
}
ul#menu
{
    left:-50%;
    position: relative;
}

Presto chango, you have yourself a centered navigation bar! This solution pushes the <div> to the middle and then tugs your <ul> to the middle of the page.

No responses yet