titanium-sdk icon indicating copy to clipboard operation
titanium-sdk copied to clipboard

feat(android): snackbar

Open m1ga opened this issue 2 years ago • 5 comments

Adds the Android Snackbar

Screenshot_20220408_124929

var win = Ti.UI.createWindow({});
var btn = Ti.UI.createButton({
	title: "show message"
});
btn.addEventListener("click", function() {
	snack.show();
});

var snack = Ti.UI.Android.createSnackbar({
	message: "Hello Snackbar!",
	length: Ti.UI.Android.Snackbar.LENGTH_INDEFINITE,
	action: "click me"
});
snack.addEventListener("click", function(e) {
	console.log(e.action);
});

win.add([btn, snack]);
win.open();

TODO

  • add style properties
  • code cleanup

m1ga avatar Apr 08 '22 11:04 m1ga

We could try out a new concept here: Providing a polyfill / parity API for iOS using the Javascript bindings! Some existing examples can be found here. We would just need to follow the material design guidelines for iOS in terms of size, colors and actions. Happy to do that if interested. Then we could take it as a core API without issues. Otherwise, as discussed, we should publish it as a module.

hansemannn avatar Apr 09 '22 14:04 hansemannn

We could try out a new concept here: Providing a polyfill / parity API for iOS using the Javascript bindings! Some existing examples can be found here. We would just need to follow the material design guidelines for iOS in terms of size, colors and actions. Happy to do that if interested. Then we could take it as a core API without issues. Otherwise, as discussed, we should publish it as a module.

Interesting! I like that idea. Will look into that

m1ga avatar Apr 09 '22 15:04 m1ga

@hansemannn, @m1ga, regarding doing a "polyfill", a year ago I was working on the ability to allows Android/iOS to set up a JS class to derive from a native Ti.UI.View so that you can do exactly this with views. It would make Titanium's APIs available via ES6 classes and allow you to do a new on Titanium proxy classes in JavaScript. I started on the iOS, which can be seen in my 2nd commit in the following branch... although it may have conflicts now. Particularly in the KrollObject.m which has the most changes. https://github.com/jquick-axway/titanium_mobile/commits/TIMOB-28332

I definitely got it working on iOS. However, I did run into a bug with Apple's JavaScriptCore where deriving from a native class from the JS side caused the JS prototype not to be applied. V8 doesn't have this problem.

class MyView extends Ti.UI.View {
	constructor(properties) {
		const defaultProperties = {
			borderRadius: "20dp",
			borderColor: "red",
			borderWidth: "5dp",
			backgroundColor: "#dddddd",
		};
		properties = Object.assign(defaultProperties, properties);
		super(properties);

		// Work-around Apple JavaScriptCore bug.
		Object.setPrototypeOf(this, MyView.prototype);
	}
}

const window = new Ti.UI.Window({ backgroundColor: "white" });
const myView = new MyView({ width: "50%", height: "50%" });
window.add(myView);
window.open();

On Android, Titanium's proxies are already available via JS classes and you can already do a new, but there is 1 issue. In our common JS extensions, notice we override the Ti.UI.createListVew(), Ti.UI.createWindow(), and other similar methods. This old legacy code and doing a new Ti.UI.ListView() or new Ti.UI.Window() means bypassing that code. I haven't addressed that in my branch (this was about the time Axway said we were going to end-of-life the product), but the plan was to remove that JS code and move the implementation to the Java side.

Not sure if you're interested, but you're welcome to grabbing my iOS code changes if you're interested.

jquick-axway avatar Apr 12 '22 11:04 jquick-axway

Thanks Josh! Really helpful! Looking at the current setup that we have already, it seems like it could also be done in the ti.kernel APIs, which would be most easy for now I think?

hansemannn avatar Apr 12 '22 14:04 hansemannn

If you want to extend from a Titanium proxy type, then my KrollObject.m changes are needed to expose it as a JS class and provide a prototype on iOS. As you know, our Ti.UI.View base class has a lot of properties/methods and you probably don't want to replicate it all in JS in the common/kernel. That's what my changes provide. But it's up to you guys. If you're nervous about making core changes like this, then I can understand.

jquick-axway avatar Apr 12 '22 14:04 jquick-axway