generator-ui5

• 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.

Table of Contents

• Rapid "Getting Started"
• Prerequisites
• Installation
• App-Generator
• Sub-Generator
  • SPAGE - Split Page - Under development
  • VC
  • fragment
  • u_changeNamespace
• Generated Projects
  • Grunt tasks
  • Change settings
  • What to do after Git Clone - Shared Projects
• Testrunner with karma
• Hints
  • Projects Dependencies
  • Editor
    • Visual Studio Code
    • Atom
  • Versioning
  • bspContainer creation
• Known Bugs
• Open Points - Help & Feedback is welcome

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.