DML-Derma Markup Language

[cpf]

[IMG]http://i55.tinypic.com/smr77d.png[/IMG]
Pretty much all you need to know is demonstrated in the graphic above.

[B]What it is:[/B]

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

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

[LIST]
[*]Some Derma controls
[*]Most attributes of those controls
[*]%age positioning :v:
[*]Center/Right/Left/Up/Down alignments
[*]Top/Left/Bottom/Right position attributes
[*]Stacking (because I'm too lazy to implement tables)
[*]Margins (to an extent, spot the hack in the above code)
[*]"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)
[*]Concommand and lua event handlers
[/LIST]
[B]Will support:[/B]

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

[marc0303]

WOW! Nice!

[victormeriqui_1]

Coolio

[cpf]

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...

[Entoros]

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

[adorablepuppy]

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

[Kogitsune]

[QUOTE=Entoros;24788747]There ought to be tags that correspond to events. i.e. <doclick>, and inside you could have Lua code.[/QUOTE]

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.

[cpf]

[QUOTE=Kogitsune;24789090]Alternately,

(stuff)
[/QUOTE]
What I was planning, and what I just did. The "styles" you're thinking of is completely different though.

[Nexus435]

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

[Kogitsune]

[QUOTE=Nexus435;24790619]What is the point of this? Regular derma is much simpler.[/QUOTE]

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]

[Entoros]

[QUOTE=Nexus435;24790619]What is the point of this? Regular derma is much simpler.[/QUOTE]

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;
}

[adorablepuppy]

[QUOTE=Nexus435;24790619]What is the point of this? Regular derma is much simpler.[/QUOTE]

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.

[cpf]

[QUOTE=Entoros;24791513]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;
}

[/QUOTE]
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.

[Map in a box]

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

[cpf]

...it can, if you read what he posted.

[Lexic]

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]

[Map in a box]

sorry, i was tired :C

[cpf]

[QUOTE=Lexic;24797459]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,
self.tabs:AddSheet("Changelog",DML.ToPanel("changelog.xml"), "gui/silkicons/plugin");[/QUOTE]
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).

[Flubadoo]

Do you realize how big of a favor you have done everyone?
I can actually understand derma a tiny bit better.

[zero5100]

Looks awesome. I can't wait to try it out.

[Kogitsune]

Whipped this up quick, could probably use some touching up:

[lua]function _R.Panel:SetStyle( style )
if ( style.Generic or style.Control:lower( ) == self:GetClassName( ):lower( ) ) and self.ApplyStyle then
local k, v

for k, v in pairs( style.Params ) do
self:ApplyStyle( k, v )
end
end
end

function ParseStyle( from )
local style, parent, class, content, t, key, value

assert( type( from ) == "string" and #from > 0, "Invalid Style" )

style = { }
from = from:gsub( "%c", "" )

for parent, class, content in from:gmatch( "(%w*)%.([%w%s]*){(.-)}" ) do
assert( type( class ) == "string" and #class > 0, "Invalid class" )
assert( type( content ) == "string" and #content > 0, "Class " .. ( parent and ( parent .. "." .. class ) or class ) .. " has no params" )

t = { }
t.Generic = parent == ""
t.Control = parent
t.ClassName = class

t.Params = { }

for key, value in content:gmatch( "([%w-_]*):%s*(.-);" ) do
assert( ( type( key ) == "string" and #key > 0 ) and ( type( value ) == "string" and #value > 0 ), "Invalid Key/Value pair for " .. ( parent and ( parent .. "." .. class ) or classs ) )

t.Params[ key ] = value
end

style[ class ] = t
end

return style
end[/lua]

Pardon the use of assert.

Of course, each control that you want to style would need control:ApplyStyle( string:name, string:value ) implemented for this to work. Situations like this make switch / select case incredibly useful.

I imagine you could create a generic style function which would try to call various methods, something like:
[lua]
function IApplyStyle( control, key, value )
if key == "backcolor" and control.SetBackColor then
control:SetBackColor( ColorFromHex( value ) )
elseif key == "font" and control.SetFont then
control:SetFont( value )
--and so on
end
end

--when you create a control
crtl.ApplyStyle = IApplyStyle
for k, v in pairs( document.styles ) do
if style:lower( ):find( v.ClassName:lower( ) ) then
v:SetStyle( v )
end
end
[/lua]

Of course, it's pretty raw - it doesn't convert the colors in styles to color objects or anything friendly like that, but it gets the idea across.

[DarKSunrise]

This sounds like a good alternative for regular Derma.

[dingusnin]

ningaglio made something similar to this a while ago , it didn't get very far , and wasn't for derma. Even tho his didnt succeed very well , it was quite fun making it with him.

/Back-on-Subject: might consider using it for mah server :P

[deloc]

this would be better if it didn't use xml.

[cpf]

[QUOTE=Kogitsune;24821021]Stuff[/QUOTE]
Right now all the "attribute handling" it done from the other side, handlers are registered with the DML module and are driven from there. More specifically, each attribute (e.g. color) is attached to an action, which can be either a direct 1:1 call of a function on the panel (e.g. text is mapped to SetText()), a certain attribute type, like color, vector, event (e.g. color is mapped to SetColor, but only accepts the r,g,b,a format), or it can just be a generic function that's passed the UI element and the attribute value (e.g. autosize calls UIElement:SizeToContents()). If your control is just a pimped label or something, you can set it to inherit the DLabel attributes to save time. Certain attributes are used internally (positioning, stacking, all that stuff) but you can still set up your own mappings for them, if you wanted to for some reason.

Chances are I'll end up setting it up like a less intense version of what you have there, where you can just go PANEL.DML.Attributes={...} and those attributes will automatically be processed when you use the tag.

[filipegroh]

Well, I really hate making derma menus, they take time, and it's not very intuitive.
If this comes out to work just fine, I give you tons of kudos.

[commander204]

[QUOTE=DarKSunrise;24823836]This sounds like a good alternative for regular Derma.[/QUOTE]

Oh god, this is just a convenience way off positiong derma elements, and as long you are making a simple confim dialog that is fine, but if you have several elements depending on each other you have to code it.

[DarKSunrise]

It's not like you couldn't reference to the elements later. You could use XML to create and position them etc.

[cpf]

[QUOTE=commander204;24838772]Oh god, this is just a convenience way off positiong derma elements, and as long you are making a simple confim dialog that is fine, but if you have several elements depending on each other you have to code it.[/QUOTE]
Actually, several elements depending on eachother is kind of what this is designed for.

[thomasfn]

Reminds me of my GMML, except this is much better. Good work.