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.