ianharrigan / haxeui

IMPORTANT NOTE! This repository is no longer maintained. Please consider the newer version: https://github.com/haxeui/haxeui-core

NOTE: This is a legacy unmaintained version of HaxeUI

If you are writing a new application, or are considering moving a legacy application across to the newer version, check out the repository here: https://github.com/haxeui/haxeui-core

Important note about OpenFl/Lime

OpenFL has dropped legacy support in versions after 3.6.1. Since this version of HaxeUI is tied to legacy versions of OpenFL/Lime the following are the maximum versions that can be used with it:

• OpenFL: 3.6.1
• Lime: 2.9.1

Haxe UI

Cross platform Haxe/OpenFL set of styleable application centric rich UI components to be used "out the box". Supports css type styling/skinning.

Demos (May be out of date): SWF | Windows | Neko | Android | AIR | HTML

Adobe AIR note: Installer will not install from mounted/network drives.

Documentation

Wiki (Incomplete)

API (Incomplete)

Projects

• Test App (Used in demo/screenshots)
• Samples
• IRC client test app
• HaxePad

Instructions

First install haxeui via haxelib:

haxelib install haxeui

Once installed add

<haxelib name="haxeui" />

to your openfl application.xml. Finally, create a basic application with:

import haxe.ui.toolkit.core.Macros;
import haxe.ui.toolkit.core.Toolkit;
import haxe.ui.toolkit.core.Root;
import haxe.ui.toolkit.controls.Button;

class Main {
	public static function main() {
		Macros.addStyleSheet("styles/gradient/gradient.css");
		Toolkit.init();
		Toolkit.openFullscreen(function(root:Root) {
			var button:Button = new Button();
			button.text = "HaxeUI!";
			root.addChild(button);
		});
	}
}

Note: haxeui comes with some styles ready for use, if no styles are added a default one is used.

If you created your own style/theme from scratch and don't want to include the built-in styles in your build result, specify the flag <haxdef name="haxeui-exclude-resources" /> before the <haxelib name="haxeui" /> directive in your project configuration file.

Components

General components

• Button
• Check box
• Image
• Option box
• Progress bars (horizontal & vertical)
• Scroll bars (horizontal & vertical)
• Sliders (horizontal & vertical)
• Tab bars
• Text (static, input, multiline)
• List selection (drop downs, popup lists)
• Date selection (drop downs, popup calendar)
• Calendar
• Menus

Extended components

• Code editor (supports basic syntax highlighting)
• RTF edtior (preliminary, only fully functional in flash due to neko/cpp limitations)

Layout, position and containment components

• Accordion
• Grid
• HBox
• ListView
• MenuBar
• ScrollView
• Stack
• TabView
• VBox

Popups

• Busy
• Simple
• List
• Custom
• Calendar

Data Sources

• Array
• JSON
• XML
• MySQL (Neko/Read-Only)
• Files (Neko/Read-Only)

Notes

html5 target functions but is not particularly performant. This will, hopefully, be improved in future releases.

An experimental html5 demo is available here

Licence

Unless indicated otherwise, this code was created by Ian Harrigan and
provided under a MIT-style license.
Copyright (c) Ian Harrigan. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED ?AS IS?, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

haxeui's Issues

Flash target not working if XML doesn't contain `xmlns:ui="haxeui::ui"` in non-debug player

It seems that if there isn't a xmlns:ui="haxeui::ui" in at least one element in an XML you are trying to use for the UI, it will work only in a debug flash player and not in a normal one

Should be able to set Button icon from code

Something that performs the same as the following:

//haxe.ui.toolkit.controls.Image
public function new(bitmap:Bitmap = null) {//change constructor to accept Bitmap
super();
if(bitmap != null){
_bmp = bitmap;
this.width = bitmap.width;
this.height = bitmap.height;
}
autoSize = true;
}

//haxe.ui.toolkit.controls.Button
//add function to allow setting Image without going through ResourceManager
public function setIconFromData(data:BitmapData):Void {
if (_icon == null) {
_icon = new Image(new Bitmap(data));
addChild(_icon);
}
}

Image resize doesn't resize resource bitmap

Kind request - could you help out?

Hello, I'm sorry for posting this here as certainly this isnt issue with library but i've run out of options :)

Could you help out and compile this maybe to .swc or if you dont have time to do this or dont want to - even explain how to do this ? As we (me and friend of mine) done everything according to docs on haxe.org but best we could do was 1.2mb swc file without embedded assets that are created in preloader wchich in turn is created after we compile project.
Worst part is we arent even haxe users so its really hard to understand whats going on.

I cant express how gratefull I would be for .swc output.

HTML5 Output - Mouseevents outside of scroll area blocked by contents

Hi Ian,

I noticed in HTML5 that it is possible to click on the contents of a scrollview outiside the scrollview and control whats inside it. Namely, if click to the bottom right of a scrollview where the picture is masked, when you downclick the event is bubbling to the photo and taking control of it. --- even though you were technically clicking on whitespace in the UI.

Also, similarly, the internal contents may be blocking other buttons. If you go to your "Scrolls" tab and scroll to the bottom of the kitty picture -- youll notice that MouseOvers and Mouse Clicks of the TAB ITEMS on the top of the page above the kitty pic are blocked. :-(

Move extended components out of main reposititory

Things like "Code", "RTFEditor", etc should really be in a seperate repos (like file dialogs)

Is it possible to put haxe function in XML?

I need to determine width of controls based on device resolution, so I won't write final dimensions directly, but something like width="DPS(100)"

Then my DPS function return the correct width, is this possible?

[ios] Small Bug in RootManager.hx

line 37 should be:

haxe.Timer.delay(function() fn(root), 100); // iOS 6

Holding down mouse button in V/H scrolls should continuously page value

Cant align text in TextInput component

TextInput should be able to have its text aligned.

Something like:

myField {

text-align: right;

}

Ability to reorganise children without having add/remove/re-add

Ie: setChildIndex

Rename "psuedothreads" to "pseudothreads"

Not huge, but spelling is incorrect.

Image.dispose() causes bitmaps/sprites sharing same bmapdata to be wiped.

This example shows how:

var bitmap:Bitmap = new Bitmap( Assets.getBitmapData("assets/image.png") );
var button:Button = new Button();
button.icon = "assets/image.png"

// bitmap will also lose its image.
button.dispose();

I commented Image.hx 42 : _bmp.bitmapData.dispose();
And thing are ok, any reason to dispose the bitmapdata? It may not be necessary at all.

Android: Can not select any item from list

Now I've compiled the demo application of this library for android. This works fine so far. Only when I open a list to select an item, a selection menu scrolls to the screen center, but I can not select any of these items nor close the center menu. I must close the app with the taskmanager and start it again.

P.S. Do you have any ideas why the app shows a black screen for about 10 seconds on start up?

Events have no reference to component.

I created several Buttons in runtime and attached MouseEvent.CLICK to them.
The event handler is the same function for all, it uses a switch to identify which button dispatched the CLICK event.

The problem is that MouseEvent has current target and target as the sprite belonging to the component, and there is no way to get the component related to the event.

Any ideas?

Calls to FileSystem.isDirectory in FilesDataSource::open can/will throw errors (neko/cpp)

Calls to FileSystem.isDirectory in FilesDataSource::open can/will throw errors (neko/cpp), stopping the open operation from completing successfully.

Replacing the 2 FileSystem.isDirectory calls with the isDir function that already exists in FilesDataSource sorts it out.

haxeui/src/haxe/ui/toolkit/data/FilesDataSource.hx

Line 37 in 245c740

if (FileSystem.isDirectory(_dir + "/" + file)) { // add dirs first

haxeui/src/haxe/ui/toolkit/data/FilesDataSource.hx

Line 44 in 245c740

if (!FileSystem.isDirectory(_dir + "/" + file)) {

Mouseup outside scrollbars error

Bug steps:

1. rollover scrollbar
2. mouse down
3. rollout scrollbar
4. mouse up
5. rollouver scrollbar + move mouse = error (scroll move without mouse down)

Docs for the XML views syntax

Hi,

I am trying to write some XML based views but find myself getting stuck trying to guess the API. Are there any DTDs that describe the XML structure or are there any other docs or conventions that may help?

Eamonn

[HTML5] DisplayObjectContainer._childrenToAdd appear to be omitted from refereshNamedComponents

Firstly, thanks for the project! I love the components and the code is pretty straight forward to follow!

Within haxe.ui.toolkit.core.Controller.new refereshNamedComponents is called.

When I am targeting HTML5 any VBox components I specify in my XML are accessible using getComponent. Any buttons or labels are not.

I have looked into it a little and I think it is to do with execution order as the containers are available but the items within them are not. I also noticed that containers within containers did not work.

I hope this helps.

Neko checkbox/radiobutton issue

Hi Ian!

Thank you for the update!

Noticing one thing that I haven't spotted before:
The checkbox and radibutton changes don't switch by just click/release on them,
I also have to "drag" the mouse a pixel or so when pressed...

Flash target seems to work as expected, haven't tried windows/cpp (messed around with the MS cpp installation)...

Toggle button group behavior

Hey, i copied optionbox group behavior to button, its very useful and common to have, plus i need it :).

It could be improved with some refactoring to not repeat the code in button and optionbox i think.

Anyways I'm adding this to the panelList pull request.

Layouts ignore invisible.

Hi, its very common to have dynamic panels where one shows and hides contents.

For now to add and remove contents i have to use add and remove children, which often leads to layout problems, overhead and having to store the components orderly in arrays remove and add them again.

If i add this condition to verticalLayout resizeChildren() and repositionChildren()

if (child.visible == false) {
          continue; // ignore invisible.
}

i get a very neat layout that lets me show and hide content very easily.

think this could be applied to all layouts (and official)? I think its a great addition and also helps me a lot.

Scrollbars in panellist not correct

Layout not invalidated.

Problems setting style.padding inside class.

Inside a component constructor I'm adding a Spacer.

If i set spacer padding like so:

var spacer = new Spacer();
spacer.percentWidth = 100;
spacer.percentHeight = 100;
spacer.style.padding = 5;
addChild(spacer);

padding will be default, other style attributes like backgroundColor or borderSize will change tho.

the same happens if i put the code after initialize();

if i set padding using xml code things work fine, also if i set padding on style.css - Spacer{}, it works fine.

i could get the component padding to work adding this after initialize(), other ways did not work.

this.style.padding = 5;
this.invalidade();

---

something is wrong, sorry if i didn't isolate more the problem, i will open this issue for future reference.

multiline text scroll

http://screencast.com/t/uWxP7rfz5e

If you dont create components from parser, TabView fails to calculate child positions.

I actually switched back to YAHUI (forked it), since this issue doesn't occur on that previous version. I can't use xml so i have to create the ui from code, but it appears if i add a component as a page to a TabView and add that TabView to a root, the component sits right on the tabs, not on the reserved place which is just under the tabs. I couldnt click the tabs because of that :) Like i said, YAHUI doesnt have that issue.

I realy want to use that framework, for further use, for now i'll be using YAHUI. If i get time and find out why this is happening , i'll be reporting :)

Cheers!

(hello @19th :) );

Table Tab

Hi Ian,
Great work on the new Table feature coming along. I really like the embeded types ( just like lists ). Really swell.

I have this working on Windows and Flash, but the table fails to render for HTML5. I would like to confirm the status of that feature and/or what work I could offer if any.

Thanks for your great work.

Style.hx: Cannot access private field applyStyle

I've checked out the Repo and open the project with FlashDevelop. When building the project for flash I get these output:

Building haxeui
haxelib run openfl build C:\GitHub\haxeui\application.xml flash
src/haxe/ui/toolkit/style/Style.hx:575: characters 4-52 : Cannot access private field applyStyle
src/haxe/ui/toolkit/core/StyleableDisplayObject.hx:13: lines 13-166 : Field style has different type than in haxe.ui.toolkit.core.interfaces.IStyleable
src/haxe/ui/toolkit/core/StyleableDisplayObject.hx:13: lines 13-166 : Dynamic should be haxe.ui.toolkit.style.Style
Build halted with errors (haxelib.exe).

What can I do to run this library? Make all applyStyle functions public?

Accordion to behave like a panel list?

Wanting to have a list of collapsible panels like in Blender or Adobe Flash - i commented the following lines of Accordion class:

cast(child, IDisplayObjectContainer).autoSize = false;
child.percentHeight = 100; // every occurrence of this.

This causes the accordion panels to not be limited to the container height, and showing scrollbars if the accordion height is too big inside a viewscroll.

also commented this:

for (b in _buttons) {
            if (b != button && b.selected == true) {
                buttonToHide = b;
                var tempIndex:Int = Lambda.indexOf(_buttons, b);
                panelToHide = cast(_panels[tempIndex], Component);
                break;
            }
}

so that the panels are only collapsed or expanded when the user clicks them.

Now i have a component that provides collapsible panels (and scrollable) just like blender or flash and its very common.

Also with a little work, a treeView can also be created from it (very useful component).

How does it sound to add this? Maybe as a new component? Maybe as an Accordion behavior? Maybe as a base class which Accordion adds functionality to? Can provide screenshots if needed.

Open a dropdown, then resize the window

Checkbox is not dispatching Event.CHANGE

Instead it calls _value.cycleValues();

var event:Event = new Event(Event.CHANGE);
dispatchEvent(event);

is never reached

Components with no css rules are not stylizable / have no rule set.

Hi, i just started using haxeui so anything i say may be totally off.

I am trying to use an "empty" component as an UI container for sprites in my project.

My choice was "Spacer" but i could go for others like component or displayObject.

To be able to skin it i had to add the entry:
Spacer {} to gradient.css, so that the rule #Spacer is added to StyleManager.

If the rule is not set the following has no effect:
widget:Spacer;
widget.style.something = someValue;

It would be useful to be able to style components without needing to add the entry to style.css, even to create new components and test them.

Maybe create a new/default rule every time a new component is registered?

Thanks

Can't center Text with autosize=false.

I'm trying to use a Text field with fixed size, centered both horizontally and vertically.

No matter if i set horizontalAlign or verticalAlign, the text is always aligned to Left and centered without having the text height in account.

Is there a way to do this atm? I may be able to fix this problem with some effort but i would like to hear your opinion first.

Rename (again)

In the process of renaming the project to "nme-ui-toolkit" (haxeui/yahui are bad names!) aswell refactoring/improving some stuff. Will hopefully be the last time! Honest! :)

Ian

Is virtualization supported?

When dealing with big data lists, we might suffer from poor performance due to rendering hundred of items ..

As you know, native android list support virtualization, to render only visible items, also, there is recyclable item template, where the same ui component used to view other items, this would save construction time & boost performance as a result.

is this feature supported in haxeui ? if not, is it in the road map?

Button states should be an enum

continuousHorizontalLayout ignores padding and spacing

the following code:

<hbox layout="continuousHorizontal" style="padding:5;spacing:5" />

results in a hbox with padding 0 and spacing 1. If i remove the layout field the normal hbox does not ignore padding or spacing.

I think it has to do with issue #40 , not confirmed tho.

change "dataId" to "hash"

Makes more sense.

ScrollView onMouseWheel handler should remove dispatchEvent(event)

ScrollView onMouseWheel handler should remove dispatchEvent(event).

It will cause application crash.

Test Toolkit.openFullscreen() on IOS6

At the moment, creating a root without an async callback may be unsafe on IOS6.

Would be good to make sure it has that problem and if it does maybe create a different solution for that problem so that:

var root = Toolkit.OpenFullscreen()

works on all targets including iOS6

Thank you.

[feature] em like unit for sizing of elements

and/or have HSS like precompiler for the CSS

with all the different possible resolutions it's difficult to generate a consistent layout for different platforms. for containers % is good, but for elements it is difficult.

ResourceManager Importing Assets Issue

Hi. I'm having the weirdest issue here on cpp target.
It seems that at (ResourceManager @19th line) bytes are returning null so it crashes (null object reference) on cpp target, flash is just fine.

i commented out the if statement @17 which is an exception for target checking, so all assets are coming from embedded assets, it works just fine even for cpp.
you may check that on (https://github.com/onatbas/sheet-splitter).

Keep up !

Called from DisplayObjectContainer::addChildAt, neash/display/DisplayObjectContainer.hx 38
Called from DisplayObject::nmeSetParent, neash/display/DisplayObject.hx 659
Called from DisplayObjectContainer::nmeOnAdded, neash/display/DisplayObjectContainer.hx 183
Called from DisplayObject::nmeOnAdded, neash/display/DisplayObject.hx 458
Called from DisplayObject::dispatchEvent, neash/display/DisplayObject.hx 198
Called from DisplayObject::nmeDispatchEvent, neash/display/DisplayObject.hx 315
Called from EventDispatcher::dispatchEvent, neash/events/EventDispatcher.hx 80
Called from Listener::dispatchEvent, neash/events/EventDispatcher.hx 181
Called from Component::onReady, haxe/ui/core/Component.hx 317
Called from Button::initialize, haxe/ui/controls/Button.hx 114
Called from Component::addChild, haxe/ui/core/Component.hx 584
Called from Component::addChildAt, haxe/ui/core/Component.hx 579
Called from Component::calcSize, haxe/ui/core/Component.hx 175
Called from Component::setWidth, haxe/ui/core/Component.hx 387
Called from Component::invalidateSize, haxe/ui/core/Component.hx 121
Called from Component::resize, haxe/ui/core/Component.hx 164
Called from Button::applyStyle, haxe/ui/controls/Button.hx 37
Called from Component::applyStyle, haxe/ui/core/Component.hx 257
Called from StyleHelper::paintStyle, haxe/ui/style/StyleHelper.hx 221
Called from StyleHelper::paintScale9, haxe/ui/style/StyleHelper.hx 234
Called from StyleHelper::getBitmapSection, haxe/ui/style/StyleHelper.hx 143
Called from ResourceManager::getBitmapData, haxe/ui/resources/ResourceManager.hx 19
Called from ByteArray::fromBytes, neash/utils/ByteArray.hx 154
Critical Error: Null Object Reference
Done(1)

Add data mapper for use with data sources

At a basic level should simply be able to map data fields from one to another, eg:

Input:
[{"some": "thing"}, {"some": "thing else"}]

Output:
[{"text": "thing"}, {"text": "thing else"}].

Might be useful to also have advanced features like being able to pass the data through a transformation xslt, need to investigate.

Horizontal scrolling on demo(s) does not work when viewing on Mac.

Looking at the demo on Mac Chrome, horizontal scrolling doesn't work. I'm using a trackpad with 2 finger scroll gestures. In addition, the vertical scrolling seems a bit jerky, not sure if this can be smoothed out with the framework. I did a quick search, but couldn't find anything, so sorry if these are known issues.

[feature] scrolling throug lists via swipe should be improved

1. people are used, that depending on the velocity of a swipe the list continues to scroll and stops retarded, like it has a friction
2. the cursor (if there is a cursor for the platform) should stay at the position where the swipe started. So the user can scroll through longer lists without the need to reposition the pointing device.

Drop down box is sending change events too often

Eg:

var list:List = new List();
list.dataSource.add({text: "Item 1"});
list.dataSource.add({text: "Item 2"});
list.dataSource.add({text: "Item 3"});
list.onChange = function(e) {
    trace("changed");
};

"changed" is traced too often (ie, on click not on actual change)

Can't scale button icon.

I am trying to dynamically create buttons with icons that are scaled copies of "scene objects" graphics (bitmapdata), for example i have a motorcycle image in my game, i create a button with a small motorcycle.

Doing this with Button seems to be a struggle, this was the best i could do:

var btn = new Button();
btn.icon = graphic.path;
var icon:Image = Reflect.field(btn, "_icon");
icon.width = 50;
icon.height = 50;
icon.stretch = true;
btn.iconPosition = "center";

The icon is stretched but its wrongly positioned at the left of the button.

There seems to be many things wrong in here, like having to pass a path to load a bitmap, using reflect to get the button icon, not having control of icon size etc..
Also there are many constrains on what works and in what order.

I can't come up with an easy way to fix this, but i could think, if button had simply verticalLayout or horizontalLayout, it would be just like adding components to a hBox or vBox and i would have tons of control over it (creating all types of buttons), plus removing complexity overall.
What buttonLayout does can be done using vlayout or hlayout i think.

Think this would work? I would like to give it a try but would like to hear your opinion first.

transition constans

Please, add TransitionType constans.

Tooltips

Need some type of customizable tooltip system.

[bug] disabled button skin changes to active

Toolkit.openFullscreen callback:
button.disabled = true;

stage mouseclick event:
button.selected = false;

This combination gives active skin to a button.
But it works normal when everything is inside openFullScreen callback.