Technical archives des diffusions par email

technical@mail.odoo.com

Avatar

Re: Trying to embed xterm.js as Odoo widget

par
Max
- 15/05/2017 14:45:27
Thank you Alex for your advice.
But it did not work.
I event removed ajax loading to resource loading from xml.
The same.
Actually the problem is that xterm is trying to attach itself to DOM element while it's not yet there.
You can see this in action here - https://youtu.be/bEqOgNWbx80
I got your idea about _super(), and even re-worked everything to use it.
I even switched from JQuery this.$el.append to document.createElement.
But still the same - the terminal cannot find div element.
And all is ok when I set timeout for 3 seconds.


Here is the latest code:

odoo.define('asterisk.server_cli', function(require) {
    "use strict";

    var core = require('web.core');
    var common = require('web.form_common');
    var ajax = require('web.ajax');
    var dom_utils = require('web.dom_utils');
    var Widget = require('web.Widget');

    var ServerCli = common.AbstractField.extend({

      renderElement: function() {
        console.log('render');
        var self = this;
        return $.when(this._super()).then(function() {
          var d = document.createElement('div');
          d.setAttribute('id', 'terminal-container');
          self.setElement(d);
          self.term = new Terminal({
            cols: 100,
            rows: 24
          });
        });
      },

      render_value: function() {
        var self = this;
        return $.when(this._super()).then(function() {
          console.log('start');
          var socketURL = self.get('value');
          var sock = new WebSocket(socketURL);
          sock.addEventListener('open', function () {
            self.term.terminadoAttach(sock);
          });
          // Now it need some time to load correctly.
          console.log('get element', document.getElementById('terminal-container'));
          self.term.open(document.getElementById('terminal-container'), focus=true);
          self.set_dimensions('100%', '100%');

        });
        /*
        setTimeout(function() {
          console.log('get element', document.getElementById('terminal-container'));
          self.term.open(document.getElementById('terminal-container'), focus=true);
          self.set_dimensions('100%', '100%');
        }, 3000);
        */

      },

    });

    core.form_widget_registry.add('server_cli', ServerCli);

  });



On Mon, May 15, 2017 at 7:45 PM, Axel Mendoza Pupo <aekroft@gmail.com> wrote:
Hi Maxim
This code changes should solve your issue

###############################################################################
odoo.define('asterisk.server_cli', function(require) {
    "use strict";

    var core = require('web.core');
    var common = require('web.form_common');
    var ajax = require('web.ajax');
    var dom_utils = require('web.dom_utils');
    var Widget = require('web.Widget');

    var ServerCli = common.AbstractField.extend({
        willStart: function() {
            return $.when(
                this._super(), 
                ajax.loadJS('/asterisk_base/static/lib/xterm/dist/xterm.js'),
                ajax.loadJS('/asterisk_base/static/lib/xterm/dist/addons/terminado/terminado.js')
            );
        },
        renderElement: function() {
            this._super();
            this.$el.append('<div id="terminal-container" class="terminal-container"></div>');
            this.term = new Terminal({
              cols: 100,
              rows: 24
            });
        },
        start: function() {
            var socketURL = this.get('value');
            var sock = new WebSocket(socketURL);
            var self = this;
            sock.addEventListener('open', function () {
                self.term.terminadoAttach(sock);
            });
            // I think that now there is no need for a timeout, keep it only if is needed
            self.term.open(document.getElementById('terminal-container'), focus=true);
            self.set_dimensions('100%', '100%');
        },
    });

    core.form_widget_registry.add('server_cli', ServerCli);
  });
###############################################################################

On Mon, May 15, 2017 at 7:00 AM, Maxim Litnitskiy <litnimaxster@gmail.com> wrote:
Hi all!
I have developed an Odoo widget for xterm.js.
It works but has some issues.
As far as I can understand terminal is trying to initialize before Odoo widget is fully setup.
Here is the code and Youtube video showing the problem.
Anybody knowing Odoo JS framework internals please advise how to initialize the terminal when all is ready and Console tab is clicked.
Thanks!



odoo.define('asterisk.server_cli', function(require) {
    "use strict";

    var core = require('web.core');
    var common = require('web.form_common');
    var ajax = require('web.ajax');
    var dom_utils = require('web.dom_utils');
    var Widget = require('web.Widget');

    var ServerCli = common.AbstractField.extend({

      willStart: function() {
        console.log('ajax');
        if (!this.loadJS_def) {
          this.loadJS_def = ajax.loadJS(
            '/asterisk_base/static/lib/xterm/dist/xterm.js').then(function() {
                return $.when(
                  ajax.loadJS('/asterisk_base/static/lib/xterm/dist/addons/terminado/terminado.js')
                )
              });
        }
        return $.when(this._super(), this.loadJS_def);
      },

      renderElement: function() {
        this._super();
        this.$el.append('<div id="terminal-container" class="terminal-container"></div>');
        this.term = new Terminal({
          cols: 100,
          rows: 24
        });
      },

      start: function() {
        var socketURL = this.get('value');
        var sock = new WebSocket(socketURL);
        var self = this;
        sock.addEventListener('open', function () {
          self.term.terminadoAttach(sock);
        });
        // Now it need some time to load correctly.
        setTimeout(function() {
          self.term.open(document.getElementById('terminal-container'), focus=true);
          self.set_dimensions('100%', '100%');
        }, 3000);

      },

    });

    core.form_widget_registry.add('server_cli', ServerCli);

  });



_______________________________________________
Mailing-List: https://www.odoo.com/groups/community-framework-62
Post to: mailto:expert-framework@mail.odoo.com
Unsubscribe: https://www.odoo.com/groups?unsubscribe


_______________________________________________
Mailing-List: https://www.odoo.com/groups/community-framework-62
Post to: mailto:expert-framework@mail.odoo.com
Unsubscribe: https://www.odoo.com/groups?unsubscribe


Référence