I have tried to solve one – challenging for me – issue in SDK development which is “quick start up for new components”.

Today, I can introduce a first implementation of a code generation for components!

Always when I start a new component, I have to make a lot of copy-paste work, especially when my component is using arrays. It is known that SDK does not support Arrays out of the box, so there is no automation for array dialog, only way is to write own additional property sheet with the specific array implementation.

As you could see many of my components do not have additional property sheets – and now I am able to improve it.

How?

I decided to generate the property sheets for components where there is no need on special dependencies between properties, especially the arrays were interesting for me. I have used the implementation of Design Studio SDK: Segmented Button Component to accomplish it w/o writing ZTL nor APS code…

Idea

With right combination of additional specification which is not in the contribution.xml file and pre-defined templates and search-replace for patterns I can get a generated content which can be used as starting point for the implementation. This means, the time from an component idea to first runnable body of the component will get reduced to a minimum and I can concentrate on real implementation…

Implementation Try-Out

As you know, I have coded the automated HELP generation for community components.. I mean this one Component List – SCN Design Studio Community.

This is parsing all contribution files and making an HTML file, so using the same code with the json extension in first step the definition can be generated as well (of course for basic non complex components)

Starting Point (here starts the technical content)

Thanks to Michael who merged our 2 Accordion implementations, we have gained a nice implementation for working with lists, this one:

aps2.PNG

aps3.PNG

My first thought was, I can extend a bit the contribution.xml file for the property definition and try to generate dynamically such list-property-editor. I have tried, but the contribution.xml file gets validated on load, so it is not possible to extend the definition…

My Solution: I have created additional specification, which I call “contribution.json”, like this one:

SegmentedButton spec/contribution.json

I have placed there all additional information I need to generate the sheet out of those, like this one for the DoubleArray (array of array) – click here to get the selected content – this was the complex one.


But from the beginning…


The type, a property also incuded in contribution.xml, but for arrays it is always a “String”, so I have the extension:

     gen-type:DoubleArray,

The content, defines the name of the array-property, here it is button:


    button:{

And the sub-properties, which are describing the button – it is again an array with defined sequence of properties:

gen-type:Array, // this defines link to some template for Arrays
gen-sequence:key,text,image,selected, // this defines the sequence of attributes

and every single property is defined similar, like the text property:

text: {

   gen-desc: Text for the button,

   gen-type: String,

}

in “DoubleArray” I have again an array of “items”:

    item:{


and its attributes

gen-type:Array, // this defines link to some template for Arrays
gen-sequence:key,text,image,selected, // this defines the sequence of attributes


Playing this again, the specification is done and I can load some templates to generate required ZTL functions and APS code…

The Result:

w/o writing single line of code, i have APS like this:

aps5.PNG

with details:

asp6.PNG

Btw, the others properties are 1:1 from the normal property sheet, with following definition:

   “DImageSize”:{

      “gen-type”:”choice”,

      “gen-mode”:”aps”,

   },

and I can immediately see an DropDown in APS code which is bound on the real property.

The common CSS assigned to the APS component makes the rest.

In Addition, ZTL functions are also for free…

If you check the ZTL functions here def/contribution.ztl you see a lot of code which is generated based on the spec from contribution.json

Next Steps

I will add also soon a generation of the JS file, again with the idea to get some runnable body and be able to concentrate on the content.

Also some extensions are required for simple arrays.

Summary

As of today, this works only in the community package, but if someone likes this idea and finds it helpfull, I can refactor the code to make this available also for standalone implementations.

You can try it out with the Design Studio SDK: Segmented Button Component which is available in the installation package as of today.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply