Rapid Development Group

Building a flexible layout with jQuery splitters and accordions

Jonathan — Mon, 02 Jan 2012 23:29:14 +0000

This is part 1 of a series: The Learning jQuery code browser. This article series explores the construction of the code browser tool that accompanies the book Learning jQuery, Third Edition.

The first challenge in building the code browser was finding a way to present all of the information required simultaneously. We need to be able to see the JavaScript code side-by-side with the finished product, while at the same time having easy access to the associated HTML and CSS for reference. In addition, we need controls for navigating among code samples easily.

The finished product uses a combination of accordion and splitter widgets to accomplish this.

A combination of HTML, CSS, and JavaScript is needed to put this together. First, the HTML.



  
    
    Learning jQuery Code Listing Browser

    
    
    
    
    
    

    
  
  
    
      
        Learning jQuery, Third Edition
        Chapter
        

        Code Listing
        Prev
        
        Next
      
      
        
          
            HTML
            
            CSS
            
            JavaScript

This HTML 5 code sets up divisions for the navigation area, the left pane, and the right pane. Within the left pane we have subdivisions for HTML, CSS, and JavaScript code.

There is obviously a significant amount of CSS involved here. The following is the portion of the CSS required for the basic page structure.

#navigation {
  padding: 10px 0;
  height: 20px;
  background-color: #000;
  color: #fff;
}

#left-pane {
  width: 250px;
}
#right-pane {
}

#splitter {
  clear: left;
  height: 100%;
  overflow: hidden;
}
#right-pane > div {
  padding-left: 20px;
  height: 100%;
}
#result {
  width: 100%;
  height: 100%;
  border: none;
}

With this HTML and CSS in place, we have a start at our page layout. There is still more work to do in styling the page, but in this instance we won’t care about graceful degradation for users without JavaScript enabled, since all of the code examples rely on JavaScript anyway. So, we’ll leave the rest of the styling work to the jQuery plugins we’ve been using.

The accordion widget

An accordion widget is pretty simple. we simply need to expand one item while collapsing the others. A basic approach is easy to outline:

$(document).ready(function() {
  $('#left-pane h3').click(function() {
    $('#left-pane div:visible').slideUp();
    $(this).next().slideDown();
  });
});

This gets the very rudimentary job done, but there are lots of details left untended. For example:

Setting up the initially-visible item
Gracefully handling clicks on the currently-active item
Keyboard support
Visual feedback that the titles are clickable
Expanding the active item to take up as much vertical space as possible
Various styling enhancements

These are all things we could take care of ourselves, but there’s no need to when the jQuery UI project has done the job for us. The jQuery UI accordion widget is simple to use, and very powerful.

$(document).ready(function() {
  $('#left-pane').accordion({
    fillSpace: true,
    active: 2
  });
]);

A call to .accordion() does almost all the work. The only parameters we have to provide are fillSpace, which makes sure the accordion uses all the vertical space available to it, and active, which lets us tell the widget to reveal the third item (the one containing JavaScript code) initially and to hide the other two.

The splitter widget

The accordion conserves vertical space in the left column. We also want to give the user flexibility, though, in deciding how much of the screen to devote to the source code and how much to the rendered output. A splitter widget will accomplish this.

Again, using a jQuery plugin is much more efficient than trying to write the code ourselves. The jQuery UI project doesn’t have a candidate to try, but Dave Methvin’s splitter plugin will fit the bill nicely.

Again, using the plugin couldn’t be very much simpler.

$(document).ready(function() {
  $('#splitter').splitter({
    type: 'v',
    anchorToWindow: true,
    cursor: 'col-resize'
  });
});

We are using three parameters in our call to .splitter() to reach the desired effect. The type parameter lets us specify that the splitter will run vertically (splitting the content horizontally). The anchorToWindow parameter ensures that the splitter fills up the entire window height, even when the window is resized. Finally, the cursor parameter allows us to choose an appearance for the mouse cursor while it is over the splitter, to give the user extra feedback.

With these two plugins in place and active, users can now switch between the three source code viewing areas at will using the accordion widget, and resize the source code and output areas using the splitter widget. Next up, we’ll be looking at how we populate these areas with real content.

Share/Save

The Learning jQuery code browser

Jonathan — Thu, 29 Dec 2011 22:08:35 +0000

This year, Karl and I completed the third edition of Learning jQuery. We’re very excited about the updates, which bring the book in line with the newest features of the library. We also used this opportunity to take our reader feedback into account. Exercises were added to the end of each chapter. The examples readers found confusing were elaborated on or rewritten. The biggest change, though, related to the structure of the second half of the book and the code examples therein.

Readers liked the first seven chapters of the earlier editions, which build up the basic concepts of the jQuery library. Each uses a self-contained web page, with all the code examples in the chapter relating to that page. In the second half of the book, though, all of the examples referred to the same fictional web site. While this gave a nice “real-world” feel to these examples, in practice readers were confused by multiple chapters requiring the same code base. It was also difficult for readers to view the effect of just one example in isolation from everything else that was going on. In addition, to accurately represent the code to the user, many pages at the end of the chapter needed to be devoted to code listings that were largely repetitive—pages that could instead be used for more explanatory prose.

To remedy this, the second half of the book was completely rewritten. Rather than being structured around concepts such as “tables” and “forms,” the chapters now mirror the structure of the first half of the book, stepping through the basic jQuery building blocks, but this time from a more advances perspective. This approach allowed us once again to use small web pages for each chapter, with all code examples for a chapter working on the same content.

What remained was the problem of handling the large code listings. A code download is provided with the book, so we felt a printed copy of all code was not particularly helpful to the reader. Instead, we wanted a way for the reader to be able to execute and experiment with the code at any stage of its development in a chapter. We also wanted to present this in a visually helpful way.

The result is the Learning jQuery Code Browser. This tool allows readers to view any listing in the book in the context of the rest of the code. They can see exactly which lines of code have changed, view the HTML and CSS the script applies to, and view the result of that code when run against the page.

This tool was built quite quickly, and is hardly a paragon of engineering, but nonetheless readers have found it very useful already. Creating it required work in HTML, CSS, PHP, and JavaScript, including the incorporation of several third-party libraries. This makes it worthy of some study as an example. In an upcoming series of articles, I’ll be breaking down the pieces and parts of the code browser, discussing how each component works. Topics will include:

Building a flexible layout with jQuery splitters and accordions
Combining HTML, CSS, and JavaScript on demand
Simple navigation UI widgets
Managing browser history and the back button
Syntax highlighting with GeSHi
Writing a simple “diff” script to highlight changed lines of code

Share/Save

How to Configure BlackBerry Simulators and MDS on Windows 7 x64

Jonathan Pichot — Wed, 28 Sep 2011 14:41:04 +0000

When building mobile websites, it can still be necessary to test on the BlackBerry mobile platform to ensure wide-spread compatibility. This has become more difficult than it should be, particularly if you’re testing older versions of BlackBerry OS on Windows 7 x64.

BlackBerry releases a separate simulator for each OS release, including minor-versions (ex. 5.0.0.484 and 5.0.0.451 are separate simulators). Also, BlackBerry simulators are strictly Windows-based, so no Mac OS X versions here. (I ran my simulators on Windows 7 Pro x64, running through Parallels 7 on Mac OS X Lion).

What contributes to the difficulty of mobile web testing on older BlackBerry simulators (OS 5 or older) is the need for a BlackBerry Mobile Data Service simulator (MDS). The simulator for the latest version of BlackBerry OS, v7 (I did not test v6), does not need this extra simulator. Here’s what you’ll need (these instructions are specifically for Windows 7 x64):

A BlackBerry Developer Zone account (free). Get one here.
Java JDK 6 (not JDK 7 or greater). Get it here.
BlackBerry Email and MDS Services Simulator Package v4.1.4. Get it here. You’ll need a BlackBerry Developer Zone account.
Any BlackBerry simulator you need to test on (I tested with versions 4.7.0.148 and 5.0.0.419). Get them here. You’ll need a BlackBerry Developer Zone account.

1. Install Java JDK 6. A standard installation is fine.

2. Install the BlackBerry Email and MDS Services Simulator Package.

3. With Windows 7 x64, there are a few changes that you will have to make for MDS to work. If you ran the standard installation, you should find the MDS files here: C:\Program Files (x86)\Research In Motion\BlackBerry Email and MDS Services Simulators 4.1.4. Otherwise, navigate to the folder where you installed MDS. You’ll need to change the user permissions so that your account can write as well as execute files within it. If you know how to do this, you can ignore the detailed instructions below. Once you’ve found the MDS folder, right click it and select ‘Properties’. In the popup, select the ‘Security’ tab (1), then click ‘Edit’ under the list of groups and users (2).

Another popup will open. Select the Users group (1). Below, you’ll see the list of permissions for the Users group. Click ‘Full control’ (2). Click ‘Apply’ (3), then ‘OK’ (4). You may see a few popups asking for permission, click Yes through all of them. You should now be able to edit, write, and execute within the MDS folder.

4. Batch file tokens in Windows 7 are different then those in previous versions of Windows. Because of this, we’ll have to edit the run.bat file in the MDS folder. You should be able to find the file here: C:\Program Files (x86)\Research In Motion\BlackBerry Email and MDS Services Simulators 4.1.4\MDS\run.bat. When you find it, right click on the file, and select edit. Notepad, or your favorite text editor, should open. You should see text that looks like this (highlighting is mine):

@echo offcall
setBMDSEnv
if ["%JAVA_HOME%"] == [""] goto noJavaHomeSet
start cmd /v:on /c "%JAVA_HOME%\bin\java" -classpath !BMDS_CLASSPATH!;!BMDS_CLASSPATH2! -Xmx512M -DKeystore.Password=password net.rim.application.ipproxyservice.IPProxyServiceApplication -log.console.dump
goto end
:noJavaHomeSet
start cmd /v:on /c java -classpath !BMDS_CLASSPATH!;!BMDS_CLASSPATH2! -Xmx512M -DKeystore.Password=password net.rim.application.ipproxyservice.IPProxyServiceApplication -log.console.dump
goto end
:end

You’ll want to replace both instances of

!BMDS_CLASSPATH!;!BMDS_CLASSPATH2!

with

%BMDS_CLASSPATH%;%BMDS_CLASSPATH2%

Save the file, overriding the old version, and exit Notepad.

Now try running MDS by navigating to the Start menu and finding MDS.

A Command Prompt should open and begin booting up the MDS server. Once MDS is ready, you should see this:

To test that the MDS server is in fact up and running and is connected to the Internet, open your browser, and navigate to localhost:8080.

5. Now that MDS is working, you should be able to connect to the internet through a simulator. Run the simulator you need to test on, and navigate to the browser. You should now be connected to the internet.

HOW TO RESET THE SIMULATOR: To reset the simulator in the event you get stuck on an error (as I did), simply delete the configuration files located at: C:\Users\USER\net\rim. The ‘Reset’ menu item in the ‘Files’ dropdown never worked for me.

Share/Save

Music: Own vs. Stream

Mike — Tue, 23 Aug 2011 01:26:03 +0000

To begin, I’m someone who loves music. And while there are some bands I can never grow tired of, I really like discovering new music and keeping up with the latest trends in a variety of genres. I have a vast catalog of music on my computer(s) that amounts to around 11,000 songs. 30+ days according to iTunes. I have been wrestling with the idea of music ownership for a while now and thought I would write up a post discussing the direction of music to streaming services, possibly moving away from owning a copy on ones hard drive.

There isn’t any doubt that with the dawn of Spotify in the U.S. and the appearance of Rdio in the last year that the trend is moving toward streaming. My biggest hurdle… does subscribing to one of these services make my music collection amounting to thousands of dollars worth pretty much nothing? That’s a tough pill to swallow. But I’m not sure I have a choice. On average I would say I buy 3 or 4 albums a month. I usually try and wait for good deals on Amazon, but don’t always. So let’s say I spend roughly $25 / month on music. This typically satisfies my craving for new music, but not always. And I rarely buy just one song which means I rarely own the latest pop hit. So where am I going with this? The typical all access streaming service costs about $10 / month, and gives you access to just about everything, even the guilty pleasures you wouldn’t dare spend your hard earned money on. Seems as though moving to a service like this is a no brainer.

A common question when it comes to streaming music is access. Meaning will I be able to play my music wherever I am, even if there is no internet access. The simple answer is yes. These streaming services have a number of pricing tiers, and while about $5 / month gets you unlimited streaming, $10 / month provides you with the ability to download music and play when your offline (using approved applications and devices). So if you own a smart phone you are good to go as that will usually allow you to play on most modern music playing devices.

So what are the down sides? There are a few. If your someone who still has a 5 disc carousel in the living room, and relies on the CD player in the car you pretty much out of luck. You can’t burn any of this music to a disc, at least not legally. Another down side is the player. I personally like iTunes as a media player, and there are other good ones out there as well. With these services you typically won’t be able to use this familiar software, which means the software provided needs to be really good since it will be all you can use. If you regularly use AirPlay as a means of broadcasting audio, not having iTunes is a real problem. There are alternatives though. You can purchase for about $25 an application called AirFoil. This does a really slick job of replacing the AirPlay feature within iTunes, as a matter of fact I think it may be better. So there is a little start up cost but this makes up for the money you’ll likely save not buying albums.

Music as a service likely won’t interest someone who is content listening to their existing collection and seldom buys new music. So going this route isn’t for everyone, and I don’t think buying music outright will go away any time soon. An audiophile may not be interested in this approach either as the music is typically 128 and up bitrate quality. It isn’t loss-less, though technically neither are compact discs. Still, shrinking 800 Mb down to 80 is going to sacrifice some music quality. While I can tell a difference it isn’t too big of an issue. Plus a keen ear will only be able to hear a difference on really high end speakers. Probably 95+% of listeners have average speakers or headphones, so this won’t matter. Additionally I expect the quality of these services to only increase as time goes on.

Listeners with a unique taste in music not found in most stores will still have options if they can’t find their interests online. Services like Spotify take your existing purchased library and integrates the music into the provided player. This is a nice feature, though not all services do this.

I expect there to be a lot of development in this area of technology in the upcoming year. There are small inconveniences with the various services that will hopefully be worked out. As of writing this article only Rdio has an iPad app, and devices like Apple TV do not natively support browsing and playing these collections. You do have the option of Air Play as I mentioned previously which is a big help for those with an iPad, Laptop, and in some cases a smart phone. Apple has iCloud coming out around the corner. This makes use of your purchased music, and Apple has a lot of interest in selling albums via iTunes at fairly high rates, so I don’t know how much cooperation there will be from them. But they have surprised me before.

Lastly, I’ll briefly touch on the music industry. These kind of services will certainly cut down on pirated music which is a big plus. Though the amount the artists are receiving is drastically smaller. A while back I saw this info graphic which pretty much says it all. Bands trying to make it will need a fair amount of plays to be able to support themselves. Though, I will say that in general I am a fan of the free market when it comes to these kind of things and I think the best bands will prevail. It just means that some people who may have been able to get by before may have to get real jobs that the rest of us.

I have personally tried a few of these services. I will be comparing a few of these services in an upcoming post.

Share/Save

Redirecting for a mobile site

Mike — Sat, 20 Aug 2011 15:16:53 +0000

An extremely common requirement for a website is to redirect to an alternative site or page when visiting on a mobile application. So how does one quickly implement a proven solution without reinventing the wheel and wondering if it even does everything it is supposed to? I recently decided the last time I needed to implement this feature that I would make a simple portable solution available here for others to use.

What I came up with is a simple php class that will handle everything. You just need to include some code referencing this class on your index page as well as the main page of your mobile site. Here is an example index page…

homepage = 'index.php';
$redirect->mobile_redirect = 'mobile.php';
$redirect->detect();
?>
INDEX page
device;
if ($redirect->device != 'normal') {
print '
View Mobile Site';
}
?>

If you want to force the user into mobile mode you can pass the mobi querystring parameter. The same can be done to force the user back into regular mode (or disable the mobile version) by using the nomobi parameter. Once a page has been initialized with one version or another it will stay that way until it is forced back into another mode.

homepage = 'index.php';
$redirect->mobile_redirect = 'mobile.php';
$redirect->detect();
?>
MOBILE page
device;
print '
Disable Mobile Site';
?>

You can find the code here on GitHub: https://github.com/mbopp/PHP-Mobile-Redirect The only file you are required to use is the .class.php file.

Let me know if you see ways to improve this.

Share/Save

Rapid Development Group Adds New Developers

Brett — Mon, 02 May 2011 18:42:19 +0000

It’s a big day for our company. Today marks the start of our third year together, as well as the addition two new RDG developers. Jonathan Pichot and Ross Hunter both have joined Rapid Development Group, bringing additional Drupal development expertise to our team. Jonathan has been building websites on the LAMP stack for over six years and has experience with several CMS frameworks including Drupal, WordPress, and Joomla. Jonathan is passionate about clean and accessible design, using industry best practices and open source software. Ross honed his developer chops at Grand Valley State University’s School of Computing & Information Systems and as a freelance Drupal developer.

The addition of Jonathan and Ross to the RDG development team of Mike Bopp, Jonathan Chaffer, Sam Oltz and Brett Chaffer further solidifies RDG’s position as the leading Drupal development firm in West Michigan.

Rapid Development Group is a lightweight and nimble web development team focused on high-quality implementations of complex web sites, content-managed mobile apps and web applications. Rapid Development Group actively serves over 50 West Michigan companies and non-profit organizations.

Share/Save

Reference Application Data files when creating a Titanium Desktop Application

Mike — Wed, 06 Apr 2011 19:39:17 +0000

As part of a recent project we were tasked with creating a desktop application in addition to an iPad application. As we have in the past we used Appcelerator Titanium as the platform for building these applications. A project with a lot of potential, but it currently has very poor documentation. In short Titanium allows the development of iOS and desktop application with the use of HTML and Javascript.

A mac or iOS application has a Application Data directory stored (in the Library directory on a mac). This is really the only place one has the ability to write files within the application being developed. However, when developing a page in javascript (and generated HTML) there isn’t a documented way to reference one of these files. This is a problem for anyone who wants to update their application via the web.

After digging in the Titanium Desktop SDK we located the solution. The location (src attribute for an image) needs to be prefixed with file:///. This is similar to using the app:// prefix which refers to the location of the application resources itself.

So for an example, an image tag would look like the following…

There may be other undocumented prefixes as well, but this get’s us where we need to be. If anyone else has any similar undocumented hints leave a comment.

Share/Save

DrupalCon Chicago

Hoagy — Mon, 07 Mar 2011 14:55:00 +0000

So the guys are off to something called DrupalCon in Chicago for a few days, leaving me to hold down the fort. Can you believe that? I mean, what is Chicago known for anyway? In my book, it’s three things: Meat, meat and more meat.

Here’s a bright idea… howsabout you send the real expert to Chicago, and you guys stay home and type on your fancy-pants computer-dealies and build your little websites and iPhone apps? I’ll even drop by your little geek-jamboree, just to keep things nice and legit for the IRS.

I am so out of here when I’m old enough to drive…

Share/Save

Adding “hidden” checkbox to node menu edit fieldgroup

Mike — Tue, 04 Jan 2011 14:39:17 +0000

Quick tip on showing the one menu field not displayed in the node edit form. If you want to display a field for hiding a menu item for a particular node you need to create a form_alter hook. In this hook you simply create a field named “hidden” using the standard form api underneath the “menu” fieldgroup.

And that’s it. No submit handler needs to be added or changed. The existing submit handler already handles saving the hidden field if it is available.

/**
* Implementation of hook_form_alter
*/
function custom_menu_form_alter(&$form, &$form_state, $form_id) {
 if (isset($form['#node']) && $form['#node->type .'_node_form' == $form_id) {

 $item = $form['#node']->menu;
 $form['menu']['hidden'] = array(
 '#type' => 'checkbox',
 '#title' => t('Hidden'),
 '#default_value' => $item['hidden'],
 '#description' => t('Menu items that are hidden will not be listed in any menu.'),
 );
 }  
}

Share/Save

IE7 HREF Normalization and AJAX

Jonathan — Wed, 18 Aug 2010 16:21:46 +0000

I have often relied on jQuery’s awesome cross-browser compatibility tricks. One of these is fixing an inconsistency with how link HREFs are reported in IE compared to other browsers. In most browsers, when asking for the HREF of a link, JavaScript sees what is actually in the document source. In IE, however, the HREF attribute is “normalized” into a fully-qualified URL. This can be a problem.

Generally, jQuery fixes this for you when you use the .attr() method to retrieve the “href” attribute. The returned value is whatever is in the source code, not the normalized URL, regardless of browser. Success!

Unfortunately, I discovered today that is not always the case. In this specific scenario the normalization still happens:

Open IE7.
Use AJAX to load some content into the page that contains links.
Examine the link HREF using .attr(‘href’).
See that the result is a normalized URL. Oops.

I haven’t yet performed reductions to see if the problem is the AJAX load or the DOM insertion, but it only affects IE7, not IE8. At this point, my workaround is to do the regexes manually to extract the part of the HREF I want, rather than relying on jQuery. Clumsy, but it works!

Share/Save