Generator-ui5 NPM

Ready to use test-runner with karma
Offline & online development, live-reload
Simple shipping
Editor independent (try Webstorm, Sublime, Atom...)
Test driven development (try grunt tdd)
Code style and conventions by eslint, js-beautify
Naming conventions

Master = Development branch, therefore what you see on Github is the development version. Check the NPM Package for the last stable version and the matching readme.

Rapid "Getting Started"

Get node.js

Go in an empty folder run this:

npm install -g grunt-cli && npm install -g bower && npm install -g yo && npm install -g phantomjs && npm install generator-ui5 -g && yo ui5 && grunt run

Confirm everything with return
Afterwards, give grunt tdd a try
Master-Detail template is not 100% functional at this point

Prerequisites

This is a yeoman generator check the basics: http://yeoman.io/learning/index.html

install node js
- https://nodejs.org/en/download/current/
install grunt
- npm install -g grunt-cli
install bower
- npm install -g bower
install yeoman
- npm install -g yo
install phantomjs
- npm install -g phantomjs
you should install chrome, or remove chrome from the grunt karma task

Installation

npm install generator-ui5 -g

hint: run the same command to update the generator (or yo )

App-Generator

Create an empty folder, open the terminal and call:

yo ui5 && grunt run

yo will install everything for you. A browser should open after installation.

Master-Detail template is not 100% functional at this point

Sub-Generator

Generator prefixed with u_ update/change existing files.

SPAGE - Split Page - Under development

yo ui5:spage

Generates everything for a new master&detail page. Navigation pattern is hierarchical and should always be done from a detail to a detail page.

localhost:8000#vacancy/00000001 => localhost:8000#vacancy/00000001/applicant/0000000091

Input is a route e.g vacancy || vacancy/0001/application/0001.

input: 'vacancy/{mockVacancyId}/application/{mockApplicationId}'
controller:
- y.namespace.controller.application.Master
- y.namespace.controller.application.Detail
view:
- y.namespace.view.application.Master
- y.namespace.view.application.Detail
route:
- /vacancy/{vacancy}/application/{application}
target:
- application.Detail
test:
test/integration/application.js

call in any detail.controller

  this.navTo('application.Detail', {application: '123' });

Locations according to yo ui5:vc
Files are not embedded in each other, even if the route naming would indicate
e.g. vacancy/application is at controller/application an not controller/vacancy/application
mockIds are placed in the hash parameter for the integration test

VC

yo ui5:vc

Generate a view and a controller. Dots within the name are resolved to folder.

input: a.AweSoMe.master
naming: my.namespace.controller.a.awesome.Master
location: webapp/controller/a/awesome/Master.controller.js
view has already predefined semantic controls, if naming indicates a master/detail view.

fragment

yo ui5:fragment

Fragments with and without dialog template

u_changeNamespace

yo ui5:u_changenamespace

Helper to change the ui5-namespace in a project. This is done by simple string matching. Therefore the old and new namespace string must be unique over all files.

Generated Projects

The project is based on the sap openui5 templates.

Grunt tasks

grunt run
- This task is for to development
- Filesystem is observed, changes trigger a reload of the browser and grunt staticTest
- There are two options for requests to /sap/opu/:
  - record: requests are saved in /stubs
  - mock: responding with request saved in /stubs, very useful for offline development, testing, presentations
grunt staticTest - linting and beautifier
grunt test
- staticTest & karma with chrome, phantom;
grunt build
- generate compressed files in the dist folder
grunt upload
- request password & upload to the Netweaver-Server
grunt deploy
- build & upload
grunt tdd
- test driven development with karma and opa5 testing
- karma will run the selected test-file in chrome, keep it open and reload on file changes.

Change settings

Have a look at package.json or userConfig.json. If you want change project settings.

What to do after Git Clone - Shared Projects

IF you check this project out, you should do the following steps.

update userConfig.json
add userConfig.json to .gitignore
run npm install && bower install

Testrunner with karma

Karma is configured for chrome and phantomjs, therefore you should install chrome.

There are pros and cons about using karma

pro: its fast, scalable, can be done automatic and there is no need to write .html files
con: ui5 includes a qunit version and according to the ui5 documentation it should be required... but this version is modified and has config.autostart = true.... Karma is injecting the testing framework.... obviously this does not play well together. This means, if you want besides karma all .html files, they must required qunit (not the test.js files itself).

Hints

Projects Dependencies

Check and keep projects dependencies up to date with ncu. Install the latest versions with:

ncu -a

Editor

Visual Studio Code

https://code.visualstudio.com/

Don't forget the linter plugin https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Atom

Try the following packages:

atom-ui5-features
auto-update-packages
color-picker
docblockr
file-icons
git-projects
highlight-selected
hyperclick
js-hyperclick
linter
linter-csslint
linter-eslint
linter-htmlhint
pigments
ui5-snippets

you can also use tern(code-completion). The npm package tern-openui5 is already included for you. Unfortunately it seams to be out of maintenance.

atom-ternjs

Read the atom-ternjs readme

Versioning

Use npm version patch to create git-version tags before shipping your apps. Copy this version into the manifest file.

You can read the version on the client side from the component:

this.getManifestEntry("/sap.app/applicationVersion/version");

bspContainer creation

Known Bugs

while developing(grunt run), i18n files are wrong encoded(ä,ö and so on). They are correct after deployment

Open Points - Help & Feedback is welcome

Help is welcome,

open an issue before you start working.
generator: fix masterDetail template files
generator: tests
project: grunt refactor config for testing with karma
project: ship task build, test, new version, sync version with manifest.file. GetVersion() in Component.js & Add an about dialog fragment. upload
subGenerator: for (webapp/util.js & test/util.js) like baseController, pages, spages
project: linting for xml and html files
project: convert all grunt tasks to npm scripts.