From cc0f09a4c49813d2316fbff2f1740969a8427b00 Mon Sep 17 00:00:00 2001 From: Vadim Lopatin Date: Thu, 2 Apr 2015 16:30:20 +0300 Subject: [PATCH] Hello World rewritten with usage DML parser --- README.md | 95 ++++++++++++++++++++++++++++ examples/helloworld/src/helloworld.d | 50 ++++++++++++++- src/dlangui/widgets/widget.d | 31 +++++++-- 3 files changed, 170 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 12ef213d..6ab3748a 100644 --- a/README.md +++ b/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 ------------------------------------------------------------ diff --git a/examples/helloworld/src/helloworld.d b/examples/helloworld/src/helloworld.d index c6396e8a..de4f89da 100644 --- a/examples/helloworld/src/helloworld.d +++ b/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(); diff --git a/src/dlangui/widgets/widget.d b/src/dlangui/widgets/widget.d index 0a48bbf2..fc0e52b0 100644 --- a/src/dlangui/widgets/widget.d +++ b/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) { - ownStyle.fontWeight = weight; + @property Widget fontWeight(int 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;