DML-Derma Markup Language

Garry's Mod coding
#1

Pretty much all you need to know is demonstrated in the graphic above.

What it is:

[ul]
[li]Pure Lua[/li][li]Renders XML into Derma at runtime[/li][li]Generates a tree of UI elements for manipulation post-render, (for the above example I could go myui.Panel.Tabs.tab1.testlabel:SetText(“Stuff”) )[/li][/ul]
What it isn’t:

[ul]
[li]Real HTML-There’s no Javascript, CSS, flash, blah blah blah[/li][li]DHTML-But you can update a pre-existing UI tree (or part thereof) without regenerating the entire thing, if complete lazyness is your thing[/li][li]You don’t write all your code inside this. That would kind of defeat the purpose of it being *Derma *markup language[/li][/ul]
Currently supports:

[ul]
[li]Some Derma controls[/li][li]Most attributes of those controls[/li][li]%age positioning :v:[/li][li]Center/Right/Left/Up/Down alignments[/li][li]Top/Left/Bottom/Right position attributes[/li][li]Stacking (because I’m too lazy to implement tables)[/li][li]Margins (to an extent, spot the hack in the above code)[/li][li]“Stylesheets” (not CSS, you define any attribute for a certain class in a style table provided during the rendering, and those will get applied to elements with that class)[/li][li]Concommand and lua event handlers[/li][/ul]
Will support:

[ul]
[li]All default gmod Derma UI elements and their properties (and you can register your own)[/li][li]Live in-game editor (technically supports it now, I just havent made it yet)[/li][li]Any other stuff?[/li][/ul]
Any suggestions?

#2

Love it.

#3

WOW! Nice!

#4

Coolio

#5

How will buttons work?

#6

You click them, stuff happens? I’m not sure, that’s generally how they work, wasn’t planning on turning them into anything different just for this…

#7

There ought to be tags that correspond to events. i.e. <doclick>, and inside you could have Lua code.

#8

This is pretty awesome. With integration of other rich services, serialization of user interfaces is going to be a breeze.

#9

Alternately,


<dbutton doclick="concommand:kill" text="Kill yourself!"/>

Or



<dbutton doclick="code:LocalPlayer( ).Ready=true" text="Ready Up" />

And even


<dbutton doclick="code:SomeFunction( )" text="Some button" />

Those would all be rational methods in my mind.

As for style, you could have it parse ( and register ) generic derma skins, and the style param would simply run Panel:SetSkin on the control in question.

#10

What I was planning, and what I just did. The “styles” you’re thinking of is completely different though.

#11

What is the point of this? Regular derma is much simpler.

#12

Because to a lot of people:



<dframe title="Select your class!" width="50%" height="50%" vertical-align="center" horizontal-align="center" >
	<dbutton left="5%" width="25%" text="ASSAULT" doclick="concommand:team_assault" />
	<dbutton left="32%" width="25%" text="MEDIC" doclick="concommand:team_medic" />
	<dbutton left="62%" width="25%" text="SNIPER" doclick="concommand:team_sniper" />
</dframe>

Is cleaner and far more intuitive than:

[lua]
local title, a, b, c

title = vgui.Create( “DFrame” )
title:SetSize( ScrW( ) * .5, ScrH( ) * .5 )
title:Center( )

a = vgui.Create( “DButton”, title )
a.X = title:GetWide( ) * .05
a:SetText( “ASSAULT” )
a:SetConCommand( “team_assault” )

b = vgui.Create( “DButton”, title )
b.X = title:GetWide( ) * .32
b:SetText( “MEDIC” )
b:SetConCommand( “team_medic” )

c = vgui.Create( “DButton”, title )
c.X = title:GetWide( ) * .62
c:SetText( “SNIPER” )
c:SetConCommand( “team_sniper” )

title:MakePopup( )
[/lua]

#13

Additionally, it provides a good way for coders familiar with HTML/XML to learn GLua.

Also, I like Kogitsune’s way of doing scripts and events, in a javascript sort of way. You could define its Lua files through something like


<lua src="myfunctions.lua" />

Also, this might be way off in the future, but something similar to CSS would be incredibly useful. i.e.


panel.player image {
     width: 100;
     height: 100;
}
#14

Argument one. Not only is it not simpler to do this in regular derma code, but it’s far less readable. Instead of a neatly packed hierarchical design the XML will provide you with, you’ve got spaghetti code of setSizes and the like. XML is just more human readable.

Argument two. The XML format actually opens derma design to a new audience. Designers. I know there have been several wysiwyg derma tools, but they all exist inside garrysmod. With an XML format, it’s possible to design an XSL stylesheet for representation outside garrysmod, and thus, enables toolkits to be written for design outside of garrysmod.

#15

There is a Lua include tag, but it’s either-or, you can either include Lua before/after, or during the render, same result.
Clarification about the style sheets: They’re not in CSS format (read: CBA to parse that format, might happen eventually) and currently only support single selectors, although I plan on allowing nesting them, and multiple independent selectors for the same style etc. The rest of what you have there is accurate.

#16

Neat, but I think you should have it run actual lua instead of havnig things like concommand:changeteam 2

#17

…it can, if you read what he posted.

#18

I like it.
Couple of things:
Firstly, you mentioned defining your own elements. How much control do you get. Could I do something like this?


<panel name="Changelog">
    <date words="13/09/2010">
        <item>Switched some of the menus over to DML</item>
    </date>
</panel>

Secondly, is it possible to just have a tree turned into Derma without it being rendered? For instance, I have a large menu, which is made of several complex tabs, each of which is in a different file for neatness.
Is that still possible?
Or to put it another way,
[lua]self.tabs:AddSheet(“Changelog”,DML.ToPanel(“changelog.xml”), “gui/silkicons/plugin”);[/lua]

#19

sorry, i was tired :C

#20

Tags can either be directly connected to VGUI elements, a function that returns a VGUI element which is then processed normally (that’s how the tabs work), or a function that doesn’t produce any VGUI element (how menus work).