A simple example of passing data in StackNavigator

ccpplinux

Hi @joshtynjala
Can you please clarify my three points as written in previous post? Here are the points:

What is the role of NewAction function?
What is the meaning of InvalidationFlag.DATA? From where it is coming?
Why it is being set as Invalid?

I am waiting for your reply.

joshtynjala

NewAction is one of the possible values on the StackAction enum. It's purpose is to select one of the other actions, such as Push or Pop, using data stored on the event that the view dispatched. In this case, it's being used to create a Push action that includes passing the value of event.registration to the new view.
InvalidationFlag is an enum used by Feathers UI components to indicate that something needs to be updated before the component is rendered again. There are a number of possible values, like DATA, STYLES, SELECTION, etc. to help ensure that the component updates only what it needs to update, which can help with performance.
When a property of a UI component changes, the UI component should call setInvalid(). When a UI component is invalid, its update() method will be called automatically before the next frame is rendered by OpenFL. For more detail, check out Feathers UI: UI Component Lifecycle in the documentation.

joshtynjala

ccpplinux when the variable registeredRegistration is defined then why we writing it as registeredRegistration(default, set)? What is the meaning of default and set in this case?

The default means that there is no get_registeredRegistration getter function (otherwise, it would be get instead). The set means that there is a set_registeredRegistration function.

See Haxe Documentation: Property for more details.

ccpplinux

Thanks for the clarifications. In between, I have added some code to my program. Now when the flow of control is going on the Home Page then the text of label is being updated from "Home Page" to "Welcome Hello". But I also want to display the name, email and password submitted through the registration form on the home page. And I am facing problem in this. When I using the following code:

this.label.text = "Welcome Hello "+this.registeredRegistration.name;

then I am getting following error:

Uncaught TypeError: Cannot read properties of null (reading 'name')

This implies that the value of this.registeredRegistration is null. But why it is null?

Here is my code:

import objects.Registration;
import events.RegistrationEvent;
import feathers.controls.Application;
import feathers.controls.Label;
import feathers.controls.navigators.StackNavigator;
import feathers.controls.LayoutGroup;
import feathers.controls.navigators.StackItem;
import openfl.events.Event;
import feathers.events.TriggerEvent;
import feathers.controls.Button;
import feathers.layout.VerticalLayout;
import feathers.controls.Form;
import feathers.controls.FormItem;
import feathers.controls.TextInput;
import feathers.events.FormEvent;
import feathers.skins.RectangleSkin;
import feathers.core.InvalidationFlag;

using StringTools;

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

		var navigator = new StackNavigator();
		/*
		var registrationPage = StackItem.withClass(RegistrationPage.ID, RegistrationPage, [
			Event.CHANGE => Push(HomePage.ID)]);
		*/

		var registrationPage = StackItem.withClass(RegistrationPage.ID, RegistrationPage, [
			RegistrationEvent.REGISTER => NewAction((event:RegistrationEvent) -> {
				var registration = event.registration;
				return Push(HomePage.ID, (target: HomePage) -> {
					target.registeredRegistration = registration;
				});
			})
		]);

		navigator.addItem(registrationPage);
		
		var homePage = StackItem.withClass(HomePage.ID, HomePage, [
			//Event.COMPLETE => Pop()
			//Event.COMPLETE => Push(ViewA.ID)
			Event.CHANGE => Push(RegistrationPage.ID)]);
		navigator.addItem(homePage);
		
		navigator.rootItemID = RegistrationPage.ID;
		addChild(navigator);
	}
}

class RegistrationPage extends LayoutGroup 
{
    public static final ID = "registration-page";
	public var nameInput:TextInput;
	public var emailInput:TextInput;
	public var passwordInput:TextInput;

	public var registeredRegistration(default, set):Registration = null;

	private function set_registeredRegistration(registration:Registration):Registration {
		if (this.registeredRegistration == registration) {
			return this.registeredRegistration;
		}
		this.registeredRegistration = registration;
		this.setInvalid(InvalidationFlag.DATA);
		return this.registeredRegistration;
	}

    public function new() 
	{
        super();
        layout = new VerticalLayout();

		var form = new Form();

		var nameItem = new FormItem();
		nameItem.text = "Name:";
		nameInput = new TextInput();
		nameInput.prompt = "Your name:";
		nameInput.autoSizeWidth = true;
		nameItem.content = nameInput;
		nameItem.required = true;
		form.addChild(nameItem);

		nameItem.textPosition = LEFT;
		nameItem.paddingTop = 5.0;
		nameItem.paddingRight = 8.0;
		nameItem.paddingBottom = 5.0;
		nameItem.paddingLeft = 8.0;
		nameItem.gap = 10.0;
		
		var emailItem = new FormItem();
		emailItem.text = "Email:";
		emailInput = new TextInput();
		emailInput.prompt = "Your email:";
		emailInput.autoSizeWidth = true;
		emailItem.content = emailInput;
		emailItem.required = true;
		form.addChild(emailItem);

		emailItem.textPosition = LEFT;
		emailItem.paddingTop = 5.0;
		emailItem.paddingRight = 8.0;
		emailItem.paddingBottom = 5.0;
		emailItem.paddingLeft = 8.0;
		emailItem.gap = 10.0;

		var passwordItem = new FormItem();
		passwordItem.text = "Password:";
		passwordInput = new TextInput();
		passwordInput.prompt = "Your password:";
		passwordInput.autoSizeWidth = true;
		passwordInput.displayAsPassword = true;
		passwordItem.content = passwordInput;
		passwordItem.required = true;
		form.addChild(passwordItem);

		passwordItem.textPosition = LEFT;
		passwordItem.paddingTop = 5.0;
		passwordItem.paddingRight = 8.0;
		passwordItem.paddingBottom = 5.0;
		passwordItem.paddingLeft = 8.0;
		passwordItem.gap = 10.0;

		var sendButton = new Button();
		sendButton.text = "Register";
		form.addChild(sendButton);
		form.submitButton = sendButton;

		var skin = new RectangleSkin();
		skin.border = SolidColor(1.0, 0x999999);
		skin.fill = SolidColor(0xcccccc);
		skin.width = 16.0;
		skin.height = 16.0;
		form.backgroundSkin = skin;

		form.addEventListener(FormEvent.SUBMIT, form_submitHandler);

		addChild(form);
    }

    private function form_submitHandler(event:FormEvent):Void 
	{
        if(nameInput.text.trim()=="" || emailInput.text.trim()=="" || passwordInput.text.trim()=="")
		{
			if(nameInput.text.trim()=="") nameInput.errorString="Empty";
			if(emailInput.text.trim()=="") emailInput.errorString="Empty";
			if(passwordInput.text.trim()=="") passwordInput.errorString="Empty";
		}
		else dispatchEvent(new RegistrationEvent(RegistrationEvent.REGISTER, this.registeredRegistration));
    }
}

class HomePage extends LayoutGroup 
{
    public static final ID = "home-page";

	public var registeredRegistration(default, set):Registration = null;

	private function set_registeredRegistration(registration:Registration):Registration {
		if (this.registeredRegistration == registration) {
			return this.registeredRegistration;
		}
		this.registeredRegistration = registration;
		this.setInvalid(InvalidationFlag.DATA);
		return this.registeredRegistration;
	}

	private var label:Label;

    public function new() 
	{
        super();
    }

	override private function initialize():Void 
	{
		super.initialize();

        layout = new VerticalLayout();

        this.label = new Label();
        this.label.text = "Home Page";
        this.addChild(this.label);

        var button = new Button();
        button.text = "Go To Registration Page";
        button.addEventListener(TriggerEvent.TRIGGER, button_triggerHandler);
        this.addChild(button);

	}

	override private function update():Void {
		var dataInvalid = this.isInvalid(InvalidationFlag.DATA);
		trace(dataInvalid);
		if (dataInvalid) {
			this.label.text = "Welcome Hello "+this.registeredRegistration.name;
			//this.label.text = "Welcome Hello ";
		}

		super.update();
	}


    private function button_triggerHandler(event:TriggerEvent):Void 
	{
        //dispatchEvent(new Event(Event.COMPLETE));
		dispatchEvent(new Event(Event.CHANGE));
    }
}

joshtynjala

I can't seem to find any part of your code that calls new Registration() and populates the values. Perhaps you meant to do that in form_submitHandler?

ccpplinux

Thanks a LOT for giving me a hint about creating new object of Registration class in the form_submitHandler. Now the code of form_submitHandler is as follows:

private function form_submitHandler(event:FormEvent):Void 
{
    if(nameInput.text.trim()=="" || emailInput.text.trim()=="" || passwordInput.text.trim()=="")
	{
		if(nameInput.text.trim()=="") nameInput.errorString="Empty";
		if(emailInput.text.trim()=="") emailInput.errorString="Empty";
		if(passwordInput.text.trim()=="") passwordInput.errorString="Empty";
	}
	else
	{
		this.registeredRegistration = new Registration(nameInput.text, emailInput.text, passwordInput.text);
		
		dispatchEvent(new RegistrationEvent(RegistrationEvent.REGISTER, this.registeredRegistration));
	}
}

And I glad to let you know that the value entered through form are being transferred to home page. This is really a great achievement for me. I am very much thankful to you for the helping me so far.

One thing more. Following code is written in both classes - RegistrationPage and HomePage:

public var registeredRegistration(default, set):Registration = null;

private function set_registeredRegistration(registration:Registration):Registration {
	if (this.registeredRegistration == registration) {
		return this.registeredRegistration;
	}
	this.registeredRegistration = registration;
	this.setInvalid(InvalidationFlag.DATA);
	return this.registeredRegistration;
}

So when we need to establish communication between two classes then we need to write same code in both classes? Is there any way that we write this code only one time both classes make use of them?

joshtynjala

ccpplinux One thing more. Following code is written in both classes - RegistrationPage and HomePage:
So when we need to establish communication between two classes then we need to write same code in both classes? Is there any way that we write this code only one time both classes make use of them?

Looking over your code, RegistrationPage probably does not need a public registeredRegistration property because you never set this value from outside of RegistrationPage. I think that you could remove it and then change your RegistrationEvent dispatch to look like this instead:

var registeredRegistration = new Registration(nameInput.text, emailInput.text, passwordInput.text);
		
dispatchEvent(new RegistrationEvent(RegistrationEvent.REGISTER, registeredRegistration));

ccpplinux

Furthermore when I tried to convert it to Android application then after running the command openfl build android I received the following error message:

Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.6.3/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 21s
53 actionable tasks: 53 executed

Although the build was successful but with some warning.

When I installed the apk file on mobile phone then after starting it, I am getting following error message:

SDL Error

An error occurred
while trying to start the
application. Please try
again and/or reinstall.

Error: dlopen failed: cannot
locate symbol "__atomic
_compare_exchange_4"
referenced by "/data/app/
~~00StYuOpjArYIYKmNvZ
YZg==/com.example.Regis
trationForm-jouBTAKoHkV
ytMB17b5dUQ==/lib/arm/
libApplicationMain.so"...

Can you please help me in fixing these errors?

joshtynjala

ccpplinux Although the build was successful but with some warning.

This warning is safe to ignore.

ccpplinux When I installed the apk file on mobile phone then after starting it, I am getting following error message:

Which versions of the Android NDK do you have installed? Which model of Android phone are you testing with?

joshtynjala

ccpplinux When I installed the apk file on mobile phone then after starting it, I am getting following error message:

I've never encountered this error message before. I can't seem to find any info on Google either.

ccpplinux BUILD SUCCESSFUL in 21s

This seems very fast. Perhaps you should try a clean build to ensure that nothing is cached in a bad state.

openfl build android -clean

ccpplinux My Android NDK version is 21.4.7075529.

This is the same NDK that I typically use. On rare occassions, I have found that I need to use 15.2.4203891 instead.

ccpplinux

joshtynjala Which versions of the Android NDK do you have installed? Which model of Android phone are you testing with?

My Android NDK version is 21.4.7075529. I am using a Samsung Galaxy M13 5G phone. It is having Android version 13.

ccpplinux

joshtynjala OK. I have removed the extra code from RegistrationPage class and changed the code of RegistrationEvent dispatch as per your suggestions. And it is working fine. Thanks for suggestion.

ccpplinux

Actually when I am running the command openfl test html5 then I also getting lot of warning message like below:

/usr/share/haxe/lib/openfl/9,2,0/src/openfl/display/_internal/IBitmapDrawableType.hx:3: characters 1-7 : Warning : (WDeprecated) @:enum abstract is deprecated in favor of enum abstract
/usr/share/haxe/lib/openfl/9,2,0/src/openfl/display3D/Context3DMipFilter.hx:12: characters 1-7 : Warning : (WDeprecated) @:enum abstract is deprecated in favor of enum abstract
/usr/share/haxe/lib/openfl/9,2,0/src/openfl/display3D/Context3DTextureFilter.hx:12: characters 1-7 : Warning : (WDeprecated) @:enum abstract is deprecated in favor of enum abstract

To hide these warning messages I have written the following code in project.xml:

Then no such warning are appearing after running the command openfl test html5.

Is there effect of this on Android APK file generation?

joshtynjala

The @:enum abstract warnings are new in Haxe 4.3. They are safe to ignore. However, you can get rid of them by updating to Lime 8.0.2 and OpenFL 9.2.2, which we just recently released.

ccpplinux

I have updated feathersui. But after that I am not able to create a new project. When I am creating new project then I am getting following error message:

/usr/share/haxe/lib/hxargs/3,0,2/hxargs/Args.hx:92: characters 14-16 : Reification $v is not allowed outside of macro expression

What could be the reason? How to fix it? Please help me.

joshtynjala

ccpplinux I have updated feathersui. But after that I am not able to create a new project. When I am creating new project then I am getting following error message:

/usr/share/haxe/lib/hxargs/3,0,2/hxargs/Args.hx:92: characters 14-16 : Reification $v is not allowed outside of macro expression

What could be the reason? How to fix it? Please help me.

hxargs 4.0 was just released. After updating hxargs, you should be able to use haxelib run feathersui new-project with Haxe 4.3.

joshtynjala

Unfortunately, that's a bug in the hxargs library with Haxe 4.3. The fix has been merged, but a new release hasn't happened yet. https://github.com/Simn/hxargs/pull/7

For now, you may want to stick with Haxe 4.2.5.

ccpplinux

Thanks for reply. So I need to downgrade the version of haxe? How to do that in Arch Linux? I have installed haxe from package manager of Arch Linux which has installed latest version. What about version of other packages like haxelib, openfl, lime etc?

joshtynjala

I don't typically use Linux, and I've never used Arch at all, so I cannot suggest how to install a specific version of Haxe on Arch. I'm certain that there must be a way to do that, though.

Installation of Haxe packages like feathersui, openfl, and lime are managed using haxelib (and the haxelib command can even be upgraded with haxelib these days!). feathersui supports all versions of Haxe starting with Haxe 4.0. lime and openfl still support as far back as Haxe 3.4. I frequently install different versions of Haxe for testing, and after running haxelib setup, it always automatically detects all existing Haxelib libraries, so I don't need to reinstall anything when switching versions.

ccpplinux

I managed to install Haxe 4.2.5 in Arch Linux and now I am able to create new project. Thanks for giving me hint for that. But still when I am generating android APK file and install it on mobile phone then after opening that application I am getting SDL Error. Please give me some hint about how to fix this error.

ccpplinux

I asked ChatGPT about the SDL error and received the following response:

The error message you're encountering indicates an issue with the dynamic linking process in your Android app. Specifically, it mentions a failure in locating the symbol "__atomic_compare_exchange_4" in the "libApplicationMain.so" library.

This error is commonly associated with compatibility issues between the app and the target device's architecture or Android version. To address this issue, you can try the following steps:

Ensure that your app's native libraries are compatible with the target device's architecture. Make sure you have built the appropriate native libraries (ARM, ARM64, x86, etc.) for your app and that they are included correctly in the APK.

Verify that your app's minimum SDK version is compatible with the target device's Android version. Check the AndroidManifest.xml file in your project and ensure that the minimum SDK version specified is supported by the device you're testing on.

Try cleaning and rebuilding your project. In Android Studio, you can go to "Build" > "Clean Project" followed by "Build" > "Rebuild Project" to regenerate the necessary build artifacts.

If you're using any external libraries or dependencies, ensure that they are up to date and compatible with the Android version and architecture you're targeting. Updating or replacing incompatible libraries might help resolve the issue.

Any clue that you can get from this response?