1.Start by installing the Lightning-CLI (Command-line interface) npm install -g WebPlatformForEmbedded/Lightning-CLI
2. git clone https://github.com/kathiravanltts/refapp.git
3. cd refapp
4. npm install
5. lng build will create a standalone bundle that you can run in the browser
6. lng serve will start a local webserver and run the app
When you inspect the contents in your app folder you will find the following files:
- metadata.json this hold the following app related metadata
- package.json this file holds various metadata relevant to the project
- package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json
- setting.json which holds app and platform specific settings
- clearColor, specifies the color we use when we call the clear() method
- useImageWorker, if the platform you run the code on support Web workers
- debug, toggles debug mode on / off
- path, the path to the static app assets, Utils.asset() will use this folder to lookup assets
- log, toggles app logging on / off
- showVersion, if set to true, will overlay the app's version in the corner (version specified in json)
Inside the src folder we can find a file called index.js
- index.js is responsible for launching your app
We import Launch method from the SDK (will act as a bootstrapper). Next we import our app from the App.js. Export a function which upon invocation will Launch the app.
- App.js the one which is referenced in our index.js file
This is where we start importing the Lightning App framework via our SDK and Utils. And import Menu from the main Menu/menu.js.
After the import we create a new default export for our App Component. Inside our class declaration we define a new member getFonts. Get fonts returns an array of object with properties for all the different fonts our app uses. For this app We've downloaded a pixel font but feel free to use any font(s) you like.
After including the font we start by defining the root template of our app on which we will be attaching the components that are needed in our app. The component is added to the template. Tags are used as a reference to an object, inside a template. If you want to reference Menu for instance, you can reference to said with this.tag(<object name>). To add an instance of defined Component (here Menu) we use the type attribute in our template definition.
First we add a new state to state machine called Menu. And force our app to go into that state upon setup via _setState().
After the import we create a new default export for our App Component. Inside our class declaration we define static _template. Next we see the components properties, we position the component 0 on the x-axis and 0 on the y-axis. Tags are used as a reference to an object, inside a template. If you want to reference BackGround for instance, you can reference to said with this.tag(<object name>).
Now we add an implementation of the statemachine. The $enter() and $exit() will be automatically called upon when a component enters that state or exits that state so you can do some proper clean up if needed. Tags are used as a reference to an object, inside a template. If you want to reference Menu for instance, you can reference to said with this.tag(<object name>).The focus path is determined by calling the _getFocused() method of the app object. By default, or if undefined is returned, the focus path stops here and the app is the active component (and the focus path only contains the app itself). When _getFocused() returns a child component however, that one is also added to the focus path, and its _getFocused() method is also invoked. This process may repeat recursively until the active component is found.
To put it another way: the components may delegate focus to descendants.
Next stop, is creating the Main component which will be shown at the moment the Splash component sends the loaded signal. The Main's responsibility will be showing a Menu Component in his template and accepting remote control presses so a user can navigate through the menu items. We create a new file called Main.js inside our src and add the following code.
After the import we create a new default export for our App Component. Inside our class declaration we define static _template. Next we see the components properties, we position the component 0 on the x-axis and 0 on the y-axis. Tags are used as a reference to an object, inside a template. If you want to reference BackGround for instance, you can reference to said with this.tag(<object name>).
Let's start adding some logic, we start by adding a new lifecycle event called construct. Tags are used as a reference to an object, inside a template. If you want to reference Model for instance, you can reference to said with this.tag(<object name>).
The init hook will be called when a component is attached for the first time. Tags are used as a reference to an object, inside a template. If you want to reference Model for instance, you can reference to said with this.tag(<object name>).
Let's implement remote control handler. If this component has focus and the user presses the up button, _handleUp() will be called. Inside the function we will call the _setIndex. And we implement the opposite logic if a user presses down on the remote. Tags are used as a reference to an object, inside a template. If you want to reference , you can reference to said with this.tag(<object name>).
Now we add an implementation of the statemachine. The focus path is determined by calling the _getFocused() method of the app object. By default, or if undefined is returned, the focus path stops here and the app is the active component (and the focus path only contains the app itself). When _getFocused() returns a child component however, that one is also added to the focus path, and its _getFocused() method is also invoked. This process may repeat recursively until the active component is found. We add a new _states object so we can start adding sub states. Tags are used as a reference to an object, inside a template. If you want to reference, you can reference to said with this.tag(<object name>).
Here we import List from the core and the Config component from the mainMenu. After the import we create a new default export for our App Component. Inside our export we add the getBackground(), getMainList() and getSubMenuList() methods.
Here the export is set to default class model. The getMenu() returns back to menu by fetches the menu.json from the static.
We importing the Config component from the mainMenu and Lightning App framework via our SDK. After the import we create a new default export for our App Component with class ListItem. Define the root template of our app on which we will be attaching the components that are needed in our app. The component is added to the template.
The init hook will be called when a component is attached for the first time. The Element method patch(object : Object, createMode : Boolean) allows you to patch a part of the render tree. It is able to set multiple properties for multiple views in a single statement.
The Element method patch(object : Object, createMode : Boolean) allows you to patch a part of the render tree. It is able to set multiple properties for multiple views in a single statement.
Create a new default export for our App Component with class ImageListItem. Define the root template of our app on which we will be attaching the components that are needed in our app. The component is added to the template.
The init hook will be called when a component is attached for the first time. The Element method patch(object : Object, createMode : Boolean) allows you to patch a part of the render tree. It is able to set multiple properties for multiple views in a single statement.
A new default export is created for our App Component with class List. Define the root template of our app on which we will be attaching the components that are needed in our app. The component is added to the template. The init hook will be called when a component is attached for the first time.
It's also possible to (instead instancing a component via type) populate the children within the template. Every node has a .children property. It is an Array containing all the child nodes. You can also set the children array directly with an array of elements, or even patch objects. Tags are used as a reference to an object, inside a template. If you want to reference getPosition for instance, you can reference to said with this.tag(<object name>).
The _getFocused() components may delegate focus to descendants. Let's implement remote control handler. If this component has focus and the user presses the up button, _handleUp() will be called. Inside the function we will call the _setIndex. And we implement the opposite logic if a user presses down on the remote.
High level LGI User Interface Diagram
