DesktopX: Builder Mode for Beginners Pt 2

From WinCustomize Wiki

Jump to: navigation, search


DesktopX Builder Mode for Beginners (Part 2)
Image:ExampleWidget2.png
This tutorial will show you how to use plug-ins like the ones in the widget above
Original Author:sViz
Date Created:July 20, 2007
Application:DesktopX
Programs Used:DesktopX , Photoshop (any program for graphics)


This DesktopX Builder Mode tutorial series for beginners will give you a basic feel for working with DesktopX and show you how to create fully functioning objects without having to write a script. Some of the most powerful DesktopX creations require scripts but so much can be done in DesktopX without ever having to write a single line of code. Thanks to various plug-ins and easy to use components of DesktopX you can create objects that do many of your basic tasks. From an email notifier to system meters, they’re all pretty easy to setup. In most cases you need only select the plug-in of choice and apply your own graphics.

In addition, you have the ability to import pre-existing widgets, where all the coding might be done for you, and modify them to fit into your own creations. (Note: If you intend to distribute your work, it is important to ask for permission from, and give credit to the author whose work you are including.)


Contents

[edit] Plug-ins

A plug-in is an extremely handy component of DesktopX that instantly adds powerful functions to your object. It only requires a few configurations to set it up and after that you simply apply your graphics. It gives you an advantageous boost to be up and running in no time. Go from an empty object to a working media player in a matter of minutes! In this tutorial we’ll cover some basic plug-ins: digital clock, date, and an email notifier.


[edit] Step 1 – Add a plug-in

Right-click on the DesktopX Builder icon and create a new object. In Object Properties, go to the General tab. Under Additional Abilities, click ‘add’. You’ll be presented with the Plug-in Browser.

The plug-in browser window
The plug-in browser window

As you can see, there is a wide range of plug-ins to choose from. Add anyone of them and your object will then perform the assigned task, such as displaying a digital clock. Select the digital clock plug-in, and click ok.


[edit] Step 2 – Configure plug-in

You should now see that the plug-in has been added to the list under Additional Abilites. Select the plug-in and click the ‘configure’ button. You’ll now be presented with the configuration window specific to this plug-in.

There’s a short description of how to format the digital clock. For instance, if you wanted a 24-hour clock instead of a 12-hour clock, or you can choose whether or not you want the clock to display the seconds. If you set the format to “h:mm:ss tt” that would display “2:05:08 PM”; a 12-hour clock, the hour without a leading zero on single digits (2 instead of 02), the minutes with a leading zero on single digits (05 instead of 5), the seconds with a leading zero, and the double character time marker (PM instead of P).

You can also make your clock appear with a message. To do so, you must put your additional text in single quotations. ‘The time is now’ h:mm:ss tt will appear as “The time is now 2:05:02 PM”.

Finally, you can set how often you’re clock updates where it says Update Interval. For this tutorial I configured my digital clock as such: ‘The time is now’ h:mm:ss tt, Update Interval – 1 (second).

Click ok when you’ve finished the setup.


[edit] Step 3 – Apply Plug-in

Before you apply the settings, go to the States tab in Object Properties. Under appearance, change it from ‘image’ to ‘text’. Now you can apply. That’s it!

[edit] Step 4 – Date plug-in

The date plug-in is pretty much the same setup as the digital clock plug-in. You can format the day of the week, month, date, and year, display a message with the date, and set the update interval.

Following the instructions of steps 1 – 3, create a new object and add the date plug-in. Configure the date plug-in as such: ‘Today is’ dddd, MMMM d, yyyy, Update Interval – 60 (seconds). Don’t forget to change the object appearance from image to text. Once applied, the date will display as “Sunday, October 12, 2008”.


[edit] Step 5 – Email notifier

The email notifier is a great example of a plug-in that uses graphics. You’ll need two images: one that displays when you have no new messages and the other to display when you have new messages (Note: I found it best to make the default image the same as the no new mail image. However, you can use three different images if you prefer.). What the plug-in does, besides retrieving your email information, is it adds two new states to your object: New mail and No new mail. You will then apply your graphics to each of the states.

The first thing to do is ‘change’ the default appearance in the general tab. You need to set what the object looks like when it’s doing nothing. Browse for an image and click apply.

Following steps 1 – 2 create a new object, add the email notify plugin and configure it. The settings for this plug-in are simply your email account information. Your mail server (e.g. “mail.example.com”), email address or login (e.g. someone@somwhere.com), password, and account type. Last, you can set how often you want to check for new messages. Click ok when you’re done.

Finally, go to the States tab in object properties. This is where we set what the object looks like when its doing nothing, has new mail, or has no new mail. You’ll see the list of states: default, new mail, no new mail. All the information below that will be specific to the selected state.

Select the ‘new mail’ state. Under appearance, browse for the image you want and open it.

Select the ‘no new mail’ state and set its appearance as well. Hit apply and you’re done.

Email notifier states. From left to right: default, new mail, no new mail
Email notifier states. From left to right: default, new mail, no new mail


[edit] Tips

  • Font style for your digital clock or date display can be customized as well. To do so, go to Object Properties > States. Under appearance, click on 'font' to change font style and size, or click on 'color' to change font color.
  • Using text states for the email notifier is also an option. Instead of using graphics the notifier will display a message. To do so, select the new mail state in Object Properties > States. Under appearance, change it from image to text. Enter some text in the box below (e.g. "You've got mail!"). Do the same for the default and no new mail states.
  • Making the notifier a link to your inbox will add more efficacy to your object. To do so, go to the general tab in object properties and change the object type to 'url'. In the field below, enter the url to your inbox. Hit apply. Now when you get new mail you can click on the object to take you to your inbox. (Note: If you are not logged in to your account you will likely be redirected to the authorization page where you can sign in.)
  • What’s my email server? A search on the internet will usually yield the answer and most mail servers will have help information on their site.
  • What’s my account type? Most account types are POP3 so it’s probably safe to select that option. If you still aren’t sure you can check your mail server’s site for help.
  • What happens to my email information if I export this widget? The information will be erased when you save or export so it won't be available to other users.


[edit] Further Reading