Chips Component

[olafkrueger]

I'd like to implement the Chips component:
https://www.google.com/design/spec/components/chips.html#
https://material.angularjs.org/latest/demo/chips

I would try to use a List with TileLayout that uses a "Chip" ItemRenderer to display a created Chip.
If it's possible the last item always should use another "NewChip" ItemRenderer for creating new chips.
To avoid wasting time with this approach, I'd ask if this is a proper way.

Thanks,
Olaf

[rui-cruz]

Hi @ok-at-github,

Good idea!

The list or datagroup is the way to go, but the layout I don't advise the tile because all collumnwidth would be the same, I would use some kind of flowlayout. Extending the datagroup would be easier because the chips don't have selectedItem/drag&drop etc.

You also have 2 options to implement the "NewChip", by overriding the datagroup and change the methods that handle itemrenderers, or by itemrendererFunction and manage the dataprovider to make sure that there is only one "newchip" item and is at last position of array.

Now I'm more motivated to finish the redesign ^^

[JCOTV]

Hi all

I made something similar in a project for tags management. Like you said i
used a datagroup and the itemRenderer can delete itself from the array. I
can share the code if it helps. Meanwhile you can see the pics, its very
simple and maybe you could spot a lots of improvements.

El mié., 2 de dic. de 2015 a la(s) 04:55, Rui Cruz [email protected]
escribió:

Hi @ok-at-github https://github.com/ok-at-github,

Good idea!

The list or datagroup is the way to go, but the layout I don't advise the
tile because all collumnwidth would be the same, I would use some kind of
flowlayout. Extending the datagroup would be easier because the chips don't
have selectedItem/drag&drop etc.

You also have 2 options to implement the "NewChip", by overriding the
datagroup and change the methods that handle itemrenderers, or by
itemrendererFunction and manage the dataprovider to make sure that there is
only one "newchip" item and is at last position of array.

Now I'm more motivated to finish the redesign ^^

—
Reply to this email directly or view it on GitHub
#22 (comment)
.

[rui-cruz]

Hi @JCOTV ,

I can't see the images, but sure! share that code :) can you create a gist?

[JCOTV]

I'll do it

[image: tagComp1.png]

[image: tagComp2.png]

El mié., 2 de dic. de 2015 a la(s) 08:53, Rui Cruz [email protected]
escribió:

Hi @JCOTV https://github.com/JCOTV ,

I can't see the images, but sure! share that code :) can you create a gist?

—
Reply to this email directly or view it on GitHub
#22 (comment)
.

[JCOTV]

Ok, i think I manage to do it, its my firts, hope it can help you in some
way.

https://gist.github.com/JCOTV/041b8ab99119d3b18d03

El mié., 2 de dic. de 2015 a la(s) 08:56, José Carlos Onofre Huerta <
[email protected]> escribió:

I'll do it

[image: tagComp1.png]

[image: tagComp2.png]

El mié., 2 de dic. de 2015 a la(s) 08:53, Rui Cruz <
[email protected]> escribió:

Hi @JCOTV https://github.com/JCOTV ,

I can't see the images, but sure! share that code :) can you create a
gist?

—
Reply to this email directly or view it on GitHub
#22 (comment)
.

[rui-cruz]

Thank you @JCOTV

Congrats on your first gist! ^^

[olafkrueger]

Thank you @JCOTV for sharing your approach, I'll check it out!

[olafkrueger]

I've just implemented a first draft, I'll try to push some code to this repo tomorrow!

Screenshot:

[olafkrueger]

I've just create a new branch "Chips" that includes the first draft.
Currently there's one known issue:
Using a given "FlowLayout.as" component (See source code to pick up the link to the author) works fine,
but the surrounding components of the Chip component doesn't respect the growing size of the Chips component. Seems that there's some measuring or whatever inside the flow layout component needed. Has anybody any idea?

Screenshot of the first draft:

[rui-cruz]

Yeah.. I've solved that on some other project. I'll merge that change on
your branch ;)

Em 03/12/2015 21:36, "ok-at-github" [email protected] escreveu:

I've just create a new branch "Chips" that includes the first draft.
Currently there's one known issue:
Using a given "FlowLayout.as" component (See source code to pick up the
link to the author) works fine,
but the surrounding components of the Chip component doesn't respect the
growing size of the Chips component. Seems that there's some measuring or
whatever inside te flow layout component needed. Has anybody any idea?

Screenshot of the first draft:

—
Reply to this email directly or view it on GitHub.

[olafkrueger]

Yeah.. I've solved that on some other project. I'll merge that change on
your branch ;)

Great!

I've just stumbled over the AS3Commons lib.
It seems that it provides a solution with its implementation of HLayout:
http://sibirjak.com/osflash/projects/as3commons-ui/
This could also be an option but would gernerate a dependendy to this lib.
(If it won't be donated to ApacheFlex anytime)

I'm looking forward to see Spark-Material growing ;-)
Olaf