The title is vague, so I'll explain.
I was frustrated with UI dev (in general), and even more-so when working with a application that needed OpenGL with embedded UI. What if I wanted to make a full application with OpenGL? (Custom game engine anyone?)
Well I did want to. And I'm working on it right now. But it started me onto making what I think is a great idea of a styling language;
I present KSS (pron. Kiss) The multitudes more programmable version of CSS.... (only for desktop dev)
/*
It has all the 'normal' styling stuff, like you'd expect.
*/
elementName {
/*This is a styling field.*/
font-color: rgb(0,0,0),
font: "Calibri",
font-size: 12px
}
.idName {
color: rgba(255,255,255,0)
}
uiName : onMouse1Click{
color: vec3(0,0,0)
}
BUT
It also has some cool things. I've taken the liberty to add variables, templates (style inheritance), hierarchy-selection, events (as objects), native function calls, in-file functions.
var defaultColor: rgb(0,0,0)
var number : 1.0
/*Types include: rgb, rgba, vec2, vec3, vec4, number, string, true, false, none (null), this*/
fun styleSomeStuff{
.buttons{
color: defaultColor,
text-color: rgb(number,255,number)
}
}
template buttonStyle{
color: rgb(255,255,0)
}
.buttons{
use: buttonStyle, otherTemplateName /*copies the templates styling field*/
color: defaultColor;
}
.buttons : onMouse1Click{ /* events not assigned as a value are initialized when read from file*/
styleSomeStuff();*/* call the in-file function*/
*nativeFunctionCall();/*call a native function that's binded*/
var a : 2; /*assign a variable, even if not initially defined.*/
}
/*storing an event in a 'value' will allow you to operate on the event itself. It is only ran when 'connected', below.*/
val ON_CLICK2 = .buttons : onMouse2Click{
use: templateName
}
connect ON_CLICK2;
disconnect ON_CLICK2; /*you can make a function to do the same.*/
fun connectStuff{
connect ON_CLICK2;
}
But wait, you ask... what If I need to select items from a hierarchy? Surely using element names and id's couldn't be robust enough!
Well:
/*We use the > to indicate the item next element is a 'child' to itemA in the hierarchy*/
itemA > itemAChild : onMouse1Click{
}
.itemId > .itemAChild > itemAChildsChild{
}
/*want to get all children of the element at hand?*/
elementName > .any{
/*this will style all the elements children*/
}
/*What about if we want to use conditional styling? Like if a variable or tag inside the
element is or isnt something?*/
var hello : false;
var goodbye : true;
itemA [var hello = false, var goodbye != false] { /*passes*/
}
itemA [@tagName = something]{ /*passes is the tag is equal to whatever the value u asked.*/
}
The last things to note are event-pointers, how tagging works, 'this', and general workflow.
Tagging works (basically) the same as Unity, you say @tagName : tagValue inside a styling field to assign that element a tag that's referable in the application.
You have the ability to refer to any variable you assign within the styling sheet, from say.. source-code. The backend. As such, being able to set a variable to 'this' (the element being styled) allows you to operate with buttons who are currently in focus, or set the parent of an item to another element.
All elements are available to use as variables inside and outside the styling sheet, so an event can effectively parent an element or group of elements to a UI you specify. Ill show that in a figure below,
Event pointers are so that you can trigger an event with a UI component, but affect another, below-
/*We use the -> to point to a new element, or group of elements to style.*/
.buttons : onMouse1Click -> .buttons > childName{
visible : false
parent: uiName;
}
/*
In this case, we style something with the name "childName"
whos parented to anything with the id 'buttons'.
Likewise, we if there was a element with the name 'uiName',
it would parent the childName element to it.
*/
Lastly: The results/workflow.
I'm in the process of building my first (serious) game engine after learning OpenGL, and I'm building it with Kotlin and Python. I can bind both Kotlin and Python functions for use inside the styling sheet, and although I didn't show the layout-language (cause its honestly not good), this is the result after a day of work so far, while using these two UI languages I've made (In the attachments.)
It's also important to note that while it does adopt the CSS Box-model, it is not a Cascading layout.
That's all I had to show. Essentially, right now Its a Kotlin -backed creation, but can be made for Java specifically, C++, C#, etc. I'm planning on adding more into the language to make it even more robust. What's more, it doesn't need to be OpenGL backed- it can use Java paint classes, SFML, etc etc. I just need to standardize the API for it. I guess what I'm wondering is, if I put it out there- would anyone want to use it for desktop application dev?
P.S. Of course the syntax is subject to change, via suggestion.
P.S.[2] The image in the middle of the editor is static, but wont be when I put 3D scenes in the scene-view.