Commit cc697153 authored by Florian Blasius's avatar Florian Blasius 🤘

[update] finish textbox, examples

parent ff504666
......@@ -10,7 +10,7 @@
The Orbital Widget Toolkit is a multi platform (G)UI toolkit for building scalable user interfaces with the programming language Rust. It's based
on the [Entity Component System Pattern](https://en.wikipedia.org/wiki/Entity%E2%80%93component%E2%80%93system) and provides a functional-reactive API.
The main goals of OrbTk are fast peformance, easy to use and cross platform.
The main goals of OrbTk are fast performance, easy to use and cross platform.
<img alt="Calculator" height="300" src="https://gitlab.redox-os.org/redox-os/assets/raw/master/screenshots/Calculator.png">
......@@ -18,7 +18,7 @@ The main goals of OrbTk are fast peformance, easy to use and cross platform.
* Modern [Flutter](https://flutter.io/), [React](https://reactjs.org/), [Redux](https://redux.js.org/) like API
* Uses the Entity Component System library [DCES](https://gitlab.redox-os.org/redox-os/dces-rust) for widget and properties handling
* Updating instead of rebuilding subtrees
* Updating instead of rebuilding sub-trees
* Flexible event system
* Widget state management
* Cross platform: Redox OS, Linux, macOS, Windows
......@@ -47,30 +47,16 @@ crate](https://github.com/AngryLawyer/rust-sdl2#user-content-requirements).
## Minimal Example
```rust
extern crate orbtk;
use orbtk::*;
struct MainView;
impl Widget for MainView {
fn create() -> Template {
Template::new()
.parent_type(ParentType::Single)
.child(
Container::create()
.parent_type(ParentType::Single)
.child(TextBlock::create().property(Text::from("OrbTk"))),
)
}
}
fn main() {
let mut application = Application::default();
application
.create_window()
.bounds(Bounds::new(0, 0, 420, 730))
.title("OrbTk")
.root(MainView::create())
.bounds(Bounds::new(100.0, 100.0, 420.0, 730.0))
.title("OrbTk - minimal example")
.root(TextBlock::create().text("OrbTk").into())
.debug_flag(false)
.build();
application.run();
}
......@@ -86,7 +72,7 @@ You can start the widgets example by executing the following command:
cargo run --example widgets --release
```
## Build and run documenation
## Build and run documentation
You can build and run the latest documentation y executing the following command:
......
......@@ -9,7 +9,7 @@ impl Widget for MainView {
Template::new()
.parent_type(ParentType::Single)
.debug_name("MainView")
.child(TextBlock::create().text("ToDo"))
.child(TextBlock::create().text("Wait for next merge"))
}
}
......
......@@ -82,7 +82,7 @@ fn main() {
.root(MainView::create())
.theme(
Theme::create()
.extenstion_path("examples/res/grid.css")
.extension_path("examples/res/grid.css")
.build(),
)
.resizable(true)
......
......@@ -8,10 +8,7 @@ impl Widget for MainView {
fn create() -> Self::Template {
Template::new()
.debug_name("MainView")
.child(
ImageWidget::create()
.image("res/orbtk-space.png"),
)
.child(ImageWidget::create().image("res/orbtk-space.png"))
}
}
......@@ -25,4 +22,3 @@ fn main() {
.build();
application.run();
}
// use orbtk::*;
use orbtk::*;
// use std::cell::Cell;
// use std::rc::Rc;
use std::{cell::Cell, rc::Rc};
// #[derive(Default)]
// struct MainViewState {
// counter: Cell<i32>,
// }
#[derive(Default)]
struct MainViewState {
counter: Cell<i32>,
}
// impl MainViewState {
// pub fn increment(&self) {
// self.counter.set(self.counter.get() + 1)
// }
// }
impl MainViewState {
pub fn increment(&self) {
self.counter.set(self.counter.get() + 1)
}
}
// impl State for MainViewState {
// fn update(&self, context: &mut Context<'_>) {
// if let Ok(button_count_text) = context.widget().borrow_mut_property::<Text>() {
// button_count_text.0 = format!("Button count: {}", self.counter.get());
// }
// }
// }
impl State for MainViewState {
fn update(&self, context: &mut Context<'_>) {
if let Ok(button_count_text) = context.widget().borrow_mut_property::<Text>() {
button_count_text.0 = format!("Button count: {}", self.counter.get());
}
}
}
// fn create_header(text: &str) -> Template {
// TextBlock::create()
// .property(Text::from(text))
// .property(Selector::from("textblock").class("h1"))
// }
fn create_header(text: &str, grid: usize, column: usize) -> Template {
TextBlock::create()
.text(text)
.selector(Selector::from("textblock").class("h1"))
.attach_property(GridColumn(grid))
.attach_property(GridRow(column))
.into()
}
// fn create_space_row() -> Template {
// Row::create().property(Selector::from("row").class("space"))
// }
struct MainView;
// struct MainView;
impl Widget for MainView {
type Template = Template;
// impl Widget for MainView {
// fn create() -> Template {
// let state = Rc::new(MainViewState::default());
// let button_count_text = SharedProperty::new(Text::from("Button count: 0"));
fn create() -> Self::Template {
let state = Rc::new(MainViewState::default());
let button_count_text = SharedProperty::new(Text::from("Button count: 0"));
// Template::new()
// .parent_type(ParentType::Single)
// .state(state.clone())
// .child(
// create_space_row()
// .child(
// Column::create()
// .child(Container::create().child(create_header("Buttons")))
// .child(
// Container::create().child(
// Button::create()
// .property(Text::from("Button"))
// .property(FontIcon::from(
// styling::vector_graphics::material_font_icons::CHECK_FONT_ICON,
// ))
// .event_handler(MouseEventHandler::default().on_click(
// Rc::new(move |_pos: Point| -> bool {
// state.increment();
// true
// }),
// )),
// ),
// )
// .child(
// Container::create().child(
// Button::create()
// .property(
// Selector::from("button").class("primary"),
// )
// .property(Text::from("Primary")),
// ),
// )
// .child(Container::create().child(
// ToggleButton::create().property(Text::from("ToggleButton")),
// ))
// .child(Container::create().child(
// CheckBox::create().property(Text::from("CheckBox")),
// ))
// .child(Container::create().child(Switch::create())),
// )
// .child(
// Column::create()
// .child(Container::create().child(create_header("Text")))
// .child(
// Container::create().child(
// TextBlock::create()
// .shared_property(button_count_text.clone())
// .property(
// Selector::from("textblock").class("fheight"),
// ),
// ),
// )
// .child(Container::create().child(
// TextBox::create().property(WaterMark::from("TextBox...")),
// ))
// .child(Container::create().child(
// TextBox::create().property(WaterMark::from("TextBox...")),
// )),
// ),
// )
// .shared_property(button_count_text)
// .debug_name("MainView")
// }
// }
Template::new()
.state(state.clone())
.child(
Grid::create()
.margin(8.0)
.columns(
Columns::create()
.column("Auto")
.column(32.0)
.column("Auto")
.column("*")
.build(),
)
.rows(
Rows::create()
.row("Auto")
.row("Auto")
.row("Auto")
.row("Auto")
.row("Auto")
.row("Auto")
.build(),
)
// Column 0
.child(create_header("Button", 0, 0))
.child(
Button::create()
.text("Button")
.margin((0.0, 8.0, 0.0, 0.0))
.font_icon(material_font_icons::CHECK_FONT_ICON)
.attach_property(GridColumn(0))
.attach_property(GridRow(1)),
)
.child(
Button::create()
.text("Primary")
.selector(Selector::from("button").class("primary"))
.margin((0.0, 8.0, 0.0, 0.0))
.font_icon(material_font_icons::CHECK_FONT_ICON)
.attach_property(GridColumn(0))
.attach_property(GridRow(2)),
)
.child(
ToggleButton::create()
.text("ToggleButton")
.margin((0.0, 8.0, 0.0, 0.0))
.attach_property(GridColumn(0))
.attach_property(GridRow(3)),
)
.child(
CheckBox::create()
.text("CheckBox")
.margin((0.0, 8.0, 0.0, 0.0))
.attach_property(GridColumn(0))
.attach_property(GridRow(4)),
)
.child(
Switch::create()
.margin((0.0, 8.0, 0.0, 0.0))
.attach_property(GridColumn(0))
.attach_property(GridRow(5)),
)
// Column 2
.child(create_header("Text", 2, 0))
.child(
TextBlock::create()
.shared_text(button_count_text.clone())
.margin((0.0, 8.0, 0.0, 0.0))
.attach_property(GridColumn(2))
.attach_property(GridRow(1)),
)
.child(
TextBox::create()
.water_mark("TextBox...")
.margin((0.0, 8.0, 0.0, 0.0))
.attach_property(GridColumn(2))
.attach_property(GridRow(2)),
),
)
.shared_property(button_count_text)
.debug_name("MainView")
}
}
// fn main() {
// let mut application = Application::default();
// application
// .create_window()
// .bounds(Bounds::new(100, 100, 420, 730))
// .title("OrbTk - light theme example")
// .root(MainView::create())
// .debug_flag(false)
// .theme(Theme::default_light())
// .build();
// application.run();
// }
fn main() {}
fn main() {
let mut application = Application::default();
application
.create_window()
.bounds(Bounds::new(100.0, 100.0, 420.0, 730.0))
.title("OrbTk - light theme example")
.root(MainView::create())
.debug_flag(false)
.theme(Theme::default_light())
.build();
application.run();
}
use orbtk::*;
struct MainView;
impl Widget for MainView {
type Template = Template;
fn create() -> Template {
Template::new()
.child(
Container::create().padding(6.0).child(
Stack::create()
.child(
Button::create()
.text("Button with long long text")
.font_icon(FLOPPY_FONT_ICON)
.horizontal_alignment("Left"),
)
.child(
ToggleButton::create()
.margin((0.0, 8.0, 0.0, 0.0))
.text("Toggle")
.horizontal_alignment("Left"),
)
.child(
CheckBox::create()
.margin((0.0, 8.0, 0.0, 0.0))
.text("CheckBox")
.horizontal_alignment("Left"),
)
.child(
Switch::create()
.margin((0.0, 8.0, 0.0, 0.0))
.horizontal_alignment("Left"),
)
.child(
TextBox::create()
.margin((0.0, 8.0, 0.0, 0.0))
.horizontal_alignment("Left")
.text("")
.water_mark("Insert text")
),
),
)
.debug_name("MainView")
}
}
fn main() {
let mut application = Application::default();
application
.create_window()
.bounds(Bounds::new(100.0, 100.0, 420.0, 730.0))
.title("OrbTk - minimal example")
.root(MainView::create())
.debug_flag(true)
.root(TextBlock::create().text("OrbTk").into())
.debug_flag(false)
.build();
application.run();
}
// use orbtk::*;
use orbtk::*;
// use std::{cell::Cell, rc::Rc};
use std::{cell::Cell, rc::Rc};
// #[derive(Default)]
// struct MainViewState {
// counter: Cell<i32>,
// }
#[derive(Default)]
struct MainViewState {
counter: Cell<i32>,
}
// impl MainViewState {
// pub fn increment(&self) {
// self.counter.set(self.counter.get() + 1)
// }
// }
impl MainViewState {
pub fn increment(&self) {
self.counter.set(self.counter.get() + 1)
}
}
// impl State for MainViewState {
// fn update(&self, context: &mut Context<'_>) {
// if let Ok(button_count_text) = context.widget().borrow_mut_property::<Text>() {
// button_count_text.0 = format!("Button count: {}", self.counter.get());
// }
// }
// }
impl State for MainViewState {
fn update(&self, context: &mut Context<'_>) {
if let Ok(button_count_text) = context.widget().borrow_mut_property::<Text>() {
button_count_text.0 = format!("Button count: {}", self.counter.get());
}
}
}
// fn create_header(text: &str) -> Template {
// TextBlock::create()
// .property(Text::from(text))
// .property(Selector::from("textblock").class("h1"))
// }
fn create_header(text: &str, grid: usize, column: usize) -> Template {
TextBlock::create()
.text(text)
.selector(Selector::from("textblock").class("h1"))
.attach_property(GridColumn(grid))
.attach_property(GridRow(column))
.into()
}
// fn create_space_row() -> Template {
// Row::create().property(Selector::from("row").class("space"))
// }
struct MainView;
// struct MainView;
impl Widget for MainView {
type Template = Template;
// impl Widget for MainView {
// fn create() -> Template {
// let state = Rc::new(MainViewState::default());
// let button_count_text = SharedProperty::new(Text::from("Button count: 0"));
fn create() -> Self::Template {
let state = Rc::new(MainViewState::default());
let button_count_text = SharedProperty::new(Text::from("Button count: 0"));
// Template::new()
// .state(state.clone())
// .child(
// create_space_row()
// .child(
// Column::create()
// .child(Container::create().child(create_header("Buttons")))
// .child(
// Container::create().child(
// Button::create()
// .property(Text::from("Button"))
// .property(FontIcon::from(
// styling::vector_graphics::material_font_icons::CHECK_FONT_ICON,
// ))
// .event_handler(MouseEventHandler::default().on_click(
// Rc::new(move |_pos: Point| -> bool {
// state.increment();
// true
// }),
// )),
// ),
// )
// .child(
// Container::create().child(
// Button::create()
// .property(
// Selector::from("button").class("primary"),
// )
// .property(Text::from("Primary")),
// ),
// )
// .child(Container::create().child(
// ToggleButton::create().property(Text::from("ToggleButton")),
// ))
// .child(Container::create().child(
// CheckBox::create().property(Text::from("CheckBox")),
// ))
// .child(Container::create().child(Switch::create())),
// )
// .child(
// Column::create()
// .child(Container::create().child(create_header("Text")))
// .child(
// Container::create().child(
// TextBlock::create()
// .shared_property(button_count_text.clone())
// .property(
// Selector::from("textblock").class("fheight"),
// ),
// ),
// )
// .child(Container::create().child(
// TextBox::create().property(WaterMark::from("TextBox...")),
// )), // .child(Container::create().child(
// // TextBox::create().property(WaterMark::from("TextBox...")),
// // ))
// ),
// )
// .shared_property(button_count_text)
// .debug_name("MainView")
// }
// }
Template::new()
.state(state.clone())
.child(
Grid::create()
.margin(8.0)
.columns(
Columns::create()
.column("Auto")
.column(32.0)
.column("Auto")
.column("*")
.build(),
)
.rows(
Rows::create()
.row("Auto")
.row("Auto")
.row("Auto")
.row("Auto")
.row("Auto")
.row("Auto")
.build(),
)
// Column 0
.child(create_header("Button", 0, 0))
.child(
Button::create()
.text("Button")
.margin((0.0, 8.0, 0.0, 0.0))
.font_icon(material_font_icons::CHECK_FONT_ICON)
.attach_property(GridColumn(0))
.attach_property(GridRow(1)),
)
.child(
Button::create()
.text("Primary")
.selector(Selector::from("button").class("primary"))
.margin((0.0, 8.0, 0.0, 0.0))
.font_icon(material_font_icons::CHECK_FONT_ICON)
.attach_property(GridColumn(0))
.attach_property(GridRow(2)),
)
.child(
ToggleButton::create()
.text("ToggleButton")
.margin((0.0, 8.0, 0.0, 0.0))
.attach_property(GridColumn(0))
.attach_property(GridRow(3)),
)
.child(
CheckBox::create()
.text("CheckBox")
.margin((0.0, 8.0, 0.0, 0.0))
.attach_property(GridColumn(0))
.attach_property(GridRow(4)),
)
.child(
Switch::create()
.margin((0.0, 8.0, 0.0, 0.0))
.attach_property(GridColumn(0))
.attach_property(GridRow(5)),