org-scn-design-studio-community / sdkpackage

SDK Package of SCN Design Studio Community
Apache License 2.0
32 stars 29 forks source link

APS 3.0: Enhance the available controls with Buttons and coded actions, and more ? #101

Closed franckblais closed 8 years ago

franckblais commented 8 years ago

Hi again :)

I would like to add in my APS a parsing function. The use-cause would be: copy paste a list of map areas (format <area id="1" coords="50,60" ... /> several times). Upon pressing the Parse button, I want to break down those areas and fill a APS array with the different values.

I had a look at which APS controls we already have, and except the text and the array of subtypes, it seems no buttons for instance.

From your point of view, would it be difficult to develop ? Do you think it could have a value-added ? Do you have in mind more ideas of controls ? I guess we would require to code a callback function in the APS and create the corresponding methods in the main JS file. But I remember that interaction between APS works only in one way ?

I'll have a look at the APS coding, see if I can think of something easy to generate ...

KarolKalisz commented 8 years ago

Hi Frank,

the structure created by Mike is allowing adding and "registering" of new controls which are self containing, get the property as string and can return new property when changed.

all types are as separate files in: https://github.com/org-scn-design-studio-community/sdkpackage/tree/master/src/org.scn.community.shared/aps

the class https://github.com/org-scn-design-studio-community/sdkpackage/blob/master/src/org.scn.community.shared/aps/PropertyPage.js is dynamically requesting the controls.

for your topic - you need to ask the question first: do you want new function in existing control (like import definition in array control) or special control which serializes some properties into new kind of array?

Karol

entmike commented 8 years ago

Hey Franck,

Karol is correct - This is the pattern I have established to make dropping in new APS controls very easy. Basically when you describe your property during specification and give it an "apsControl" value, the APS will always then look for the "handler" via a require call to this subfolder in the shared project's aps folder by the same name.

For instance, "text" will point to "aps/text.js".

There are 3 main properties you will want to return in your new APS handler.

getter is the function that should process your control's value accessor to return to the Design Studio designtime. The getter is called by the APS logic whenever your control's change handler signals a change.

setter as you might imagine is the function that handles setting your new control's value. The setter is called any time the Design Studio design time setter is fired (such as upon property sheet load, app load, or if you were to make the changes in standard property sheet etc)

createComponent is a sort of factory function that instantiates the component itself. This is where you instantiate either a standard UI5 component, such as in the case of 'text', a TextInput, or your own extended version of a UI5 component. You also want to attach an appropriate change handler in this createComponent call so that the changeHandler can be signaled, thus completing the loop.

I have several components in various states of complexity that should serve as good examples of what you can do in the 'aps' folder that Karol mentioned.

'text' is the easiest, as it is very small and basic.

'spinner' is probably a decent, if primitive, example of a "spinner control" (text input with an incrementor and decrementor button) that show how you can use UI5's .extend to both define your extension and then use it in createComponent.

'script' is an example of having just a simple Button that triggers the design time property dialog box. This is useful for Script properties or Data Selection properties, for instance.

If you want something that can easily build you a JSON array, look at this component:

https://github.com/org-scn-design-studio-community/sdkpackage/blob/master/src/org.scn.community.basics/res/FioriAppHeader/FioriAppHeader.js

Then look at the property I am defining called 'itemConfig'. You can see that this one uses an apsControl called 'complexcollection', where you can then further nest sub-properties of different APS types and it packs this all nicely into a table control with a sort of master/detail editing flow.

For truly insane examples, check (or avoid) 'columnconfig', 'byodata', or anything map-related.

Hope this helps!

franckblais commented 8 years ago

Hi,

Thank you for the informations !

entmike commented 8 years ago

Hey Franck,

Are you good on this topic? Should we close it or leave it open? Up to you!

franckblais commented 8 years ago

Yeah, i'm ok with what we have now. I'll manage if requires anything else :) Thanks !