OFBIZ-11756 vue js renderer

docs/asciidoc/developer-manual.adoc

@@ -254,6 +254,8 @@ https://cwiki.apache.org/confluence/display/OFBIZ/Service+Engine+Guide[OFBiz wik
 
 include::../../themes/docs/themes.adoc[leveloffset=+2]
 
+include::../../plugins/vuejs/src/docs/asciidoc/frontJs-vuejs.adoc[leveloffset=+2]
+
 == Core APIs
 
 == Development environment

framework/common/entitydef/entitymodel.xml

@@ -827,6 +827,7 @@ under the License.
         <field name="portletSeqId" type="id"><description>Identify the portalPortlet instance in case more copy of the same portalPortlet are present in the same portalPage</description></field>
         <field name="columnSeqId" type="id"></field>
         <field name="sequenceNum" type="numeric"></field>
+        <field name="watcherName" type="value"></field>
         <prim-key field="portalPageId"/>
         <prim-key field="portalPortletId"/>
         <prim-key field="portletSeqId"/>

framework/widget/dtd/widget-common.xsd

@@ -515,6 +515,13 @@ under the License.
             <xs:attribute name="send-if-empty" type="xs:boolean" default="true"/>
         </xs:complexType>
     </xs:element>
+    <xs:element name="auto-parameters-portlet">
+        <xs:annotation>
+            <xs:documentation>Generate 4 parameters : portalPageId, portalPortletId, portletSeqId and currentAreaId update from-field parameters.xxx</xs:documentation>
+        </xs:annotation>
+        <xs:complexType>
+        </xs:complexType>
+    </xs:element>
     <xs:element name="exclude">
         <xs:complexType>
             <xs:attribute name="field-name" type="xs:string" use="required" />
@@ -525,6 +532,7 @@ under the License.
             <xs:element minOccurs="0" ref="auto-parameters-service"/>
             <xs:element minOccurs="0" ref="auto-parameters-entity"/>
             <xs:element minOccurs="0" maxOccurs="unbounded" ref="parameter" />
+            <xs:element minOccurs="0" ref="auto-parameters-portlet"/>
             <xs:element minOccurs="0" name="image" type="image" />
             <xs:element minOccurs="0" ref="set-callback"/>
         </xs:sequence>
@@ -567,13 +575,30 @@ under the License.
                             </xs:documentation>
                         </xs:annotation>
                     </xs:enumeration>
+                    <xs:enumeration value="set-area" >
+                        <xs:annotation>
+                            <xs:documentation>
+                                Usable only in menu link, for FrontJs action, target and target-windows are used.
+                            </xs:documentation>
+                        </xs:annotation>
+                    </xs:enumeration>
+                    <xs:enumeration value="set-watcher" >
+                        <xs:annotation>
+                            <xs:documentation>
+                                Usable only in menu link, for FrontJs action, only target-windows is used (as watcherName).
+                            </xs:documentation>
+                        </xs:annotation>
+                    </xs:enumeration>
                 </xs:restriction>
             </xs:simpleType>
         </xs:attribute>
         <xs:attribute name="url-mode" default="intra-app">
             <xs:simpleType>
                 <xs:restriction base="xs:token">
                     <xs:enumeration value="intra-app" />
+                    <xs:enumeration value="intra-post" />
+                    <xs:enumeration value="intra-put" />
+                    <xs:enumeration value="intra-delete" />
                     <xs:enumeration value="inter-app" />
                     <xs:enumeration value="content" />
                     <xs:enumeration value="plain" />

framework/widget/dtd/widget-form.xsd

@@ -587,13 +587,39 @@ under the License.
                 <xs:element minOccurs="0" ref="auto-parameters-service"/>
                 <xs:element minOccurs="0" ref="auto-parameters-entity"/>
                 <xs:element minOccurs="0" maxOccurs="unbounded" ref="parameter" />
+                <xs:element minOccurs="0" ref="auto-parameters-portlet"/>
             </xs:sequence>
             <xs:attribute name="event-type" use="required">
+                <xs:annotation>
+                    <xs:documentation>set-area and set-watcher are specifics for VueJs and are put onSubmitUpdateAreas list.
+                                      submit, set-area and set-watcher are activate when submit button is clicked.
+                    </xs:documentation>
+                </xs:annotation>
                 <xs:simpleType>
                     <xs:restriction base="xs:token">
                         <xs:enumeration value="paginate" />
                         <xs:enumeration value="sort-column" />
                         <xs:enumeration value="submit" />
+                        <xs:enumeration value="set-area" >
+                          <xs:annotation>
+                            <xs:documentation>
+                              set-area is activate when submit button is clicked, it uses area-id as area to update and area-target as target to call.
+                              Parameters area read in included parameter tag or all form fields if parameters is empty.
+                            </xs:documentation>
+                          </xs:annotation>
+                        </xs:enumeration>
+                        <xs:enumeration value="refresh-area" >
+                          <xs:annotation>
+                            <xs:documentation>
+                              refresh-area is activate when submit button is clicked, it's same as set-area but areaId should be a container with a
+                              auto-update-target, because refresh-area will use it to refresh area and parameters in the watcher associated for call.
+                            </xs:documentation>
+                          </xs:annotation>
+                        </xs:enumeration>
+                        <xs:enumeration value="set-watcher" />
+                        <xs:enumeration value="refresh-watcher" />
+                        <xs:enumeration value="collapse" />
+                        <xs:enumeration value="close-modal" />
                     </xs:restriction>
                 </xs:simpleType>
             </xs:attribute>
@@ -615,6 +641,7 @@ under the License.
                     </xs:documentation>
                 </xs:annotation>
             </xs:attribute>
+            <xs:attribute name="use-when" type="xs:string" />
         </xs:complexType>
     </xs:element>
 
@@ -1551,16 +1578,49 @@ under the License.
             <xs:documentation>Area to be updated when a field event occurs.</xs:documentation>
         </xs:annotation>
         <xs:complexType>
+            <xs:sequence>
+                <xs:element minOccurs="0" maxOccurs="unbounded" ref="parameter" />
+                <xs:element minOccurs="0" ref="auto-parameters-portlet"/>
+            </xs:sequence>
             <xs:attribute name="event-type" use="required">
+                <xs:annotation>
+                    <xs:documentation>post, put, delete, setArea and setWatcher are specifics for VueJs on hyperlink (or link) and are put onClickUpdateAreas list.</xs:documentation>
+                </xs:annotation>
                 <xs:simpleType>
                     <xs:restriction base="xs:token">
                         <xs:enumeration value="change" />
                         <xs:enumeration value="click" />
+                        <xs:enumeration value="post" />
+                        <xs:enumeration value="put" />
+                        <xs:enumeration value="delete" />
+                        <xs:enumeration value="set-area" >
+                          <xs:annotation>
+                            <xs:documentation>
+                              set-area is activate when field is clicked, it uses area-id as area to update and area-target as target to call.
+                              Parameters area read in included parameter tag or all form fields if parameters is empty.
+                            </xs:documentation>
+                          </xs:annotation>
+                        </xs:enumeration>
+                        <xs:enumeration value="refresh-area" >
+                          <xs:annotation>
+                            <xs:documentation>
+                              refresh-area is activate when field is clicked, it's same as set-area but areaId should be a container with a
+                              auto-update-target, because refresh-area will use it to refresh area and parameters in the watcher associated for call.
+                            </xs:documentation>
+                          </xs:annotation>
+                        </xs:enumeration>
+                        <xs:enumeration value="set-watcher" />
+                        <xs:enumeration value="refresh-watcher" />
+                        <xs:enumeration value="submit" />
+                        <xs:enumeration value="set-field-in-form" />
+                        <xs:enumeration value="collapse" />
+                        <xs:enumeration value="close-modal" />
                     </xs:restriction>
                 </xs:simpleType>
             </xs:attribute>
             <xs:attribute type="xs:string" name="area-id" use="required" />
             <xs:attribute type="xs:string" name="area-target" use="required" />
+            <xs:attribute type="xs:string" name="use-when" />
         </xs:complexType>
     </xs:element>
 

framework/widget/dtd/widget-screen.xsd

@@ -232,6 +232,11 @@ under the License.
                     <xs:documentation>The auto-update interval, in seconds.</xs:documentation>
                 </xs:annotation>
             </xs:attribute>
+            <xs:attribute type="xs:string" name="watcher-name">
+                <xs:annotation>
+                    <xs:documentation>Name of the watcher, which will trigger auto-update when it changes.</xs:documentation>
+                </xs:annotation>
+            </xs:attribute>
         </xs:complexType>
     </xs:element>
     <xs:element name="horizontal-separator" substitutionGroup="AllWidgets">
@@ -531,6 +536,15 @@ under the License.
             </xs:annotation>
         </xs:attribute>
     </xs:attributeGroup>
+    <xs:element name="vuejs" substitutionGroup="HtmlWidgets">
+      <xs:complexType>
+          <xs:sequence>
+            <xs:element minOccurs="0" maxOccurs="unbounded" ref="parameter" />
+          </xs:sequence>
+          <xs:attribute type="xs:string" name="component-name" use="required" />
+          <xs:attribute type="xs:string" name="param-map" />
+      </xs:complexType>
+    </xs:element>
     <xs:element name="html-template-decorator" substitutionGroup="HtmlWidgets">
         <xs:annotation>
             <xs:documentation>

framework/widget/src/main/java/org/apache/ofbiz/widget/artifact/ArtifactInfoGatherer.java

@@ -101,6 +101,7 @@
 import org.apache.ofbiz.widget.model.ModelScreenWidget.Screenlet;
 import org.apache.ofbiz.widget.model.ModelScreenWidget.Section;
 import org.apache.ofbiz.widget.model.ModelScreenWidget.Tree;
+import org.apache.ofbiz.widget.model.ModelScreenWidget.VueJs;
 import org.apache.ofbiz.widget.model.ModelSingleForm;
 import org.apache.ofbiz.widget.model.ModelTree;
 import org.apache.ofbiz.widget.model.ModelTree.ModelNode;
@@ -241,6 +242,10 @@ public void visit(IterateSectionWidget iterateSectionWidget) throws Exception {
     public void visit(Label label) throws Exception {
     }
 
+    @Override
+    public void visit(VueJs vuejs) throws Exception {
+    }
+
     @Override
     public void visit(Menu menu) throws Exception {
     }

framework/widget/src/main/java/org/apache/ofbiz/widget/model/CommonWidgetModels.java

@@ -379,14 +379,22 @@ public Link(Element linkElement) {
                 this.linkType = linkElement.getAttribute("link-type");
             }
             List<? extends Element> parameterElementList = UtilXml.childElementList(linkElement, "parameter");
-            if (parameterElementList.isEmpty()) {
+            boolean autoPortletParamsElement = UtilXml.firstChildElement(linkElement, "auto-parameters-portlet") == null ? false : true;
+            if (parameterElementList.isEmpty() && ! autoPortletParamsElement) {
                 this.parameterList = Collections.emptyList();
             } else {
+                int paramListSize = parameterElementList.size() + (autoPortletParamsElement ? 4 : 0);
                 List<Parameter> parameterList = new ArrayList<>(
-                        parameterElementList.size());
+                        paramListSize);
                 for (Element parameterElement : parameterElementList) {
                     parameterList.add(new Parameter(parameterElement));
                 }
+                if (autoPortletParamsElement) {
+                    parameterList.add(new CommonWidgetModels.Parameter("portalPageId",    "parameters.portalPageId",    true));
+                    parameterList.add(new CommonWidgetModels.Parameter("portalPortletId", "parameters.portalPortletId", true));
+                    parameterList.add(new CommonWidgetModels.Parameter("portletSeqId",    "parameters.portletSeqId",    true));
+                    parameterList.add(new CommonWidgetModels.Parameter("currentAreaId",   "parameters.currentAreaId",   true));
+                }
                 this.parameterList = Collections.unmodifiableList(parameterList);
             }
             Element autoServiceParamsElement = UtilXml.firstChildElement(linkElement, "auto-parameters-service");

framework/widget/src/main/java/org/apache/ofbiz/widget/model/HtmlWidget.java

@@ -45,6 +45,7 @@
 import org.apache.ofbiz.widget.renderer.ScreenRenderer;
 import org.apache.ofbiz.widget.renderer.ScreenStringRenderer;
 import org.apache.ofbiz.widget.renderer.html.HtmlWidgetRenderer;
+import org.apache.ofbiz.widget.WidgetFactory;
 import org.jsoup.Jsoup;
 import org.jsoup.nodes.Document;
 import org.jsoup.parser.ParseError;
@@ -141,6 +142,9 @@ public HtmlWidget(ModelScreen modelScreen, Element htmlElement) {
                 case "html-template-decorator":
                     subWidgets.add(new HtmlTemplateDecorator(modelScreen, childElement));
                     break;
+                case "vuejs":
+                    subWidgets.add(WidgetFactory.getModelScreenWidget(modelScreen, childElement));
+                    break;
                 default:
                     throw new IllegalArgumentException("Tag not supported under the platform-specific -> html tag with name: "
                             + childElement.getNodeName());