I have a question about class inheritance

AppStudio
1

Does AppStudio support inheriting custom classes? I created a class A. When I defined class B with the syntax class B extends UserFunction.A, RobotStudio failed to launch completely, and even the home page could not be displayed. But if Class B extends Array，the App is OK

2

:rofl: You need to search the sequence of ESM construction knowledge and some knowledge about global variables in JavaScript.

Here are some key points.(FOR APPSTUDIO V1.3.0):

  1. There is an order when AppStudio’s user function is injected into the global scope:

image
image963×400 16.9 KB

If I have two user-defined functions, say TestA and TestB, TestA initializes before TestB. They are only imported into the global UserFunction namespace (accessible via UserFunction.TestA) after both have completed initialization. This means during their individual initialization phase, neither function can access the UserFunction variable.

If you need to implement this kind of inheritance or dependency injection during construction, you must pay close attention to the creation order of the functions. Additionally, you can utilize the window object as a global intermediary to temporarily store and manage these references during the initialization process.

image
image842×361 20 KB

image
image766×282 15.7 KB

3

I’m confused about the first step: is it mandatory to generate a project.js file? For the second step, I created two classes following your instructions, but after deploying to RobotStudio, the result looks like this:

企业微信截图_17804541526270
企业微信截图_178045415262701323×727 34.3 KB

empty display

4

The first step is that I open the deployed project’s source code using the dev-tool in the browser, so that everyone can better understand the packaging mechanism of this UserFunction…:laughing::laughing:

If you encounter a whitening issue, I also suggest opening the dev-tools in your browser to debug and check the error. See whether it’s a syntax error or if the TPU hasn’t enabled Chrome mode.

image
image1286×662 35.9 KB

5

I have switched to the correct deployment mode, yet the problem remains unresolved

企业微信截图_17804558128728
企业微信截图_17804558128728665×253 12.9 KB

企业微信截图_17804558622233
企业微信截图_17804558622233628×241 12.3 KB

6

Could you share the console logs after opening the project (https://127.0.0.1:80/fileservice/$HOME/WebApps/<YOUR WEBAPP NAME>/index.html )with the browser(CTRL+SHIFT+I)?

7

Thanks for your patience! I found I made a naming mistake: I wrote TestA instead of Test_A, and now it works perfectly. Many thanks!

8

After verification, in AppStudio v1.3.0, It is absolutely possible to implement inheritance in the UserFunction class.

Let’s assume a scenario: We have two classes, C1 and C2, and need to have C2 inherit from C1.

Then in the UserFunction code, C1 can be


class C1 {
  constructor() {

  }
}
export default C1;

C2code can be:


import C1 from './C1.js';

class C2 extends C1 {
  constructor() {

  }
}
export default C2;

Two things need to be confirmed:

  1. Note the export default syntax, Because the code of C1 is exported as default, and each individual content of UserFunction in AppStudio must be exported as default.
  2. The syntax for importing C1 from C2 is to use a direct import statement, and it must comply with JavaScript’s import syntax—the .js file extension cannot be omitted.
  • ✅ import C1 from ...
  • ❌ import {C1} from ....
  • ❌ import C1 from 'xxx'
  • ❌ import C1 from './xxx'
  • ✅ import C1 from './xxx.js'
1 Like