POC Vue.Js with vuetify

31 octobre 2019

Using Vuetify lib for template in POC

Vuetify lib is used for specifics component (ex: PartyContactMech), but in the first step all generic vuejs component template has been done with "classical" html, similar to what is currently done in ofbiz.

This month we have decided to migrate all templates with some vuetify object, main reason are

  • "modern" look, real frontjs look

  • not a large job (less than 3 days)

  • more easier to have multiple interactive option in the future

First part of the month all has been done on the vuetify branch and after updating example GUI test (selenium) merge to master.
Now all has been migrate but internal cleaning is not yet finish (remove all lib no more used)

intra-app link move in the vuejs-app

To have better reactivity, we have modified the VueLink to be able to generate an internal vuejs-app call when link target is a showPortal.
With this modification, and a ofbiz component with all user interface done with portal-page, we are in a One Page application.

On a user experience point of view, it’s really a plus, because, when coming back to an already open portal-page, user retrieve it with data already load.

VuejsRouter and screen management

VuejsRouter is now used when click is done on internal link, it will be useful to have a correct back button in browser usage.

In the same time, first "standard ofbiz screen" has been used with the FrontjsRenderer and vuejs generics component.
So future migration will be more easier.

For the first screen test, we have used a dedicated FindListDecorator, to have only the List area which is update when search is done.

theme flatgreyfjs dedicated to vuejs

With vuetify lib (and so, css conflict with standard ofbiz) and to be able to have a correct application navigation (menu look and correct update when screen/portpage change) we have decided to create a dedicated theme for FrontJs.

Started from flatgrey and only keep, without modification, header, appbar and footer.
Most of css has been removed, and some specifics css has been made for header/footer and appbar to continue having the same look.

CommonScreen in examplefjs

For fjs component, we currently force to use flatgreyfjs theme and no application menu.

applicationMenu uri

A new uri for sending applicationMenu at json format with frontjsviewhandler has been done, so vuejs call it when started and update it when it’s necesary

SeleniumWebDriver adapted to VuejsVueitfy

With Vuetify, some of basic function had to be updated, ex: the standard seleniumHq clearField() not fire event field change.
(clear, sendKey, selectByValue, selectByText, …​. )

  • With the existing GUI scenario test for examplefjs, a whole lot of basic function have been enhance to work with vuejs too.

  • A new boolean field has been created (default value to false), it should change in the test when a vuejs component will be used/tested.

  • Sometime, it is necessary to use some workaround (ex: re-testing is failed after wait 250ms) because with vuejs, html dom is built first and data injected in a second time. The classical seleniumhq waitUntil is on html-dom, so sometime the webElement.getText() or getValue() is not good because vuejs injection process is not finished !

On a GUI test scenario writing perspective, there should be no change.

Javadoc have been reviewed for the two main scenario testing vuejs example component (which are now quite extensive) and for all basic functions.

javadoc link in ofbizextra website

Some works has been done on ofbizextra website, to add some link to javadoc. the link are in the community page.

Vuejs POC page have been reviewed but with all change done each week it’s difficult to have a exactly up to date documentation ;-)

miscellaneous

vuejs-portal

  • now it’s possible to have mulitple watcher for one element (portlet). The use case is in a portal page, a portlet should be updated if main id change (like all other portlet in portalPage) and be update if action is done on an other portlet (ex: ExampleStatusHistory).

  • A new event-type has been added on on-event-update-area : collapse (or expand or toggle) a screenlet (an Id, the screenletName)

  • After update on last release for vue-cli, the webapp name has been changed to the default convention name, so vuejsportal has became vuejs-portal

  • A large vuejs code review has been done with eslint to remove a lot of warning.

Common file for fjs component

Now, all common files for the fjs component (examplefjs, partymgrfjs, …​) are in vuejsPortal

  • ComonScreen in widget directoryn (with common-decorator adapted to vuejs, lookupDecorator, FindListDecorator, …​)

  • in scr/main/org/ofbiz/…​ there are the handler and rendrer

selenium

  • selenium HR company configuration test has been separated in two main : step 1 to 4 and 5&6
    Sometime it failed because it was long.

  • Default theme for selenium is now flatgrey