You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@brooklyn.apache.org by Adrián Nieto Pérez <ad...@lcc.uma.es> on 2015/07/22 17:51:16 UTC
Regarding to drag and drop designer
Hello all,
I found an awesome drag & drop library for AngularJS [1]. It allows the developer to define containers inside each drop zone dynamically among with container types to avoid mixing incompatible components with containers [2]. I think that this kind of implementation could work with Brooklyn YAML philosophy. For example a Location container can has virtual (SameServerEntity for example) and real entities (JBoss7Server), but if you try the oposite it will not work. Also with a confirmation toast the user will be able to input all required and optionals configkeys.
What do you think?
[1] http://marceljuenemann.github.io/angular-drag-and-drop-lists/ <http://marceljuenemann.github.io/angular-drag-and-drop-lists/>
[2] http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested <http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested>
[3] http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types <http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types>
Re: Regarding to drag and drop designer
Posted by Aled Sage <al...@gmail.com>.
Nice! Looks like a powerful library, thanks for that. Will leave any
AngularJS experts to comment further.
Could we combine that kind of drag-and-drop example with being able to
draw connections between the entities (i.e. trying to make it simple to
define the dependencies)?
Aled
On 22/07/2015 08:51, Adrián Nieto Pérez wrote:
> Hello all,
>
> I found an awesome drag & drop library for AngularJS [1]. It allows
> the developer to define containers inside each drop zone dynamically
> among with container types to avoid mixing incompatible components
> with containers [2]. I think that this kind of implementation could
> work with Brooklyn YAML philosophy. For example a Location container
> can has virtual (SameServerEntity for example) and real entities
> (JBoss7Server), but if you try the oposite it will not work. Also with
> a confirmation toast the user will be able to input all required and
> optionals configkeys.
>
> What do you think?
>
> [1] http://marceljuenemann.github.io/angular-drag-and-drop-lists/
> [2]
> http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested
> [3]
> http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types
>
Re: Regarding to drag and drop designer
Posted by Hadrian Zbarcea <hz...@gmail.com>.
Hi Adrian,
I did see this before. It looks like and clean, but it's hard for me to
imagine the full user experience. From the fact that you start with
showing locations on the map I infer that you intend to drill down into
what's deployed at each location. (Btw, that's not very easy to do once
you get SDN or more precisely SD-WANs into the mix).
In terms of user experience, we all agree the goal is to help users
build blueprints, by providing feedback in the webui. Self completion is
probably an obvious feature, probably drag/drop from a catalog, etc. I
think the challenge is to provide the proper visual cues to the user,
for instance inclusion vs reference relationships, editable properties,
etc.
Raul tried to come with a few mock-ups, there was not a lot of feedback.
As the gui experts, maybe you could work together and come up with some
awesome ideas.
Unfortunately, I don't expect to be of a lot of help. I did see
somewhere some interesting graphs, I'll try do dig and send some links.
Cheers,
Hadrian
On 07/23/2015 05:48 AM, Adrián Nieto Pérez wrote:
> Hi Hadrian,
>
> I did some proof of concept of my idea, you can find it on my repository
> [1], it’s very basic AngularJS application and it’s in a very early
> stage so it doesn’t include fancy things like Grunt neither tests and
> it’s pretty empty so just “npm start" to start playing. Anyway, this is
> how it looks just in case you don’t want to download my repo.
>
>
> [1] https://github.com/adriannieto/incubator-brooklyn-material-gui
>
> Thank you!
>
>> El 23/7/2015, a las 11:27, Adrián Nieto Pérez <adrian@lcc.uma.es
>> <ma...@lcc.uma.es>> escribió:
>>
>> Hi Hadrian,
>>
>> I did some proof of concept of my idea, you can find it on my
>> repository [1], it’s very basic AngularJS application and it’s in a
>> very early stage so it doesn’t include fancy things like Grunt neither
>> tests and it’s pretty empty so just “npm start" to start playing.
>> Anyway, this is how it looks just in case you don’t want to download
>> my repo.
>>
>> <PastedGraphic-1.tiff>
>>
>> [1] https://github.com/adriannieto/incubator-brooklyn-material-gui
>>
>>> El 23/7/2015, a las 2:33, Hadrian Zbarcea <hzbarcea@gmail.com
>>> <ma...@gmail.com>> escribió:
>>>
>>> Hi Adrian,
>>>
>>> The library is cool. I would like however to pick your brain on how
>>> exactly the concepts in brooklyn could be conveyed graphically.
>>>
>>> From my previous experience, this kind of representation occupies
>>> much more real estate on a screen (vertically at least) than one line
>>> in an editor that conveys practically the same information. While I
>>> totally agree that a visual representation is crucial, I am not sure
>>> this is the right one.
>>>
>>> To make it clear, this is not criticism in any way. I hope to
>>> encourage you and others who've seen orders of magnitude more ways to
>>> represent things graphically than me to bounce some ideas and come up
>>> with something great.
>>>
>>> Thanks,
>>> Hadrian
>>>
>>> On 07/22/2015 11:51 AM, Adrián Nieto Pérez wrote:
>>>> Hello all,
>>>>
>>>> I found an awesome drag & drop library for AngularJS [1]. It allows the
>>>> developer to define containers inside each drop zone dynamically among
>>>> with container types to avoid mixing incompatible components with
>>>> containers [2]. I think that this kind of implementation could work with
>>>> Brooklyn YAML philosophy. For example a Location container can has
>>>> virtual (SameServerEntity for example) and real entities (JBoss7Server),
>>>> but if you try the oposite it will not work. Also with a confirmation
>>>> toast the user will be able to input all required and optionals
>>>> configkeys.
>>>>
>>>> What do you think?
>>>>
>>>> [1] http://marceljuenemann.github.io/angular-drag-and-drop-lists/
>>>> [2]
>>>> http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested
>>>> [3]
>>>> http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types
>>>>
>>
>
Re: Regarding to drag and drop designer
Posted by Adrián Nieto Pérez <ad...@lcc.uma.es>.
Hi Hadrian,
I did some proof of concept of my idea, you can find it on my repository [1], it’s very basic AngularJS application and it’s in a very early stage so it doesn’t include fancy things like Grunt neither tests and it’s pretty empty so just “npm start" to start playing. Anyway, this is how it looks just in case you don’t want to download my repo.
[1] https://github.com/adriannieto/incubator-brooklyn-material-gui <https://github.com/adriannieto/incubator-brooklyn-material-gui>
Thank you!
> El 23/7/2015, a las 11:27, Adrián Nieto Pérez <ad...@lcc.uma.es> escribió:
>
> Hi Hadrian,
>
> I did some proof of concept of my idea, you can find it on my repository [1], it’s very basic AngularJS application and it’s in a very early stage so it doesn’t include fancy things like Grunt neither tests and it’s pretty empty so just “npm start" to start playing. Anyway, this is how it looks just in case you don’t want to download my repo.
>
> <PastedGraphic-1.tiff>
>
> [1] https://github.com/adriannieto/incubator-brooklyn-material-gui <https://github.com/adriannieto/incubator-brooklyn-material-gui>
>
>> El 23/7/2015, a las 2:33, Hadrian Zbarcea <hzbarcea@gmail.com <ma...@gmail.com>> escribió:
>>
>> Hi Adrian,
>>
>> The library is cool. I would like however to pick your brain on how exactly the concepts in brooklyn could be conveyed graphically.
>>
>> From my previous experience, this kind of representation occupies much more real estate on a screen (vertically at least) than one line in an editor that conveys practically the same information. While I totally agree that a visual representation is crucial, I am not sure this is the right one.
>>
>> To make it clear, this is not criticism in any way. I hope to encourage you and others who've seen orders of magnitude more ways to represent things graphically than me to bounce some ideas and come up with something great.
>>
>> Thanks,
>> Hadrian
>>
>> On 07/22/2015 11:51 AM, Adrián Nieto Pérez wrote:
>>> Hello all,
>>>
>>> I found an awesome drag & drop library for AngularJS [1]. It allows the
>>> developer to define containers inside each drop zone dynamically among
>>> with container types to avoid mixing incompatible components with
>>> containers [2]. I think that this kind of implementation could work with
>>> Brooklyn YAML philosophy. For example a Location container can has
>>> virtual (SameServerEntity for example) and real entities (JBoss7Server),
>>> but if you try the oposite it will not work. Also with a confirmation
>>> toast the user will be able to input all required and optionals configkeys.
>>>
>>> What do you think?
>>>
>>> [1] http://marceljuenemann.github.io/angular-drag-and-drop-lists/ <http://marceljuenemann.github.io/angular-drag-and-drop-lists/>
>>> [2]
>>> http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested <http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested>
>>> [3]
>>> http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types
>>>
>
Re: Regarding to drag and drop designer
Posted by Hadrian Zbarcea <hz...@gmail.com>.
Hi Adrian,
The library is cool. I would like however to pick your brain on how
exactly the concepts in brooklyn could be conveyed graphically.
From my previous experience, this kind of representation occupies much
more real estate on a screen (vertically at least) than one line in an
editor that conveys practically the same information. While I totally
agree that a visual representation is crucial, I am not sure this is the
right one.
To make it clear, this is not criticism in any way. I hope to encourage
you and others who've seen orders of magnitude more ways to represent
things graphically than me to bounce some ideas and come up with
something great.
Thanks,
Hadrian
On 07/22/2015 11:51 AM, Adrián Nieto Pérez wrote:
> Hello all,
>
> I found an awesome drag & drop library for AngularJS [1]. It allows the
> developer to define containers inside each drop zone dynamically among
> with container types to avoid mixing incompatible components with
> containers [2]. I think that this kind of implementation could work with
> Brooklyn YAML philosophy. For example a Location container can has
> virtual (SameServerEntity for example) and real entities (JBoss7Server),
> but if you try the oposite it will not work. Also with a confirmation
> toast the user will be able to input all required and optionals configkeys.
>
> What do you think?
>
> [1] http://marceljuenemann.github.io/angular-drag-and-drop-lists/
> [2]
> http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested
> [3]
> http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types
>