Skip to main content
GMeur
Associate III
May 14, 2019
Solved

How would you go about creating a class that's re-usable in various projects?

  • May 14, 2019
  • 2 replies
  • 1102 views

Hi,

I'm not sure how I should go about designing a widget class that can be reused in various projects? Say I want to create a keyboard class (container?) that can be easily imported in all my projects that need one, how should design it?

Thanks in advance.

This topic has been closed for replies.
Best answer by Martin KJELDSEN

Hi @Benjamin GUILLOUD​,

There's no official way to do it, like a cross-project widget/custom-container store. Until the time that's implemented you have two options:

1) Simply write the code manually and version control it in your own widget store

2) Create an empty project in the designer where you store all your CustomContainer definitions. What you can do then, when you create a new project, is to merge/import these definitions from the .touchgfx file of your widget-store project into your new project and they should be code-generated by the designer. Here's what you need to import from the .touchgfx file:

 "CustomContainerDefinitions": [
 {
 "Components": [
 {
 "Color": {
 "Red": 255,
 "Green": 255,
 "Blue": 255
 },
 "Alpha": 255,
 "Name": "box1",
 "X": 0,
 "Y": 0,
 "Width": 250,
 "Height": 250,
 "Type": "Box",
 "Visible": true,
 "Draggable": false,
 "Clickable": false,
 "Fadeable": false,
 "Moveable": false
 },
 {
 "Color": {
 "Red": 0,
 "Green": 151,
 "Blue": 255
 },
 "Direction": "Right",
 "Alpha": 255,
 "Style": "Style3",
 "FileNameBackground": "__designer\\blue_progressindicators_bg_medium_progress_indicator_bg_square_0_degrees.png",
 "IndicatorPositionX": 2,
 "IndicatorPositionY": 2,
 "IndicatorPositionWidth": 180,
 "IndicatorPositionHeight": 16,
 "ProgressRangeMin": 0,
 "ProgressRangeMax": 100,
 "ProgressRangeSteps": 0,
 "ProgressRangeStepsMin": 0,
 "ProgressInitialValue": 60,
 "Name": "boxProgress1",
 "X": 21,
 "Y": 56,
 "Width": 184,
 "Height": 20,
 "Type": "BoxProgress",
 "Visible": true,
 "Draggable": false,
 "Clickable": false,
 "Fadeable": false,
 "Moveable": false
 }
 ],
 "Interactions": [],
 "Name": "CustomContainer1",
 "X": 0,
 "Y": 0,
 "Width": 250,
 "Height": 250,
 "Type": "CustomContainerDefinition",
 "Visible": true,
 "Draggable": false,
 "Clickable": false,
 "Fadeable": false,
 "Moveable": false
 },

The downside to this solution is that you will not carry over any modifications you've made to the concrete implementation of the generated base-classes - You'll have to carry that over manually, but you could probably script your way out of that. In either case, none of these solutions are optimal and it's a bit of a manual exercise.

Hope that helps a bit.

Best regards,

Martin

2 replies

Martin KJELDSEN
Martin KJELDSENBest answer
Principal III
May 14, 2019

Hi @Benjamin GUILLOUD​,

There's no official way to do it, like a cross-project widget/custom-container store. Until the time that's implemented you have two options:

1) Simply write the code manually and version control it in your own widget store

2) Create an empty project in the designer where you store all your CustomContainer definitions. What you can do then, when you create a new project, is to merge/import these definitions from the .touchgfx file of your widget-store project into your new project and they should be code-generated by the designer. Here's what you need to import from the .touchgfx file:

 "CustomContainerDefinitions": [
 {
 "Components": [
 {
 "Color": {
 "Red": 255,
 "Green": 255,
 "Blue": 255
 },
 "Alpha": 255,
 "Name": "box1",
 "X": 0,
 "Y": 0,
 "Width": 250,
 "Height": 250,
 "Type": "Box",
 "Visible": true,
 "Draggable": false,
 "Clickable": false,
 "Fadeable": false,
 "Moveable": false
 },
 {
 "Color": {
 "Red": 0,
 "Green": 151,
 "Blue": 255
 },
 "Direction": "Right",
 "Alpha": 255,
 "Style": "Style3",
 "FileNameBackground": "__designer\\blue_progressindicators_bg_medium_progress_indicator_bg_square_0_degrees.png",
 "IndicatorPositionX": 2,
 "IndicatorPositionY": 2,
 "IndicatorPositionWidth": 180,
 "IndicatorPositionHeight": 16,
 "ProgressRangeMin": 0,
 "ProgressRangeMax": 100,
 "ProgressRangeSteps": 0,
 "ProgressRangeStepsMin": 0,
 "ProgressInitialValue": 60,
 "Name": "boxProgress1",
 "X": 21,
 "Y": 56,
 "Width": 184,
 "Height": 20,
 "Type": "BoxProgress",
 "Visible": true,
 "Draggable": false,
 "Clickable": false,
 "Fadeable": false,
 "Moveable": false
 }
 ],
 "Interactions": [],
 "Name": "CustomContainer1",
 "X": 0,
 "Y": 0,
 "Width": 250,
 "Height": 250,
 "Type": "CustomContainerDefinition",
 "Visible": true,
 "Draggable": false,
 "Clickable": false,
 "Fadeable": false,
 "Moveable": false
 },

The downside to this solution is that you will not carry over any modifications you've made to the concrete implementation of the generated base-classes - You'll have to carry that over manually, but you could probably script your way out of that. In either case, none of these solutions are optimal and it's a bit of a manual exercise.

Hope that helps a bit.

Best regards,

Martin

Martin KJELDSEN
Principal III
May 21, 2019

We've discussed this briefly and there's no generic solution in the pipeline to support this. I'd be interested in hearing your opinion on what i wrote in the previous post.

/Martin

GMeur
GMeurAuthor
Associate III
May 22, 2019

Hi,

I forgot to thank you for your answer. For now, we've opted for your first idea which seems more flexible and to better suit what we're looking for. I think that going that way, it's gonna take up a bit longer to set up everything, but once our widget library is constructed, it's gonna bring us many advantages compared to the other solution.