Previous Page  Developer's Guide: Creating Objects  5.1 Next Page

Object Properties Overview

So let’s create an object. To do that you will need to be in the DesktopX development environment (i.e. have the DesktopX builder loaded). Then either right click on its system tray icon and choose “new object” or from the builder dialog go to the desktop tab and press the “New” object button.

The object properties dialog has 4 pages:

  • General
  • Relation
  • States
  • Summary

Object Properties: General Tab

Object Properties - General tab.
The General tab on the object properties dialog

Object Label field

This field lets you specify a text label for your object. This is much like the label you’d have for an icon.

Object Type

This specifies what type of object.  Default is “Layer” which is just a techie word for “a picture that’s really not doing anything but looking pretty”.  By pressing the “Change..” you load a dialog that displays other object type options.

Object types include:

  • Shortcut. This links to a given program on your computer.
  • URL. This has the object link to a particular website.
  • Object Controller. This tells the object to perform some action on another object.
  • Taskbar. This tells the object that it is to list the running tasks.
  • SysTray. This tells the object that it is to use the system tray (note, this requires the MCP service to be running to be accurate).
  • System. This means that the object is to represent a special system command such as the Find dialog, Shut down, log off, etc..
  • DesktopX Builder. This tells the object that it is to perform some DesktopX specific command.
  • Widget. This means that if this object is exported as a widget that it will function as some widget specific feature (such as closing the widget).

Default Appearance

This allows you to control how the object is going to look by default.

New Script

The “New” button will allow you to start working on a new script for the object. 
See the 5.2 Developer's Guide: Scripting sections & get the separate "Scripting Guide" (PDF) to learn more on scripting.

Additional Abilities

More features can be added to DesktopX objects by loading a plug-in.  Plug-ins are add-ons to DesktopX created by either Stardock or third-parties.  Popular plug-ins include DXPlayer which comes with DesktopX and enables users to easily create media players, DXPerf which also comes with DesktopX that makes it easy to create performance monitoring objects.

When a plug-in is added, it will need to be selected and then configured.

Object Properties: Relation Tab

Object Properties - Relation tab.
The Relation tab.

The relation page is designed to allow you to control how this object will interact with the desktop and you.

 Action  What it does
Visible  This determines whether the object’s initial state is visible or not. 
Z-Order  This option controls the relative Z position of the object. Options are Desktop (like icons), Normal (like programs) or always on top. 
Movement  This controls how and when an object can be moved around. There are many times when you may wish for an object not to be moved. However, even when an object is locked, it can still be moved by holding down the CTRL key when selecting it. 
Activation  This controls when the object will receive messages from the mouse. That is, whether the mouse cursor actually needs to be on the visible part of the object or just near it or not have it react to mouse messages at all which can be useful if you want to make the object semi-transparent and therefore have the object UNDER that object be what reacts to the mouse messages. 
Start with  This controls what is necessary to make the object “execute”. Single click, double click, mouse over or mouse down. 
Popup  This determines whether this object is a pop-up object. Pop-up objects are then controlled by other objects that are of the class “Object Controller”. The types of pop-ups are: 
  • Static
  • Toggle (turn on and off)
  • Menu (acts like a Windows menu – as soon as something else is clicked, it hides)
  • Volatile (hides when another pop-up is opened, great for working with multiple pop-ups).
Cursor  This controls whether the mouse cursor changes when it is over this object. For instance, a text link object may want to have the mouse cursor change to the hand mouse cursor. 
Position Adjusting (for resolution independence)  Objects can be set to move themselves upon resolution changing. For instance, the object’s position can stay relative to the center the screen or to a given edge when the resolution changes. 

Object Properties: States Tab

States tab
The States tab.

The states tab of the object properties is the most complex page in all of DesktopX.  That’s because states, like messages, are what make objects different from say icons.  DesktopX objects can have an infinite number of different states.

For instance, a printer object might have its “default” state and it might have a “printing” state and it also might have a “paper out” state and a “out of ink” state and so forth.  Each state can have its own image, color, animation, sound effect, etc..  And upon a “State change”, a message can then be sent.  So perhaps that hypothetical printer object, upon changing to “out of ink” state could then send a “Printer Attention” message to a “Administrative” object that, using some scripting, sends an email to the system administrator.

Everything listed below in this section can work on a per state basis.

 Action  What it does
Add (state)  This option allows you to add another state. There are some built in ones that have to do with mouse actions (mouse over, mouse away, mouse down, etc.). 
Remove (state)  This removes the selected state. 
Copy from.. (state)  This option will copy the state data from an existing data (a time saver). 
Reset (state)  Resets the selected state to the default settings. 
Appearance (tab) The contents of this tab allow you to control what the object looks like in the selected state. You can choose “Image” to have a bitmap represent the state or a text. Note that all states have to be either an image or a text (you can’t have some states be text and others be an image). 
Image (based states) States that are represented by images are just a matter of selecting a ICO BMP, TGA, or PNG to represent that state. 
Text (based states) States represented by a text field have more options such as selecting the font, selecting the color of the font, selecting whether it has a border, whether it’s anti-aliased, etc. Text will word-wrap if it becomes larger than its specified size. 
Animation (tab) This determines the animation settings for this state. If the image is a “bit strip” (an image with frames of animation in it horizontally) then you would set the number of frames involved. 

The static animation option indicates that the image only has one frame in it (a single static image) but that want it to have multiple animation frames anyway. This is useful on the transparency page where you might want to have the image pulsate from 20% opacity to 100% in 20 steps (frames).

The loop option will tell the animation to keep playing. Interruptible determines whether the animation will fully play out its animation on a state change or stop immediately (if there are multiple states involved, you will probably want this option selected). Scripted means that which frame is displayed is controlled via a script.

The style determines which direction the frames will be played.
Transparency (tab) This tab determines whether you want the object to be fully opaque or not. The default is no transparency. However, options include having 0% to 100% opacity or having it vary from X% to Y% in conjunction with the static image animation option. 

If it’s a bitmap that contains alpha blending information, you can use the bitmap contains per-pixel alpha blending information. PNG files tend to include an alpha channel in which case this option will be hidden.
Shadow/Glow (tab) Objects can be given a shadow. Sharpness determines the size of it. Darkness is on a scale from 0 to 255. Offset determines how many pixels the shadow is offset. 
Color (tab) An object’s hue, brightness and contrast can be controlled here. So you could easily have an object’s “mouse over” state have its contrast increased 50% through this option. 
Sound (tab) When the object’s state changes to the selected state, a sound can be played (or even looped for as long as it is in that state). Be the most popular guy in the office by having a really obnoxious sound play and loop… 
Messages (tab) When an object changes to the selected state, you can have a message be sent to another object. This will change that object to the state of the same name. 


Object Properties: Summary

Summary tab.
The Summary tab.


The summary page provides some information for the object and allows the you to configure the object in general. The X, Y position of the object is displayed here.  The Windows desktop uses the X,Y coordinates with (0,0) is the upper, left corner of the screen.  Positive numbers count down (Y) & to the right (X).  You can also control the size of the object by setting its width and height.  Note that changing the height and width of some objects can have some nasty side effects (such as if it’s an animated object).

You can also assign a tooltip to the object here.

 Action  What it does
Object ID  The object ID is very important. By default, objects do not have a name (an ID). In order to interact with a particular object, it needs a name. You can click on the Object ID field “(unassigned)” by default to change its name. 
Parent/Owner  You can also set what its parent object is if applicable. 
Child  The child option determines whether the object has been merged as part of the window of a parent object.  
Group  If the object is part of a group, it’ll be displayed here.  
Widget  If the object was imported, it will be given a “widget” ID which allows DesktopX to try to keep it distinct from other objects. It’s through this that it knows what objects are “Related” to it. 

Basics

Creating objects

So let’s create an object. To do that you will need to be in the DesktopX development environment (i.e. have the DesktopX builder loaded). Then either right click on its system tray icon and choose “new object” or from the builder dialog go to the desktop page and press the “New” object button.

When you select this a basic object will appear on the desktop ready for you to customize.
When you do this the 'Object Properties' dialogue will also be displayed to allow you to start configuring your object.

 

Object types

To change the object type, click the 'Change' button next to where it says 'Type of object' in the ‘Object properties’ dialogue.
This will present you with a list of the other basic object types you can use without having to even consider plugins or script.
Once a type is defined, the activity associated with that object type will occur when an object is clicked, though the object's ‘Start with’ parameter can be changed to alter when this occurs. Doing this is sensible as you can’t be sure what the default activation action is defined by the user. More on this later.
We will go through each of these items in turn and explain how to use them. I encourage you to try them out as you go and experiment with the functionality on offer. This is the best way to learn.
Different object types will have a range of options. For a layer, you can choose to make it 'Accept Drag & Drop'.

Layer

The default type of object created is a 'Layer'. A layer object doesn't interact with the user in any way. There are several reasons why you may want objects of this type. It may be a text label proving information to the user, or it may just be a graphic enhancing the visual experience for the user.
Normally, you can drag files from applications (e.g. Explorer) onto the desktop to create a DesktopX object which links to that file. If you select this option for a layer, it means that if you drag a file on top of it, it becomes ‘Contained’ within that object and moves when the ‘Parent’ object moves.

Shortcut

A ‘Shortcut’ allows the object to link to a file or a folder on your machine. If you choose a file (e.g. Notepad.exe) you can add arguments to that link. For example, if the file shortcut was Notepad.exe, you could add the argument ‘c:\mydoc.txt’ which would launch Notepad and then open the file ‘mydoc.txt’. You can also how that application will appear when launched (e.g. maximized).
In addition to the specific paths that you can enter, DesktopX provides several variables that can be used to point to specific directories.
%exedir% - returns the executable directory.
%objectdir% - returns the object data directory (where custom files are stored).
%objectsdir% - returns the full \Objects directory.
%themesdir% - returns the full \Themes directory.
So, for example, if you wished to link to one of the default clock objects that comes with DesktopX, you could link to this “%objectsdir%\Nicer Analog clock.dxpack”

If you choose a 'Folder shortcut', you can either choose a system folder such as the Control Panel, or you can choose to browse for any folder on your computer. In either case, this will cause an Explorer window to open displaying the contents of that file.
You can however, check the box below the dropdown menu to popup a menu of the contents of that folder. You can then click an item on that menu to run that item directly. You can even specify where the menu appears relative to either the cursor or object itself.
What you should know is that these objects will function like the real target of the shortcut. For example, if you drag the file c:\mydoc.txt to an object which is a shortcut to Notepad.exe then that file will open up in Notepad. Dragging a file to a folder shortcut will move or copy the file to that actual folder.

URL

A 'URL' object type is similar to the shortcut but it is dedicated to launching web pages in your browser, so all you need to do is enter the web address (e.g. www.wincustomize.com).

Object Controller

Objects can interact with other objects and this is a way to carry out some of the most common of these interactions.
An individual object or groups of objects can be defined as 'popups', which means that they can be shown on screen only when they are required. We will define how to do this later, but at the moment it is enough to know that you can select one of the first 2 options here to show or hide the object.
You can also choose to 'Destroy' an object. This might seem somewhat destructive, but is sometimes useful. For example, when a theme is loaded you may want to display a welcome message to the user. You don't want this after it has been read though, so you may set it so it destroys itself when clicked.
Obviously these commands mean nothing without specifying which object is the target of this action. You do this by selecting the object from the 'Target object' dropdown list.

Taskbar

The 'Taskbar' object offers some immediate functionality. This transforms the object into a display of the applications running on your machine.  Obviously there are a few configuration options to adjust how you want the taskbar to look.  You can choose whether the taskbar runs horizontally or vertically, and at which end of the taskbar new items are added, and the size of the icons used to represent the items on the taskbar.  If you want, you can add labels which display the name of the application, and choose the color of the text used dependant of whether the item is selected or not.

The final 4 items really define the structure of the taskbar. The first item lets you define how much space the maximum size of each item on the taskbar. Essentially this defines how wide (in pixels) each item will be where 'Use labels' is selected.  You also need to specify how much space there is between items. The final option allows you to vertically offset the contents of the taskbar. This may be important depending on the graphic used in your object. The graphic is defined like any other except you get a customized 'Advanced' option which you need to make good use of to customize the object. We will get onto this in the appropriate section.

Normally, the taskbar just grows and shrinks depending on the number of items in it, but the final option is a check box that allows you to lock the size of the taskbar. When this option is set the size is defined by the height or width option on the Object Properties 'Summary' tab (depending on the taskbar orientation). This value can be an absolute number of pixels (e.g. 400), or a percentage relative to the screen width (e.g. 80%).

System Tray

Once you have understood the taskbar type, the 'System Tray' class is easy, as it uses a subset of these options that creates an object to display the icons in your system tray.

System

The 'System' class allows you to access some of the other standard Windows functionality.
Selecting this class provides you with a dropdown list of items from which you can select. Each of these items has a corresponding Windows dialogue box that will be displayed when the user interacts with the object.

DesktopX

The 'DesktopX' class provides you will a list of things to do that relate to DesktopX and it’s user interface. Each of these items is fairly self explanatory.

Widget

This class is useful if you are planning to export the widget as a stand alone Executable file (or widget). You can use these to replicate the commands that are available in Widgets – to close the widget, minimize it, or display the About box. Widgets are explained in more detail in section 2.5.

 

Other Object Basics

The object is now created in a rough form, but now is an opportunity to run through the other basic elements relating to objects before we move onto more complex things.

Labels

The first thing you can do is to add a text label to your object. You simply do this by entering the label text into the 'Label' box at the top of the General tab.
If you want to explicitly set the 'Label color' just hop over to the Relation tab, and at the bottom of it you will see 2 buttons where you can set the color of the label depending on whether the object is selected or not. Clicking the button offers you the choice of using the default color as set in the DesktopX Settings ... Theme Settings ... Labels area, or defining a different color specifically for this object.

Summary tab

If you look at the 'Summary' tab of the object, you will see a range of other parameters that you can change.

Here, you can tweak the objects position and size as well as assigning a 'Tooltip' message that appears when you hover over the object.  In the 'Description' section you can add some information to the object in order to identify yourself as it's creator, and also add any comments that you feel may be useful to new users of the object. 

Most of the content of the 'Origin' section we will cover in the Interaction sections, but for now, the 'Object ID' is important for you to learn about.
This is a unique identifier for the object. It is crucial to assign a unique name to the object for a range of reasons. Any time you deal with object interaction, all types of which we will come onto later you need to identify the object you want to interact with so it must be identified using the 'Object ID'.

Even before you get onto object interaction you will quickly understand the need for this when you try to use the 'Object Navigator'. This is a tool that allows you to see all the objects within your theme, along with their properties. To open the Object Navigator, right-click the DesktopX icon in the Taskbar and then click “Object Navigator”.  The Object Navigator will show you all your objects, relationships they have with other objects, position and size, z-order and images used. It is not designed to tell you everything, but rather a summary reference that you can use to identify and tweak objects.

There are certain elements of an object’s properties that you can edit directly via the Object Navigator for speed; the object position, width, height and comments.  You can select objects using this interface by clicking on them. Use the SHIFT and CTRL keys to select multiple objects. You can also right click an object to access its properties, just as you would by right clicking the actual object on screen.  The row selections on the Object Navigator are synchronized with the actual object selections on screen. This means that at any time you an clearly see which object you are working on.
Imagine the chaos if you didn't use the Object ID property and all the objects were called <unassigned>!

Another useful thing to remember is that when an object is selected you can move it by using the cursor keys to fine tune its position. In order to do this, hold down the CTRL key and click the object(s) you wish to move to select. Keep the CTRL key held down and use the cursor keys to move the object. If you hold down the SHIFT key at the same time then the object will move by 10 pixels at a time in the direction specified.  You should also be aware that as you move an object near a screen border, the object will attempt to “stick” to that border. This is the most commonly required behavior, but if you want to precisely position the object close to, but no on, the edge the above keyboard shortcuts will be the best way to do this.

Alignment

In the summary tab, by default you align an object to the left and top of coordinates specified at the top of the ‘Appearance’ section. You can however choose to centrally or right/bottom align to these coordinates by clicking the ‘Align’ buttons and specifying the alignment that you want to use. This applies to System Tray and Taskbar type objects as well as regular image and text objects.

 

Object Appearance & States

OK, well done, you've conquered the basics. Now let’s start making the objects look cool!

There's no getting away from it - this section is a big one in which you will learn a lot!
Don't worry though, you can take it bit by bit, and after this section you will be well armed to create some visually stunning objects.

States

First of all you need to understand what 'states' are. DesktopX does not restrict you to having one way that an object can appear. Under different circumstances the object can have a different appearance. Each different appearance is referred to as a 'state'.  The default state is 'Mouse away' which is how the object looks when the cursor is not over the object. Unless you create any other states, this is how an object will look at all times.  First we will go over the basics of what you can define in a 'state' and then we will return to looking at the creation of additional states.

Image objects

Below the list of states you will notice a series of tabs. The tab shown by default is 'Appearance' so that is where we will start.

An object can fundamentally have two different types of 'Appearance', either 'Image' or 'Text'.  If you want a graphical object, you can choose an image already in the theme by selecting it from the drop-down list, or you can ‘Browse’ to find a new image on your computer. Images of various types are supported (BMP, ICO, PNG, TGA and JPG).  When you save images they are saved as rectangular images, but obviously you don't want to be restricted to having rectangular objects. Both PNG and TGA images allow you to include transparency information with the file, which means that although the saved image may be a rectangle, the actual image that you see on your screen can be any shape you want, because the background is visible when transparent areas of the object exist.

This image on the right is a PNG image created in Macromedia
Fireworks with a checkerboard effect showing the transparency.

Checkerboard
When this image is used in DesktopX all transparency is preserved
and the background shows through as you can see on the right.

Transparency in DesktopX
 
DesktopX even allows this sort of effect in image formats that don't support transparency such as BMP.  In these image formats, DesktopX will interpret the color referred to as "magic pink" to be transparent.  'Magic pink' is pure pink with an RGB value of 255,0,255.
Although using this method you can't have a graduated transparency as you find in the PNG example, you can make a close approximation. Note, that you need hard crisp edges as if you 'anti-alias' to soften the object edges, your object will have a pink glow as these colors are not pure 'magic pink'.
Pink glow

Image sizing and offsets

Once you have selected the image to use you can distort the image by entering a width and height for the image in the appropriate boxes.

DesktopX is not content with sizing objects in such a brutal fashion, so provides an advanced tab to allow you to resize the image more intelligently.  Clicking the 'Advanced' button brings up a new dialog. This allows you to specify different scaling horizontally and vertically. At each edge you can specify a number of pixels that you do not want to stretch and then you can choose to either Tile (repeat) or Stretch the area in between.

For example, if you have an image that is 40 pixels by 30 pixels and you want the outer 5 pixels at each edge to remain un-stretched, then the corresponding values A-D would be 5, 35, 5, 25. You could then choose to either tile or stretch the area in the middle. Also in this dialog, you can offset the image position. This is not useful in a single state object because you could just position the object where you want, but in a multi-state object, you can offset the image in different states to create useful effects. A particular example of this could be offsetting on “Mouse down” to represent the click like a button being depressed.

Text Objects

If you choose a 'Text' object type then the configuration options change to a more simple set.

You can enter the text you want in the text area, and set it's alignment in the dropdown 'Alignment' list. To further customize your text, you can specify the font (including style and size) and color in which the text will appear. If you want, you can specify that the text has a border by clicking the box and selecting a border color. By having a colored border and setting the text color to 'Magic pink' you can create text which is purely an outline. You can also make use of offsets here to create effects like you can for images. Click the “Advanced” button to specify the offsets you want to use.

Object Transparency

We will come onto the ‘Animation’, and ‘Messages’ tabs later, but the remaining four allow extra tweaking of your image.

The ‘Transparency’ tab allows you to make the whole object partially transparent (in addition to any transparency specified in the image).  You have a ‘No transparency’ or you can specify a uniform level of opacity of the image. For example an object with a uniform opacity of 40% will be 40% visible and 60% transparent.  The final option allows you to vary opacity as the object animates but we will discuss that in the appropriate section.

Shadows and Glows

The ‘Shadow/Glow’ tab allows you to apply either a drop shadow on the object giving it the appearance of floating above the desktop, or a glow surrounding the object.

If you click “Enabled” button you can specify four parameters to customize the shadow. Setting the offset defines in which direction the effect goes. Setting the two offsets to ‘0’ will create a glow, whereas non zero values will create a drop shadow in a direction dependant on the positive or negative values.
A low 'Sharpness' value gives a crisp edges shadow whereas a high value makes it softer. The higher the 'Darkness' value the darker the shadow will be.
You can also specify what color you would like the shadow or glow to be by clicking on the appropriate button. This feature can be effectively combined with shadows to create great special effects.

Color

One of the coolest features of DesktopX is the ability to change the color of things without replacing the image. In the 'Color' tab you can adjust the objects hue (color) by selecting a value between 1 and 255. Experiment until you find a shade you like! Setting the value to 0 will set the object color to that of its original image.

You can further fine tune the color by tweaking its brightness and contrast across the specified ranges. We will come onto additional states later but note that there is a button here to quickly apply the change you have made to all different states of the image.

Sound

The final tab that we will cover in this section is the 'Sound' tab. Here you can specify that a sound is played when the state occurs simply by browsing to it on your hard drive. You can Browse for or select an existing WAV or MP3 file.  Although we will discuss animation later, you can see options for looping the sound when the state is animated. You can choose to repeat the sound once with every loop of the animation, loop continuously irrespective of where in the animation you are, or not loop at all.

New States

You now know the basics of configuring a single state object. A multi-state object is no more complicated.

To add a new state, simply click the 'Add' button. You will then be presented by a list of the common states not yet used from which you can select:
Mouse over - occurs when the user moves the cursor over the active part of the object (as defined by the 'Activation' option on the 'Relation' tab.
Mouse down - occurs which the user presses down the left mouse button over the object
Mouse up - occurs when the left mouse button is released whilst over the object
Show - occurs when the object appears on screen (either when loaded or via script)
Hide - occurs when the object is removed from the screen (either when unloaded or via script)
Command executed - occurs when the object is activated as defined by the 'Starts with' option on the 'Relation' tab.

You can then configure this state just as you did for the first one. One thing to remember is that all the images used must be exactly the same size.
The other buttons in this are should be fairly clear as to what they do. Obviously the 'Remove' button removes a created state though you obviously need to have one state for an object. Once you have spend time setting up the first state, the likelihood is that other states will be fine tuned versions of that state, so for speed you can use the 'Copy From' button to copy the settings from another created state to the currently selected one.
The 'Reset' button clears all modifications in the currently selected state so you can start again.
When you create a state the drop-down list shows you the states that exist by default in DesktopX, but you aren't just limited to these. In the drop-down list box you can just type any name in and a 'Custom State' of that name will be created which can be configured just like any other.

Though these states are not triggered by user interaction they can be activated by Messages and Script which we will come onto later and are very useful for that purpose. The one final thing to define in a multiple state object is the 'Default Appearance'. On the 'General' tab you can specify the image to be used when the object first loads. This will not change until the object is interacted with in some way. Note that this image must be the same size as all the other state images.

 

Animating Objects

Whilst everything you learnt in the previous section was great, there's nothing that catches the eye like movement, so DesktopX makes it easy for you to add animation to your objects. The ‘animation’ tab is where you can define how your object animates.

The first thing to explain is that there are the two different types of animation that DesktopX can do. A 'Static animation' is the most simple animation option. This simply changes the level of transparency rather than the image itself. Slightly more complex is a standard animation with different images over time.

Static Animations

We will start with a 'Static animation'. To start with, set a number of frames. A frame is an individual part of an animation, so the higher the number of states the more different 'images' an animation has. Once you set this value higher than '1', the 'Interval' is enabled. This is how long each part of the animation lasts in milliseconds. The higher the value the longer the animation takes. For example, a 5 frame image with an interval of 50ms will take 250ms (1/4 of a second). You also need to check the 'Static animation' checkbox so that DesktopX knows not to expect an animated image, just to vary transparency.

If you check the 'Loop' box then the animation will be repeated as long as the object is in that state. Normally if the state changes then the animation will play through to the end, but if you check the 'Interruptible' box then to state will change immediately without playing to the end. After that you simply need to set the direction in which the animation will fun by selecting one of the 4 options available.

If you are looping the animation it will probably make sense to choose one of the bottom pair as this will lead to a nice smooth pulsing transparency effect.
The final thing that you need to do is specify the change in transparency. This is where you get to use the third option on the 'Transparency' tab. Here you specify how the transparency varies in one cycle of the animation. This will then be impacted by the animation style you chose and whether you chose to 'Loop' the animation. Try experimenting with these options and see how they change the appearance of the object.

Image animations

We will now look at actually animating the image itself, rather than just animating the transparency. Though I said that this is more complicated, it still isn't actually that difficult. The change you need to make is to combine all the frames of the animation into your source image. What you need to do is place the frames of the animation side by side from left to right.

The above is the source image for a six frame animation of the DesktopX logo being worked on in Fireworks. There are six 100x100 images next to each other in one 600x100 image. If you run this forwards then the image will increase in size. Once you have done this then just change the other settings as you were shown for the 'Static animation'. This includes transparency so you can change both the image and the transparency over the course of an animation.

 

The Basics of Relationships

You've already learnt about how the objects you create can interact with the user, and will now learn how they interact with each other. DesktopX allows you to tweak how they interact with users, but also how they interact with the desktop and other applications on screen. To access these settings, open up the Object Properties dialogue and then click the 'Relation' tab.

Visibility

The first thing you can specify is whether the object is visible or not. You may wonder why you would want to hide objects. There are two main reasons. The first is that the object may be doing work in the background such as loading a webpage which you don’t want visible. Alternatively, you may only want the object to be visible at certain times which are controlled by script or popups which we will come onto later.

Z-Order

If you consider a desktop, then all objects on there have an 'x' and 'y' position which defines where they are on the screen. What you might not consciously have thought about is their 'Z-Order'. This defines which object or application appears 'on top' of the other when they overlap. Objects with a higher Z-Order appear on top of those with a lower Z-Order.

You have three Z-Order options for your objects. The first is 'Desktop'. This means that running applications will always appear above your objects. They will open on the desktop. Those interacted with most recently (clicked/moved), will be on top of other objects.

A 'Normal' Z-Order means like the object will behave like a mini-application. Objects with a 'Normal' Z-Order appear above or below applications and other 'Normal' Z-Order objects depending on which were interacted with most recently.

An 'Always on Top' Z-Order means that this object will always be visible above all applications and objects. It functions in the same way as the 'Always on top' setting of the default Windows taskbar.

Movement

'Movement' can be defined as 'Normal' or 'Locked'. If it is 'Normal' then the user can drag the object around the screen. If 'Locked', this is not possible. The user can still move the object by holding down the CTRL key and dragging, but accidental movement is not possible. You can also choose the 'Default' mode, which means that its movement is defined by the User's DesktopX Settings as we discussed in the last section.

Activation

'Activation' defines how the user can interact with the object. If the setting is 'Default' then it simply follows the user's settings, but you have three other options. 'Rectangular' activation is based on the size of the source graphic and ignores any transparency in the object, whereas 'Visible Area' means that only those areas of the object visible on screen can be interacted with. The final option 'None' means that the user cannot interact with this object and any attempts to do so are ignored. This is usually most important for cosmetic objects on the desktop.

Start with

'Start with' defines the way in which a user interacts with an object. It is not always the case that you want a user to have to click an object to activate it. In addition to the standard 'Default' option, you have four more ways in which a user can interact with the object. Sometimes for example you may simply want the user to move over an object for something to occur.

Default Cursor

This option allows you to specify which cursor will be displayed when the mouse moves over the object. This is a very useful way to indicate to the user the effect of their interaction with the object, for example if you want a user to drag and move the object rather than clicking it then it would make sense to use the ‘Move’ cursor.

Popups

OK, now onto 'Popups'. These are a really cool feature in DesktopX that we briefly mentioned in the Object Types section.

Earlier in this section we discussed visibility. You don't always want objects to be visible on the screen, and in some cases you may want them to be 'Popups' whose appearance on screen is controlled by other objects that have the 'Object Controller' type. If the object is referenced by an object controller then it will function as a popup depending on the value set here. If the object is not used as a popup in this way, then this value is simple ignored.

You should note that when an object is called as a popup then all children of that object or objects in the same group will also inherit the popup functionality of that object. This is because popups are just really a shortcut for the visibility setting. By this, I mean that popups are essentially a dynamic way of setting the visibility of the object. Visibility is a property the is shared by group members and children inherit it from their parent. Don’t worry if you don’t understand the parent/children definition. We discuss them in more detail later.

Here are the popup types:
'Static' popups - Normally, an Object Controller will toggle the appearance of a popup (open it or close it depending on whether it already is visible). Once these 'Static' popups are opened they must have a different Object Controller to the original one to close them. Think of them like a normal program. Clicking a link to a program will open it, but clicking the link again will not close the application. A separate 'Object Controller', the close button, is required to do this.

'Toggle' popups - Are the simplest types. If the popup is hidden when you click the Object Controller it will be shown. If the popup is visible when you click the Object Controller it will be hidden.

'Menu' popups - These popups once displayed, will only remain until the user interacts with the desktop in anyway. They have this name because they function just like menus; unless you click them immediately to carry out the function they are there to do they disappear.

'Volatile' popups - Once a 'Volatile' popup is shown, it will remain until either the controller is toggled or another popup is opened.

'Volatile (No toggle)' popups - This is just like the previous version, except that toggling the Object Controller is disabled like in a 'Static' popup, so the only way to make it disappear is to activate another popup.

Position Adjustment

When you are developing for yourself you will design everything so it fits your screen perfectly. So, what happens if you change your screen resolution or you give your work to another user who runs at a different resolution?  Well, DesktopX can make a fairly good guess but it is certainly not perfect, so if you are going to make good objects you should pay attention to the two options you see above.  By specifying values in here, you can define how the object will reposition itself when the screen resolution changes. DesktopX logs what resolution the screen was designed on and therefore detects changes and reacts according.

The 'Dock to Left' and 'Dock to Right' options mean that the object will remain the same distance from that edge as it was when originally designed. 'Dock to Nearest xxxx Border' means that the object will align itself to the nearest edge of the screen (vertical or horizontal depending on option). For example, if you have an object against the tight edge of the screen then increase the resolution, you run the risk that it will end up floating away from the new edge. An object that repositions based on the 'Center' option will be relatively the same distance from the center of the screen as it was in the resolution for which it was developed.

The final option 'Rescale' means that the object will be relatively the same distance across the screen at different resolutions. For example, and object positioned at 200,200 on an 800x600 screen would be positioned at 320x341 on a 1280x1024 screen (25% across, 33% down).

 

Object Grouping

Grouping is important if you want your objects to behave as a single unit. As you’ve no doubt figured out, a given object can really only do one thing at a given time.

This is best illustrated with an example. Imagine we wanted to create a simple Drive C bar disk space bar graph.

I would need 3 objects:

Object #1: The background for my meter
Object #2: The text label to say “Drive C:”
Object #3: The actual bar graph

So I would create my 3 objects.

Object #1 – the background. I would change its default appearance to be something relatively solid.
Object #2 – the text label. I would go to the appearance tab, change it to be a text object and type “Drive C:”.
Object #3 – the bar graph. I would open the object properties, go to the additional abilities area on the general tab, choose “add” and pick the Performance Meter plug-in. Then select it, make sure its width and height fit within the size of my background. Then I would click on the data source tab and choose its data source to be the disk space from Drive C.

Drive C

At this point I would have something like the above. Now, I would drag and drop the objects together to make it look how I wanted it.

Then I would drag select (or right click on one of the objects and do a select->all) all the objects. Then I would right click and choose group:

Group

When I pick group I get this dialog:

Dialog

First I would need to give my group a name, any name will do.

Next I would need to decide which of these options I would want to use. Realistically, they’re all pretty much the same. The difference in the three options is pretty technical but here they are explained:

Normal (grouping)

This puts the objects in a basic group. DesktopX doesn’t modify the parent-child relationship of the objects, instead it manually keeps track of how the objects are grouped to one another. This option is good if you have a really complicated object with lots of very specific parent-child relationships that you don’t want modified.

The down side is that when moving the object around, there is a loss of performance since there’s a lot more book keeping by DesktopX to preserve all the existing parent/child relationships.

Optimized (grouping)

In this scenario, DesktopX will generate parent/child relationships between the various objects based on their relative Z-order to one another. The objects are still individual entities as far as DesktopX is concerned but they will now move together very smoothly. This is the most common option (and the default).

The down side is that it will modify the parent child relationships of objects which, if the object was counting on a particular object being its parent can be a problem.

Combine (grouping)

In this option, the objects are effectively combined into a single mega object. This provides the ultimate in performance when moving the object around. The down-side is that it creates a single window for the whole object. That means if you move a child object away from the parent, it’ll disappear since it’s outside the “object window”.

 

Object Context Menu

Context menu

As previously discussed, objects in the DesktopX development environment (i.e. the builder) have a number of options available to them.

Options include:

  • Clone. Create an identical copy of the selected object.
  • Delete. Remove the selected object from your desktop.
  • Set Parent. Assign a parent to this object. By doing this, when the parent is moved, the child is moved with it.
  • Z-Order. Change the relative Z axis position of the objects relative to other objects that are at the same level. For instance, if you have 5 objects that are “Desktop” z-order this will allow you to determine which object is on top of which.
  • Select. Allows you to select all or related objects to the selected object.
  • Export. Brings up the export dialog which will lead to allowing you to export the object as an “object pack”, a “widget”, or in the case of DesktopX Pro a “Gadget”.

 

DesktopX Plugins

DesktopX is a flexible program that opens itself up to developers who can create plug-ins. These are additional modules providing packaged functionality that you as a user can access. To create an object based on a plug-ins simply create an object as normal, then in the 'Additional Abilities' section of the 'General' tab, click the 'Add' button. This will then pop up a list of available plug-ins on your system. All you need to do is select the plug-in you want to use, and then click OK.

Each plug-in needs to be configured differently but we will go through a few examples of the different types here.

If you need to remove a plug-in, simply select the plug-in in 'Additional Abilities' and click 'Remove'.

Digital Clock (Text State)

When this is used the immediate impression may be that nothing has happened.

However, if you go to the 'States' tab and check 'Text' on 'Appearance' then all
or a sudden you have a digital clock on your desktop. What's cool about this implementation is that it uses standard DesktopX text so you can tweak the text any way you like including shadows, and it is exposed to manipulation via script such as the ability to change its color dynamically.

Clock

Email Notify

You can configure this plug-in by entering your mailbox details and how often you want to check. The way it works it to create two new Custom states (you recall we mentioned these earlier?) called 'New mail' and 'No new mail'. You can define each of these states to be representative of whether you have mail of not. These could be images or simply different text. You may even decide that it makes sense that rather than this object being a 'Layer' it is a Shortcut to your email program.
Mailbox

Scriptable Email Notify

This plug-in offers totally scriptable email notification functionality. For a complete discussion refer to the Email notify plug-in section in the scripting guide.
Mailbox

Performance Meters

This delivers dynamic graphics to your desktop that would be difficult to create otherwise.

You can chart CPU and other performance measures in a range of graphs and a range of colors, all accessible via the 'Configure' button. Tweak to your hearts content! Remember that 'Magic pink' provides transparency. Also remember that 'magic pink' doesn't work in gradients because most of the pink in the gradient isn't 'pure' and hence 'magic'.
Meter

DX Player

This delivers complete interaction with your media player be it ObjectMedia, Winamp 2.x or CoolPlayer. You can define what happens when the user interacts with the object, even to the degree of whether they are holding down any keys. In some cases images are needed and you can define them here as well such as gauges for volume etc. I'm not going into the detail of the plug-in here. Check out the player widget that comes by default with DesktopX to see what can be achieved with this plug-in.

 

Custom Files

In the summary tab, there is a button labeled “Custom Files”. This allows you to attach files to objects just as you would do to email that you send.
The first reason that you may wish to do this is to attach fonts to a package. If you have text objects that use a font that you are not sure a user has on their machine then you can attach them as a Custom File.

DesktopX automatically installs any fonts that included with a pack, so then you text objects will appear as intended. This introduces an important point. You must ensure that by attaching Custom Files of any sort that you have the file author’s permission or that the file is not subject to any copyright or licensing agreement which does not permit distribution.

There are many other potential uses for Custom Files. When a package containing Custom files is loaded they are automatically extracted to the theme directory so they are accessible from there. For example, if you attach your brochure as a PDF you could create an object that links to it using the shortcut “%objectdir%\Brochure.pdf” You may want to attach a flash movie which can then be loaded into a web browser control. Budding musicians may want to attach MP3 files and create a “demo track” object that they want to send to record companies. The options are unlimited.

 

Exporting Widgets, Objects and Themes

OK, you've learnt the basics of creating objects, but now you need to know how to export Objects and Themes. First thing to note quickly, is that though it's a great idea to save your work frequently, every time you click OK or Apply on a dialog, the current work on the desktop will be saved and then reloaded next time DesktopX is reloaded.

Saving a theme is quick and easy. In the DesktopX Settings dialog on the Theme tab, all you need to do is click the 'Save As' button. You will then be prompted to specify and name for your theme and choose where you want to save it. You can also specify some additional information about your theme.
At various locations, you may see a 'Save' option along side the 'Save as...' option. This simply saves details of your existing theme to the hard drive so if anything went wrong with your machine, DesktopX would be able to restore to this position when reloaded.

Exporting objects and widgets is also really easy. To do this, the first thing to do is select the object(s) you want to export. You can do this on the screen by dragging a rectangle with your cursor. A selection area will be highlighted and those objects selected will take on a 'blue tint'. You can also do this by selecting the objects in the Object Navigator. Once you've selected the objects you can right click one of the selected objects and Click 'Export…'.

Following this, you will have a range of options. On the left of the dialog, there is a choice of exporting specifically the objects that you have selected or, also exporting and objects related to these (by group or parent/child relationship). You also have a choice in how you export the file. The first is the most common option. Use this to create a “.dxpack” file which is a standard object pack that can be loaded by DesktopX users.

The second export type is as a “Widget”, which I introduced you too in the User’s Guide. A widget is a standard executable file that you can run on your computer alongside DesktopX, or even without running DesktopX. You can share this widget with others, but you should be aware that the widget will only run on computers which have DesktopX installed. After specifying one of these two options, all you do is specify a name and location for the exported file and then it is saved.

Remember that if you create a normal “.dxpack” you can upload your work to the WinCustomize website. By doing this others can benefit from your creations and you may get feedback from users that helps you develop in the future. DesktopX Pro users have a third export option. This is also for the creation of a widget, but this widget will run as a standard program on any machine without requiring that DesktopX be installed. Selecting this gives you a range of options to complete which are related to the object or are displayed in the ‘About’ box:

Application name: Specify the name for your application here.
Company: Place your name here, either yourself as the author or your company.
Version: You can specify the application version here.
URL: You can provide a website address that the user can link to from the ‘About’ box.
Application icon: Optionally you can check the box and specify a “.ICO” file that will be used for the application. If an icon is not specified then the default DesktopX icon will be used.
Run Type: You can specify how you want the application to run. Main applications will probably want to run as “Taskbar items” and utilities run from the “System Tray”.
Multiple instances: Specify this is you want to allow more than one copy of the application to run at any time. For example, if creating an international clock object you may want to allow users to run several instances to allow them to have clocks for different time zones.

On the next page you have options to export the file in two ways. The first way is similar to the standard widget, in that a single executable file is created which can be run. All the files needed by DesktopX are placed in a temporary directory when this is run, so it is still possible to access these via script.
The second export type separates all the files used so they can be installed using another method. You will want to use this option if the widget is part of a bigger deliverable that you want to package using a custom installer.

The final item on this page allows to specify a text file that will be accessible from the “About” box. This can be used to communicate information about the application or a licensing agreement for the applications use. Once you have specified your choices here, the next and final page asks you to confirm your agreement to the distribution of the executable files, and then you can specify where you want to store your application/files.
Users can choose to have widgets run on startup from the widget’s right click menu.


Previous Page     Next Page