New Addon XML/Lua Generator

[KCmilam]

I posted this in the Interface Help forums but it was probably the wrong place, then I saw this forum and thought it'd be best here.

I have been developing an addon for quite some time now and became frustrated with creating the FrameXML file for it. I had an app written in VB.Net that helped me do quick and simple things and thought I'd move it over to Silverlight and share it.

Because it's written in Silverlight 3, it's not an executable and you can be rest assured that it is completely harmless. (Silverlight does not have access to anything on your computer)

UI XML Editor
*Works best in Firefox and IE 2008. Doesn't not work in 64bit browsers.


It basically writes the XML code as well as the Lua Code for the widgets as you draw the components on the screen. It's very simple and straight forward right now because I use it mainly for laying out my Options panels and etc. It's good for positioning components and setting up the hierarchy of them.

It allows for easy editing of a widgets properties and scripts when they are selected.

It's good if you want to get a quick and dirty design for a frame and copy and paste the code into your xml as well.

To use it:
-Click the Frame component in the ToolBox. Click the upper left corner of the frame in the drawing area and drag down and to the left to draw it. Other components can be added to the frame by selecting them and placing them inside the frame.

-Press escape to hide the crosshairs and use the hand to move components around.

-Drag components to the trash can to delete them.

-Selected components are highlighted in blue.

-Selecting a component will highlight it's respective code in the xml. (A bit buggy right now, sometimes have to click the FrameXML area as least ones to get it to start working)

There are still a lot of little bugs to work out, but I need a little help finding them. I got a lot to add and a lot of ideas to improve it.

Try it out and let me know what you think! If you would like to use it, please do so and PM any bugs you might come across. Thanks!

[Xrystal]

That looks pretty good. I'd try it out if I wrote xml based addons. Is it possible you could get it to make lua code only instead of xml/lua ?

[KCmilam]

Xrystal, you'll notice the Lua tab at the bottom of the screen. It produces both, and you choose which you want to use. Just copy and paste the one you desire.

I updated with a new version which should fix the Parent inheritance bug as well as a few other minor ones.

I added better formatting to the XML and Lua text boxes as well.

Also, backdrops and status bar colors can be defined in the properties window.

[Xrystal]

My apologies, I didn't see the tabs at the bottom, *doh*. I'll give it a nice test run when I start work on my options screen for my recent watchframe addon.

[KCmilam]

I appreciate Xrystal. There are so many little things that can go wrong in Lua code, such as a misplaced quotation mark (one i found a bit earlier) that can cause it to completely not work. They are very easy to fix, I just need help finding all of them.

I plan on this app evolving into a full fledged Addon IDE. In a couple weeks, it should be able to all widgets, present templates for each, allow for Lua function and variable coding, intellisense, and an Object Library of the FrameXML.

I've been working on it for 3 days now, and Silverlight is just amazing. I used to program in Flash, but Silverlight is made for online apps. If you have any suggestions or critiques, please inform me. Constructive criticism is what makes applications well rounded and useful to many people.

[Xrystal]

I had a quick play with it and its possible that I didn't spot how to stop it from happening but once I clicked on an object to draw I couldn't stop drawing.

Eg. I made a frame, scrollframe etc then clicked on button and made a button or two then when I tried to select one to move it around I couldn't, it just made another button parented to the one I had clicked on. I didn't test to see if pressing escape releases the drawing stamp but thought I would mention it just in case.

The way I code is a lot different but I will say from the code it generates it will definitely speed up my more complex addons.

As to Silverlight programming. I was wondering what that was all about, now I know

[Bruners]

To bad silverlight 3 doesn't work on Linux yet.

[Torhal]

Originally Posted by Bruners To bad silverlight 3 doesn't work on Linux yet.

I have nothing to add to this statement - I simply agree.

[KCmilam]

Xrystal, sorry but I forgot to mention that you need to press "Escape" to return to the normal cursor in which you can Drag/Select other widgets. I'm so used to AutoCAD that this is second nature to me. If there is anyway that you think might be better to accommodate this task, please share.

And as for Silverlight not working with Linux, I agree. I dream of the day when there will be such a powerful tool that is compatible across all platforms. There is however an open source implementation of Silverlight for Linux known as Moonlight which is used to run Silverlight applications on Linux. Perhaps you could try this.

[Xrystal]

Nah, it's cool. I just had a quick play with it and it was the first thing I spotted. I assumed that escape was a possible key to press but wanted to point it out just in case it was something more obscure or obvious that I didn't realise

[Bruners]

Originally Posted by KCmilam And as for Silverlight not working with Linux, I agree. I dream of the day when there will be such a powerful tool that is compatible across all platforms. There is however an open source implementation of Silverlight for Linux known as Moonlight which is used to run Silverlight applications on Linux. Perhaps you could try this.

it is only first generation of Silverlight that is working with Moonlight, and barely that due to crappy implementations.

[KCmilam]

Added a few things.

Now you can save and open your xml files that you have created with the app by clicking "Open" or "Save" to the upper left.

Also, changes made in the xml code can be reflected in the designer by pressing the Update Designer button found to the lower left on the xml tab.

[jaliborc]

Looks great. Nice work!

[KCmilam]

I did a little testing on it again last night and found a few problems. I guess the default backgrounds and border I'm using for the widgets causes them to appear extremely black in game.

What are some good default backdrops that are used for each widget?
Mainly...
-Scrollframe
-Frame
-Statusbar
-Editbox

Edit: Added support for function generation. Functions can be created by selecting the Functions tab, clicking the "+" button to the lower right, and defining the function in the table. Functions defined here will be used for the autocomplete source when defining script handlers in the designer. They are also written out to the Lua code tab.

[KCmilam]

Well I pushed another update. I've been using it to make a new options panel for an addon and realized that it had trouble opening prexisting addon xml files.

The cause of the bug was from the two different ways that Anchors, Insets, Sizes, and Values could be set.

Method 1:

<Anchors>
    <Anchor point="TOPLEFT">
        <Offset x="15" y="15" />
    </Anchor>
</Anchors>

Method 2:

<Anchors>
    <Anchor point="TOPLEFT">
        <Offset>
            <AbsDimension x="15" y="15" />
        </Offset>
    </Anchor>
</Anchors>

It should be able to read both methods now and display the layout of the addon after pasting the code in the xml tab and pressing Update Designer.

[Xrystal]

I use the following for my frame backdrops. I haven't needed to use them for anything else yet but here goes:

BackDrop = {
bgFile = "Interface/Tooltips/UI-Tooltip-Background",
edgeFile = "Interface/Tooltips/UI-Tooltip-Border",
tile = true,
tileSize = 16,
edgeSize = 16,
insets = { left = 4, right = 4, top = 4, bottom = 4 }
}

Also, I spotted the following errors when trying to direct copy the lua to my addon.

[2010/02/23 19:43:11-892-x1]: ScrollingWatchFrame-1.01.01\SWF_SlashCommands.lua:74: attempt to call method 'SetTopLevel' (a nil value)
ScrollingWatchFrame-1.01.01\SWF_SlashCommands.lua:315: in function `value'
Interface\FrameXML\ChatFrame.lua:3573: in function <Interface\FrameXML\ChatFrame.lua:3505>:
<in C code>: in function `ChatEdit_ParseText'
Interface\FrameXML\ChatFrame.lua:3221: in function `ChatEdit_SendText':
Interface\FrameXML\ChatFrame.lua:3245: in function `ChatEdit_OnEnterPressed':
<string>:"*:OnEnterPressed":1: in function <[string "*:OnEnterPressed"]:1>

The line in question is this:
frmOption:SetTopLevel(true)
Removed the line to bypass error.

[2010/02/23 19:46:53-893-x1]: ScrollingWatchFrame-1.01.01\SWF_SlashCommands.lua:82: attempt to call global 'CreateFontString' (a nil value)
ScrollingWatchFrame-1.01.01\SWF_SlashCommands.lua:315: in function `value'
Interface\FrameXML\ChatFrame.lua:3573: in function <Interface\FrameXML\ChatFrame.lua:3505>:
<in C code>: in function `ChatEdit_ParseText'
Interface\FrameXML\ChatFrame.lua:3221: in function `ChatEdit_SendText':
Interface\FrameXML\ChatFrame.lua:3245: in function `ChatEdit_OnEnterPressed':
<string>:"*:OnEnterPressed":1: in function <[string "*:OnEnterPressed"]:1>

  ---

Line in question generated by code is as follows:
frmOption.fsWidth = CreateFontString("frmOptionfsWidth","OVERLAY",frmOption)
This needs to be changed to
frmOption.fsWidth = frmOptions:CreateFontString("frmOptionfsWidth","OVERLAY",frmOption)
for this error to be bypassed

[2010/02/23 19:49:50-894-x1]: ScrollingWatchFrame-1.01.01\SWF_SlashCommands.lua:85: frmOptionfsWidth:SetText(): Font not set
ScrollingWatchFrame-1.01.01\SWF_SlashCommands.lua:85: in function `Interface'
ScrollingWatchFrame-1.01.01\SWF_SlashCommands.lua:315: in function `value'
Interface\FrameXML\ChatFrame.lua:3573: in function <Interface\FrameXML\ChatFrame.lua:3505>:
<in C code>: in function `ChatEdit_ParseText'
Interface\FrameXML\ChatFrame.lua:3221: in function `ChatEdit_SendText':
Interface\FrameXML\ChatFrame.lua:3245: in function `ChatEdit_OnEnterPressed':
<string>:"*:OnEnterPressed":1: in function <[string "*:OnEnterPressed"]:1>

  ---

Line in question in my addon :
frmOption.fsWidth:SetFont("Fonts\FRIZQT__.TTF",10)
needs to be changed to
frmOption.fsWidth:SetFont("Fonts\\FRIZQT__.TTF",10)
For it to bypass that error.

Resulting screen display with no other code changes on my point is as follows:

It did speed up the design of the options screen but there is a lot of duplicated code there and as you can see doesn't quite work the way I planned it to work. Not sure if I will use this in the long run as I tend to make reusable functions to do this stuff for me but designing wise it may come in useful. Only time will tell.

Hopefully the above changes can be worked in somewhere and if I can easily correct the visual result in a way you can implement then I will let you know what I did to correct the problems. But grats on a useful feature as I am sure there are tons of people that will benefit more in the long run.

Oh, and if all the posting above wasn't a guide I do all my coding in lua so perhaps the xml side of things are working very well in comparison.

And also, I will add that apart from the name and text fields I didn't do any alterations inside the visual designer, so if that is the cause of the above problems that's great I actually forgot I hadn't done that but I'm not sure setting values for the sliders would fix the layout of the fontstrings which I suspect are due to the fact that they are art elements more than objects. I usually manage to tie them to a physical object and move them that way.

[Xrystal]

Okay, looks like I may have to go back to my usual way of designing interfaces. Way too many things to change unfortunately for me. Anyways, in light of the fontstring alignments I haven't found an easy way around it yet with the code automatically generated. As I pointed out in the last post the problems could be due to my not setting the other fields.

[Xrystal]

Aha, I figured out why everything seemed extra codey to the way I usually work. The screenshot below I just wrote from the ground up with the following code. Where I use the UI Options templates it cuts down alot of the code which I personally don't need to alter. For those that like full control over their controls may be quite happy with your utility unfortunately it isn't for me in its current state. The same layout ( which you could see didn't work successfully ) took up at least 3 times the amount of coding which was unnecessary in my case. All I need to do is now set the anchors the way I usually do, although at present they look fine so far, and also set up the coding to reflect the changes and default values. And of course my SetMovable function needs to be set up along with the other related functions.

addonData["Interface"].AddCheckButton = function(name,text,parent)
	local f = CreateFrame("CheckButton", name, parent,"OptionsCheckButtonTemplate");
	_G[f:GetName().."Text"]:SetText(text);
	return f;
end

addonData["Interface"].AddPushButton = function(name,text,parent)
	local f = CreateFrame("Button",name,parent,"OptionsButtonTemplate");
	_G[f:GetName().."Text"]:SetText(text);
	return f;	
end

addonData["Interface"].AddSlider = function(name,text,parent,minValue,maxValue,stepValue, orientation)
        local f = CreateFrame("Slider",name,parent,"OptionsSliderTemplate");
		_G[f:GetName().."Text"]:SetText(text);
        _G[f:GetName().."Low"]:SetText(minValue);
        _G[f:GetName().."High"]:SetText(maxValue);
        f:SetMinMaxValues(minValue,maxValue);
        f:SetValueStep(stepValue);          
        f:SetOrientation(orientation);
        return f;      
end

addonData["Interface"].Create = function()

	local DefaultBackDrop = {
		bgFile = "Interface/Tooltips/UI-Tooltip-Background", 
		edgeFile = "Interface/Tooltips/UI-Tooltip-Border", 
		tile = true, 
		tileSize = 16, 
		edgeSize = 16, 
		insets = { left = 4, right = 4, top = 4, bottom = 4 }
	};

	local f = CreateFrame("Frame", "frameOptions", UIParent);
	f:SetBackdrop(DefaultBackDrop);
    f:SetBackdropColor(0, 0, 0, 1)
    f:SetHeight(320)
    f:SetWidth(400)
    f:SetPoint("CENTER",0,0)
    f:SetFrameStrata("HIGH")
    f:EnableMouse(true)
    f:SetClampedToScreen(true)
    f:SetMovable(true)
     
	f.Lock = addonData["Interface"].AddCheckButton("cbLock","Lock Frame",f);
    f.Lock:SetPoint("TOPLEFT",10,-230)
	    
	f.Multiple = addonData["Interface"].AddCheckButton("cbMultiple","Track Multiple Anchors",f);
    f.Multiple:SetPoint("TOPLEFT",10,-210)  

	f.BackGround = addonData["Interface"].AddCheckButton("cbBackGround","Show BackGround",f);
    f.BackGround:SetPoint("TOPLEFT",230,-250)

	f.AutoHide = addonData["Interface"].AddCheckButton("cbAutoHide","Auto Hide Frame",f);
    f.AutoHide:SetPoint("TOPLEFT",230,-210)
    
	f.AutoWiden = addonData["Interface"].AddCheckButton("cbAutoWiden","Auto Widen Frame",f);
    f.AutoWiden:SetPoint("TOPLEFT",230,-230)
	
	f.Reset = addonData["Interface"].AddPushButton("pbReset","Reset Config",f);
	f.Reset:SetWidth(150);
	f.Reset:SetHeight(30);
    f.Reset:SetPoint("TOPLEFT",10,-280)
	
	f.Dock = addonData["Interface"].AddPushButton("pbDock","Dock in InfoPanel",f);
	f.Dock:SetWidth(150);
	f.Dock:SetHeight(30);
    f.Dock:SetPoint("TOPLEFT",230,-280)
    
	f.Width = addonData["Interface"].AddSlider("sliWidth","Frame Width",f,1,100,1, "HORIZONTAL");
    f.Width:SetHeight(20);
    f.Width:SetWidth(360);
	f.Width:SetValue(50);
    f.Width:SetPoint("TOPLEFT",10,-20)
	
	f.Height = addonData["Interface"].AddSlider("sliHeight","Frame Height",f,1,100,1, "HORIZONTAL");
    f.Height:SetHeight(20);
    f.Height:SetWidth(360);
	f.Height:SetValue(50);
    f.Height:SetPoint("TOPLEFT",10,-60)

	f.Scroll = addonData["Interface"].AddSlider("sliScroll","Scroll Height",f,1,100,1, "HORIZONTAL");
    f.Scroll:SetHeight(20);
    f.Scroll:SetWidth(360);
	f.Scroll:SetValue(50);
    f.Scroll:SetPoint("TOPLEFT",10,-100)
	
	f.WatchableQuests = addonData["Interface"].AddSlider("sliWatchableQuests","Maximum Watchable Quests",f,1,100,1, "HORIZONTAL");
    f.WatchableQuests:SetHeight(20);
    f.WatchableQuests:SetWidth(360);
	f.WatchableQuests:SetValue(50);
    f.WatchableQuests:SetPoint("TOPLEFT",10,-140)
	
	f.WatchableCriteria = addonData["Interface"].AddSlider("sliWatchableCriteria","Maximum Watchable Achievement Criteria",f,1,100,1, "HORIZONTAL");
    f.WatchableCriteria:SetHeight(20);
    f.WatchableCriteria:SetWidth(360);
	f.WatchableCriteria:SetValue(50);
    f.WatchableCriteria:SetPoint("TOPLEFT",10,-180)
	
	f:Show();
end

[KCmilam]

Xrystal, thanks for all the feedback. This will really help with my development.

I have actually been using it a lot to make the Options panel for an addon recently, and while doing so have discovered many bugs in the XML side, but haven't been able to hit the Lua side yet. These bugs are very easy to fix, but are a bit misleading when trying to spot them.

The default backdrop was being used on all widgets. This didn't fair well when used by a checkbox (it made them completely black). The same goes for Sliders.

Font string offsets on checkboxes were also off.

There are many bugs like this, and I'm constantly finding them and squashing them. Each time, the app advances.


The code you posted gives me a couple ideas in helping out those that use templates as well. Perhaps a feature in which the user can create templates and drag them onto the screen. This would set the code up, both in XML and Lua, to create the template and all the frames that would inherit from it.

I absolutely love the feedback, I get more and more ideas for it each time. I haven't had a chance to update the app the past couple of days, but here soon I should have a pretty nice update.

[Zyonin]

Originally Posted by Bruners To bad silverlight 3 doesn't work on Linux yet.

There is now an early Alpha of Moonlight 3 which supports SOME of Silverlight 3. However it's buggy (though the version I am using is a couple weeks old). It was put up in time for the Olympics (since all of the Olympic video and many of the photos use Silverlight 3 players).

This XML/Lua Generator, kinda works with the rev of Moonlight 3 that I have installed (some of the Generator loads, the tabs and buttons can be seen and function, kinda, but not much else at the moment). I will see if there is an updated Moonlight 3 alpha and see if it helps. However this will be a couple of days as I have a pretty full slate for tomorrow.

My current Moonlight version is 3.0.40818.0