Endurance AUI - Githubissues

Here is quick review for one simple component definition of GlobalHeader.

define([
  'active/fnd/arch/create'
], function(create) {
  // Create cascade namespace
  create('active.fnd.aui.components.GlobalHeader');

  // Define the constructor of Component
  // It will be called when all of its sub aui components have been instantiated,
  // that means that you could traverse the DOM, bind events, add your custom functionaries or whatever you want it to do
  active.fnd.aui.components.GlobalHeader = function() {
    this.initialize = function(context) {
      var components = context.getComponents()
    }
  };

  active.fnd.aui.components.GlobalHeader.render = function(event) {
    var $html = event.get$Html();
    $html.append('<h1>GlobalHeader loaded</h1>');
  };

  return active.fnd.aui.components.GlobalHeader;
});

Fnd-webserver-endurance(Endurance AUI) uses some shared html components located in the arch-html project. The build process downloads them from Nexus and unzips them to the src/main/webapp/active/fnd directory inside the endurance project. You can look at the code there and make changes that you can test on your local instance, but these changes will be overwritten next time when you start the next build
Each component has a render method which is in charge of rendering the template and adds additional html elements or attributes or otherwise manipulates the html during the page rendering process. The components are actually JavaScript classes that act on the corresponding html element to get and set values, trigger events, validate inputs, etc.
Each component has an initialize method which is called when all components(including sub AUI components) are instantiated, and where default values are set, event handlers are bound, etc.
Endurance AUI is basically one page to which elements are appended and from which they are removed. When you navigate to a page, then the enter method of it’s corresponding JavaScript file is called. It renders the page html which in turn calls the render method of each component on the page
The custom attribute data-render defines what the component is. For example the following html will render the div as a GlobalHeader:
```
<div date-render="active.fnd.aui.components.GlobalHeader"></div>
```
In the webapp folder you will find main.less. This imports most of .less files which then import other .less files. They will be compiled into one css file by the build process. To make sure you see the changes right away make sure you append ?code=src to you url so that the .less files will be loaded and not the compiled css. This is also needed for debugging the individual JavaScript files
To see how each component is added to a pages html you can check out and build the arch-html project and then browse to http://localhost:8090/demo.html, you need to set up web server in order to host the arch-html directory
Every component is one module with AMD style, and we use RequireJS as module loader currently
Every component is registered into its own namespace, and the root namesake is active, for example, as for active.fnd.aui.components.GlobalHeader
How ARCH-HTML Component works

We use the data-render attribute to specify the AUI component type, then the left thing is hand over to Render component.

Find all of AUI components populated in this HTML fragment depends on the data-render attribute
Sort it depend on the degree of depth for every element we have found, so it means we will put the highest order element up the DOM tree all the way to <html> element into first place
Require every component one by one found in Step 2 and after it's loaded, then call Render method of it and store the constructor of it
If all components have been loaded and then call the constructor function of every component in order, and then we could traverse the DOM, binding events, add your custom functionaries or whatever you want it to do in that.

<button data-render='active.fnd.aui.components.Button' data-type='secondary' data-background='dark'></button>

How Endurance AUI integrate ARCH-HTML

Every page in AWE has one JavaScript and one HTML template file, maybe there is one related CSS file if needed.

Take Home page as an example. If user navigates to active/endurance/home changed from inside the page or from the browser, then navigator component needs to require active/endurance/home.js dynamically related with this route and then call the enter method of it in order to bootstrap it.

The active/endurance/home.js which is in charge of handling business logic(it looks like controller but it's not), such as rendering, binding events, loading data through Ajax call etc..., and it must has one method named enter which is used by navigator.
Then we should call active.render on the home template fragment and it helps us render the AUI components.

starandtina / starandtina.github.io

Endurance AUI #2

How ARCH-HTML Component works

How Endurance AUI integrate ARCH-HTML