[Release] OOP Gui Editor based on layer

[minipopov 16]

Hello,

 

OOP macro File : https://github.com/code34/oop.h

Today i wanna share with you my gui editor. This is the link https://github.com/minipopov/GuiEditor

 

Why new editor?

 

-Based on layer with ctrlGroup

-You could use your own style control directly from mission

-You could export HPP (with EVH link for oop user)

-You could export OOP file which is load on createDialog and delete variable on closeDialog

-OOP file will contain all functions associate with your dialog. You could set from editor a name for each control which is the name of variable inside class and add init function

 

Press F1 in mission you will see all shortcut. Let's talk about other thing.

 

In initPlayerLocal.sqf you could set OOP_GuiEditor_ListControl which is an array of control avaible. You could remove all, add yours. The only thing that you have to do for add your control is to fill the file styles/customStyle.hpp with your style.

 

Let's create together a new simple dialog. I named it shop with idd 8600. I create a simple dialog with 1 layer. Inside my layer i would create 1 LB which i named "itemList" and 2 button btnClose, btnOK. On my LB i check in event "Init" "OnLBSelChanged".

Screenshot:http://prntscr.com/i2r1zj

 

Let's look hpp file generated:

 

Have a look for people who doesn't use OOP. All Event call static function to OOP class that you don't have. You need to change the call AND remove onLoad/unLoad event on display.

Spoiler

class shop {
    idd = 8600;
    name= "shop";
    movingEnable = false;
    enableSimulation = true;
    onLoad = "with missionNamespace do{['new', _this select 0] call oo_shop;};";
    onUnload = "with missionNamespace do{['static', ['deconstructor',nil]] call oo_shop;};";
    class controlsBackground {
        class OOP_MainLayer_100_100 : OOP_MainLayer {
            idc = 100;
            x = -61.9078 * pixelGrid * pixelW;
            y = -28.35 * pixelGrid * pixelH;
            w = 210.691 * pixelGrid * pixelW;
            h = 125.95 * pixelGrid * pixelH;
            class controls{
                class OOP_SubLayer_101_101 : OOP_SubLayer {
                    idc = 101;
                    x = 73.7417 * pixelGrid * pixelW;
                    y = 30.228 * pixelGrid * pixelH;
                    w = 47.4054 * pixelGrid * pixelW;
                    h = 42.823 * pixelGrid * pixelH;
                    class controls{
                        class itemList_102: OOP_Listbox {
                            idc = 102;
                            x = 2.63363 * pixelGrid * pixelW;
                            y = 2.519 * pixelGrid * pixelH;
                            w = 34.2372 * pixelGrid * pixelW;
                            h = 27.709 * pixelGrid * pixelH;
                            onLBSelChanged = "['static', ['onLBSelChanged_itemList', _this]] call oo_shop;";
                        };
                        class btnClose_103: OOP_Button {
                            idc = 103;
                            x = 2.63363 * pixelGrid * pixelW;
                            y = 32.747 * pixelGrid * pixelH;
                            w = 15.8018 * pixelGrid * pixelW;
                            h = 5.038 * pixelGrid * pixelH;
                            text = "Close";
                            action = "['static', ['btnAction_btnClose', nil]] call oo_shop;";
                        };
                        class btnOK_104: OOP_Button {
                            idc = 104;
                            x = 21.0691 * pixelGrid * pixelW;
                            y = 32.747 * pixelGrid * pixelH;
                            w = 15.8018 * pixelGrid * pixelW;
                            h = 5.038 * pixelGrid * pixelH;
                            text = "Valider";
                            action = "['static', ['btnAction_btnOK', nil]] call oo_shop;";
                        };
                    };
                };
            };
        };
    };
    class controls {};
};

/*
["shop",8600,[[[["73.7417 * pixelGrid * pixelW","30.228 * pixelGrid * pixelH","47.4054 * pixelGrid * pixelW","42.823 * pixelGrid * pixelH"],"","","","OOP_SubLayer",true,[],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1]],[[[["2.63363 * pixelGrid * pixelW","2.519 * pixelGrid * pixelH","34.2372 * pixelGrid * pixelW","27.709 * pixelGrid * pixelH"],"","itemList","","OOP_Listbox",true,["onLBSelChanged","Init"],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1]]],[[["2.63363 * pixelGrid * pixelW","32.747 * pixelGrid * pixelH","15.8018 * pixelGrid * pixelW","5.038 * pixelGrid * pixelH"],"Close","btnClose","","OOP_Button",true,[],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1]]],[[["21.0691 * pixelGrid * pixelW","32.747 * pixelGrid * pixelH","15.8018 * pixelGrid * pixelW","5.038 * pixelGrid * pixelH"],"Valider","btnOK","","OOP_Button",true,[],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1]]]]]]]
*/
 

Hpp contain string to reimport later your dialog

 

Now let's generate oop class

 

Spoiler

#include "..\oop.h"
CLASS("oo_shop")

    PUBLIC STATIC_UI_VARIABLE("control", "btnClose");
    PUBLIC STATIC_UI_VARIABLE("control", "btnOK");
    PUBLIC STATIC_UI_VARIABLE("control", "itemList");
    PUBLIC STATIC_UI_VARIABLE("control", "MainLayer");
    PUBLIC STATIC_UI_VARIABLE("display", "Display");

    PUBLIC FUNCTION("display", "constructor"){
        disableSerialization;
        MEMBER("Display", _this);
        MEMBER("MainLayer", _this displayCtrl 100);
        MEMBER("btnClose", _this displayCtrl 103);
        MEMBER("btnOK", _this displayCtrl 104);
        MEMBER("itemList", _this displayCtrl 102);
        MEMBER("Init", nil);
    };
    PUBLIC FUNCTION("", "Init"){
        //Add your content here to init display
    };

    /*
    *    onLBSelChanged:
    *        The selection in a listbox is changed. The left mouse button has been released and the new selection is fully made.
    *        Returns the control and the selected element index.
    */
    PUBLIC FUNCTION("array", "onLBSelChanged_itemList") {
        private _control = _this select 0;
        private _index = _this select 1;

    };

    //You could check: https://community.bistudio.com/wiki/User_Interface_Event_Handlers
    PUBLIC FUNCTION("any", "Init_itemList") {
        //import your content

    };

    PUBLIC FUNCTION("", "btnAction_btnClose") {

    };

    PUBLIC FUNCTION("", "btnAction_btnOK") {

    };
    PUBLIC FUNCTION("", "getbtnClose") FUNC_GETVAR("btnClose");
    PUBLIC FUNCTION("", "getbtnOK") FUNC_GETVAR("btnOK");
    PUBLIC FUNCTION("", "getDisplay") FUNC_GETVAR("Display");
    PUBLIC FUNCTION("", "getitemList") FUNC_GETVAR("itemList");
    PUBLIC FUNCTION("", "getMainLayer") FUNC_GETVAR("MainLayer");
    PUBLIC FUNCTION("control", "setbtnClose"){ MEMBER("btnClose", _this); };
    PUBLIC FUNCTION("control", "setbtnOK"){ MEMBER("btnOK", _this); };
    PUBLIC FUNCTION("control", "setitemList"){ MEMBER("itemList", _this); };
    PUBLIC FUNCTION("control", "setMainLayer"){ MEMBER("MainLayer", _this); };
    PUBLIC FUNCTION("display", "setDisplay"){ MEMBER("Display", _this); };
    PUBLIC FUNCTION("", "deconstructor"){
        DELETE_UI_VARIABLE("btnClose");
        DELETE_UI_VARIABLE("btnOK");
        DELETE_UI_VARIABLE("itemList");
        DELETE_UI_VARIABLE("MainLayer");
        DELETE_UI_VARIABLE("Display");
    };
ENDCLASS;

 

First there is standard function Init that it executed at openning your display.

For ours BUTTONS

We have 2 buttons on our hpp, so 2 functions btnAction_btnOK and btnAction_btnClose. They are call on click

 

For Listbox

We have Init function that you could call like this ["static",["onLBSelChanged_itemList", _whateveryouwant] call oo_shop. You could passed to the function anything you wan't and do your job... We have this function cause we check Init

There is onLBSelChanged_itemList that is called on selected element on LB. EVH functions are auto fill.

 

Now in-game how to use that?

Just by using createDialog "shop", this gonna call our constructor function and get/set all controls, exec standard init.

How to delete all vars & clear memory?

closeDialog 0;

Gonna set all variable to nil and clear memory

 

Hope that i don't let but inside my code ^^. We're on beta version but, it's seems work well

[DÄZ 56]

Nice, I'll try that. Thank you

[minipopov 16]

Good :)

[minipopov 16]

Well after few comment from @code34 i change the way you call function on dialog. Now it s create public var. Which is shop in our exemple. And now the way to execute funtion form outside is [functionName, _args] call shop.

[code34 248]

This tool is so huge. I create last night a Dialog in few minutes and integrate it directly with my own code.

 

Thanks so much Minipopov for this, dont think users see this other master piece for ARMA :) Perhaps a simple video could be great.

[code34 248]

Minipopov had released a new version. You had to sync your files with git :D

[code34 248]

Hello Minipopov,

 

I just release a french video tutorial about how to use OOP Gui Editor

https://arma409626711.wordpress.com/2018/09/01/oop-gui-editor-comment-creer-une-interface-en-oriente-objet/

[code34 248]

Hi,

 

I just release the second part of the video tutorial :)

https://arma409626711.wordpress.com/2018/09/07/oop-gui-editor-comment-creer-une-interface-en-oriente-objet-part-2/