While parts of that answer are technically correct, it's mixed with details that are either wrong or misleading.
-- Josh Tynjala Bowler Hat LLC https://bowlerhat.dev/ On Tue, Mar 25, 2025 at 9:44 AM Jim McNamara <[email protected]> wrote: > > Hi - > > The Ai provided this... > > Creating a minimal Apache Royale app with multiple screens is a good way > to get familiar with how to structure an app with multiple views or > screens. Here's a simple guide to get you started with Apache Royale, > showing how to create an app with multiple screens. > Step-by-Step Guide > 1. Set up Apache Royale > > If you haven't set up Apache Royale yet, follow these steps: > > Download and set up Apache Royale from here. > > Make sure you have Apache Flex SDK set up if you’re using it, as > Royale is built on top of it. > > Install Node.js, as Apache Royale uses it for building apps. > > You can start a Royale project using the following command: > > mxmlc --output=app.swf main.mxml > > Or if you're using an IDE like IntelliJ IDEA or Visual Studio Code, you > can directly create a new Royale project through the IDE. > 2. Create a Basic Application with Multiple Screens > > Let's break down how you can create multiple screens in a Royale > application. We will create two screens: HomeScreen and AboutScreen. > Project Structure: > > /src > /main.mxml > /HomeScreen.mxml > /AboutScreen.mxml > > Step 1: Create the HomeScreen.mxml > > This is the first screen that will be shown when the app starts. > > <?xml version="1.0" encoding="utf-8"?> > <fx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; > xmlns:s="library://ns.adobe.com/flex/spark" > applicationComplete="initApp()"> > <fx:Script> > <![CDATA[ > import mx.events.FlexEvent; > private function initApp():void { > > navigateToAboutScreenButton.addEventListener(MouseEvent.CLICK, > navigateToAboutScreen); > } > > private function navigateToAboutScreen(event:MouseEvent):void { > this.currentState = 'aboutScreen'; > } > ]]> > </fx:Script> > > <fx:States> > <fx:State name="homeScreen"/> > <fx:State name="aboutScreen"/> > </fx:States> > > <s:Group id="homeScreenGroup"> > <s:Label text="Welcome to the Home Screen!" width="100%" > height="100%" textAlign="center" verticalAlign="middle"/> > <s:Button label="Go to About Screen" > id="navigateToAboutScreenButton" horizontalCenter="0" verticalCenter="50"/> > </s:Group> > > <s:Group id="aboutScreenGroup" includeIn="aboutScreen"> > <s:Label text="This is the About Screen" width="100%" > height="100%" textAlign="center" verticalAlign="middle"/> > </s:Group> > </fx:Application> > > Step 2: Create the AboutScreen.mxml > > This is the second screen, which will show when the user navigates to it. > > <?xml version="1.0" encoding="utf-8"?> > <fx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; > xmlns:s="library://ns.adobe.com/flex/spark"> > <s:Label text="This is the About Screen" width="100%" height="100%" > textAlign="center" verticalAlign="middle"/> > </fx:Application> > > 3. Main Application Logic > > Now we’ll set up a main application to manage navigation between screens. > main.mxml > > <?xml version="1.0" encoding="utf-8"?> > <fx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; > xmlns:s="library://ns.adobe.com/flex/spark" > applicationComplete="initApp()"> > <fx:Script> > <![CDATA[ > import mx.events.FlexEvent; > > private function initApp():void { > currentState = 'homeScreen'; > } > ]]> > </fx:Script> > > <fx:States> > <fx:State name="homeScreen"/> > <fx:State name="aboutScreen"/> > </fx:States> > > <s:Group id="homeScreenGroup" includeIn="homeScreen"> > <s:Label text="Welcome to the Home Screen!" width="100%" > height="100%" textAlign="center" verticalAlign="middle"/> > <s:Button label="Go to About Screen" horizontalCenter="0" > verticalCenter="50" click="currentState='aboutScreen'"/> > </s:Group> > > <s:Group id="aboutScreenGroup" includeIn="aboutScreen"> > <s:Label text="This is the About Screen" width="100%" > height="100%" textAlign="center" verticalAlign="middle"/> > <s:Button label="Back to Home" horizontalCenter="0" > verticalCenter="50" click="currentState='homeScreen'"/> > </s:Group> > </fx:Application> > > Explanation: > > States: Apache Royale uses fx:State elements to manage different views > or screens. Here we have two states: homeScreen and aboutScreen. > > Components: The s:Group elements are used to display the content of > each screen. We use includeIn to manage which group is visible based on the > current state. > > Navigation: Clicking a button changes the currentState, which in turn > toggles the visibility of the appropriate screen. When the button on the > home screen is clicked, it navigates to the about screen, and vice versa. > > I will give it a whirl > > thanks > > > > Sent with Proton Mail secure email. >
