├── README.md ├── 001-Guides ├── 008-Themes.md ├── 003-Binding.md ├── 006-Scripting.md ├── 007-Animation.md ├── _assets │ ├── native_native.png │ ├── styling_scope.png │ ├── native_dropdown.png │ ├── styling_spacing.png │ ├── composite_dropdown.png │ ├── native_composite.png │ ├── styling_css_names.png │ ├── styling_angry_button.png │ ├── styling_butons_sizes.png │ ├── styling_button_style.png │ ├── styling_buttons_100.png │ ├── styling_schema_flow.png │ ├── styling_absolute_layout.png │ ├── styling_autosized_vbox.png │ ├── styling_buttons_percent.png │ ├── styling_css_selectors.png │ ├── styling_css_direct_child.png │ └── styling_buttons_pixel_size.png ├── 001-Backends.md ├── 009-Native.md ├── 000-Modules.md ├── 005-Events.md ├── 004-Styling.md └── 002-Custom Components.md ├── _screenshot_app ├── src │ ├── haxeui-heaps.properties │ ├── haxeui-hxwidgets.properties │ ├── haxeui-flixel.properties │ ├── Main.hx │ └── MainView.hx ├── .gitmodules ├── html5.hxml ├── raylib.hxml ├── heaps-js.hxml ├── hxwidgets.hxml ├── heaps-hl.hxml ├── khafile.js ├── project.nmml ├── application.xml ├── kha-html5.hxml ├── project.xml └── assets │ └── main-view.xml ├── 000-Getting Started ├── _assets │ ├── welcome-system.jpg │ ├── hello-world-ui2.png │ ├── hello-world-ui3.png │ ├── hello-world-ui4.png │ ├── hello-world-button.png │ └── hello-world-file_tree.png ├── 003-Backends │ ├── 000-Composite Backends │ │ ├── _assets │ │ │ ├── haxeui-kha-preview.png │ │ │ ├── haxeui-nme-preview.png │ │ │ ├── haxeui-heaps-preview.png │ │ │ ├── haxeui-html5-preview.png │ │ │ ├── haxeui-flixel-preview.png │ │ │ ├── haxeui-openfl-preview.png │ │ │ └── haxeui-raylib_preview.png │ │ ├── 006-haxeui-raylib.md │ │ ├── 004-haxeui-nme.md │ │ ├── 002-haxeui-openfl.md │ │ ├── 003-haxeui-flixel.md │ │ ├── 005-haxeui-heaps.md │ │ ├── 000-haxeui-html5.md │ │ └── 001-haxeui-kha.md │ └── 001-Native Backends │ │ ├── _assets │ │ ├── haxeui-hxwidgets-preview_osx.png │ │ ├── haxeui-hxwidgets-preview_ubuntu.png │ │ └── haxeui-hxwidgets-preview_windows.png │ │ └── 000-haxeui-hxwidgets.md ├── 001-Installing Haxe.md ├── 005-Next Steps.md ├── 002-Installing HaxeUI.md ├── 000-Welcome.md └── 004-Hello World.md └── .gitignore /README.md: -------------------------------------------------------------------------------- 1 | # haxeui-guides -------------------------------------------------------------------------------- /001-Guides/008-Themes.md: -------------------------------------------------------------------------------- 1 | Themes 2 | ================================ -------------------------------------------------------------------------------- /001-Guides/003-Binding.md: -------------------------------------------------------------------------------- 1 | Binding 2 | ================================ -------------------------------------------------------------------------------- /001-Guides/006-Scripting.md: -------------------------------------------------------------------------------- 1 | Scripting 2 | ================================ -------------------------------------------------------------------------------- /001-Guides/007-Animation.md: -------------------------------------------------------------------------------- 1 | Animation 2 | ================================ -------------------------------------------------------------------------------- /_screenshot_app/src/haxeui-heaps.properties: -------------------------------------------------------------------------------- 1 | haxe.ui.heaps.engine.background.color=#ffffff 2 | -------------------------------------------------------------------------------- /_screenshot_app/.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "Kha"] 2 | path = Kha 3 | url = https://github.com/KTXSoftware/Kha 4 | -------------------------------------------------------------------------------- /_screenshot_app/src/haxeui-hxwidgets.properties: -------------------------------------------------------------------------------- 1 | haxe.ui.hxwidgets.frame.fit=true 2 | haxe.ui.hxwidgets.frame.title=Main 3 | -------------------------------------------------------------------------------- /001-Guides/_assets/native_native.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/native_native.png -------------------------------------------------------------------------------- /001-Guides/_assets/styling_scope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/styling_scope.png -------------------------------------------------------------------------------- /001-Guides/_assets/native_dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/native_dropdown.png -------------------------------------------------------------------------------- /001-Guides/_assets/styling_spacing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/styling_spacing.png -------------------------------------------------------------------------------- /001-Guides/_assets/composite_dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/composite_dropdown.png -------------------------------------------------------------------------------- /001-Guides/_assets/native_composite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/native_composite.png -------------------------------------------------------------------------------- /001-Guides/_assets/styling_css_names.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/styling_css_names.png -------------------------------------------------------------------------------- /_screenshot_app/html5.hxml: -------------------------------------------------------------------------------- 1 | -cp src 2 | -main Main 3 | 4 | -lib haxeui-core 5 | -lib haxeui-html5 6 | 7 | -js build/html5/Main.js 8 | -------------------------------------------------------------------------------- /_screenshot_app/src/haxeui-flixel.properties: -------------------------------------------------------------------------------- 1 | haxe.ui.flixel.background.color=#FFFFFF 2 | haxe.ui.flixel.mouse.useSystemCursor=true 3 | -------------------------------------------------------------------------------- /001-Guides/_assets/styling_angry_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/styling_angry_button.png -------------------------------------------------------------------------------- /001-Guides/_assets/styling_butons_sizes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/styling_butons_sizes.png -------------------------------------------------------------------------------- /001-Guides/_assets/styling_button_style.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/styling_button_style.png -------------------------------------------------------------------------------- /001-Guides/_assets/styling_buttons_100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/styling_buttons_100.png -------------------------------------------------------------------------------- /001-Guides/_assets/styling_schema_flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/styling_schema_flow.png -------------------------------------------------------------------------------- /000-Getting Started/_assets/welcome-system.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/_assets/welcome-system.jpg -------------------------------------------------------------------------------- /001-Guides/_assets/styling_absolute_layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/styling_absolute_layout.png -------------------------------------------------------------------------------- /001-Guides/_assets/styling_autosized_vbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/styling_autosized_vbox.png -------------------------------------------------------------------------------- /001-Guides/_assets/styling_buttons_percent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/styling_buttons_percent.png -------------------------------------------------------------------------------- /001-Guides/_assets/styling_css_selectors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/styling_css_selectors.png -------------------------------------------------------------------------------- /000-Getting Started/_assets/hello-world-ui2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/_assets/hello-world-ui2.png -------------------------------------------------------------------------------- /000-Getting Started/_assets/hello-world-ui3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/_assets/hello-world-ui3.png -------------------------------------------------------------------------------- /000-Getting Started/_assets/hello-world-ui4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/_assets/hello-world-ui4.png -------------------------------------------------------------------------------- /001-Guides/_assets/styling_css_direct_child.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/styling_css_direct_child.png -------------------------------------------------------------------------------- /_screenshot_app/raylib.hxml: -------------------------------------------------------------------------------- 1 | -cp src 2 | -main Main 3 | 4 | -lib haxeui-core 5 | -lib haxeui-raylib 6 | -lib raylib-haxe 7 | 8 | -cpp build/raylib 9 | -------------------------------------------------------------------------------- /000-Getting Started/_assets/hello-world-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/_assets/hello-world-button.png -------------------------------------------------------------------------------- /001-Guides/_assets/styling_buttons_pixel_size.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/001-Guides/_assets/styling_buttons_pixel_size.png -------------------------------------------------------------------------------- /000-Getting Started/_assets/hello-world-file_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/_assets/hello-world-file_tree.png -------------------------------------------------------------------------------- /_screenshot_app/heaps-js.hxml: -------------------------------------------------------------------------------- 1 | -cp src 2 | -main Main 3 | 4 | -lib heaps 5 | -lib haxeui-core 6 | -lib haxeui-heaps 7 | 8 | -D resourcesPath=assets 9 | 10 | -js build/heaps/js/Main.js 11 | -------------------------------------------------------------------------------- /_screenshot_app/hxwidgets.hxml: -------------------------------------------------------------------------------- 1 | -cp src 2 | -main Main 3 | 4 | -lib haxeui-core 5 | -lib haxeui-hxwidgets 6 | -lib hxWidgets 7 | 8 | -D ABI=-MD 9 | -D WXSTATIC 10 | 11 | -cpp build/hxwidgets 12 | -------------------------------------------------------------------------------- /_screenshot_app/heaps-hl.hxml: -------------------------------------------------------------------------------- 1 | -cp src 2 | -main Main 3 | 4 | -lib heaps 5 | -lib hlsdl 6 | -lib haxeui-core 7 | -lib haxeui-heaps 8 | 9 | -D resourcesPath=assets 10 | 11 | -hl build/heaps/hl/Main.hl 12 | -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/000-Composite Backends/_assets/haxeui-kha-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/003-Backends/000-Composite Backends/_assets/haxeui-kha-preview.png -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/000-Composite Backends/_assets/haxeui-nme-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/003-Backends/000-Composite Backends/_assets/haxeui-nme-preview.png -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/000-Composite Backends/_assets/haxeui-heaps-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/003-Backends/000-Composite Backends/_assets/haxeui-heaps-preview.png -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/000-Composite Backends/_assets/haxeui-html5-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/003-Backends/000-Composite Backends/_assets/haxeui-html5-preview.png -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/000-Composite Backends/_assets/haxeui-flixel-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/003-Backends/000-Composite Backends/_assets/haxeui-flixel-preview.png -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/000-Composite Backends/_assets/haxeui-openfl-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/003-Backends/000-Composite Backends/_assets/haxeui-openfl-preview.png -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/000-Composite Backends/_assets/haxeui-raylib_preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/003-Backends/000-Composite Backends/_assets/haxeui-raylib_preview.png -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/001-Native Backends/_assets/haxeui-hxwidgets-preview_osx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/003-Backends/001-Native Backends/_assets/haxeui-hxwidgets-preview_osx.png -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/001-Native Backends/_assets/haxeui-hxwidgets-preview_ubuntu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/003-Backends/001-Native Backends/_assets/haxeui-hxwidgets-preview_ubuntu.png -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/001-Native Backends/_assets/haxeui-hxwidgets-preview_windows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haxeui/haxeui-guides/HEAD/000-Getting Started/003-Backends/001-Native Backends/_assets/haxeui-hxwidgets-preview_windows.png -------------------------------------------------------------------------------- /_screenshot_app/khafile.js: -------------------------------------------------------------------------------- 1 | let project = new Project('Main'); 2 | 3 | //project.addAssets('./assets/**'); 4 | project.addSources('./src'); 5 | 6 | project.addLibrary('haxeui-core'); 7 | project.addLibrary('haxeui-kha'); 8 | 9 | resolve(project); 10 | -------------------------------------------------------------------------------- /_screenshot_app/src/Main.hx: -------------------------------------------------------------------------------- 1 | package ; 2 | 3 | import haxe.ui.HaxeUIApp; 4 | 5 | class Main { 6 | public static function main() { 7 | var app = new HaxeUIApp(); 8 | app.ready(function() { 9 | app.addComponent(new MainView()); 10 | 11 | app.start(); 12 | }); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /000-Getting Started/001-Installing Haxe.md: -------------------------------------------------------------------------------- 1 | Installing Haxe 2 | ================================ 3 | 4 | Haxe is an open source high-level strictly typed programming language that allows code to be transpiled into various other languages. 5 | 6 | HaxeUI, in turn, is built on top of Haxe. The best way to install Haxe is to download the official latest distribution from the [haxe.org](http://www.haxe.org) website and follow any instructions for your operating system. -------------------------------------------------------------------------------- /_screenshot_app/project.nmml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /_screenshot_app/application.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /000-Getting Started/005-Next Steps.md: -------------------------------------------------------------------------------- 1 | Next Steps 2 | ================================ 3 | 4 | Now you have installed HaxeUI, installed a backend and compiled a "Hello World" application there are a few other resources that will help you one your way: 5 | 6 | * [component-explorer](http://haxeui.org/explorer) - Browse HaxeUI components 7 | * [playground](http://haxeui.org/builder) - Write and test HaxeUI layouts in your browser 8 | * [component-examples](https://github.com/haxeui/component-examples) - Various componet examples 9 | * [haxeui-api](http://haxeui.org/api/haxe/ui/) - The HaxeUI api docs 10 | * [haxeui-guides](http://haxeui.org/api/guides/index.html) - Set of guides to working with HaxeUI and backends 11 | -------------------------------------------------------------------------------- /_screenshot_app/kha-html5.hxml: -------------------------------------------------------------------------------- 1 | -cp D:\Work\HaxeUI\haxeui-guides\_screenshot_app\Kha\Sources 2 | -cp D:\Work\HaxeUI\haxeui-guides\_screenshot_app\Kha\Backends\HTML5 3 | -cp D:\Work\HaxeUI\haxeui-guides\_screenshot_app\src 4 | -cp D:/work/HaxeUI/haxeui-core/ 5 | -cp D:/Work/HaxeUI/backends/haxeui-kha/ 6 | -D hxcpp_smart_strings 7 | -D haxeui-core 8 | -D haxeui-kha 9 | -D sys_g1 10 | -D sys_g2 11 | -D sys_g3 12 | -D sys_a1 13 | -D sys_a2 14 | -D kha_js 15 | -D kha_g1 16 | -D kha_g2 17 | -D kha_g3 18 | -D kha_a1 19 | -D kha_a2 20 | -D canvas_id=khanvas 21 | -D script_name=kha 22 | -D sys_g4 23 | -D kha_g4 24 | -D kha_webgl 25 | -D sys_html5 26 | -D kha_html5 27 | -D kha_html5_js 28 | -D kha 29 | -D kha_version=1810 30 | -D kha_project_name=Main 31 | -js build/kha/html5/kha.js 32 | -main Main 33 | -------------------------------------------------------------------------------- /_screenshot_app/src/MainView.hx: -------------------------------------------------------------------------------- 1 | package ; 2 | 3 | import haxe.ui.containers.VBox; 4 | import haxe.ui.events.MouseEvent; 5 | 6 | @:build(haxe.ui.ComponentBuilder.build("assets/main-view.xml")) 7 | class MainView extends VBox { 8 | public function new() { 9 | super(); 10 | 11 | var root = tv1.addNode({text: "Root A", icon: "haxeui-core/styles/shared/folder-light.png"}); 12 | root.expanded = true; 13 | root.addNode({text: "Child A-1", icon: "haxeui-core/styles/shared/warning-small.png"}); 14 | var root = tv1.addNode({text: "Root B", icon: "haxeui-core/styles/shared/folder-light.png"}); 15 | root.expanded = true; 16 | root.addNode({text: "Child B-1", icon: "haxeui-core/styles/shared/help-small.png"}); 17 | root.addNode({text: "Child B-2", icon: "haxeui-core/styles/shared/help-small.png"}); 18 | root.addNode({text: "Child B-3", icon: "haxeui-core/styles/shared/help-small.png"}); 19 | root.addNode({text: "Child B-4", icon: "haxeui-core/styles/shared/help-small.png"}); 20 | } 21 | } -------------------------------------------------------------------------------- /000-Getting Started/002-Installing HaxeUI.md: -------------------------------------------------------------------------------- 1 | Installing HaxeUI 2 | ================================ 3 | 4 | Haxe comes with package manager named HaxeLib, this is the simplest method to install HaxeUI and can be achieved by opening a terminal and using the command: 5 | 6 | ``` 7 | haxelib install haxeui-core 8 | ``` 9 | 10 | And thats it! You now have the core library of HaxeUI installed, however, haxeui-core by itself will do little - it needs to be coupled with a [backend](backends/index.html) in order to be used. 11 | 12 | HaxeUI Command Line Tools 13 | ------------------------- 14 | 15 | HaxeUI comes with an optional command line too that can make project creation that little bit simpler. It takes the form of a haxelib run command, and can be used in the following manner: 16 | 17 | ``` 18 | haxelib run haxeui-core {command} {options} 19 | ``` 20 | 21 | For example, to create a blank html5 project using haxeui-html5, simply create an empty directory, open a command prompt in that directory and use: 22 | 23 | ``` 24 | haxelib run haxeui-core create html5 25 | ``` 26 | 27 | To get help with the command line tool use 28 | 29 | ``` 30 | haxelib run haxeui-core help 31 | ``` 32 | 33 | _Note: You can also set up an alias for "haxelib run haxeui-core" to make commands even shorter, once that is done you can simply use things like "haxeui help" or "haxeui create html5"_ -------------------------------------------------------------------------------- /000-Getting Started/000-Welcome.md: -------------------------------------------------------------------------------- 1 | Welcome 2 | ================================ 3 | 4 | This guide will serve as a starting point to get your system configured to write rich, cross platform, cross framework Haxe GUI applications. 5 | 6 | By the end of this guide you will have a fully functioning HaxeUI installation (with a least one [backend](backends/index.html)) and a simple "[Hello World](hello-world.html)" application. 7 | 8 | Backends 9 | ------------------------- 10 | HaxeUI can target multiple frameworks (including native frameworks) by utilising a "backend system" 11 | 12 | ![](./_assets/welcome-system.jpg) 13 | 14 | This means that the logic of HaxeUI (inside haxeui-core) is separated from the code that actually performs the drawing, or in the case of native GUIs, creates the native controls. There are many backends to choose from, and no limitation on new backends that could be written. 15 | 16 | Backends come in two flavours: Composite Backends and Native Backends 17 | 18 | #### Composite Backends 19 | 20 | Composite backends are backends that usually utilise some type of drawing framework, this means that the logic of the control is 100% handled inside HaxeUI and the drawing is delegated to the backend. 21 | 22 | One backend that is an exception this is haxeui-html5 which doesnt really "draw" anything, instead the backend is responsible for creating a set of DOM nodes 23 | 24 | #### Native Backends 25 | 26 | Native backends differ from composite backends in that the creating of the actual component is delegated to the backend, this is useful for creating 100% native user interfaces while still leveraging the outward facing HaxeUI api. -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/000-Composite Backends/006-haxeui-raylib.md: -------------------------------------------------------------------------------- 1 | haxeui-raylib 2 | ================================ 3 | 4 | haxeui-raylib is the RayLib backend for HaxeUI. 5 | 6 | ![](./_assets/haxeui-raylib_preview.png) 7 | 8 | ## Installation 9 | haxeui-raylib has a dependency to haxeui-core, and so that too must be installed. Once haxeui-core is installed, haxeui-raylib can be installed using: 10 | 11 | ``` 12 | haxelib install haxeui-raylib 13 | ``` 14 | 15 | ### Raylib 16 | haxeui-openfl also has a dependency on raylib-haxe, this can be installed via haxelib using the following command: 17 | 18 | ``` 19 | haxelib install raylib-haxe 20 | ``` 21 | 22 | You will also need to install raylib. 23 | 24 | https://github.com/raysan5/raylib/releases 25 | 26 | ## Usage 27 | The simplest method to create a new native application that is HaxeUI ready is to use the HaxeUI command line tools. These tools will allow you to start a new project rapidly with HaxeUI support baked in. To create a new skeleton application using haxeui-heaps create a new folder and use the following command: 28 | 29 | ``` 30 | haxelib run haxeui-core create raylib 31 | ``` 32 | 33 | If however you already have an existing application, then incorporating HaxeUI into that application is straightforward: 34 | 35 | ### Haxe build.hxml 36 | 37 | If you are using a command line build (via a .hxml file) then add these lines: 38 | 39 | ``` 40 | -lib haxeui-core 41 | -lib haxeui-raylib 42 | -lib raylib-haxe 43 | ``` 44 | 45 | 46 | ## Toolkit initialisation and usage 47 | Initialising the toolkit requires you to add this single line somewhere before you start to actually use HaxeUI in your application: 48 | 49 | ```haxe 50 | Toolkit.init(); 51 | ``` -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/000-Composite Backends/004-haxeui-nme.md: -------------------------------------------------------------------------------- 1 | haxeui-nme 2 | ================================ 3 | 4 | haxeui-nme is the NME backend for HaxeUI. 5 | 6 | ![](./_assets/haxeui-nme-preview.png) 7 | 8 | ## Installation 9 | 10 | haxeui-nme has a dependency to haxeui-core, and so that too must be installed. Once haxeui-core is installed, haxeui-nme can be installed using: 11 | 12 | ``` 13 | haxelib install haxeui-nme 14 | ``` 15 | 16 | ### NME 17 | haxeui-nme also has a dependency on NME, this can be installed via haxelib using the following commands: 18 | 19 | ``` 20 | haxelib install nme 21 | haxelib run nme setup 22 | ``` 23 | 24 | ## Usage 25 | The simplest method to create a new NME application that is HaxeUI ready is to use the HaxeUI command line tools. These tools will allow you to start a new project rapidly with HaxeUI support baked in. To create a new skeleton application using haxeui-nme run the following command in the folder where Kha has been installed: 26 | 27 | ``` 28 | haxelib run haxeui-core create nme 29 | ``` 30 | 31 | If however you already have an existing application, then incorporating HaxeUI into that application is straightforward: 32 | 33 | ### project.nmml 34 | 35 | Simply add the following lines to your `project.nmml`. 36 | 37 | ```xml 38 | 39 | 40 | ``` 41 | 42 | ## Toolkit initialisation and usage 43 | Initialising the toolkit requires you to add this single line somewhere before you start to actually use HaxeUI in your application: 44 | 45 | ```haxe 46 | Toolkit.init(); 47 | ``` 48 | 49 | ## NME specifics 50 | As well as using the generic `Screen.instance.addComponent`, since HaxeUI components in haxeui-nme extend from `nme.display.Sprite` it is also possible to add components directly to any other NME sprite (eg: `Lib.current.stage.addChild`). -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/000-Composite Backends/002-haxeui-openfl.md: -------------------------------------------------------------------------------- 1 | haxeui-openfl 2 | ================================ 3 | 4 | haxeui-openfl is the OpenFL backend for HaxeUI. 5 | 6 | ![](./_assets/haxeui-openfl-preview.png) 7 | 8 | ## Installation 9 | haxeui-openfl has a dependency to haxeui-core, and so that too must be installed. Once haxeui-core is installed, haxeui-openfl can be installed using: 10 | 11 | ``` 12 | haxelib install haxeui-openfl 13 | ``` 14 | 15 | ### OpenFL 16 | haxeui-openfl also has a dependency on OpenFL, this can be installed via haxelib using the following commands: 17 | 18 | ``` 19 | haxelib install openfl 20 | haxelib run openfl setup 21 | ``` 22 | 23 | ## Usage 24 | The simplest method to create a new OpenFL application that is HaxeUI ready is to use the HaxeUI command line tools. These tools will allow you to start a new project rapidly with HaxeUI support baked in. To create a new skeleton application using haxeui-openfl create a new folder and use the following command: 25 | 26 | ``` 27 | haxelib run haxeui-core create openfl 28 | ``` 29 | 30 | If however you already have an existing application, then incorporating HaxeUI into that application is straightforward: 31 | 32 | ### project.xml / application.xml 33 | Simply add the following lines to your `project.xml` or your `application.xml`. 34 | 35 | ```xml 36 | 37 | 38 | ``` 39 | 40 | ## Toolkit initialisation and usage 41 | Initialising the toolkit requires you to add this single line somewhere before you start to actually use HaxeUI in your application: 42 | 43 | ```haxe 44 | Toolkit.init(); 45 | ``` 46 | 47 | ## OpenFL specifics 48 | As well as using the generic `Screen.instance.addComponent`, since HaxeUI components in haxeui-openfl extend from `openfl.display.Sprite` it is also possible to add components directly to any other OpenFL sprite (eg: `Lib.current.stage.addChild`). -------------------------------------------------------------------------------- /001-Guides/001-Backends.md: -------------------------------------------------------------------------------- 1 | Backends 2 | ================================ 3 | A `backend` is the term used to refer to what HaxeUI uses to delegate component creation, event registration and rendering to. The core of the library (`haxeui-core`) handles layout, scripting, binding, invalidation sequence and such common tasks, whilst the backend in question is responsible for actually displaying something on screen, mapping of events from HaxeUI's generic `UIEvent` to something the host backend uses and such framework specific tasks. 4 | 5 | In general getting HaxeUI to work with one of the supported backends is fairly trivial and follows these general steps: 6 | 7 | * Install `haxeui-core` 8 | * Install haxeui backend library 9 | * Install dependencies of backend library 10 | 11 | Haxelib itself should handle these steps for you. They are only listed here for completeness. 12 | 13 | Supported Backends 14 | ------------------------- 15 | The following list is all of the currently supported HaxeUI backends: 16 | 17 | Framework | Backend Library | Dependencies | Platforms | 18 | --------- | ---------------- | -------------------- | --------- 19 | Flambe | haxeui-flambe | flambe | Mobile, Browser 20 | HTML5 | haxeui-html5 | none | Browser ** 21 | Kha | haxeui-kha | kha | Desktop, Mobile, Browser 22 | Luxe | haxeui-luxe | luxe | Desktop, Mobile, Browser 23 | NME | haxeui-nme | nme | Desktop, Mobile, Browser 24 | OpenFL | haxeui-openfl | openfl, lime | Desktop, Mobile, Browser 25 | PixiJS | haxeui-pixi | pixijs | Browser 26 | hxWidgets | haxeui-hxwidgets | hxWidgets, wxWidgets | Desktop ** 27 | Raylib | haxeui-raylib | raylib-haxe | Desktop 28 | Heaps | haxeui-heaps | heaps | Desktop, Mobile, Browser 29 | PDCurses | haxeui-pdcurses | | Desktop 30 | Flixel | haxeui-flixel | flixel | Desktop, Mobile, Browser 31 | 32 | ** Produces OS native components -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/000-Composite Backends/003-haxeui-flixel.md: -------------------------------------------------------------------------------- 1 | haxeui-flixel 2 | ================================ 3 | 4 | haxeui-flixel is the Flixel backend for HaxeUI. 5 | 6 | ![](./_assets/haxeui-flixel-preview.png) 7 | 8 | ## Installation 9 | haxeui-flixel has a dependency to haxeui-core, and so that too must be installed. Once haxeui-core is installed, haxeui-flixel can be installed using: 10 | 11 | ``` 12 | haxelib install haxeui-flixel 13 | ``` 14 | 15 | ### OpenFL 16 | HaxeFlixel itself is built ontop of OpenFL and is therefore a dependency that must be installed and setup, this can be done via haxelib using the following commands: 17 | 18 | ``` 19 | haxelib install openfl 20 | haxelib run openfl setup 21 | ``` 22 | 23 | ### Flixel 24 | Once OpenFL is installed and setup installing HaxeFlixel can be done with the following commands: 25 | 26 | ``` 27 | haxelib install flixel 28 | haxelib run lime setup flixel 29 | ``` 30 | 31 | ## Usage 32 | The simplest method to create a new Flixel application that is HaxeUI ready is to use the HaxeUI command line tools. These tools will allow you to start a new project rapidly with HaxeUI support baked in. To create a new skeleton application using haxeui-flixel create a new folder and use the following command: 33 | 34 | ``` 35 | haxelib run haxeui-core create flixel 36 | ``` 37 | 38 | If however you already have an existing application, then incorporating HaxeUI into that application is straightforward: 39 | 40 | ### project.xml / application.xml 41 | Simply add the following lines to your `project.xml` or your `application.xml`. 42 | 43 | ```xml 44 | 45 | 46 | ``` 47 | 48 | ## Toolkit initialisation and usage 49 | Initialising the toolkit requires you to add this single line somewhere before you start to actually use HaxeUI in your application: 50 | 51 | ```haxe 52 | Toolkit.init(); 53 | ``` 54 | 55 | ## Flixel specifics 56 | As well as using the generic `Screen.instance.addComponent`, since HaxeUI components in haxeui-flixel extend from `flixel.group.FlxSpriteGroup` it is also possible to add components directly to any other Flixel sprite / state (eg: `FlxState.add`). -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/000-Composite Backends/005-haxeui-heaps.md: -------------------------------------------------------------------------------- 1 | haxeui-heaps 2 | ================================ 3 | 4 | haxeui-heaps is the Heaps backend for HaxeUI. 5 | 6 | ![](./_assets/haxeui-heaps-preview.png) 7 | 8 | ## Installation 9 | haxeui-heaps has a dependency to haxeui-core, and so that too must be installed. Once haxeui-core is installed, haxeui-heaps can be installed using: 10 | 11 | ``` 12 | haxelib install haxeui-heaps 13 | ``` 14 | 15 | ### Heaps 16 | haxeui-heaps also has a dependency on Heaps, this can be installed via haxelib using the following command: 17 | 18 | ``` 19 | haxelib install heaps 20 | ``` 21 | 22 | _Important: If you want to use heaps in a desktop applicaiton (ie, via HashLink) then you also need install the SDL libraries for heaps using the following command: haxelib run install hsdl_ 23 | 24 | ## Usage 25 | The simplest method to create a new native application that is HaxeUI ready is to use the HaxeUI command line tools. These tools will allow you to start a new project rapidly with HaxeUI support baked in. To create a new skeleton application using haxeui-heaps create a new folder and use the following command: 26 | 27 | ``` 28 | haxelib run haxeui-core create heaps 29 | ``` 30 | 31 | If however you already have an existing application, then incorporating HaxeUI into that application is straightforward: 32 | 33 | ### Haxe build.hxml 34 | 35 | If you are using a command line build (via a .hxml file) then add these lines: 36 | 37 | ``` 38 | -lib heaps 39 | -lib haxeui-core 40 | -lib haxeui-heaps 41 | ``` 42 | 43 | _Important: If you are using heaps in a desktop applicaiton (ie, via HashLink) then you also need include the SDL library into your application with the following: -lib hsdl_ 44 | 45 | ## Toolkit initialisation and usage 46 | Initialising the toolkit requires you to add this single line somewhere before you start to actually use HaxeUI in your application: 47 | 48 | ```haxe 49 | Toolkit.init(); 50 | ``` 51 | 52 | ## Heaps specifics 53 | As well as using the generic `Screen.instance.addComponent`, since HaxeUI components in haxeui-heaps extend from `h2d.Object` it is also possible to add components directly to any other Heaps s2d object (eg: `hxd.App.s2d`). -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/000-Composite Backends/000-haxeui-html5.md: -------------------------------------------------------------------------------- 1 | haxeui-html5 2 | ================================ 3 | 4 | haxeui-html5 is the pure HTML5 backend for HaxeUI. It has no other framework dependency except haxeui-core itself and outputs a DOM tree. 5 | 6 | ![](./_assets/haxeui-html5-preview.png) 7 | 8 | ## Installation 9 | haxeui-html5 has a dependency to haxeui-core, and so that too must be installed. Once haxeui-core is installed, haxeui-html5 can be installed using: 10 | 11 | ``` 12 | haxelib install haxeui-html5 13 | ``` 14 | 15 | ## Usage 16 | The simplest method to create a new HTML5 application that is HaxeUI ready is to use the HaxeUI command line tools. These tools will allow you to start a new project rapidly with HaxeUI support baked in. To create a new skeleton application using haxeui-html5 create a new folder and use the following command: 17 | 18 | ``` 19 | haxelib run haxeui-core create html5 20 | ``` 21 | 22 | If however you already have an existing application, then incorporating HaxeUI into that application is straightforward: 23 | 24 | ### Haxe build.hxml 25 | 26 | If you are using a command line build (via a .hxml file) then add these two lines: 27 | 28 | ``` 29 | -lib haxeui-core 30 | -lib haxeui-html5 31 | ``` 32 | 33 | If you are using an IDE, like Haxe Develop, add these lines via the project settings window (or the appropriate place for your IDE of choice). 34 | 35 | ## Toolkit initialisation and usage 36 | 37 | Initialising the toolkit requires you to add this single line somewhere before you start to actually use HaxeUI in your application: 38 | 39 | ```haxe 40 | Toolkit.init(); 41 | ``` 42 | 43 | ## HTML5 specifics 44 | 45 | As well as using the generic `Screen.instance.addComponent`, it is also possible to add components directly to any other DOM node: the haxeui-html5 backend exposes a special element property for this purpose. Eg: 46 | 47 | ```haxe 48 | js.Browser.document.getElementById("myContainer").appendChild(main.element); 49 | ``` 50 | 51 | ### Initialisation options 52 | 53 | The configuration options that may be passed to Tookit.init() are as follows: 54 | 55 | ```haxe 56 | Toolkit.init({ 57 | // where 'Screen' will place components (defaults to the document body) 58 | container: js.Browser.document.getElementById("myContainer") 59 | }); 60 | ``` 61 | -------------------------------------------------------------------------------- /000-Getting Started/003-Backends/000-Composite Backends/001-haxeui-kha.md: -------------------------------------------------------------------------------- 1 | haxeui-kha 2 | ================================ 3 | 4 | haxeui-kha is the Kha backend for HaxeUI. 5 | 6 | ![](./_assets/haxeui-kha-preview.png) 7 | 8 | ## Installation 9 | haxeui-kha has a dependency to haxeui-core, and so that too must be installed. Once haxeui-core is installed, haxeui-kha can be installed using: 10 | 11 | ``` 12 | haxelib install haxeui-kha 13 | ``` 14 | 15 | ### Kha 16 | haxeui-kha also has a dependency on Kha, this can be installed in an empty directory via git using the following commands: 17 | 18 | ``` 19 | git init 20 | git submodule add https://github.com/KTXSoftware/Kha 21 | git submodule update --init --recursive 22 | ``` 23 | 24 | _Note: HaxeUI comes with a set of command line tools that can also perform this step for you using: 25 | haxelib run haxeui-core install kha_ 26 | 27 | ## Usage 28 | The simplest method to create a new Kha application that is HaxeUI ready is to use the HaxeUI command line tools. These tools will allow you to start a new project rapidly with HaxeUI support baked in. To create a new skeleton application using haxeui-kha run the following command in the folder where Kha has been installed: 29 | 30 | ``` 31 | haxelib run haxeui-core create kha 32 | ``` 33 | 34 | ### khamake.js 35 | Simply add the following lines to your khamake.js and rebuild your project files. 36 | 37 | ```js 38 | project.addLibrary('haxeui-core'); 39 | project.addLibrary('haxeui-kha'); 40 | ``` 41 | 42 | ## Toolkit initialisation and usage 43 | The Kha system itself must be initialised and a render loop started. This can be done by using code similar to: 44 | 45 | ```haxe 46 | class Main { 47 | public static function main() { 48 | kha.System.start({}, function ( _ ) { 49 | kha.Assets.loadEverything(function() { 50 | haxe.ui.Toolkit.init(); 51 | 52 | final screen = haxe.ui.core.Screen.instance; 53 | final ui = haxe.ui.ComponentBuilder.fromFile("ui.xml"); 54 | 55 | screen.addComponent(ui); 56 | 57 | kha.System.notifyOnFrames(function( framebuffers: Array ) { 58 | final fb = framebuffers[0]; 59 | final g2 = fb.g2; 60 | g2.begin(true, kha.Color.White); 61 | screen.renderTo(g2); 62 | g2.end(); 63 | }); 64 | }); 65 | }); 66 | } 67 | } 68 | ``` 69 | 70 | ## HTML5 specifics 71 | As well as using the generic `Screen.instance.addComponent`, it is also possible to render a component to a specific surface use the components special `renderTo` function. Eg: 72 | 73 | ```haxe 74 | main.renderTo(...); 75 | ``` -------------------------------------------------------------------------------- /001-Guides/009-Native.md: -------------------------------------------------------------------------------- 1 | Native 2 | ================================ 3 | 4 | 5 | 6 | | Composite | Native | 7 | | ------------------------------------------------------------ | ------------------------------------------------------------ | 8 | | Built entirely out of HaxeUI components
![composite_dropdown](_assets/composite_dropdown.png) | Creation delegated to backend
![native_dropdown](_assets/native_dropdown.png) | 9 | | Themes are applicable | Themes most likely selective at best | 10 | | Consistent yet custom look & feel
![native_composite](_assets/native_composite.png) | Look & feel matches host operating system
![native_native](/home/consonne/Work/HaxeuiGuide/haxeui-guides/001-Guides/_assets/native_native.png) | 11 | | Every visible aspect configurable via CSS | Hard to create totally custom UIs | 12 | | Logic layout handed via core | Reports size back into core(if autosized) | 13 | 14 | 15 | 16 | Hybrid user interfaces 17 | 18 | - Mix and match composite and native components 19 | - Get best of both worlds 20 | - "Fill in gaps" in native toolkits 21 | 22 | There are no hybrid user interface for now. HTML5 was an hybrid interface, but it is now a pure composite one. 23 | 24 | 25 | 26 | ## How does "native" work 27 | 28 | 29 | Native means that instead of using the normal haxeui-core class it will use one specific to the platform 30 | 31 | So for dropdowns, in haxe-ui hxWidgets instead of using `haxe.ui.components.DropDown` it will use `hx.widgets.Choice` . It will also replace behaviours events, with the native ones. 32 | 33 | ```xml 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | ``` 47 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ################# 2 | ## Eclipse 3 | ################# 4 | 5 | *.pydevproject 6 | .project 7 | .vscode 8 | .haxeui 9 | .metadata 10 | bin/ 11 | tmp/ 12 | *.tmp 13 | *.bak 14 | *.swp 15 | *~.nib 16 | local.properties 17 | .classpath 18 | .settings/ 19 | Kha/ 20 | .loadpath 21 | 22 | # External tool builders 23 | .externalToolBuilders/ 24 | 25 | # Locally stored "Eclipse launch configurations" 26 | *.launch 27 | 28 | # CDT-specific 29 | .cproject 30 | 31 | # PDT-specific 32 | .buildpath 33 | 34 | 35 | ################# 36 | ## Visual Studio 37 | ################# 38 | 39 | ## Ignore Visual Studio temporary files, build results, and 40 | ## files generated by popular Visual Studio add-ons. 41 | 42 | # User-specific files 43 | *.suo 44 | *.user 45 | *.sln.docstates 46 | 47 | # Build results 48 | *_i.c 49 | *_p.c 50 | *.ilk 51 | *.meta 52 | *.obj 53 | *.pch 54 | *.pdb 55 | *.pgc 56 | *.pgd 57 | *.rsp 58 | *.sbr 59 | *.tlb 60 | *.tli 61 | *.tlh 62 | *.tmp 63 | *.vspscc 64 | .builds 65 | *.dotCover 66 | 67 | ## TODO: If you have NuGet Package Restore enabled, uncomment this 68 | #packages/ 69 | 70 | # Visual C++ cache files 71 | ipch/ 72 | *.aps 73 | *.ncb 74 | *.opensdf 75 | *.sdf 76 | 77 | # Visual Studio profiler 78 | *.psess 79 | *.vsp 80 | 81 | # ReSharper is a .NET coding add-in 82 | _ReSharper* 83 | 84 | # Installshield output folder 85 | [Ee]xpress 86 | 87 | # DocProject is a documentation generator add-in 88 | DocProject/buildhelp/ 89 | DocProject/Help/*.HxT 90 | DocProject/Help/*.HxC 91 | DocProject/Help/*.hhc 92 | DocProject/Help/*.hhk 93 | DocProject/Help/*.hhp 94 | DocProject/Help/Html2 95 | DocProject/Help/html 96 | 97 | # Click-Once directory 98 | publish 99 | 100 | # Others 101 | [Bb]in 102 | [Oo]bj 103 | sql 104 | TestResults 105 | *.Cache 106 | ClientBin 107 | stylecop.* 108 | ~$* 109 | *.dbmdl 110 | Generated_Code #added for RIA/Silverlight projects 111 | 112 | # Backup & report files from converting an old project file to a newer 113 | # Visual Studio version. Backup files are not needed, because we have git ;-) 114 | _UpgradeReport_Files/ 115 | Backup*/ 116 | UpgradeLog*.XML 117 | 118 | 119 | 120 | ############ 121 | ## Windows 122 | ############ 123 | 124 | # Windows image file caches 125 | Thumbs.db 126 | 127 | # Folder config file 128 | Desktop.ini 129 | 130 | 131 | ############# 132 | ## Python 133 | ############# 134 | 135 | *.py[co] 136 | 137 | # Packages 138 | *.egg 139 | *.egg-info 140 | dist 141 | build 142 | eggs 143 | parts 144 | bin 145 | var 146 | sdist 147 | develop-eggs 148 | .installed.cfg 149 | 150 | # Installer logs 151 | pip-log.txt 152 | 153 | # Unit test / coverage reports 154 | .coverage 155 | .tox 156 | 157 | #Translations 158 | *.mo 159 | 160 | #Mr Developer 161 | .mr.developer.cfg 162 | 163 | # Mac crap 164 | .DS_Store 165 | 166 | 167 | *.backup 168 | dox.xml -------------------------------------------------------------------------------- /_screenshot_app/project.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /_screenshot_app/assets/main-view.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |