Skip to content

Posts from the ‘Tutorials’ Category

20
Apr

Twitter-esque Animated Placeholders with Dojo

Have you seen the cool text input boxes on the Twitter homepage recently (make sure you are logged out). Twitter is using CSS transitions to achieve the effect but unfortunately those are still not fully adopted just yet. I created (with a bit of cleanup help from kgf on #dojo @ irc.freenode.net) a similar effect with Dojo and made a dojo.query() “plugin” out of it which does work in most browsers:

It’s simple enough to use this on your own code. Use the same HTML layout, and include the JavaScript plugin code on your page to use the plugin.

13
Mar

Public Dojo Workshops Announced

I’ve had many ask me about any workshops for developers who work with Dojo. When I direct them at SitePen, they always respond with, but those are geared towards companies—aren’t there any public workshops? Aside from telling them to read the documentation and getting involved online, I’ve had to reply with a solemn “no”. That has all changed as SitePen has announced that they are going to start an offering of public workshops.

They are going to offer two of them in San Jose for a first round, we’ll see what happens after that. They’re $2500 a pop but it sounds like they will be covering a lot of great content!

13
Jun

Return JSON with PHP

When bringing Ajax technologies into your websites, it’s almost certain you’ll comes across the need to return data from the backend in a format that JavaScript works well with, such as JSON. With that, PHP is often a popular choice amongst developers for backend programming due to its wide adoption and low cost (FREE!). Thankfully PHP is actively developed and it supports many of todays web standards including JSON.
Read more »

21
May

Decoupling Widget to Widget Interaction with Dojo

As a programmer, you should try to think of how you can write your code in a way that is maintainable and loosely coupled from other parts of your application. Loosely coupled basically means that you don’t tie down functionality and modules to be dependent on other parts of your application. In a way, you want to try and categorize the functionality and keep the functionality in one spot. Take our modern day telephone system for example. If you wanted to use your phone at home to call your friend on their phone on the other side of the world, the phones themselves don’t have to know each other. All they are concerned about is how to interact directly with the telephone system. The telephone system simply requires a telephone to know how to dial out and to be able to receive a phone call when the line is being rung.
Read more »

3
Feb

Cross-Domain Ajax with Dojo

If you are fairly new to JavaScript development or Ajax programming, you may not know that JavaScript has a limitation in which it cannot make a remote call to a service that is not on the same domain the script was called from. For instance, if I hosted a simple web service at kylehayes.info, I would not be able to access it from this site through the normal methods such as dojo.xhrGet() or dojo.xhrPost(). However, there are a couple of solutions to this issue. One of those is to consume web services that use a format called JSON-P (JSON with padding).
Read more »

2
Jan

Simple Ajax Form Tutorial

Submitting an Ajax form using Dojo is very straightforward and simple. The main goal here is to simply send the values of a form to a backend script (whatever your preference, e.g. PHP or Python), without ever leaving the page. The page should also show a response to the user confirming that their request was sent successfully.

For starters, we need a simple HTML form that we are going to send. Construct this as you normally would with an id, action, and method values. In my example, I’ve created a basic contact form:
Read more »

4
Nov

5 Easy Tutorials for Advanced JavaScript using Dojo

The Dojo Campus provides a wealth of documentation, tutorials for all levels, Dojo Cookies (like recipes), and demos of cool features.

Below are just a handful of tutorials that are available to beginners in Dojo that really help you get started.

  1. Dojo and Air, a fancy file uploader
    How many times have you had trouble uploading files to your favorite CMS? How many times did a client say “I am not happy with uploading one file at a time”? And last but not least, how many times did you implement a third party plugin/software/piece of magic to implement efficient file uploading?
    View tutorial >>
  2. Fancy Rounded Corners
    Make great looking rounded corners on your elements using only a single image.
    View tutorial >>
  3. Easily listen for events
    Custom events and Dom Events are all well and good for method-to-method functionality. It is a really common use case to connect some event happening to call another function, but when you get into really ambiguous, large applications, you need some mechanism to just say “hey, something has happened, act accordingly” … dojo.publish and dojo.subscribe provide just that mechanism.
    View tutorial >>
  4. Rounded tabs with themes
    Everybody likes rounded buttons, rounded page elements and last but not least, rounded tabs. Fortunately dijit comes with great theming possibilities, so I will show you how you can make your own fancy rounded tabs using a simple image sprite and a couple of CSS classes.
    View tutorial >>
  5. Separating Content from Presentation
    One of the cool things about Dojo is the dojo.xhrGet() function. It’s powerful because it makes transparent the browser dependent transports that make AJAX possible. In this cookie, we’re going to explore a simple use case in Dojo to separate content from the presentation of a page.
    View tutorial >>