Battletech Live

Online, Turn-Based Battletech – Development Logs

Construction of a self-regulating helpdesk system.

Yesterday, I began working on a better helpdesk panel for Battletech Live.  I wanted more than just a form for users to fill out, and to eliminate the need to send email responses to users.  Looking at http://www.stackoverflow.com and others as a guide, I wanted users to be able to ask questions and have the panel auto-update as a mini forum.  Other users, not just moderators, should be able to help answer questions and leave comments on threads, while only moderators should be able to flag official answers and make edits to posts.  I also wanted a number of filters, such as the top 10, top 100, most active, most viewed, unanswered, as well as custom keywords and sort by category.  The first screenshot is my first draft.

Picture 3

While it all works, it’s a bit cluttered.  The first two buttons take up too much space.  I looked at them and thought that they could easily become elements within a combo box, and the section to the right, to be used for word filters, looked much too empty.  Within the grid, the three columns are aligned to the right since they contain numbers, but the headings look really off.  Finally, it seemed to take up too much space.

So, I decided to make it wide and short.  The word filters are moved to the left edge, the buttons have been consolidated, and more options added to the combo boxes.  The grid was made a little wider, and a few pixels padding added to the numbered columns.  The thread was then narrowed and moved up and to the right, with statistics moved to the bottom.

I’m now working on enabling replies and comments, as well as various administrative and record-keeping tasks.

Picture 2

August 28, 2009 Posted by | Project Development | Leave a comment

Deleting elements from an XML-driven tree control

I’ve been struggling with a number of concepts this weekend, mainly how to add and remove objects from a tree component that uses XML as a source.  There are a number of blogs available that talk about XML, XMLLists, how AS3 uses E4X, which is good, but most don’t go into enough detail to be truly useful.  Within XML structures, you can have siblings, which are other nodes, descendants, and attributes.  As a brief example, consider the following block:

<xml label="friends">
     <element kind="user" label="Aleksizz" icon="boy0" gender="M" age="new"/>
     <element kind="user" label="Le Singe" icon="boy0" gender="M" age="old"/>
     <element kind="group" label="Oklahoma">
          <element kind="user" label="berzerker" icon="boy12" gender="M" age="old"/>
          <element kind="user" label="Granpa_jo" icon="boy28" gender="M" age="old"/>
          <element kind="user" label="zardozbtech" icon="boy4" gender="M" age="old"/>
     </element>
</xml>

The text block corresponds to the following tree.  In the lower-right is a trash can.  The idea is that the items within the tree structure can be moved around and if any of them need to be deleted, they can be dragged to trash.  When this happens, the item gets removed from the tree and placed in the trash, reflected by the change in the icon.  If the user wants to review what’s placed in the trash, they can click on the can and  a small panel will display those items.  Everything, up to this point, sucked.  The struggle was not to remove an item from the tree or from the XML, but in finding which item to remove.  If I do a trace on folderTree.length before anything is placed into the tree, I find that it already contains 3 items, which I couldn’t figure out how to reference.  After the friends list was built, the tree shows six viewable rows, but if I trace folderTree.length again, the result is 17.  wtf?  Looking at the XML above, there nine rows, so that doesn’t add up either.  In the end, the code that got it to work is as follows:

delete friendSource..element.(@label == String(trashGrid[trashGrid.length-1][‘label’]))[0];

In the XML listing, every displayed item begins with “element”.  In the string x.y.z, y is a child of x and z is a child of y.  But, an attribute is part of a node, not a descendant, so you might say x.y.@z.  Make no sense so far?  This might help.  The double dots after friendSource, tells the system to search for all “element” nodes within friendSource, regardless of relationship.  Inside the parenthesis, it says that if the label attribute of the found element is equal to the label value of the last item to be placed into the trash can, then we have a match.  And finally, at the very end we have [0].  I still don’t know quite what that part does, but I know that without it, it doesn’t get deleted.  [0] typically represents the first element of a sequence or an array.

The next task to be completed is dragging items from the trash back out into the tree.  That bit is typically something like this:

friendSource = friendSource.prependChild(friendRecord);

prependChild tells it to place the new record at the beginning of everything else.  appendChild would place it at the end.  There are also commands to tell it to place the record before or after a particular node.  I should have that done tomorrow and started on the buttons for adding and removing groups.

Picture 1Picture 2Picture 3

August 9, 2009 Posted by | Project Development | Leave a comment

User avatars for friends lists

The most recent task in the site development has been to create a means by which a user can add others to their friends list.  These users will appear in the friends portion of the messenger panel and as an icon attached to inbound and outbound email.  Users should be able to perform the following actions:

  • Create user groups
  • Remove user groups
  • Add friends
  • remove friends
  • set custom icons

Since each user has their own friends list, the information is stored in a field of the users table on the database and this is one of the elements that gets retrieved when a user signs in.  Using Actionscript, the field data is parsed and stored in two places.  Once as an XML list to display in a tree control and second, in an array collection.  This array collection keeps lines corresponding to the number of rows of the tree controller and keeps track of whether it’s a user or a group.  If grabs the group name and in case of users, the id, username and gender.

When a row of the tree controller is clicked, logic dictates which buttons should be available and when the change icon button is changed, a series of avatars are made available based on the gender of the selected user.

When the Add to Friends button is clicked, it will be set up so that the chosen user is automatically added to the friends list as uncategorized.  The user can then drag-and-drop the user into the desired group, or leave them as-is and click Done.

Picture 1

August 5, 2009 Posted by | Project Development | Leave a comment