Hello World rewritten with usage DML parser

README.md

@@ -261,6 +261,101 @@ Sample dub.json:
 	    }
 	}
 
+    
+Hello World using DML
+--------------------------------------------------------------
+
+DlangUI supports creation of widgets from markup.
+
+DML - DlangUI Markup Language - similar to QML.
+
+Example of complex UI easy created from text:
+
+
+
+    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 = (new Button()).text("Hello, world!"d).margins(Rect(20,20,20,20));
+        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();
+    }
+
+    
+
+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.
+
 
 DlangIDE project
 ------------------------------------------------------------

examples/helloworld/src/helloworld.d

@@ -10,7 +10,55 @@ extern (C) int UIAppMain(string[] args) {
     Window window = Platform.instance.createWindow("DlangUI example - HelloWorld", null);
 
     // create some widget to show in window
-    window.mainWidget = (new Button()).text("Hello, world!"d).margins(Rect(20,20,20,20));
+    //window.mainWidget = (new Button()).text("Hello, world!"d).margins(Rect(20,20,20,20));
+    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();

src/dlangui/widgets/widget.d

@@ -44,6 +44,7 @@ public import dlangui.widgets.styles;
 public import dlangui.graphics.drawbuf;
 public import dlangui.graphics.resources;
 public import dlangui.graphics.fonts;
+public import dlangui.graphics.colors;
 
 public import dlangui.core.signals;
 
@@ -375,6 +376,13 @@ class Widget {
         invalidate();
         return this; 
     }
+    /// set background color for widget - from string like "#5599CC" or "white"
+    @property Widget backgroundColor(string colorString) { 
+        uint color = decodeHexColor(colorString, COLOR_TRANSPARENT);
+        ownStyle.backgroundColor = color; 
+        invalidate();
+        return this; 
+    }
 
 	/// background image id
 	@property string backgroundImageId() const {
@@ -411,8 +419,17 @@ class Widget {
     @property Widget textColor(uint value) { 
         ownStyle.textColor = value; 
         invalidate();
+        return this;
+    }
+    /// set text color for widget - from string like "#5599CC" or "white"
+    @property Widget textColor(string colorString) { 
+        uint color = decodeHexColor(colorString, 0x000000);
+        ownStyle.textColor = color; 
+        invalidate();
         return this; 
     }
+
+
 	/// get text flags (bit set of TextFlag enum values)
 	@property uint textFlags() { 
 		uint res = stateStyle.textFlags;
@@ -466,8 +483,12 @@ class Widget {
     /// returns font weight
     @property ushort fontWeight() const { return stateStyle.fontWeight; }
     /// set font weight for widget - override one from style
-	@property Widget fontWeight(ushort weight) { 
+	@property Widget fontWeight(int weight) {
-        ownStyle.fontWeight = weight; 
+        if (weight < 100)
+            weight = 100;
+        else if (weight > 900)
+            weight = 900;
+        ownStyle.fontWeight = cast(ushort)weight;
         requestLayout();
         return this; 
     }
@@ -1491,7 +1512,7 @@ class Widget {
 
     /// set string property value, for ML loaders
     bool setStringProperty(string name, string value) {
-        mixin(generatePropertySetters("id", "styleId", "backgroundImageId"));
+        mixin(generatePropertySetters("id", "styleId", "backgroundImageId", "backgroundColor", "textColor", "fontFace"));
         if (name.equal("text")) {
             text = UIString(value);
             return true;
@@ -1519,7 +1540,7 @@ class Widget {
 
     /// set string property value, for ML loaders
     bool setBoolProperty(string name, bool value) {
-        mixin(generatePropertySetters("enabled", "clickable", "checkable", "focusable", "checked"));
+        mixin(generatePropertySetters("enabled", "clickable", "checkable", "focusable", "checked", "fontItalic"));
         return false;
     }
 
@@ -1542,7 +1563,7 @@ class Widget {
             alpha = cast(ushort)value;
             return true;
         }
-        mixin(generatePropertySetters("minWidth", "maxWidth", "minHeight", "maxHeight", "layoutWidth", "layoutHeight", "textColor", "backgroundColor"));
+        mixin(generatePropertySetters("minWidth", "maxWidth", "minHeight", "maxHeight", "layoutWidth", "layoutHeight", "textColor", "backgroundColor", "fontSize", "fontWeight"));
         if (name.equal("margins")) { // use same value for all sides
             margins = Rect(value, value, value, value);
             return true;