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.

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

Ofbiz 11756 vue js renderer #57

Draft
wants to merge 24 commits into
base: trunk
Choose a base branch
from
Draft
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
e663fb3
Import VueJs component from ofbizextra repository and cleaning of it
May 30, 2020
4e188c4
examplefjs plugin initialisation, copy from ofbizextra examplefjs plugin
Jun 1, 2020
a0b0ee2
patch synchronization after ofbiz-framework commit a5ab396
Jun 5, 2020
0415ee9
themeFrontjs plugin initialisation, copy from ofbizextra flatgreyfjs
Oct 23, 2020
f84d9da
partyfjs plugin initialisation, copy from ofbizextra partymgrfjs plugin
Jun 6, 2020
c4c85ab
vuejs: Patch correction for OFBIZ-11769 Add icon management
Jun 6, 2020
29e77a2
partyfjs: correction about vuejs name, change old name to the new one
Jun 6, 2020
b6ceab6
themefrontjs: update it to not load javascript (not used by vuejs app)
Jun 6, 2020
7beb2bf
vuejs: correction for theme old name
Jun 9, 2020
1dfed71
first corrections after sonarcloud remarks
Jun 9, 2020
a0dbbf2
vuejs: patch OFBIZ-11768 synchro after ofbiz commit f21dbd6
Jun 9, 2020
6ad10a7
sonarcloud remarks corrections, remove unused files, and change table to
Jun 9, 2020
3bae719
themefrontjs: update jquery-min release in header.ftl (used by
Jun 17, 2020
9ec4584
Add exampleFjs part of ofbiz-Resource-REST-reference
Jun 20, 2020
19a1ed3
vuejs: start review of documentation, rename file and start change
Jul 2, 2020
d072110
Added th to VueDisplayField.vue table.
ArkBash Aug 3, 2020
9aa9069
Improved: WidgetWorker should not write generated html to Appendable
Aug 5, 2020
337f609
FrontJsFormRenderer, temporary no more used of buildHyperlinkUri, but
Aug 5, 2020
ded1bb7
synchro ofbiz after e0a840a commit (OFBIZ-11809), so replace renderSc…
Jan 13, 2021
992ee19
in themefrontjs plugin add a main-decorator dedicated to login to avo…
Feb 12, 2021
7886773
vuejs plugin: add role="none" for table to avoid sonarcloud bug beca…
Feb 12, 2021
12f1d24
correction on documentation to avoid warning during generation
Mar 3, 2021
2ac85e5
documented: add jbake tag to generate as a document and correction on…
Mar 3, 2021
a3527e1
update package.json to upgrade some version and remove unused package
Apr 19, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
vuejs: start review of documentation, rename file and start change
portal and portlet
holivier committed Feb 12, 2021
commit 19a1ed333eceb3f6b1e2a3887f4eaeb2eb8db6d5
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
////
= POC Vuejs Renderer
= Vue.Js Renderer

Actually the first javascript application enabling to use portlet system - portal Apache OFBiz is written with the Vue.js framework.

Original file line number Diff line number Diff line change
@@ -16,32 +16,41 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
////
= FrontJs Portal
= SPA / FrontJs with Vue.Js

frontJsPortal component included in frontJsPortal plugin aim to handle user interface with modern javascript framework
(Vue.Js, React, Angular, ect...).
SinglePageApplication or GUI done with a front done with a Javascript framework

It use portlet/portal system defined by XML and a javascript application.
done with *Vue.Js framework*, and *Vuetify Material-Design library*

This component is actually at POC (Proof Of Concept) state, so it aim to show some concrete ideas in order to discuss about them. +
vuejs component included a *FrontJs-Renderer* (similar as Macro-Renderer) usable to handle user interface with modern javascript
framework (Vue.Js, React, Angular, ect...) to be able to build a Single Page Application for one or more OFBiz component.

It use the standard OFBiz Widget System defined by XML and a vuejs application.

This component is currently at Work In Progress state, it aims to concretely build applications/components in order
to discuss the development process and the use of the application. +
It is produced in an "Agility" spirit which mean that it focus to result in despite of some technical debt.
Currently there are still some TODO in the code and choice has been made to implement only xml tags and attributes which are used,
at least, in one application/component.

XML tag or attribute not yet implemented generate warning or error.

This documentation aim to,

* Explain the current state of the component, how it work and what points had been choose or took away.
* Prepare future documentation by explaining element meant for future users.
* Explain the current state of the component, how it work and which points had been choose or took away.
* Document how to use it to develop OFBiz application by explaining each specific item by example.

The two main goal of using a javascript framework for user interface is
The two main goal of using a javascript framework for user interface is

1. to have a "modern" look and feel
* using recent GUI library
* usable in multiple context (PC, tablet, smartphone)
* usable in multiple context (PC, tablet, smartphone)
1. to increase interactive elements in screen, even if theses screens are based on standard modules :
* update some part of the screen by action or by data update;
* modify forms field as function of other field values;
* simpler screen configuration (portal page) without having to worry about portlets interaction.
* simpler screen configuration without having to worry about screenlet interaction.

include::_include/poc-vuejs_en.adoc[leveloffset=+1]
include::_include/vuejs-renderer.adoc[leveloffset=+1]

== modular and generic UI
Aiming to have an open and modular ERP, it's important that the user interface configuration allow to manage multiple screens
@@ -52,32 +61,24 @@ Next chapters describe a user interface management system's POC aiming to respon
include::Ui-POC.adoc[leveloffset=+2]


== Portlet
Portlet is an autonomous part of the screen, which mean that there can be action that only alter this part of the screen,
== Screenlet autonomous
in a modular approach, screenlet is an autonomous part of the screen, which mean that there can be action that only alter this part of the screen,
mainly fired by itself.

Portlet allow a huge modularity gain in user interface, that way an user action (click on a link, type in a field, ect...)
must not precise the portlet itself but a logical name which can be subscribed one or more portlet.
Sreenlet allow a huge modularity gain in user interface, that way an user action (click on a link, type in a field, ect...)
must not precise the Sreenlet itself but a logical name which can be subscribed by one or more screenlet.

This logical name which is subscribed by portlets is called `watcherName`, this field is in the association table between
PortalPage and PortalPortlet.
This logical name which is subscribed by screenlet is called `watcherName`, this field is a new attribute for the `container` tag.

=== Portlet update
It's the update of the data stored in js client side store who trigger portlet render update.


== Portal Page


== FrontJs Glossary

[#WATCHERS]
watchers:: They are objects stored in js store that can be altered remotely. watcher's subscribers update themselves with the
new value when it change.

watchers:: c'est nom du store VueJs utilisé pour stocker les différentes variable sur lequel les container ou portletsont abonné
et donc se mette à jours quand celui-ci change.

[#WATCHERNAME]
watcherName:: It is the key of a watcher