GUI in XML library

But it’s a more than valid point so thanks for asking. We also discussed this with Deltakosh in a different thread. The best solution in my opinion would be to support both but XML for UI is much better/ cleaner than JSON.

Either way it would even be cooler to have a tool to build UI. Like a GUI designer.

1 Like

Agreed. A GUI designer is always better, however, I would personally prefer a GUI designer which outputs a modifiable / usable file. if what is output is JSON or XML which is then parsed into JS for use in specific projects would make it very cool!

Anyway, this is what I have so far. I am not sure whether I have forgot anything. I have attributes, child controls and events down. The Grid was a little bit more complex but I was already expecting it. Will have to check for any special cases which are still not handled. If all good will make a github repo soon :smiley: .

looks awesome…Definitely something worth merging in the GUI itself

Just one though: Why having to write BABYLON.GUI on all controls? can we remove them?

Yeah sure, I will add the BABYLON.GUI via code before parsing the element. For it to be merged it needs to be in TypeScript right?

Correct (and documented ;))

Of course :smiley:, will make sure it’s bullet proof first. Will update the thread when done with the github repo.

1 Like

I feel this is a much more productive way of building layouts. Also, I think I am quite close :smiley:

1 Like

Hi gang. I’m an XML junkie too, but… look at the numbers. Total bytes of XML file will be about quadruple size of JS for same project… cuz of the tag names. Now add in time and size of parser/pre-process, and labor, and tips, and donation to xmas party… and we’re lookin’ at a pretty big bill.

One cool thing. If everything works right, a stylesheet could be applied to the XML file… to display it in HTML, too. Why anyone would want to do that, I dunno. With a GRUESOME stylesheet, it could be displayed in SVG, too… and all from the same XML file.

Next, someone is going to say “Hey, what about an entire BJS scene… from an XML file?” Then we’re ALL in trouble. Babylon Scenegraph Markup Language v0.1 (BSML.dtd) Yuh, yuh, yuh, ahem.

You could also build your own GUI script language/interpretter… in JS. GUIscript 1.0. High level. Just feed sentence-like text to it, and it builds GUI.

Why am I STILL talking? :slight_smile:

Hey @Wingnut,

Thank you for your input. I have been thinking about the bill you mention as well, more specifically in the parser/pre-process, labor and all the donations. However I feel this will not differ much from JSON ( Not sure if you are comparing :smiley: ) . I agree for huge layouts you will save a couple of bytes, but, is it worth it? In the end it comes down to simplicity of usage over performance. If someone wants full performance they should skip the loader, it makes sense to do so, but would anyone do that? Also, this would be just a one-time fee. You would only need to parse a layout only once.

I don’t know about GUIscript, I would have to check it up. But, as I see it, it’s not possible to avoid the parsing. It’s the bill we have to pay for having a human usable layout to build GUI’s on. I believe this stands true no matter the format. However, I have a first version already done and ready to be published. Hopefully this will help us understand if it’s really worth it and how it can be improved.

guiScript is just something I made-up… and yes, same parsing… in fact even more… due to string munging “the goods” out-of the “sentences”. Essentially, it would turn paragraph… to gui… munge-regexp fest. It would be painful… Eliza meets GUI. :slight_smile:

The other stuff you said… I agree. But many would say… if you MUST stare at text, they’d rather stare at 10 tons of JS than at 40 tons of XML. Not sure.

Are you going to make XML tagnames match JS property names, wherever possible? Probably so. Interesting project, thanks for telling us about it. I enjoyed looking-at your earlier “gxml” paste… looks good. Case-insensitive like a good xml should? :wink: Make a .dtd too, so we can run the XML thru a validator? (ahem)

Haha I honestly believed guiScript was real :joy:, didn’t put much thought into it, good one :smile: .
Maybe it was the way I have built GUI in Babylon, but everytime I had to make a new layout I wanted to kill myself. No kidding. It was horrific, organizing the code and making it reusable, dynamic, scalable. As I am on the verge of starting a new project, I didn’t want to go back and suffer. Working on this was a must for me, otherwise, no new project :slight_smile: .

Almost everything matches. Except for the Grid Row and Columns, I have put some conventions there, the rest follows BABYLON.GUI namings. It should be fairly easy, besides the Grid which has a couple of rules, the rest can be done very easily just by following the BABYLON.GUI documentation. The less conventions and rules the better, only where needed. This also means less needs for maintenance. Besides the events ( obviously ) and some properties like Control.horizontalAlignment which needs to be parsed in order to get the value, the rest is just strings parser side.

Any set/getAttribute? Any <param> elements? Are you planning on “laying it into” the real dom tree… as maybe a <foreignObject>… and that way user can do DOM addChild/removeChild/etc dom commands on it, and then maybe have it re-parse after changes?

Sorry, so many questions.

I just looked at your paste again. Lots of attributes. No child param tags like an HTML object element might use. Good… I think. I never really wrapped my head around html param tags. Key-value setters, I guess.

For now I have only a getNodeById ( Thats why there is an ID there ) and a getNodes functions. The first returns a node, by ID ( obviously ) and the second retrieves the array with all nodes. All the nodes are parsed Controls. I am not sure what else could be useful for now. Maybe being able to retrieve elements by more than the ID.

Laying into the real dom tree, would it help ? I don’t see much benefit to be honest. Adding and Removing Nodes is already there, its the addControl and removeControl functions. These are already provided by BABYLON.GUI. All the DOM-like interactions are already there. These should remain separate in my opinion, the Loader should simply be able to parse complex layouts from XML to JS. After that, the old way of interacting should apply. I am open to change my mind nevertheless :smiley:

1 Like

Quick update, got a first working version at GitHub - Null0924/GUILoader: XML GUILoader for BabylonJS . I have tested this with TextBlocks, Rectangles, Grids, Images but I think it should work with every element. Probably it needs to be tested in a real project setting. I will diligently do so later on. What I already know, is that there are some exceptions to be handled more gracefully but I will deal with them later. For now, I am open to suggestions.

2 Likes

This is REALLY good work man! I really like it

Please keep the good work!

Thank you :smiley: . I am happy to give back to this awesome community. I hope this helps people build GUI layouts much more efficiently.

1 Like

Quick update, as I am using the guiLoader on some old GUI files which I am translating to the new project, I am finding it very efficient, lowering both development time and files size making the projects much more manageable. A real must for every GUI library.

I have added a couple of functionalities while fixing some bugs along the way. The Loader can be used with Javascript classes now by initializing it with the this keyword inside the Javascript class. This gives the Loader the Class context and it uses the class functions for the observables. Also, the observables should be all supported and working now.

The coolest functionality I have recently added is dynamic attributes XML side. Now if for some reason you want to give the value of a Controls attribute via Javascript, besides retrieving the control with the guiLoader.getNodeById(id) function and setting the attribute, you can simply set the variable containing the value XML side encapsulating the variable or class attribute name with {{}}. Check the width attribute of the InputText Control in the screenshot below.

As I work and add things according to my needs, it would be great if anyone would also use it and give me a different perspective. I really think this will be very helpful to everyone working on game GUI’s. Let me know what you guys think and I wish you a great weekend.

1 Like

Can’t wait for the PR :slight_smile:

1 Like

It will come hopefully by the end of the week. I still have a couple of things to test and functionalities to add.