feathersui / feathersui-openfl Goto Github PK

GroupListView always calls itemRendererRecycler.update even for header items. Should test and call headerRendererRecycler.update instead.

Relevant code:

	private function refreshItemRendererProperties(itemRenderer:DisplayObject, type:GroupListViewItemType, item:Dynamic, location:Array<Int>,
			layoutIndex:Int):Void {
		this._currentItemState.type = type;
		this._currentItemState.data = item;
		this._currentItemState.location = location;
		this._currentItemState.layoutIndex = layoutIndex;
		this._currentItemState.selected = location.length > 1 && item == this._selectedItem;
		this._currentItemState.text = type == HEADER ? itemToHeaderText(item) : itemToText(item);
		var oldIgnoreSelectionChange = this._ignoreSelectionChange;
		this._ignoreSelectionChange = true;
		if (this._itemRendererRecycler.update != null) {
			this._itemRendererRecycler.update(itemRenderer, this._currentItemState);
		}

For project creation and stuff. Similar to Angular CLI's ng new.

• The default theme is currently located in the components-explorer example. It should be activated for all components automatically.
• The default theme is currently hard-coded within each UI component. It should use macros to link only the parts that are needed based on the components used in the project.
• It should be possible to disable the default theme. --haxedef=disable_default_theme

The background for the following button will be green - HOVER(false) - on hover even though the button is selected, ie. when the state should be HOVER(true).

        var button = new ToggleButton();
        var skin = new RectangleSkin();
        skin.fill = FillStyle.SolidColor(0xcccccc);
        skin.setFillForState(ToggleButtonState.UP(true), SolidColor(0xcc0000)); //RED
        skin.setFillForState(ToggleButtonState.HOVER(true), SolidColor(0xcc0000)); //RED

        skin.setFillForState(ToggleButtonState.UP(false), SolidColor(0x00cc00)); //GREEN
        skin.setFillForState(ToggleButtonState.HOVER(false), SolidColor(0x00cc00)); //GREEN

        button.text = 'Toggle Button';
        button.selected = true;
        button.backgroundSkin = skin;

        addChild(button);

I don't understand what's happening with the code in BasicToggleButton->changeState.

			case HOVER(_):
				if (this._selected != selected) {
					toggleState = HOVER(this._selected);
				}

Seems to me the condition will always be false so the toggleState won't get updated to HOVER(true). Maybe I'm missing something ...

Hi
in components-explorer project when build android appears. (all haxelib plugins are up to date).
Thanks

arm-linux-androideabi-g++ -Iinclude --sysroot=C:\_softwares\android-ndk-r15c-windows-x86_64\android-ndk-r15c/platforms/android-16/arch-arm -IC:\_softwares\android-ndk-r15c-windows-x86_64\android-ndk-r15c/sources/cxx-stl/gnu-libstdc++/4.9/include -IC:\_softwares\android-ndk-r15c-windows-x86_64\android-ndk-r15c/sources/cxx-stl/gnu-libstdc++/4.9/libs/armeabi/include -DHXCPP_ARMV7 -DHXCPP_VISIT_ALLOCS(haxe) -DHX_SMART_STRINGS(haxe) -DHXCPP_API_LEVEL=400(haxe) -IC:/HaxeToolkit/haxe/lib/hxcpp/4,0,64/include -Iinclude -fpic -fvisibility=hidden -ffunction-sections -funwind-tables -fstack-protector -fno-short-enums -Wno-overflow -D_LINUX_STDDEF_H -Wno-psabi -DHXCPP_CPP11 -DHXCPP_ARMV7 -march=armv7-a -mfpu=vfpv3-d16 -mfloat-abi=softfp -fomit-frame-pointer -fexceptions -fno-strict-aliasing -finline-limit=10000 -DANDROID=ANDROID -DHX_ANDROID -DHXCPP_ANDROID_PLATFORM=16 -Wa,--noexecstack -O2 -DNDEBUG -c ... tags=[haxe,static]

• src/boot.cpp
• src/feathers/controls/ListView.cpp
• src/openfl/display/GraphicsSolidFill.cpp [haxe,release]
  Error: ./src/feathers/controls/ListView.cpp: In member function 'virtual hx::Val feathers::controls::ListView_obj::__Field(const String&, hx::PropertyAccess)':
  ./src/feathers/controls/ListView.cpp:928:91: error: operands to ?: have different types 'int' and 'Dynamic'
  if (HX_FIELD_EQ(inName,"selectedItem") ) { return hx::Val( inCallProp == hx::paccAlways ? get_selectedItem() : selectedItem ); }

Haxe 4.0.1
OpenFL 8.9.5
Lime 7.6.3

Can be reproduced in components-explorer sample

Hey! Thanks for open sourcing this project and I gotta say the code looks very nice and clean.

I'm just creating this issue to mention a couple things that you might not know about yet, for example here:

https://github.com/BowlerHatLLC/feathersui-openfl/blob/9f071e1e5e8b3c13f0f9e92d36132bdf32003ca3/src/feathers/layout/VerticalListFixedRowLayout.hx#L79-L88

First, you can directly do for (item in items), that will generate pretty much the same code.

Second, the Std.is(...) followed by a safe-cast will actually do the type-check twice, so probably using Std.downcast is better in this case.

I guess also it should have setInvalid(InvalidationFlag.LAYOUT);

On other platforms, should try to emulate the behavior for testing purposes.

if (this.liveDragging && !this._dragging) {
FeathersEvent.dispatch(this, Event.CHANGE);
}

I guess _dragging should be true here.

A hand-written style property looks something like this:

@style
public var layout(default, set):ILayout = null;

private function set_layout(value:ILayout):ILayout {
	if (!this.setStyle("layout")) {
		return this.layout;
	}
	if (this.layout == value) {
		return this.layout;
	}
	this.layout = value;
	this.setInvalid(InvalidationFlag.STYLES);
	return this.layout;
}

A macro should be available to generate that setter code automatically.

When deploying to the web, must include specific tag, instead of master branch, just in case future refactoring breaks something (and to avoid confusion if bugs are fixed or new features are added that don't exist in the current stable release).

Right now currentState only updates when PointerToState catches mouse events, but when you change selected value there is no mouse events dispatched. I am not sure how to fix it correctly, but I did it by adding this line of code in selected setter in BasicToggleButton:
changeState(_pointerToState.currentState);

Maybe option for always visible too

The applyStyles method of the FeathersControl.styleProvider is called twice.

class HomeView extends LayoutGroup {
    override private function initialize() {
        super.initialize();

        var button = new Button();
        button.styleProvider = new FunctionStyleProvider((target:Button) -> {
            trace('I WILL GET CALLED TWICE');
            target.backgroundSkin = new RectangleSkin();
        });

        addChild(button);
    }
}

The issues seems to be in FeathersControl.applyStyles:

// if there was a different style provider previously, clear old styles
this.clearStyles();

Despite the comment it clears styles regardless of whether the styleProvider has changed.

The function used to apply the styles could be quite resource intensive so it would be a good idea to make sure it's not called unnecessarily.

Scrolls at a different speed than the container

Before updating from github, it was ok :)

Example from OpenFL:

public static inline var CLICK:EventType<MouseEvent> = "click";

For picking a date.

Positioned over content only, excluding things like headers, footers, and scroll bars.

I can't find any documentation or example to how to create custom item renderer of ListView.
@joshtynjala can you explain me how to create and use a custom itemrenderer? I want to create an item renderer to show image, with passed url like this:

this.dataProvider.add({url:"....."});

The following code doesn't result in the background skin being updated as expected:

        var button = new ToggleButton();
        var skin = new RectangleSkin();
        skin.fill = FillStyle.SolidColor(0xcccccc);
        skin.setFillForState(ToggleButtonState.UP(true), SolidColor(0xcc0000)); //RED
        skin.setFillForState(ToggleButtonState.UP(false), SolidColor(0x00cc00)); //GREEN

        button.text = 'Toggle Button';
        button.backgroundSkin = skin;

        Timer.delay(() -> {
            trace('selected');
            button.selected = true;
        }, 5000);

        button.x = 50;
        button.y = 50;

        addChild(button);

Seems like the BaseToggleButton's changeState method needs to be called directly. It's currently only called via the PointerToState class.

public function setSize(width:Float, height:Float):Void {
this.width = x;//x should be width
this.height = y;//y should be height
}

The pushItem(item) is working well, but when try to popItem() or popToRootItem(), is noting happen.

      this._navigator.pushTransition=SlideTransitions.left();
      this._navigator.popTransition=SlideTransitions.right();

//.....
private function servicePushScreen(params:Params):Void{
      this._navigator.pushItem(params[BaseController.DATA].id);
  }
  
  private function servicePopScreen(params:Params):Void{
      log("Pop Screen");
      this._navigator.popItem();
  }
  private function servicePopToRootScreen(params:Params):Void{
      log("Pop To Root Screen");
      this._navigator.popToRootItem();
  }

the log trace is show Pop Screen and PopTo Root Screen, but the screen is stay on the pushed screen

Just adding a link for Starling Builder:

https://starlingbuilder.github.io/

I'm trying to port a theme over from the starling version and this is causing an issue. I can't see anywhere in the code that requires IStyleProvider to implement the IEventDispatcher interface.

Am I missing something?

Hi.
I guess this is OpenFL related.
May be you have an idea? :)

OpenFL 9.0.2
Lime: 7.8.0
Haxe: 4.1.4

UPD: They appear only if I add font files that support this characters to project assets. But how to use device fonts instead?

Sorry, may be its incomplete yet

When I register on event using KeyboardEvent.KEY_DOWN my event handler has not been called when I press on keyboard navigation arrows.

More information here -> Moonshine-IDE/Moonshine-IDE#771 (comment)

If I used the VerticalListLayout I can set the paddingTop and things work as expected - ie. the items fill up the screen as I scroll up past the paddingTop. But with the fixed layout it doesn't work.

Issue seems to be in getVisibleIndices:

		var startIndex = 0;
		var endIndex = 0;
		if (itemHeight > 0.0) {
			startIndex = Math.floor(this._scrollY / itemHeight);
			if (startIndex < 0) {
				startIndex = 0;
			}

startIndex should factor in the _paddingTop no?

Similar to TabNavigator, except has a PageIndicator instead of a TabBar

Useful for wizards, onboarding flows, and other instructional stuff.

The click handler is attached to header and standard renderers but it will cause an exception when trying to set the selected location for a header item.

	private function groupListView_itemRenderer_clickHandler(event:MouseEvent):Void {
		if (!this._enabled) {
			return;
		}
		if (!this._selectable || !this.pointerSelectionEnabled) {
			return;
		}
		var itemRenderer = cast(event.currentTarget, DisplayObject);
		if (Std.is(itemRenderer, IToggle)) {
			// handled by Event.CHANGE listener instead
			return;
		}
		var data = this.itemRendererToData.get(itemRenderer);
		// use the setter
		this.selectedLocation = this._dataProvider.locationOf(data);
	}

	private function set_selectedLocation(value:Array<Int>):Array<Int> {
		if (!this._selectable || this._dataProvider == null) {
			value = null;
		}
		if (this._selectedLocation == value || this.compareLocations(this._selectedLocation, value) == 0) {
			return this._selectedLocation;
		}
		if (value != null && value.length != 2) {
			throw new ArgumentError("GroupListView selectedLocation must have a length of 2");
		}

The header item will not have a length of 2.

Currently, the AS3/Starling version supports positioning relative to the outside edges of an anchor display object. It should also be possible to position relative to the inside edges too (which would behave similarly to how an item is positioned relative to the inside edges of the parent container, except it would be relative to the anchor display object instead).

Fix Attempt

I tried debugging the FeathersEvent.hx file to fix the error, but can't see where the code is wrong or where it has an extra ')'. I'm new to Haxe. Also went to Haxe documentation and tried adding a return type of FeathersEvent to the ObjectPool instance callback param.

OpenFL works fine on VSCode without any FeathersUI code and all the dependencies are ok and up to date (lime, actuate, openfl, haxe, haxelib, feathersui, etc.).

Note

I am aware this is an alpha state because another developer mentioned it.

In the gif below, the top progress bar is a regular range of values, and the bottom is indeterminate.

tested with Feathersui 1.0.0-beta.2, OpenFL 9.0.2 on HTML5 target, any renderer

feathersui-textinput-prompt.zip

Sorry, didn't find in API docs

While compile to html5 target works great, but on mac target the label of the button componenet is gone.

https://www.dropbox.com/s/w25qfu89ee8nr5y/Screenshot%202020-05-24%2010.19.27.png?dl=0

import feathers.events.TriggerEvent;
import feathers.layout.AnchorLayoutData;
import feathers.layout.AnchorLayout;
import feathers.controls.Button;
import feathers.controls.Application;

class Main extends Application {
	private var button:Button;

	public function new() {
		super();

		trace("Hello, world!");

		this.layout = new AnchorLayout();

		this.button = new Button();
		this.button.addEventListener(TriggerEvent.TRIGGER, (event) -> {
                       trace("Hello World");
		});

		this.button.layoutData = AnchorLayoutData.center();
		this.addChild(this.button);
		this.button.text = "Hello";
	}
}