menus and file dialogs

acarioni

I need to write a simple app comprising a menu bar (with the usual File and Edit entries) and dialogs to open/save files. However I don't find any mentions to them in the docs.

Are these components supported by Feathers?

joshtynjala

Feathers UI doesn't have a Menu component yet. I'd definitely like to add one in the future, but it hasn't been a priority yet. You could possibly hack something together with ButtonBar and ListView.

OpenFL hasn't yet implemented the NativeMenu APIs from Adobe AIR either.

OpenFL 9.2.0 introduced the openfl.filesystem.File class. This includes several APIs for opening native file dialogs:

These APIs are available only on "sys" targets like C++, HashLink, and Neko, which allow for deeper operating system integration. Obviously, they're not going to work on the html5 target.

edwinliang

Feathers UI is very powerful.
I really have fun with this ui library.
joshtynjala
Thank you for your efforts. 😆

edwinliang

I use ButtonBar component to implement Menu and DropdownMenu component.

acarioni

Thanks edwinliang. Your approach is interesting.

I have two questions.

How do you align the Menu and the DropdownMenu?

In your screenshot I see the entries “Open project” and “Save Project”. What are you using for the File Dialog in Chrome/html5?

edwinliang

use localToGlobal to transform the coordinate.

	private function onItemTrigger(e:ButtonBarEvent):Void {
		var btn = __bar.indexToButton(e.state.index);
		...
		UIWPopupManager.showMenu(new UIWMenu(options), btn.localToGlobal(new Point(0, 30)));
	}

Open project - you need to control hidden file input component
https://stackoverflow.com/questions/6463439/how-to-open-a-file-browse-dialog-using-javascript
Save project - you can only download files to download folder
https://stackoverflow.com/questions/3916191/download-data-url-file

edwinliang

my solution

package;

import js.Browser;
import openfl.events.MouseEvent;
import feathers.controls.Button;
import feathers.controls.Application;
import feathers.layout.HorizontalLayout;

class Main extends Application {
	public function new() {
		super();

		layout = new HorizontalLayout();

		var btn = new Button('open');
		btn.addEventListener(MouseEvent.CLICK, e -> {
			var input = Browser.document.createInputElement();
			input.type = "file";
			input.onchange = e -> {
				trace(input.files[0].name);
			}
			var evt = Browser.document.createEvent("MouseEvents");
			evt.initEvent("click", true, false);
			input.dispatchEvent(evt);
		});
		addChild(btn);

		var btn2 = new Button('save');
		btn2.addEventListener(MouseEvent.CLICK, e -> {
			var link = Browser.document.createAnchorElement();
			link.download = "download.txt";
			link.href = "data:text/html," + 'HelloWorld!';
			Browser.document.body.appendChild(link);
			link.click();
			Browser.document.body.removeChild(link);
		});
		addChild(btn2);
	}
}

@acarioni

acarioni

Great. Thank you for your help, edwinliang.

bbrinkmann

Hi,

I'm new to Feathers and this forum. I'm in the process of converting an AS3/Spark/Flex/Air app (playmaker.com) to Haxe/OpenFL/FeathersUI. I started with as3hx, but I'm still working my way through a ton of issues and Spark/Flex mapping to FeathersUI. Related to this thread, I'm also looking for menus (popup and Native) and wondering how things are looking. I see @edwinliang's solution above, but it needs to not be dependent on a browser, and I'm ultimately hoping for typical full functionality in both classes (e.g., checkmarks in popup menus, accelerator keys in native menus). Is this on the near horizon or should I look into building custom controls? I'd rather focus on the larger conversion task but understand if it's not a priority. FWIW, I would be willing to help if needed.

joshtynjala

I've actually been working on new Menu and MenuBar components recently. They're not quite done yet, but they should be somewhat useful in their current state already, so I just committed them to the repo:

https://github.com/feathersui/feathersui-openfl/blob/master/src/feathers/controls/MenuBar.hx
https://github.com/feathersui/feathersui-openfl/blob/master/src/feathers/controls/Menu.hx

Displaying menus, including sub-menus, and both mouse and keyboard (arrow keys) input should be working pretty well already. I haven't yet had time to fully implement keyboard accelerator shortcuts and checked states, though.

bbrinkmann

joshtynjala Thanks!! That's super helpful and I really appreciate it. I had a chance to play with it and I believe it will address my needs. You probably already know, but while checking these out, I hit a couple of issues preventing compilation of the sample code.

In Menu.hx:
Line 76 should be: menu.dataProvider = new ArrayHierarchicalCollection([
Line 89 should be: trace("Menu item triggered: " + event.state.index + " " + event.state.text);

In MenuBar.hx:
Line 77 should be: ], (item: Dynamic) -> {return item.children;});

And, as expected, the Tutorial pages 404.

One last question: if I wanted functionality similar to Air's FlexNativeMenu, do you think I'd need to try to address that in OpenFL or SDL?

Thanks again for all of this.

joshtynjala

Thanks for pointing out the issues in the code samples! And yes, it's expected that documentation does not yet exist.

Native menu support would need to go into Lime, and then wrappers written for OpenFL to expose them using the same API as AIR. I've never used FlexNativeMenu, though. I'm assuming that's just a way to use AIR's NativeMenu in a Flex-y way.

I currently have a Lime branch where I have menus at least partially implemented on Windows and macOS, but I haven't yet found the time to implement them on Linux.

https://github.com/joshtynjala/lime/tree/feature/menu

My colleague Chris has a "draft" implementation of NativeMenu and NativeMenuItem in OpenFL that I think currently works for cpp targets only (other native targets, like HashLink and Neko would need a full Lime implementation), and I think it might be Windows only too:

https://github.com/openfl/openfl/blob/develop/lib/draft-api/src/openfl/display/NativeMenu.hx
https://github.com/openfl/openfl/blob/develop/lib/draft-api/src/openfl/display/NativeMenuItem.hx

No estimate on when either of us might get back to those, though.