aweui.js installation

In order to add aweui to a new project we need to add the js and css files to our project and call the initialisation methods. We have several aweui demos that you can download and copy the js/css files from as well as see how the js is initialised:

Downloads

aweui main demo - simplest demo to run, just open (double click)

index.htm

after unzipping it React demo - React.js demo, uses

webpack

Vue demo - Vue.js demo, also uses

webpack

Angular demo - Angular (not angular.js) demo, uses

webpack

1) aweui uses

jquery

, so you need to add a script reference to

jquery

if you don't have it already. 2) From one of the demos copy the js files (aweui folder) and css files (themes folder) into your project. Js files from the main demo will have the

import

and

export

statements commented out. 3.a) If you can use

import

(you're using

webpack

for example) import

aweui

and

utils

, you may need to import other modules in the future

import { aweUtils, aweui } from './aweui/all.js';

3.b) If you can't use

import

add script references in this order

awef.js

awe.js

awem.js

aweUtils.js

awedict.js

aweui.js

, example without using a bundler:

<script src="./scripts/aweui/awef.js"></script>
<script src="./scripts/aweui/awe.js"></script>
<script src="./scripts/aweui/awem.js"></script>
<script src="./scripts/aweui/aweUtils.js"></script>
<script src="./scripts/aweui/awedict.js"></script>
<script src="./scripts/aweui/aweui.js"></script>

instead of

awedict.js

you could use a different file for another language, example:

./scripts/aweui/awedict/awedict.fr.js

. 4) Reference

AwesomeMvc.css

from

themes/wui/AwesomeMvc.css

, you could use a different theme instead of

wui

. 5) Initialise the aweui, example.

aweUtils.init('m/d/yy', false, '.'); // date format, isMobile, decimal separator
aweui.init();

Comments