Google Ads
Google Ads

Create a simple RSS Widget with Dashcode

Create a simple RSS Widget with Dashcode

There are now literally hundreds of great Dashboard widgets around from the ability to watch Apple Trailers right through to complicated currency converters and games.

Why not make your first step to becoming a developer my creating your first ever Apple Dashboard widget using your blog’s RSS feed. This tutorial will show you just how easy it is to make a widget and a offer a few tips on the way.

Step 1 : Install XCode

XCode doesn’t come installed as default so to install Apple’s development environment insert Disk 1 of the DVD disks supplied with your Mac and double click the “Optional Installs” folder. You should now have the following window visible. Double click on the Xcode installer (very left).

Xcode1Step 2 Loading Dashcode

As well as installing Xcode and the various developer libraries you will also have an application called “Dashcode” also added to the Developer folder.

On loading you Dashcode you will offered a range of both Safari and Dashboard templates. Click on Dashboard and then the RSS option (newspaper icon) on the top right of the screen.

Dashcode2

The Main Environment

You will now be presented with the main Dashboard widget developer environment. From this window you will be able to fully customise and enhance your first dashboard widget.

Dash2Hitting the Run button will load the widget as if it was currently running on your dashboard. You can click this now to get a feel of how the widget will look. Clicking Stop will return to the developer window.

Stage 1 : Set the Attributes

You will notice on the Workflow Steps window we have two required boxes. These set the RSS feed address and the various title attributes for your widget.

dash3Enter the Feed URL into the form (see above) and also customise how many articles are going to be loaded. I am going to offer the ten most recent TotalApps articles in this example widget.

dash4

Stage 2 : Customise the Look

Now we have told Dashcode what data to load we can now customise the overall look of the widget. If you are going to add a logo it is important to use transparent PNG to ensure the widget looks as good as possible.

widgetI am keeping the amount of imported images to a minimum but you should be aware that if you insert an image and then delete it from the widget in dashcode it still remains in the package. (I will show you have to remove unused images later).

I am placing the TotalApps folder icon as a png image and have used plain text for the TotalApps title. By Clicking the inspector button on the top right of the screen you can change the font attributes easily.

I have also double clicked on the top blue bar and changed the gradient to be darker at the bottom than the default.

The Inspector offers a wide range of custom tweaks and enhances so I would recommend you spend a bit of time in here adjusting and experimenting with the overall look of your widget.

If you want to change the dimensions of your widget simply pull the grabber on the bottom right of the widget yo the size and shape you desire.

You can also use the Inspector to include a horizontal scroll bar and tick to auto hide the scrollbars when they are not needed.

Stage 3 : Setting the Images

Now when you click the play button you can see the dashboard widget in all its glory. Once it has fully loaded content you need to take a screenshot of the widget window. To do this load it, click SHIFT + CMD + 4 then hit the spacebar.

A small camera should appear, click the camera on your widget. The image file will now be saved to the desktop. Now click on the “Default Image” option on the left of Dashcode and then Import to load the screenshot into the default image window. See below.

imagesNow we have to set the default Icon. Click the “Widget Icon” button on the left hand menu.

Icon

I then click the “Open in External Editor” button on the bottom left of the screen, save this image to my desktop and then customise it using Photoshop.

Once you are happy with you icon you can “place it” or drag it directly into dashcode. If you want you can save the icon on the right to use as a template.

Stage 3 : Deploy (Run and Share)

Now we are ready to deploy our widget. Click the ‘Run and Share’ button on the lefthand side menu and fill in the final widget details in the form (see below).

deploy

You have the choice of saving the widget or deploying it directly to the dashboard. I have saved my widget so I can share it on the post.

Stage 4: Remove Redundant Images

contentsIf you have inserted images into your widget that you haven’t actually used in the final version (e.g. versions of the logo) you can now remove them from the package. Located the saved widget and right click on the icon selecting show

You will now see a folder view of your widget and within this view a folder entitled “Images” double click on this to see all the images used in your widget.

If there are any visible that are not needed for the build you can simply delete them from the folder.

I then tend to “zip” the widget up for easy sharing but if you double click on the widget icon you can deploy it on your dashboard.

zip

Download

You can download the widget created in this tutorial here.

If you use the tutorial to create a widget why not let us know using the comments below.

Be Sociable, Share!

    Related Articles

    Back to
    Tricks & Tips

    No comments

    Leave a Reply

    *

    *

    *