Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4474

Support client attributes including prefix

    XMLWordPrintable

Details

    • New Feature
    • Resolution: Done
    • Normal
    • 9.0.1
    • None
    • None
    • None

    Description

      As title.
      When using other frameworks (ex. vue.js), using the custom tags/attributes in ZK components causes a parsing error:

      For example,

      <zk xmlns:n="native">
        <n:button v-on:click="xxx">Sign In</n:button>
      </zk>
      

      Requirement

      zul can support custom prefix on a native element and a zul element and render the prefix to DOM elements

      Usage example

      <zk xmlns:v-on="http://www.zkoss.org/2020/zk/client/attribute-prefix" xmlns:q-on="client/attribute-prefix" xmlns:n="native" xmlns:ca="client/attribute">
      
      <!- zul element use case: ->
      <a onClick="" hflex="" ca:bbb=""  v-on:ddd="" q-on:click="" />
      
      <!- native element use case: ->
       <n:button v-on:click="xxx">Sign In</n:button>
      

      Solution Evaluation

      1. [New feature] a new namespace

      ZK should support a new namespace that outputs raw attributes including namespaces e.g. http://www.zkoss.org/2020/zk/client/raw-attribute

      <zk xmlns:v-on="http://www.zkoss.org/2020/zk/client/attribute-prefix" xmlns:q-on="client/attribute-prefix" xmlns:w="client" xmlns:ca="client/attribute">
      <a v-on:ddd="" q-on:click="" onClick="" hflex="" ca:bbb="" />
      <n:button v-on:click="xxx">Sign In</n:button>
      

      Pro

      • ZK can render such custom prefix to DOM element

      Con

      • add one more namespace to the existing 9 namespaces might cause confusing

      Reason

      In out current Client attribute namespace, ZK doesn't render the prefix v-on to a DOM element.

      <zk xmlns:v-on="http://www.zkoss.org/2005/zk/client/attribute">
      <button v-on:click="abc"/>
      

      2. HTML component

      <html ><![CDATA[
      <button v-on:click="xxx">sign in</button>
      ]]></html>
      

      Con

      • HTML elements are enclosed by <span class="z-html">
      • no syntax highlight for HTML
      • zul element does't support

      3. pure HTML + embedded ZK

      in html

      <button v-on:click="abc"/>
      <div id="embedded" />
      <script src="/.../zkau/web/js/zkmax/embedded/embedded.js"></script>
      <script>
      zEmbedded.load('embedded', 'xxx.zul');
      // use client binding
      </script>
      

      Pro

      • just like using a front-end framework

      Con

      • use the embedded mechanism to communicate (Client - ZK)

      4. include an HTML

      a zul includes an HTML that contains a custom attribute element

      Summary

      Allowing various foreign client frameworks syntax written in a ZUL will make ZUL itself more and more complicated. We suggest keeping things simple for maintenance and user learning.
      Hence, suggest using "include an HTML" or "embed a zul" to handle such integration.

      Attachments

        Activity

          People

            DevChu DevChu
            DevChu DevChu
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: