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

Reply via email to