QEWD with Sencha ExtJS javascript framework

[Marc]

Hi,

It is not clear to me how I can use the QEWD client within the Sencha ExtJS framework.

As I read in qewd-starter-kit-iris-networked/INTERACTIVE.md the first thing to do is to install the client (npm install qewd-client) and load it using require (let qewd_client = require('qewd-client')).

Yet if I put the requirement in Sencha's app.json "requires" property, I get :

i [ext]: [ERR] Cannot satisfy requirements for "qewd-client"!
i [ext]: [ERR]    The following versions cannot be satisfied:
i [ext]: [ERR]       TestUC: qewd-client (No matches!)
i [ext]: [ERR] Cannot resolve package requirements

I tried to extend the "packages":"dir" property of workspace.json with the path to the qewd-client  (${workspace.dir}/node_modules/qewd-client) but that is no solution.

Do I need to run a script that imports QEWD, like in the plain html examples?

Regards,
Marc

[Rob Tweed]

I've not used ExtJS for a long time, so I'm not sure of the details of what you'll need to do.  It will depend, to some extent, on how you're building/loading your front-end application.

It would help if you could provide an example index.html and app.js to show what you're trying to do.

However, some thoughts that may help you:

The "require('qewd_client')" approach will only work if you're using Node.js and something like WebPack to create a JS bundle file.  If, as is more likely with an ExtJS app, you're loading the JS in a more "traditional" way, then follow the example at the top of that INTERACTIVE.md document - ie if you're going to use a WebSocket-based QEWD messaging approach (rather than REST/http messaging), you need to ensure that socket.io is loaded via a <script> tag and then load the QEWD Client module using import.

Before you allow ExtJS itself to start taking control of the action, you should ensure that the QEWD Client registers itself - again use the example code at the top of the page that shows the event handling to make this safely complete.

Finally, once you're into your ExtJS code, you'll need to make sure it somehow has access to the QEWD object so you can invoke its reply() or send() methods to send (and receive) messages to/from the back-end.  How you do that will depend on the structure of your logic, but a simple way may be to augment the Ext object, eg:

  Ext.QEWD = QEWD;

so you can then use Ext.QEWD.reply(); to send your messages from anywhere no matter how deep you're into ExtJS-controlled logic.

Hope this helps

Rob

--
You received this message because you are subscribed to the Google Groups "Enterprise Web Developer Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to enterprise-web-develope...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/enterprise-web-developer-community/82e1ad71-2ffb-4f60-a88e-547cf2a1b25bn%40googlegroups.com.

--

Rob Tweed
Director, MGateway Ltd
http://www.mgateway.com

[Marc]

Hi Rob,

thank you for your answer.

The latest version of Sencha has the ability to use node packages and is using WebPack to create a bundle. You run a project with "npm start", it has a package.json file and a lot of node modules. There is still the possibility to create projects in the "traditional" way so it is indeed an idea to try that and use your suggestions (I've gone thourgh the INTERACTIVE doc and managed to get QEWD running with an simple HTML file). Yet I was hoping to be able to work in the "new" way as it seems to have more possiblities.

I'm not yet familiar with node packages, but I have the impression that installing qewd-client (with npm) has broken something else : "core". Is that possible? If I try to install that (npm install core --save), I get an error about base64 : bas...@2.0.3 install: `node-waf configure build` and "node-waf not found".

Would it be possible to combine this "new" Sencha way with the traditional loading of the ewd-client.js (so with using a script-tag)?

Kind regards,
Marc

Op woensdag 13 september 2023 om 11:02:38 UTC+2 schreef Rob Tweed:

[Rob Tweed]

Bundling JS with Node and WebPack is something I personally avoid as I believe it's counter to the principles and inherent philosophy of the Web platform.  However, it's undeniable that it's become the industry-accepted approach these days so I understand your interest in using it - if you use React or Vue, for example, then it's the expected approach.

With the advent of WebComponents and ES6 modules (which allow you to dynamically load JavaScript), in my opinion the bundling approach has become unnecessary.  That having been said, the industry inertia means bundling will be here to stay for quite some time, sooooo.....

As I'm not an expert in bundling with QEWD, I'm afraid I'm limited in what I can suggest.  However, perhaps Ward deBacker will be able to provide some advice, as he uses QEWD very successfully with Vue.  

You may also want to take a look at the React and Vue modules for QEWD that he has written, and see if you can adapt them for ExtJS?

Rob

To view this discussion on the web, visit https://groups.google.com/d/msgid/enterprise-web-developer-community/c955c90b-8c9a-4e2c-83a3-696e9eeffbb4n%40googlegroups.com.

[Rob Tweed]

Here's Ward's Vue module for QEWD in case you haven't been able to locate it:

https://github.com/wdbacker/vue-qewd

[Marc]

If you put it this way, I would like to choose the "dynamic approach". 

I already took a look at vue-qewd, but stopped because I saw there is a vue-qewd module involved (purpose?).

And I like a lot the components that Sencha offers.

Op woensdag 13 september 2023 om 12:53:48 UTC+2 schreef Rob Tweed:

[Rob Tweed]

Yep - I quite understand the attraction of ExtJS - their components have always been excellent.  I personally don't like their licensing model, but that doesn't detract from the quality and functionality of what they offer.

Unfortunately my unfamiliarity with ExtJS these days and the use of WebPack in conjunction with it means it's tricky to come up with the ideal way of getting the whole build chain and ExtJS to recognise and work with QEWD.  I'm sure it can be done - it's all just JavaScript at the end of the day.

Rob

To view this discussion on the web, visit https://groups.google.com/d/msgid/enterprise-web-developer-community/e7d9e525-18bf-4709-8c91-8c6da50cc8afn%40googlegroups.com.

[Marc]

I've not yet succeeded in getting QEWD up and running. So far, I've learned something but I'm missing key points. I've got a QEWD object, but it does not connect to my back-end (it shows "send :" in the console but never "sent:").

You cannot use an import statement in a module that is loaded by the Ext JS framework, since then you are already inside a block of code (such as a function or a loop) and an import statement must appear at the top level of a module file.

• instead run a script in the HTML-startup file (index.html), do not forget the option "type=module" like :
  <script src="/resources/shared/loadQEWD.js" type="module"></script>
  --> loadQEWD.js is a file I created to do all the steps : import + initalise, see further
  
  
• or use the import() function which returns a Promise:
  var me=this,
  objIO = io;   //io should exist due to the tag <script src="/node_modules/socket.io-client/dist/socket.io.js"></script> in the index.html file
  
  //load the Qewd client
  import('/node_modules/qewd-client/qewd-client.js').then((module) => {
  //make a reference to be able to access the object from anywhere
  Ext.QEWD = module.QEWD;
  
  //add event listener
  Ext.QEWD.on('ewd-registered', me.onEwdRegistered);
  
  Ext.QEWD.start({
  application: 'HIPA',
  url: 'http://localhost:8081/HIPA',
  io:objIO
  });
  }).catch((error) => {
  console.error(error);
  });
  
  --> does not work as expected
  
  
• there is a workaround (not tested yet), created by Torsten Dinkheller, see :
  https://www.youtube.com/watch?v=kC73flL1Lsk
  and https://github.com/Dinkh/ExtJS-Import

This was my loadQEWD.js file :

var objIO = io; //io should exist due to the tag <script src="/node_modules/socket.io-client/dist/socket.io.js"></script> in the index.html file
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOMContentLoaded');
    console.log('io object : ' + JSON.stringify(io) + ' objIO : ' + JSON.stringify(objIO)); //did this to see if io was found
   
    QEWD.on('ewd-registered', () => {
      QEWD.log = true;      
      console.log('loadQEWD: ewd-registered');
    });

    QEWD.start({
        application: 'HIPA',
        url: 'http://localhost:8081/HIPA',   //--> not sure what is needed here
        io:objIO
    });

    var global = Ext || window;
    global.QEWD = QEWD;
});

Marc

Op woensdag 13 september 2023 om 15:16:12 UTC+2 schreef Rob Tweed:

[Marc]

BTW, I'm not serving the Sencha app from within the QEWD WWW folder but by it's own webserver. Is that a problem? I guessed the parameter "url" (as argument for QEWD.start) suggested you can work with different webservers.

Marc

Op vrijdag 15 september 2023 om 00:47:17 UTC+2 schreef Marc:

[Rob Tweed]

If some paid-for technical support would help you move forwards, please contact me privately by email 

Rob 

Sent from my iPhone

On 15 Sep 2023, at 00:05, Marc <marc....@gmail.com> wrote:



To view this discussion on the web, visit https://groups.google.com/d/msgid/enterprise-web-developer-community/772d605d-33f4-4571-86a6-3adce0b92e10n%40googlegroups.com.

[Marc]

Hi Rob,

I'm going to contact you within a few days (have to handle other stuff today).

Marc

Op vrijdag 15 september 2023 om 10:03:00 UTC+2 schreef Rob Tweed:

[Rob Tweed]

One additional thought - if you used a simple REST interface rather than a WebSocket one, the setup with ExtJS would be a lot simpler. You might want to take a look at the QEWD REST documentation 

Rob

Sent from my iPhone

To view this discussion on the web, visit https://groups.google.com/d/msgid/enterprise-web-developer-community/430e68d3-2306-4e0c-9127-b80417d607bcn%40googlegroups.com.

[Enterprise Web Developer Community]

Indeed, I could just use AJAX REST calls. Yet then I'm missing the possibilities of websockets.

I've sended you a private mail.

Marc

Op vrijdag 15 september 2023 om 16:21:46 UTC+2 schreef Rob Tweed: