Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Endurance AUI #2

Open
starandtina opened this issue Aug 22, 2014 · 1 comment
Open

Endurance AUI #2

starandtina opened this issue Aug 22, 2014 · 1 comment
Labels
AUI Component blog

Comments

@starandtina
Copy link
Owner

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;
});
  1. 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
  2. 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.
  3. 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.
  4. 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
  5. 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>
  1. 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
  2. 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
  3. Every component is one module with AMD style, and we use RequireJS as module loader currently
  4. 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.

  1. Find all of AUI components populated in this HTML fragment depends on the data-render attribute
  2. 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
  3. 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
  4. 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 changed the title AWE AUI Component Endurance AUI Component Sep 9, 2014
@starandtina starandtina added bug and removed bug labels Sep 9, 2014
@starandtina starandtina changed the title Endurance AUI Component Endurance ARCH-HTML Component Dec 4, 2014
@starandtina starandtina changed the title Endurance ARCH-HTML Component Endurance AUI Dec 4, 2014
@pacific0437
Copy link

Well Done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
AUI Component blog
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@starandtina @pacific0437