Shulou(Shulou.com)06/02 Report--

This article introduces what is the principle of AWTK binding in javascript, the content is very detailed, interested friends can refer to, hope to be helpful to you.

I. basic structure

The binding method of Javascript is different from that of lua, mainly because there are many kinds of javascript engines, such as jerryscript commonly used in embedded systems and V8 commonly used on PC. Different engines have different abilities to register the Cmax Cure + function, so when binding, we only make a minimum requirement for the engine: the ability to register global functions.

Let's divide the binding code into two layers:

The engine-related code is responsible for mapping the functions of awtk to the js level one by one.

Engine-independent code (awtk.ts) is responsible for wrapping awtk functions as object-oriented interfaces.

The benefits are:

It is easy to implement. Binding global functions is the easiest, and each engine has a large number of examples to refer to.

The code is highly reused. Only one copy of awtk.ts 's code generator is needed.

Provide a unified interface for the upper layer, and changing the javascript engine will not affect the upper layer applications.

Second, engine-related code (jerryscript as an example) 1. Binding of member functions

In fact, the member functions in C language are global functions, which can be bound according to the binding mode of global functions, and constructors and non-constructors are handled in the same way. Such as:

Jerry_value_t wrap_button_create (const jerry_value_t func_obj_val, const jerry_value_t this_p, const jerry_value_t args_p [], const jerry_length_t args_cnt) {widget_t* ret = NULL; widget_t* parent = (widget_t*) jerry_get_pointer (args_p [0], "widget_t*") Xy_t x = (xy_t) jerry_get_number_value (args_p [1]); xy_t y = (xy_t) jerry_get_number_value (args_p [2]); wh_t w = (wh_t) jerry_get_number_value (args_p [3]); wh_t h = (wh_t) jerry_get_number_value (args_p [4]); ret = (widget_t*) button_create (parent, x, y, w, h) Return jerry_create_pointer (ret, "button_t*");}; jerryx_handler_register_global ((const jerry_char_t*) "button_create", wrap_button_create); 2. Binding of object properties

The properties of the object are converted into a set/get function, and then registered as a global function.

Jerry_value_t wrap_widget_t_set_prop_visible (const jerry_value_t func_obj_val, const jerry_value_t this_p, const jerry_value_t args_p [] Const jerry_length_t args_cnt) {widget_t* obj = (widget_t*) jerry_get_pointer (args_p [0], "widget_t*") Bool_t visible = (bool_t) jerry_get_boolean_value (args_p [1]); obj- > visible = visible; return jerry_create_number (RET_OK) } jerry_value_t wrap_widget_t_get_prop_visible (const jerry_value_t func_obj_val, const jerry_value_t this_p, const jerry_value_t args_p [] Const jerry_length_t args_cnt) {widget_t* obj = (widget_t*) jerry_get_pointer (args_p [0], "widget_t*") Return jerry_create_boolean (obj- > visible);} jerryx_handler_register_global ((const jerry_char_t*) "widget_t_set_prop_visible", wrap_widget_t_set_prop_visible) Jerryx_handler_register_global ((const jerry_char_t*) "widget_t_get_prop_visible", wrap_widget_t_get_prop_visible) 3. Binding of constants

Binding of constants, providing a get function for each constant. Such as:

Jerry_value_t get_WIDGET_PROP_MAX_W (const jerry_value_t func_obj_val, const jerry_value_t this_p, const jerry_value_t args_p [], const jerry_length_t args_cnt) {return jerry_create_string_from_utf8 ((const jerry_char_t*) WIDGET_PROP_MAX_W) } jerryx_handler_register_global ((const jerry_char_t*) "WIDGET_PROP_MAX_W", get_WIDGET_PROP_MAX_W); third, the engine has no related code

1. Class encapsulation

Each class has a nativeObj member, which is used to hold the handle to the object in C, which is passed in at construction time.

Each class has a static create function that is responsible for calling the constructor in the C language and creating a JS object.

Class Bitmap {public nativeObj; constructor (nativeObj) {this.nativeObj = nativeObj;} static create () {return new Bitmap (bitmap_create ());}.}

two。 Encapsulation of object properties

Here, the set/get function of Typescript is used, which is very convenient to implement:

Set visible (value) {widget_t_set_prop_visible (this.nativeObj, value);} get visible () {return widget_t_get_prop_visible (this.nativeObj);}

3. Member function encapsulation

Automatically use nativeObj as the first argument to the member function, and then call the bound C function.

Layout () {return widget_layout (this.nativeObj);}

4. Constant encapsulation

Constants are encapsulated as enumerations, but fortunately, Typescript enumerations can be either numeric or string types, which is very convenient to implement.

Enum AlignV {NONE = ALIGN_V_NONE (), MIDDLE = ALIGN_V_MIDDLE (), TOP = ALIGN_V_TOP (), BOTTOM = ALIGN_V_BOTTOM (),}; enum WidgetProp {X = WIDGET_PROP_X (), Y = WIDGET_PROP_Y (), W = WIDGET_PROP_W (), H = WIDGET_PROP_H (),...}; IV. Automatic code generator

All the code is generated by the automatic code generator according to the IDL of awtk. For details, please refer to: tools/js_gen

Index.js is responsible for generating engine-independent code.

Jerryscript.js is responsible for generating jerryscript-related code.

5. Use the example function applicationInit () {var win = Window.create (null, 0,0,0,0); var ok = Button.create (win, 0,0,0,0); ok.setText ("ok"); ok.setSelfLayoutParams ("center", "middle", "50%", "30"); ok.on (EventType.CLICK, function (evt) {var e = PointerEvent.cast (evt) Print ("on click:" + e.x + "+ e.y); return Ret.OK;}; win.layout ();} applicationInit () about the principle of AWTK binding in javascript is shared here. I hope the above content can be helpful to everyone and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.