Hi, my name is Timo Ernst and I am a web expert.

Posts Tagged ‘In English’

Me, my NEW Hengedock and why it’s better now

Posted on: December 10th, 2010 by Timo

In my previous review on the Hengedock for the 13″ Apple Macbook Pro, I wrote that I couldn’t recommend it due to some problems with cables and scuffs on the surface. Hengedock now sent me the new, 2nd generation of the dock, which comes with some improvements. The package arrived today after only 3 days from the US here to Germany (Wow, that was fast! I had to pay 35 EUR toll fee though – ouch!), so let’s have a look at the new, upgraded version.

As a reminder, the following points were criticized by me for the 1st generation of the dock:

  • Ethernet cable clip issue.
  • The screws that hold the cables leave a mark on the heads.
  • Power supply cable of the Apple 27″ Cinema Display won’t fit.
  • Audio-extension lets the Macbook think that headphones are plugged in.
  • You cannot turn on the Macbook while it’s in the dock.
  • All cables are fixed through screws. No way to easily (un-)plug them.
  • Plugging the Macbook in and out will leave scuffs on the its surface.

Package content

So, before I go into detail on these points, let’s have a look at the packaging, where almost nothing has changed. The wrapping looks the same. The inside consists of the dock, the manual, screws as well as a screwdriver and extension cables (2x usb, fire-wire, ethernet and audio).

Two new surprises are part of the improvements made to this version of the dock. One is a special ethernet cable, which has the usual clip on one side, and none on the other side (see picture below). If you can, you should use this extension in order to connect your Macbook to the network. If you don’t and use an ordinary cable, you’ll run in danger of your laptop getting stuck. The cable is not very short, but your ethernet port definitely shouldn’t be to far away from your desk. I had to break off a clip at the head of one of my 10m ethernet cables in order to reach my desk – and no, I don’t like wi-fi ;-) . However, it’s quite nice that this special ethernet cable is included to the package now.

Besides the ethernet cable, there was another interesting accessory in the package: Three adapters (called “MagSafe Adapter Tools“) which finally make it possible that Apple Cinema Display users can attach their power supply cables to the dock, so you can leave your original power supply adapter in your bag. Pretty nice. However, it took me quite some minutes in order to understand how to use these adapters since the manual is not very precise here. You’ll have to first plug the power supply adapter into the Hengedock adapter tool from the side and then attach it directly to the dock by fixing it with a screw. You might have to try a few times in order to get the right position for it so that the Macbook’s power supply port perfectly connects to the adapter. Attaching the adapter tool first to the Macbook and then sliding the whole thing into the dock will not work.

What’s really sad about these MagSafe Adapter Tools is that you cannot purchase these alone without buying a whole new 2nd-gen dock:

“Currently the MagSafe Adapter tool is not available to purchase separately – it comes included with all of the new generation docks with which it is compatible.”

For 1st-gen owners, this is really bad news.

Installation

All “ordinary” cables can be attached to the dock as usual: First you connect a cable to the Macbook, then you slide it back into the dock. Finally, fix the cable head with a screw. Then, redo the same again for all other cables one-by-one. This way you can be sure that all the cables are correctly in touch with the Macbook ports. However, the issue with the (circular) marks on the cable heads still exists, as you can see on the picture below. The mark isn’t bad. It’s just cosmetic, but still, I’d prefer screws with some rubber on their tip so none of the cable heads get “damaged”.

Regarding the issue on the audio extension I wrote about in my last post, it came to my mind that you can easily choose the source and output of all audio signals through the Mac OS system preferences. Thus, you could simply attach the audio extension cable, which is delivered together with the Hengedock, to the Macbook and then choose in software where your sound signal should be delivered to.

One thing I forgot to mention in my last post was that if you often use the SD card slot, you’ll have a problem. As far as I can see, there is no easy way of getting a SD card into the Macbook while it’s in the dock (or am I missing something here?). You’d have to slide the laptop out, push in the SD card, use the Macbook with the built-in display and then put it back to the dock when you’re done. Alternatively, you could also lift the whole thing, push in the SD card though a slit on the bottom and then gently put it back on the desk. However, both solutions aren’t optimal I think. Some kind of SD extension would be really useful at this point since I don’t like moving the Macbook while it’s turned on (not good for the harddrive).

With this setup, all cables are fixed into the dock. If you want to remove any of them now, you must loose the according screw and then unplug the cable. Reverse the procedure to put the cable back in. This concept annoys me sometimes a bit. A smarter solution where I can more easily unplug cables without having to touch a screwdriver would be welcome here. However, since I don’t move the cables to often any more (thanks to the spare MagSafe adapter that I have now), this is no big deal.

The dock

Having a look at the dock itself, I can say that not much has changed. The upper, front and back is the same as the 1st generation version. Only the bottom part got a slight modification. Instead of 4 single rubber feet, the new dock has 2 slim rubber lines. I don’t know why Hengedock changed this. Personally, I think that the 4 single stands give the whole dock more stability. The new solution tends to be a little more “shaky” but it’s no big deal as long as you don’t live in a zone under earthquake danger.

Does the dock scratch the Macbook’s surface?

Well, as I mentioned in my previous post, the dock leaves some scuffs on the Macbook’s surface which can be easily removed with a damp cloth. That’s what I observed after using the 1st-gen dock for almost a month.
Now, with the new 2nd-gen version, I don’t see any scuffs after about 1 week of usage. Ok, I didn’t remove the Macbook very often the last days, but there is not the slightest bit of scuffs so far. I can’t exactly explain why though. The material the dock’s made of seems to be the same. Maybe I learned to (un-)plug the Macbook a little more gently? I don’t know.

Does the Macbook overheat while it’s in the dock?

I once read in a forum that some people are concerned that the Macbook could overheat since it’s closed all the time while in use. At this point, I can definitely say: No, it will not. Using the Macbook in close state is part of Apple’s design. The laptop sucks in air from the keyboard area and blows it out on the back. There is no need to be worried. So far I didn’t have any overheating issues with my Macbook/Hengedock combo and I often push the poor device’s CPU to the limit :-)

Conclusion

So, with the new 2nd generation of Hengedock, would I recommend it?

Well, it depends. If you already own a 1st generation dock, the upgrade probably isn’t worth it. The most important changes are the new accessories (e.g. MagSafe Adapter Tool) and that’s it.

If you don’t own one yet, go and get it as long as:

  • you get the 2nd generation version.
  • you can live with cleaning the scuffs from time to time (if they occur at all!).
  • you don’t mind pulling the Macbook out of the dock in order to turn it on (that’s in the nature of a vertical docking solution).
  • you don’t need the SD card slot on a regular basis.
  • you won’t have to remove and attach the cables very often.

Besides these points I can recommend the dock now if you need a solid docking solution for your Macbook. The changes to the prior version are marginal but they totally make sense.

Wishlist

For the future, there are some points that I would like to see for Hengedocks:

  • The MagSafe adapter tool should be available for purchase separately.
  • The inner part of the dock should be covered with some soft texture so no scuffs occur.
  • The screws should have a small piece of rubber at their tip. That way, no marks will occur on the cable heads. Or even better: No screws at all so the cables can be attached and removed more easily and faster.
  • Some kind of extension for the SD card slot would be great so I won’t have to lift the whole dock whenever I need to put in a memory card in there.
  • A dock completely made of aluminium would be nifty :-) .
  • A horizontal docking solution so I can use the Macbook in “open” state. That way I can use its internal display as an addition to my external monitor and I can reach the power on/off button without removing it from the dock (similar to the Thinkpad docking solutions (see picture below)).

Finally, I show you a picture of my desk. Looks quite tidy now… besides the 5472456 cables… *sigh* :-)

TwitterFacebookShare

Me, my Hengedock and why I cannot recommend it

Posted on: November 15th, 2010 by Timo

I own a 13″ Macbook Pro (mid 2009er version) and from the first day since I have it, I can say without alacrity that it’s definitely the best notebook that I ever had but there has always been one thing that annoyed me when I used it on an external display in “desktop mode” (with the macbook closed): Whenever I wanted to use just the laptop itself in with the build-in display, I had to unplug all the cables for display port, usb (x2), power and sound. That was really annoying especially if I wanted to plug it back to the external display. Since then, I was searching for a decent docking solution where I could just put in the macbook and take it out without having to fight with a horde of cables. This search lead me to Hengedocks. Now, after almost a month of usage, I must say that I am pretty disappointed.

Update: Make sure you check out my NEW review on the 2nd generation of Hengedock after reading this.

You might have heard about Hengedocks before. They are often mentioned in various Mac forums and their look definitely fits well to Apple hardware. The product videos on their own website suggests high quality. On top of that, Hengedocks seems to have heavy issues delivering the docks due to high demand. If so many people want it, they must be good! – That’s at least what I thought. So I tried to buy one.

After being on the waiting list for almost forever, I finally succeeded in purchasing one in England through the Amazon store. Seems like as if some clever company bought some of the docks and sells them now in the UK. So I ordered one and only after a few days it arrived here in Germany pretty quickly.

Installation and first impression

There was not much inside the package. Just the dock, a few screws, a special screwdriver, extension cables and the manual. Installation also is pretty easy. You basically have to plug-in a cable to your Macbook, then put the laptop into the dock, make sure it’s aligned correctly and then you fix the cable with one of the screws (which can leave a mark on the cable heads). Then you pull out the Macbook and you do the same again with the rest of the cables – one by one. This procedure seems to be important so that the Macbook is always in touch with the cable ports when you slide it into the dock. The manual also points out that it is vital for the health of both, the dock as well as the notebook, to not use force. If you ever have to push or pull hard at some point, you’re doing something wrong.

One important thing regarding the cables is that you must break off the clip at the ethernet network cable head, as described on the Hengedock website. If you don’t and you plug the Macbook into the dock, there is a chance that it will get stuck.

Another thing that kinda annoyed me is the incompatibility with the power supply cable of Apple’s 27″ Cinema Display. I was so glad when I bought the display believing that it could replace the standalone power supply cable of the Macbook but unfortunately it doesn’t fit into the dock. So I had to use the old original power supply adapter + cable from the Macbook. Disappointing, isn’t it?
For the new upcoming models of the docks, it seems like there are some adapters included to the package which should solve the problem. However, I don’t have one and to be honest: I don’t feel like importing a piece of plastic worth around 5 bucks from the US here to Germany.

Update: I asked Hengedock support if they separately sell those adapters. They don’t:

“Currently the MagSafe Adapter tool is not available to purchase separately – it comes included with all of the new generation docks with which it is compatible.”

After installing all the cables everything seemed to look alright, so I wanted to turn on the machine, but wait. How do I do that with the closed Macbook standing inside the dock? Simple answer: You can’t. So I had to pull it back out, open it up, turn it on quickly, close it (so it doesn’t go into standby mode) and then gently put it back into the dock. I could already see myself doing that at least once a day since I always completely turn off my Macbook during the night. For daytime, I simply wake up the computer from standby by pressing a random button on the keyboard.

After some seconds, Mac OS boots and I can see the desktop on my external display. Network also works and the power supply cable led turns red which means that it’s charging the battery now, so everything seems to be ok.

Four weeks later

Before I go into detail on the dock itself, you might find it interesting that I still haven’t head a word from my reservation on the original Hengedock website. I’m so glad that I ordered on Amazon since I really hate waiting.
Update: Now, about 2 months later, my pre-ordered Hengedock is available. Bit to late.

However, after using the dock for a while now, I can say that I am definitely a bit disappointed. The look is good and having a dock for my Macbook is definitely a relief, but there are more disadvantages to it than I initially thought.

First, as described before, installation is not as smooth as it could be:

  • Cinema Display power supply cable head doesn’t fit.
  • I had to destroy one of my ethernet cable heads in order to use the dock T.T – Not funny if you do that to long and thus expensive cables.
  • The screws that fix the cables into the dock leave a mark on the cable heads.
  • You cannot turn on the Macbook while it’s in the dock.

Another issue that I want to mention is audio support for headphones. There are extensions delivered with the Hengedock that you can plug into the Macbook’s audio port but they’re basically useless because if you do so, the internal speakers will stop working (and so do the external speakers of my Cinema Display which get their audio signal through USB) because the Macbook thinks that there are headphones attached to it – but actually there isn’t. It’s only the extension.
So, regarding audio, you have the choice: Either you simply cannot use headphones (which is the choice I took for the moment) or you’ll have to get some external speakers, and attach these together with your headphone to the audio extension through an Y-cable. That way, you have sound through both – speaker AND headphones.
As an alternative you could also use USB or Bluetooth-headphones.
Using the Apple Cinema Display together with “classic” audio-port based Headphones will not work though (at least, I see no way how).
Update: I forgot that you can actually choose the source and output for audio signal in Mac OS preferences :-)

Well, so after getting over these initial problems, I observed another critical issue. According to Hengedock, the dock is not supposed to scratch the Macbook but they do leave some marks to the surface. See the picture above where the red circles mark the parts where these marks occur.

These marks aren’t bad. Until now, I was able to polish them away with a soft towel but what happens after 2 or more years of usage? I can’t believe that this is good for the surface of the Macbook. The dock itself simply seems to be to tight and its plastic casing is just to hard. So whenever I put the laptop out or into the dock, I can already hear how it’s scratching. I don’t know how others think about this but: I don’t like it. Why didn’t they line in the inside with some soft texture? That would’ve made it easier to plug and unplug and there were no marks to the surface.

Update: As pointed out by Henge Docks CEO Matthew Vroom, the dock is made of a material which is softer than the Macbook’s aluminium. This makes it impossible that the dock can actually scratch the notebook. So, apparently actually the opposite seems to apply: The Macbook scratches the dock. This leaves some marks on the laptop’s surface, which can be removed with a wet towel (a dry one didn’t work well for me).

In a nutshell

To sum it up, I cannot recommend the Hengedock as a good docking solution for a Macbook Pro (13″). It looks good yes and you won’t have to manually (un-)plug the cables whenever you want to move the laptop but that’s all.

  • The problems with the cables (network clip, power supply doesn’t fit, no audio for headphones…) are simply annoying.
  • The fact that I have to unplug and open up the Macbook whenever I want to turn it on, annoys me even more (yes one could argue if this is Apple’s design flaw or Hengedock’s fault but still: It’s just annoying).
  • Basically you need all the cables that you fixed to the dock twice. Want to take the power supply adapter with you for travel? Forget it. Either you open the screw and take it out of your dock (have fun putting it back) or you simply buy a second one (they’re really expensive). This problem applies to ALL other cables as well.
  • The marks that occur on the Macbook’s surface are annoying.

    • Somehow I can’t get rid of the feeling that Hengedock started with a good idea but is still in some kind of “beta phase” due to some basic design flaws. Too bad that there is no real alternative.

    Update: Make sure you check out my NEW review on the 2nd generation of Hengedock after reading this.

    TwitterFacebookShare

Apple’s cheap trick on Macbook AIR battery runtime tests

Posted on: November 8th, 2010 by Timo

I am sure, you’ve all heard about Apple’s recent release of the new Macbook AIR which comes without Flash preinstalled as well as their claims of longer battery lifetime without Adobe’s RIA platform. The computer manufacturer even announced a maximum of 5-7 hours runtime based on some new series of tests they made by browsing the web without the Flash plugin installed.

In fact though, these tests are not objective. Without Flash, no animated ads are being displayed while you surf the web which probably cause most CPU load (besides video playback).

I actually agree with Adobe’s CTO Kevin Lynch who said in an interview (see below) that replacing all Flash-ads with HTML5 canvas content would not increase battery life.

Animation => CPU-load

It’s in the nature of animations to cause higher CPU-load than static content, no matter if it is being provided by Flash or HTML5 canvas.
Actually, HTML5 canvas animations require more CPU power than Flash animations do, no matter on which browser (even on fast Webkit-based ones).

If you don’t believe, I recommend to read my recent thesis about RIA performance analysis.
Section 2.3.2.5 proofs that HTML5 canvas animation is currently inferior to Flash-based animation performance which implies that more CPU power is required to reach an equal fps rate which again leads to higher energy drain.

Apple’s smart. Really smart.

If people would only take off their Apple-glasses they would realize that the daily experience with Flash-based animations (which often tend to cause high CPU load) probably influences their attitude towards Flash.

Whenever we see Flash-based content like ads or video, our computer’s CPU requires more energy. That shortens battery lifetime, often forces the fan to run faster. This experience makes us think: Flash=bad, but it isn’t. It’s not McDonald’s fault that people are getting fatter and fatter. Burgers and fries simply are fat but people still want them.

Apple’s trick to run their battery-test without Flash returns false results. It’s no wonder that battery lifetime goes up without Flash since animations usually cause most CPU load while surfing the web (besides video playback).
If they’d done the test correctly, they should’ve converted all Flash-content to HTML5 and then re-run the test.

I am not an Adobe/Flash fanboy.

I own and love many Apple products.
Actually, this blog entry was written on a Macbook Pro and I’d probably never trade it for a Windows- or Linux-based notebook. I even recommend Macs whenever I can to friends but as much as I like Apple’s products in general, I really dislike their recent behavior towards Flash.

In a nutshell

  • Animations (like Flash-ads) can cause a lot of CPU load while surfing the web. It’s in the nature of animations to do so. Replacing those ads with HTML5 canvas animations would make things only worse.
  • HTML5-based video playback seems to require much less CPU power than Flash-video. Since most ads rely on animations rather than video playback, this argument does not really apply.
  • Apple’s accusation of Flash being a battery-drainer is wrong. Animations drain power, not Flash. Thus, their test-series of battery lifetime on the new Macbook AIR is not objective.
TwitterFacebookShare

5 facts you gotta know about Adobe’s educational versions of the Creative Suite CS5

Posted on: August 7th, 2010 by Timo

Creative Suite CS5 EDU packageYay! I just got my CS5 Master Collection (Educational-version)!

Before I bought it, I checked on some infos you might want to know. For example, I was curious if I was allowed to keep the suite even if I am not a student any more and if I may use it for commercial purposes. The following list should give you the answers you need:

  1. The EDU versions are a lot cheaper. My Master Collection for example cost only € 662,-, while the non-EDU version costs € 3688,-.
  2. You must be a student or teacher in order to be able to purchase an EDU version of the Creative Suite. A verification document (with picture of you on it) is required.
  3. You’re allowed to use the EDU version for commercial purposes.
  4. When you’re not a teacher/student anymore, you won’t have to delete the software or purchase an upgrade. You may just keep using your EDU-version.
  5. You can upgrade your EDU package to a “normal”, higher non-EDU version later for the standard price. That means, an upgrade from CS5 EDU to CS6 non-EDU for the “normal” price is possible even if you’re not a student or teacher anymore.

These informations can be verified on Adobe’s Education Portal website together with some more additional infos.

This only applies for the Creative Suite purchased in Germany. For other countries, go to Adobe’s educational website and check for yourself.

TwitterFacebookShare

Tutorial: A simple Twitter client with JQTouch

Posted on: August 4th, 2010 by Timo

Lately I have been doing a lot of coding for mobile devices, like iPhone or Android, but I was never really happy about the development environments. Objective C is a horrible and antique language while the Android SDK is quite nice (due to its Java roots) but does not give me the ability to create multi platform apps. So what’s left? Right. Web-technologies.

Luckily, I stumbled over a really nice framework called JQTouch which hat its roots in the JQuery library (as you probably already guessed). JQTouch enables the developer to create applications with some JavaScript and HTML usage without ever touching a weird iPhone compiler. It’s perfect for people who already have a decent amount of knowledge about these technologies and want to create mobile apps that run on multiple platforms.

In this mini-tutorial, we’ll create a simple Twitter app, which will display the tweets of a user. The final application is supposed to look like this:
JQTouch example screenshot of final version JQTouch example screenshot with twitter search results

All you need to create a simple application is:

  • JQuery
  • JQTouch
  • A text-editor or IDE of your choice. I like Netbeans due to its superior JavaScript support.
  • Apple’s Safari browser (Great for first tests since it behaves very similar to browsers on mobile devices)
  • The mobile devices you’d like to deploy for (for testing purposes)

Less blah, more code!

Let’s get started by creating the user-interface. This is entirely done in HTML. For the moment, you’ll neither need a lot of JavaScript, nor CSS. All you gotta do is:

  1. Create a simple HTML template
  2. Import the JQuery and JQTouch librarys
  3. Define the UI

A template that you can always use to start a new jQTouch project could look as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Hello, jQTouch</title>

    <!-- include JQuery through Google API => Always have the latest version -->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript"> google.load("jquery", "1.3.2"); </script>

    <!-- import JQTouch -->
    <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>

    <!-- Import JQTouch default style (iPhone look). Replace the string "themes/apple" with "themes/jq" for a neutral (black) theme -->
    <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
    <link type="text/css" rel="stylesheet" media="screen" href="themes/apple/theme.css">

    <!-- JavaScript goes here -->
    <script type="text/javascript">
      // Fire up JQTouch
      var jQT = $.jQTouch({
        statusBar: 'black'
      });
    </script>

    <!-- CSS styles -->
    <style type="text/css" >

    </style>
  </head>

  <!-- UI definition goes here -->
  <body>
  </body>
</html>

Hello World!

This markup doesn’t show anything yet if viewed in a web-browser, so let’s start adding some “Hello world!”-style info to it:

<!-- A simple JQTouch layout consisting of two views -->
<body>
  <!-- "Page 1" -->
  <div id="theform">
    <div class="toolbar">
      <h1>TweetMe</h1>
    </div>
    <ul class="rounded">
      <li>Hello World</li>
      <li><a href="#tweets">Go to view 2</a></li>
    </ul>
  </div>

  <!-- "Page 2" - Will contain the tweets found -->
  <div id="tweets">
    <div class="toolbar">
      <h1>Results</h1>
      <a class="button back" href="#">Back</a>
    </div>
    <ul id="results_ul" class="rounded">
      <li>This is page 2</li>
    </ul>
  </div>

</body>

Now, replace the empty <body></body> tags of our template with this UI definition and put everything into a new index.html file (together with the required libraries), then open it in Safari and you should already be able to see a simple user-interface in iPhone-look. You can click on the 2nd entry in the list and it should bring you to the “results” view. Click the back button on top and you should return to the point where you started. This is all handled through the JQTouch framework. Cool, eh?

JQTouch example screenshot 01 JQTouch example screenshot 02

In the BODY tag, you should see two DIV definitions, where each represents one view. The first one will be used to display a simple form for the user in order give him the opportunity to enter a Twitter user-name (currently there is just a place-holder with a Hello-World string and a link but we’ll change that in a second). After the “hypothetic form” (which doesn’t exist yet) was submitted, we want the app to “smoothly” slide to view 2 where the result data will be displayed.
Each DIV has an inner DIV with class “toolbar”. This is the blue header at the top of each view which also holds the back button. If you don’t want it, you can just remove that tag but I’d recommend to leave it there.
Also notice that both DIV’s have an id. This is important in order to easily switch between views. You can do this by simply adding a link, which references the id of the view to target via its HREF attribute with a ‘#’ character in front. So if you want to switch to a DIV/view which has the id “myview”, you can simply create a link which looks like this:
<a href="#myview">Go to the view</a>.
DAMN, that’s easy, isn’t it?

Defining the Twitter UI

So, let’s get started and replace the “Hello World” stuff with some serious markup. First of all we’ll replace the <ul> element, which holds the “Hello world”-content, with an input field and a button:

<ul class="rounded">
    <li><input type="text" placeholder="User name" name="username" id="username_input" autocapitalize="off" autocorrect="off" autocomplete="off"></li>
    <li class="arrow"><a href="#tweets">View tweets</a></li>
</ul>

In order to give the “View tweets”-button a look as it could be pressed, the surrounding list element gets the class “arrow”. This will display a nice little arrow at the right of the screen.

Now, if you hit the link, the app smoothly glides to the 2nd view. Since it may take a few seconds to load all tweets, we want to display a loading message to the user here:

<ul id="results_ul" class="rounded">
  <li>Loading...</li>
</ul>

These modifications get us the final version of the user-interface:
JQTouch example screenshot 03 JQTouch example screenshot 04

Calling the Twitter service

That’s it for the moment with HTML. Now we need some application logic to call the Twitter REST service and retrieve the data of the user. In order to get this done, all we need to do is to fire up an ajax call to:
http://api.twitter.com/1/statuses/user_timeline.json?screen_name=USERNAME
The result will be a JSON object as described in the Twitter API documentation. For the ajax call, we’ll use JQuery’s built-in ajax() method.

In order to accomplish this, we first must attach a click listener to the “submit”-button so we can fire the ajax call. To do this, we add an id to the anchor like this:
<a id="submitButton" href="#tweets">View tweets</a>

Then, we’ll set an init function, which should be called once the body has loaded:
<body onload="init()">

Finally, inside the init function, we can attach the event listener:

/**
 * Will be called after all the markup in <body> was loaded
 */
function init(){
  $("#submitButton").bind(clickEvent, function(e){
    getTweets();
  });
}

If the link is now triggered, the method getTweets(), which I’ll explain later, gets called. You might have noticed that the the .bind(event, function)-method gets a variable called clickEvent instead of the usually used string “click”. The reason for this is that some touchscreen-based devices, like the iPhone for example, do not trigger the “click”-event. Instead, they use “tap”. Thus, it is important to check the user-agent of the browser and examine, which event should be fired:

// Determine if iPhone, Android or Desktop OS and setup the right click-event ("tap" vs "click").
var userAgent = navigator.userAgent.toLowerCase();
var isiPhone = (userAgent.indexOf('iphone') != -1 || userAgent.indexOf('ipod') != -1) ? true : false;
clickEvent = isiPhone ? 'tap' : 'click';

The variable clickEvent is now globally available and can be used whenever a click/tap event on a link must be triggered or catched.

Regarding the ajax call itself, there is an important thing you have to know about the so called “Cross Domain Policy”. This is a security feature, which lets the website you’re currently viewing not call remote urls which are running on servers from a different domain than the website you’re looking at. In other terms: We cannot directly call the Twitter API unless you can deploy your mobile application to Twitter.com. There are various ways to work around this. One is to use Flash, which can ignore the cross domain policy. Since we cannot rely on the fact that every user has a Flash plugin (especially the iPhone boys out there), we’ll go for a server-side solution by simply creating a proxy service using PHP which tunnels the ajax call and thus does the API call for us. Since the PHP file will run on the same server the mobile app runs on, we can call this script easily via ajax. Sounds complicated? It isn’t. Believe me.

(Note: Of course, you can use any other server-side technology of your choice like J2EE or ruby. I personally like PHP, so I’ll go for that one but any other language will do the job too.)

Now, let’s create a new file called service.php, which accepts a url parameter (the url to the Twitter API), calls it and then dumps the response back to its caller:

<?php
  $url = $_GET["url"];
  $handle = fopen($url, "rb");
  $content = stream_get_contents($handle);
  fclose($handle);
  echo $content;
?>

Now, we can call this script via the JQuery method ajax():

/**
 * Does an ajax call and retrieves the tweets of the user specified in the
 * input field "username_input"
 */
function getTweets(){
  // Show a loading message
  var results_ul = document.getElementById("results_ul");
  results_ul.innerHTML = "<li>Loading...</li>";

  // Get the username from the input field
  var username = document.getElementById("username_input").value;
  // Prepare the Twitter url, so it can be passed as a GET parameter
  var twitterUrl = escape("http://api.twitter.com/1/statuses/user_timeline.json?screen_name=" + username);

  // Do the ajax call
  $.ajax({
    url: "service.php?url=" + twitterUrl,
    // Callback (onsuccess)
    success: function(d, status, req){
      // Convert the JSON result to an array of tweets
      var tweets = eval('(' + d + ')');
      // Display the tweets
      showTweets(tweets);
    },
    // Error handler
    error: function(req, status, err){
      // Alert the user that something went wrong
      var results_ul = document.getElementById("results_ul");
      results_ul.innerHTML = "<li>An error occured. Tweets could not be loaded<br>"+status + ": " + err + "</li>";
    }
  });
}

If the ajax call fails, an error message is being displayed to the user. On success, the method showTweets(tweets) will be called passing over an array of tweets. We’re almost there! Can you smell it already?

The last step is simple. Just iterate over the result array and dump out the tweets:

/**
 * Outputs the received tweets to the user-interface
 * @param tweets The tweets as an array. Each element represents one tweet and can be accessed via tweets[i].text
 */
function showTweets(tweets){
  var results_ul = document.getElementById("results_ul");
  results_ul.innerHTML = "";

  if (tweets.length <= 0){
    results_ul.innerHTML += "<li>User not found. Please press 'back' and try again.</li>";
  }
  else{
    for (var i=0; i<tweets.length; i++){
      results_ul.innerHTML += "<li>" + tweets[i].text + "</li>";
    }
  }
}

Update: The "proxy-technique" shown here is not the only way to bypass the cross domain policy. Another possibility is to use JSONP, which allows ajax calls to services on other domains without any backend-service (Thanks to Luis for the hint!) through a technique which retrieves the JSON data by abusing the <script> tag, which seems to ignore the cross domain policy. However, if you choose to use this technique, you have to be aware about two things:

  1. The server must support JSONP. Twitter can handle it but you might encounter a service which cannot. In this case you'll have to fallback to a proxy solution as shown here.
  2. Since it is possible to do XSS attacks (= Cross site scripting attacks) through JSONP, it is strongly recommended to use jQuery's ajax() method by passing the additional parameter dataType: "jsonp". This will add JSONP support to the ajax call and also automatically evaluate the result as JSON, so no extra eval(data) is necessary! (I am not 100% sure if jQuery handles the XSS issue correctly when evaluating the JSON data, so be careful!)

Simulating a form-submit event

If you run your app now, you should already be able to see a first working result. Enter a Twitter username, hit "View tweets" and you should encounter a list of what that person had for breakfast today. However, if you just hit your enter key instead of clicking on the search-link, nothing will happen. That's because we haven't taken care of that yet, so let's get this done in order to make this thing perfect. The easiest way to do is to simply attach a listener to the input field and check if the enter key was pressed:

/**
 * Event-listener. Gets called if the user presses a button on his keyboard
 * in the input field.
 * @param keynum The pressed key (as an ASCii value)
 */
function keydown(keynum){
    // 13 = The ASCii value of the return key on your keyboard
    if (keynum == 13){
        $("#submitButton").trigger(clickEvent);
    }
}

Don't forget to register the listener:

<input onkeydown="keydown(event.which);" type="text" placeholder="User name" name="username" id="username_input" autocapitalize="off" autocorrect="off" autocomplete="off">

There are some important things you have to know about this:

  1. Don't use a <form> element because a) it won't validate and b) it simply won't work because ordinary form submit events reload the full page. We don't want that.
  2. In order to switch to view #2, you shouldn't do something like:
    window.location.href="#tweets";
    It will mess up jQTouch's navigation logic. Always define a link for this purpose and trigger it using the .trigger(event)-method.
  3. $("#submitButton").click(); will not work :-)
  4. It is important that you take care about this issue! Mobile phone users usually use a virtual keyboard. Once they entered a username, they often press "return". If you don't catch this event, nothing will happen and the virtual keyboard will remain while the visitor has to hide it manually and then press the "View tweets" link. This is a usability nightmare for sure.

The final app

If you now search for the user "timo_ernst" for example (or any other Twitter user), you should see some like this:
JQTouch example screenshot with twitter search results

Now, that was damn easy, wasn't it?
Check out the full running thing at http://www.timo-ernst.net/tweetme.
Download the full source as a ZIP file here.

To prove that this app runs across multiple platforms, I made a photo of it on iPhone OS 4.0 (right) and a HTC Desire with Android 2.2 "Froyo" (left):

jQTouch working on iPhone and Android

Am I the only one who thinks that the Desire's AMOLED display is truly magnificent? :-)

Note

I am aware of the fact that there is already a Twitter app out there for WebOS called "TweetMe". Since I just needed a quick name for this demo application, I choose the first best thing that came to my mind. Of course, this demo is not meant to be a real, commercial project. Its only purpose is to demonstrate the capabilities of JQTouch and not to be a competitor to WebOS TweetMe. If the author of that app is offended by this in any way, please contact me and I'll rename this thing. At the moment, I simply feel a bit to lazy :-)

TwitterFacebookShare
©2013 TIMO ERNST
iPhone icon by Jack Cai. Android icon by wpzoom.com