mirror of https://github.com/buggins/dlangui.git
Hello World rewritten with usage DML parser
This commit is contained in:
Vadim Lopatin
parent
ff86afb051
commit
cc0f09a4c4
95
README.md
95
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
|
||||
------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue