Thread overview | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
April 02, 2015 Loading of widgets from DML markup and DML Editor in DlangUI | ||||
---|---|---|---|---|
| ||||
Hello, Useful feature is added to DlangUI. You can write UI layout as QML-like code, and load it in runtime from file, resource, or just string constant. Instead of manual creation of widgets in code, you may write like this: ================================================== module app; import dlangui; mixin APP_ENTRY_POINT; /// entry point for dlangui based application extern (C) int UIAppMain(string[] args) { // create window Window window = Platform.instance.createWindow("DlangUI example - HelloWorld", null); // create some widget to show in window window.mainWidget = parseML(q{ VerticalLayout { margins: 10 padding: 10 backgroundColor: "#C0E0E070" // semitransparent yellow background // red bold text with size = 150% of base style size and font face Arial TextWidget { text: "Hello World example for DlangUI"; textColor: "red"; fontSize: 150%; fontWeight: 800; fontFace: "Arial" } // arrange controls as form - table with two columns TableLayout { colCount: 2 TextWidget { text: "param 1" } EditLine { id: edit1; text: "some text" } TextWidget { text: "param 2" } EditLine { id: edit2; text: "some text for param2" } TextWidget { text: "some radio buttons" } // arrange some radio buttons vertically VerticalLayout { RadioButton { id: rb1; text: "Item 1" } RadioButton { id: rb2; text: "Item 2" } RadioButton { id: rb3; text: "Item 3" } } TextWidget { text: "and checkboxes" } // arrange some checkboxes horizontally HorizontalLayout { CheckBox { id: cb1; text: "checkbox 1" } CheckBox { id: cb2; text: "checkbox 2" } } } HorizontalLayout { Button { id: btnOk; text: "Ok" } Button { id: btnCancel; text: "Cancel" } } } }); // you can access loaded items by id - e.g. to assign signal listeners auto edit1 = window.mainWidget.childById!EditLine("edit1"); auto edit2 = window.mainWidget.childById!EditLine("edit2"); // close window on Cancel button click window.mainWidget.childById!Button("btnCancel").onClickListener = delegate(Widget w) { window.close(); return true; }; // show message box with content of editors window.mainWidget.childById!Button("btnOk").onClickListener = delegate(Widget w) { window.showMessageBox(UIString("Ok button pressed"d), UIString("Editors content\nEdit1: "d ~ edit1.text ~ "\nEdit2: "d ~ edit2.text)); return true; }; // show window window.show(); // run message loop return Platform.instance.enterMessageLoop(); } ================================================== Function parseML loads widgets from code written in DML language. There is DMLEdit sample app in DlangUI/examples directory. You can run it with dub: dub run dlangui:dmledit It allows to edit QML text and see how it will look like when loaded into app (F5 refreshes view). Syntax highlight, bracket matching, go to error and other useful features are implemented. TODOs: * automatic mapping of loaded widgets to member variables (e.g. by matching of widget id and variable names) * automatic assignment of signal listeners to member functions, according to DML or just based on signal name and widget id (e.g. onButton1Click method may be connected to widget with id="Button1" signal click ) I hope this enhancement will be useful. Best regards, Vadim |
April 02, 2015 Re: Loading of widgets from DML markup and DML Editor in DlangUI | ||||
---|---|---|---|---|
| ||||
Posted in reply to Vadim Lopatin Attachments: | are there any plans to add cassowary solver[1] to DlangUI? i believe i seen D port of it (my own is not usable with DMD). [1] https://constraints.cs.washington.edu/cassowary/ |
April 02, 2015 Re: Loading of widgets from DML markup and DML Editor in DlangUI | ||||
---|---|---|---|---|
| ||||
Posted in reply to ketmar | On Thursday, 2 April 2015 at 13:56:05 UTC, ketmar wrote:
> are there any plans to add cassowary solver[1] to DlangUI? i believe i
> seen D port of it (my own is not usable with DMD).
>
> [1] https://constraints.cs.washington.edu/cassowary/
How could it be useful for DlangUI?
Some advanced kind of layout?
|
April 02, 2015 Re: Loading of widgets from DML markup and DML Editor in DlangUI | ||||
---|---|---|---|---|
| ||||
Posted in reply to Vadim Lopatin Attachments: | On Thu, 02 Apr 2015 14:09:14 +0000, Vadim Lopatin wrote:
> On Thursday, 2 April 2015 at 13:56:05 UTC, ketmar wrote:
>> are there any plans to add cassowary solver[1] to DlangUI? i believe i seen D port of it (my own is not usable with DMD).
>>
>> [1] https://constraints.cs.washington.edu/cassowary/
>
> How could it be useful for DlangUI?
> Some advanced kind of layout?
yes, it's universal constraint solver that especially aimed to building GUI layouts. apple adapted it as layout engine for their macos x and ios, for example.
|
April 02, 2015 Re: Loading of widgets from DML markup and DML Editor in DlangUI | ||||
---|---|---|---|---|
| ||||
Posted in reply to Vadim Lopatin | On Thursday, 2 April 2015 at 13:40:49 UTC, Vadim Lopatin wrote:
> Useful feature is added to DlangUI.
>
> You can write UI layout as QML-like code, and load it in runtime from file, resource, or just string constant.
Great job, Vadim! Thank you!
|
April 03, 2015 Re: Loading of widgets from DML markup and DML Editor in DlangUI | ||||
---|---|---|---|---|
| ||||
Posted in reply to Vadim Lopatin | If you are interested, we are doing a GUI system inspired by QtQuick/QMLEngine : https://github.com/D-Quick/DQuick |
April 10, 2015 Re: Loading of widgets from DML markup and DML Editor in DlangUI | ||||
---|---|---|---|---|
| ||||
Posted in reply to Vadim Lopatin | Cool! I am not really that much into qml... but isn't much of the power of qml coming from using javascript to do logic and bindings? Can you do D code stuff in the DML markup to handle that part e.g. by mixin of the DML? Keep up the good work. /Jonas |
April 14, 2015 Re: Loading of widgets from DML markup and DML Editor in DlangUI | ||||
---|---|---|---|---|
| ||||
Posted in reply to Jonas Drewsen | On Friday, 10 April 2015 at 19:26:28 UTC, Jonas Drewsen wrote:
> Cool!
>
> I am not really that much into qml... but isn't much of the power of qml coming from using javascript to do logic and bindings?
>
> Can you do D code stuff in the DML markup to handle that part e.g. by mixin of the DML?
>
> Keep up the good work.
>
> /Jonas
So far, I'm going to implement
* automatic mapping of loaded widgets to member variables (based on matching of widget id and variable names, or, possible mixin adding of member variables for all of widgets with ids)
* automatic mapping of loaded widget signals to handlers
Mixing in handlers written in D from DML is possible, in some of future implementations. So far, I'm not sure that it's better than just having external signal handlers automatically mapped, e.g. by name.
sample DML:
{
HorizontalLayout {
TextWidget { text: "Enter file name:" }
EditLine {
id: edFileName
}
Button {
id: btnOpen
text: "Open"
click = onBtnOpenClick
}
}
}
...
// class members
EditLine _edFileName;
bool onBtnOpenClick(Widget src) {
window.showMessageBox("Open"d, "File name:"d ~ _edFileName.text);
return true;
}
Member variable `EditLine _edFileName;` could be added automatically by mixin, or at least it's value can be initialized on load
Signal handler may be assigned either if explicitly defined in DML (`click = onBtnOpenClick` means widget click signal should be connected to member function onBtnOpenClick) or just found based on widget Id and signal name (e.g. if there is widget with id="btnOpen" and class method onBtnOpenClick - loader mixin could automatically decide to assign this method as signal handler of widget (like it's dont in VB).
I'm not sure if alternative definition is better
Button {
id: btnOpen
text: "Open"
click = { window.showMessageBox("Open"d, "File name:"d ~ edFileName.text); }
}
|
Copyright © 1999-2021 by the D Language Foundation