What is the structure of the output file which describes the interfaces created with UI designer ?

Submitted by ghorbelfatma18_... on Mon, 03/30/2020 - 14:35
1
0
-1
2 answers

Submitted by julien.mege on Wed, 04/01/2020 - 11:32
1
0
-1

There is no angularJS logic to generate the "page.json", It is just a JSON representation of the Widget/Container/Variable/Asset list, that you create or drag and drop in the white board of UI-Designer. But it is strongly bind to our UI-Designer architecture (using Raw or Variables with tow way data binding of AngularJS.

If i had to do React designer for example, i think i would restart from scratch (by the way, i would prefer to have a try with pure JavaScript and Web component instead of react ? )

Comments

Submitted by ghorbelfatma18_... on Fri, 04/03/2020 - 10:31

There is no API exposed by the U Designer so that I can use maybe the JSON object you've talked about that is converted to angularjs directive?

Permalink

Submitted by julien.mege on Tue, 03/31/2020 - 11:49
1
0
-1

Hello,

the output file generated by UI-Designer is a Zip file with this structure:

MyPage.zip/
├── resources/
│ ├── assets/
│ ├── css/
│ ├── fonts/
│ ├── js/
│ ├── page.json
│ └── index.html
└── page.properties

the interesting files are:

- "page.properties", that describe your page authorizations and unique name. (see https://documentation.bonitasoft.com/bonita/7.10/resource-management)

- "page.json", that describe the Page content in a JSON format (not inline to allows those files to be merged in case of conflict, using git for example)

This JSON structure, contains:

  • page info like: designerVersion", "previousDesignerVersion", "id", "name", "lastUpdate" ,uuid", "type", "description", "displayName"
  • page raw list and content of the raw (UID format, play with UID to get all the element representation you need)
  • page assets definition
  • page variables definition

hope this helps,

Julien.

Comments

Submitted by ghorbelfatma18_... on Tue, 03/31/2020 - 17:48

yeah I know this structure when I export a page or a form , but my main question is the interface created with UI designer (page,form) doesn't have another file that describes its structure(like an XML or JSON) a language to describes what's within the interface (for example

and how AngularJS is applied to develop such interface ?

is there is another way to use the same structure of interface but compiled with another framework (like angular or react) ?

Permalink
Submitted by ghorbelfatma18_... on Tue, 03/31/2020 - 17:49

yeah I know this structure when I export a page or a form , but my main question is the interface created with UI designer (page,form) doesn't have another file that describes its structure(like an XML or JSON) a language to describes what's within the interface (for example

and how AngularJS is applied to develop such interface ?

is there is another way to use the same structure of interface but compiled with another framework (like angular or react) ?

Permalink
Submitted by julien.mege on Tue, 03/31/2020 - 18:34

You are right, our UI-Designer core for the moment is mainly a converter, that take some JSON object to convert it into some angularJS directive, so a global descriptor of the supported objects would be nice.

Unfortunately, it is actually just an internal logic stored by widget inside UI-Designer. The github repository of UI-Designer is not public yet, to show you how we generate the AngularJS pages from JSON.

You can found more source code by clicking on the option "... > View" for any widget on your UI-Designer white board. It will show you for each widget, the HTML template and Javascript controler, to compare with the related JSON you could found in the "page.json".

Theoretically, you could imagine to develop a new part of the application that would generate pages from our JSON into a react page. But it is not one of our target.

Permalink
Submitted by ghorbelfatma18_... on Tue, 03/31/2020 - 19:01

I see , you mean I can use the JSON file generated "page.json" to create a page but in react ? Is it possible to do such a thing ? Or this file is generated after applying the AngulatJS logic ?

Permalink
Notifications