WoWPUGBuilder: UI Implement Day

WoWPUGBuilder UI Implement Day Banner

This week I worked on implementing the WoWPUGBuilder user interface. This task was fairly easy with WoWPedometer. With WoWPUGBuilder it's going to be a little bit more complex. I hit my first two major stumbling block, configuring the frame to be movable, due to a typo while another involves finding the right graphic elements to use to construct the UI.

Actually there were two typos responsible for my difficulties getting the frame to be movable; I mistyped the OnLoad function, WoWPUGBuilder_OnLoad(), as well as the "movable="true"" attribute in the frame declaration. Luckly I was able to get some extra eyes over at the WoW Programming website. While, in the future, I will probably need to learn how to catch errors in the function calls on my own, and a little bit quicker, the lesson I learned concerning XML was to make sure I always run those files through XML Nanny as my first troubleshooting method. It would have easily caught the XML typo error and saved me a day's worth of trouble. ;)

Moving along, I was able to decide on a general UI configuration. My inspiration for first version of WoWPUGBuilder's interface was the built in Time Manager interface. I was able to duplicate the look and feel of the Time manager's configuration interface window, as you can see in the image below...

...So far, the window has been altered slightly by substituting "GlobeIcon" for "FriendsFrameScrollIcon", removing the Time Manager Ticker completely, and replacing the title of the window with "WOWPB".

With this general UI design, my goals for this interface will be 1.) to adjust the size of the window to accommodate whatever controls need to fit within it, and 2.) implement those controls within the window. I am still shooting for something that will ultimately come out looking like what I prototyped in my last blog post.

I would made adjustments in the size of the window already but I was having some trouble doing so with the graphic elements that were provide by the Time Manager UI. It seems that the graphic elements are implemented in such a way that the sides elements of the window also integrate the bottom elements. I spent some time looking for the best way to adjust the size of the window without skewing the graphics in either the horizontal or vertical planes. Eventually I decided to spend my time trying to figure out why the frame wasn't "movable".

One last item I was able to get working was the close window button. I can't claim too much credit for this, however, as I pretty much copied the (very simple) code that worked in the Time Manager window. When you click the "x" button, the window does indeed get hidden. Unfortunately, I have not implemented any way to bring the window back. Halfway was good enough for my first attempt I'm thinking. ;)

Hopefully by next week I will have made some considerable progress towards my UI design goals. After I get the UI implemented I'll have a better idea on how to go about implementing the actual code that will make it work. Wish me luck!

Comments