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

[GMeur]

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.

[Martin KJELDSEN · Accepted solution]

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]

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]

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.

[Martin KJELDSEN]

Hi,

Sounds great. Let me know if you want to discuss this more - It's an interesting topic and i'd love to hear if you come up with anything interesting while you're working on the project.

/Martin