Re: First Theme in place

[Alex Harui]

Looks interesting.  I thought there are (or used to be) issues with SVG
and changing some aspect of the SVG on hovering over a button or checkbox,
so please make sure your solutions make rollover changes possible.

Thanks,
-Alex

On 2/18/18, 8:36 AM, "carlos.rov...@gmail.com on behalf of Carlos Rovira"
 wrote:

>Hi Alex,
>
>I was investigating SVG possibilities and I think we have many options
>[1].
>As well regarding make all SVG I think you refer to this and seems
>possible
>(example for a checkbox) [2]
>
>So in the end my workflow is to draw in Sketch and export code in SVG.
>then
>parametrize the SVG vía CSS (fill, stroke colors, effects like
>blur,..etc..
>
>I'll be working starting from this.
>
>[1] 
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcss-trick
>s.com%2Fusing-svg%2F=02%7C01%7Caharui%40adobe.com%7C80e3cb8e283749bc8
>8f608d576eddbaf%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365456863245
>79420=IiZDbYLO6RU8gwWSgrYYoyifpNWg0idC3g7K%2BHzTwl8%3D=0
>[2] 
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcodepen.i
>o%2Fseanseansean%2Fpen%2FIAcvD=02%7C01%7Caharui%40adobe.com%7C80e3cb8
>e283749bc88f608d576eddbaf%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636
>545686324579420=i45r8IORY9b3el6DelMbyI8NkV9Nv7XeHvOPX%2Fni9Yc%3D
>erved=0
>
>
>
>
>2018-02-13 19:18 GMT+01:00 Alex Harui :
>
>> Hi Carlos,
>>
>> Yes, I would love it if there was a way to have a simpler HTML
>>structure.
>> I saw this article [1] implied you could hide the checkbox.
>> I don't know for sure, but my sense is that the HTML structure used by
>> bootstrap and mdl couldn't take advantage of browsers supporting
>> display:none to hide the checkbox.  If you have time, it would be
>> interesting to see if you can hide the checkbox and set a
>>background-image
>> to some SVG.  IMO, it would be ok if truly allowing any visuals required
>> CSS3 support in the browser.  You could have another set of views that
>>use
>> the MDL-like HTML Trees.
>>
>> IMO, if you can draw every pixel of the various HTML Input controls by
>> hiding the default look and drawing background-images, and mouse hit
>> detection still works, you will have a pattern that is closest to that
>>of
>> Spark in Flex.  Even closer would be to have a Div with an SVGElement in
>> front or in back of a control with alpha=0, but that seems heavy to me.
>>
>> It occurred to me how this effort may be analogous to Feathers and
>> Starling.  Flash has SimpleButton.  You give it 3 views (up, down,
>>hover)
>> and you are done.  But if that isn't enough control (can't easily do
>> disabled view) then you use a Sprite and write your own mouse code.  And
>> then you get for a little more code, things like focus and
>>accessibility.
>> Then if that's not good enough, you use the Stage3D and start writing
>> controls that work there, but then you have to draw everything and write
>> more code for mouse handling and focus and accessibility.  I think you
>>can
>> find a way in Royale to draw everything, but it might turn out to be a
>>lot
>> of work in the same way.  The less built-in behavior you use, the more
>> work it will be.
>>
>> Good luck,
>> -Alex
>>
>> [1]
>> 
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.css3.
>>com%2Fimplementing-custom-checkboxes-and-radio-buttons-=02%7C01%7Cah
>>arui%40adobe.com%7C80e3cb8e283749bc88f608d576eddbaf%7Cfa7b1b5a7b34438794a
>>ed2c178decee1%7C0%7C0%7C636545686324579420=vbxDDTMw2U2ky%2B9kJV8XY8
>>e%2FvqDzsj8OpRkQKarolQA%3D=0
>> with-c
>> ss3/
>>
>> On 2/12/18, 2:10 PM, "carlos.rov...@gmail.com on behalf of Carlos
>>Rovira"
>>  wrote:
>>
>> >Hi Alex,
>> >
>> >very good questions here. Sincerely I'd like to have responses but this
>> >path is completely new for me and need to experiment with it.
>> >If someone has examples or urls where this is covered, please share
>>here,
>> >since I'm starting right now to see what can be done.
>> >
>> >As you see, yesterday I started solving the three project structure and
>> >put
>> >one component in place. That component has a structure similar as you
>>see
>> >to what people is doing out there with bootstrap, mdl, and others.
>>Maybe
>> >that's the best right now, but I'd like to know if something can be
>>done
>> >with SVG.
>> >The perfect world would be to have the simplest html structure that
>>could
>> >be stylized with basic CSS and/or SVG so you can have almost an
>>infinite
>> >set
>> >of variations and many people could create its own themes based in a
>> >concrete structure.
>> >
>> >One thing I want to explore is CSS structure, For example, instead of
>>one
>> >CSS to rule them all, I want to have one CSS per component, so you can
>> >easily go to
>> >"TextField.css" and change the look and feel of that concrete
>>component.
>> >The in the pom.xml, you'll have all .css added so the final 

Re: First Theme in place

[Carlos Rovira]

Hi Alex,

I was investigating SVG possibilities and I think we have many options [1].
As well regarding make all SVG I think you refer to this and seems possible
(example for a checkbox) [2]

So in the end my workflow is to draw in Sketch and export code in SVG. then
parametrize the SVG vía CSS (fill, stroke colors, effects like blur,..etc..

I'll be working starting from this.

[1] https://css-tricks.com/using-svg/
[2] https://codepen.io/seanseansean/pen/IAcvD




2018-02-13 19:18 GMT+01:00 Alex Harui :

> Hi Carlos,
>
> Yes, I would love it if there was a way to have a simpler HTML structure.
> I saw this article [1] implied you could hide the checkbox.
> I don't know for sure, but my sense is that the HTML structure used by
> bootstrap and mdl couldn't take advantage of browsers supporting
> display:none to hide the checkbox.  If you have time, it would be
> interesting to see if you can hide the checkbox and set a background-image
> to some SVG.  IMO, it would be ok if truly allowing any visuals required
> CSS3 support in the browser.  You could have another set of views that use
> the MDL-like HTML Trees.
>
> IMO, if you can draw every pixel of the various HTML Input controls by
> hiding the default look and drawing background-images, and mouse hit
> detection still works, you will have a pattern that is closest to that of
> Spark in Flex.  Even closer would be to have a Div with an SVGElement in
> front or in back of a control with alpha=0, but that seems heavy to me.
>
> It occurred to me how this effort may be analogous to Feathers and
> Starling.  Flash has SimpleButton.  You give it 3 views (up, down, hover)
> and you are done.  But if that isn't enough control (can't easily do
> disabled view) then you use a Sprite and write your own mouse code.  And
> then you get for a little more code, things like focus and accessibility.
> Then if that's not good enough, you use the Stage3D and start writing
> controls that work there, but then you have to draw everything and write
> more code for mouse handling and focus and accessibility.  I think you can
> find a way in Royale to draw everything, but it might turn out to be a lot
> of work in the same way.  The less built-in behavior you use, the more
> work it will be.
>
> Good luck,
> -Alex
>
> [1]
> http://www.css3.com/implementing-custom-checkboxes-and-radio-buttons-
> with-c
> ss3/
>
> On 2/12/18, 2:10 PM, "carlos.rov...@gmail.com on behalf of Carlos Rovira"
>  wrote:
>
> >Hi Alex,
> >
> >very good questions here. Sincerely I'd like to have responses but this
> >path is completely new for me and need to experiment with it.
> >If someone has examples or urls where this is covered, please share here,
> >since I'm starting right now to see what can be done.
> >
> >As you see, yesterday I started solving the three project structure and
> >put
> >one component in place. That component has a structure similar as you see
> >to what people is doing out there with bootstrap, mdl, and others. Maybe
> >that's the best right now, but I'd like to know if something can be done
> >with SVG.
> >The perfect world would be to have the simplest html structure that could
> >be stylized with basic CSS and/or SVG so you can have almost an infinite
> >set
> >of variations and many people could create its own themes based in a
> >concrete structure.
> >
> >One thing I want to explore is CSS structure, For example, instead of one
> >CSS to rule them all, I want to have one CSS per component, so you can
> >easily go to
> >"TextField.css" and change the look and feel of that concrete component.
> >The in the pom.xml, you'll have all .css added so the final css file will
> >be the union of all
> >css files.
> >
> >I think we have to create at least two themes to show case the theme
> >feature, and then we should see if we support things like runtime theme
> >loading to change
> >all the app style with a single click of a button and things like that.
> >
> >I'll be searching for internet the best way to customize controls and try
> >SVG in combination of CSS. As I said, any advice on how to proceed is
> >welcome, just please
> >post some example or url in order to understand as much as possible.
> >
> >Thanks!
> >
> >
> >
> >
> >2018-02-12 10:03 GMT+01:00 Alex Harui :
> >
> >> Thanks for getting started on this.  Good to know that Theme is working
> >> for you.  I think we've used Theme in a few other places already like
> >>Flat
> >> in case you want to see it working somewhere else.
> >>
> >> AIUI, Vivid is just one look-and-feel you and others will provide based
> >>on
> >> a new "sub-DOM" within the UI components like TextInput.  Someone will
> >> provide a Wireframe, others will come up with completely different
> >>looks.
> >> So it may be that you will create some other SWC called
> >>"HighlyStyleable"
> >> and that's where the newly structured components 

Re: First Theme in place

[Carlos Rovira]

Hi Alex,

very good questions here. Sincerely I'd like to have responses but this
path is completely new for me and need to experiment with it.
If someone has examples or urls where this is covered, please share here,
since I'm starting right now to see what can be done.

As you see, yesterday I started solving the three project structure and put
one component in place. That component has a structure similar as you see
to what people is doing out there with bootstrap, mdl, and others. Maybe
that's the best right now, but I'd like to know if something can be done
with SVG.
The perfect world would be to have the simplest html structure that could
be stylized with basic CSS and/or SVG so you can have almost an infinite set
of variations and many people could create its own themes based in a
concrete structure.

One thing I want to explore is CSS structure, For example, instead of one
CSS to rule them all, I want to have one CSS per component, so you can
easily go to
"TextField.css" and change the look and feel of that concrete component.
The in the pom.xml, you'll have all .css added so the final css file will
be the union of all
css files.

I think we have to create at least two themes to show case the theme
feature, and then we should see if we support things like runtime theme
loading to change
all the app style with a single click of a button and things like that.

I'll be searching for internet the best way to customize controls and try
SVG in combination of CSS. As I said, any advice on how to proceed is
welcome, just please
post some example or url in order to understand as much as possible.

Thanks!




2018-02-12 10:03 GMT+01:00 Alex Harui :

> Thanks for getting started on this.  Good to know that Theme is working
> for you.  I think we've used Theme in a few other places already like Flat
> in case you want to see it working somewhere else.
>
> AIUI, Vivid is just one look-and-feel you and others will provide based on
> a new "sub-DOM" within the UI components like TextInput.  Someone will
> provide a Wireframe, others will come up with completely different looks.
> So it may be that you will create some other SWC called "HighlyStyleable"
> and that's where the newly structured components will go, and Vivid and
> VividBlue will be more or less just a set of styles and assets to plug
> into those sub-DOMs.
>
> It is fine if this work reduces usage of Express.  I don't believe
> everyone uses Bootstrap or MDL for every web page.  I believe there are
> people who don't need control over every pixel and are happy using the
> browser Checkbox as-is.  They will continue to use Express and Basic.
>
> But also, I hope that this styling work ends up being a SWC full of new
> Views and no other beads.  And the components are empty subclasses of some
> Basic or Express component.  That would be ideal.  It would mean that all
> other kinds of beads in Basic can be re-used in these highly-styled
> components and that we've put the right boundary around what a View is.
> Speak up if it doesn't look like that will be possible.
>
> Finally, I'm wondering how this work, which I think has the goal of
> providing a new default look for Royale, relates to the goal of a "truly
> skinnable" component set, where just about every pixel would be described
> in SVG.  It feels like the sub-DOM approach is similar to the Bootstrap
> and MDL technique of allowing customizations that can be described in CSS
> operating on the given sub-DOM, which is great.  But is the only way to
> truly allow any look to allow SVG to describe every pixel or can it be
> done with these sub-DOMs?
>
> Thoughts?
> -Alex
>
> PS: Done for tonight.  Will pick this up in my morning.
>
>
> On 2/11/18, 9:13 AM, "carlos.rov...@gmail.com on behalf of Carlos Rovira"
>  wrote:
>
> >Hi,
> >
> >just let you know that I have the basic structure of Vivid new UI set, a
> >first Vivid theme test project and a example for this working.
> >Right now nothing relevant as a final results, but Alex advice about
> >"theme" compiler option is working for me. The only control in this set of
> >projects using all of this is "TextField" vivid control, but now I need to
> >implement some concrete look and feel.
> >
> >As well, I finaly see what Harbs said about make a new UI set due to html
> >structure change. I need to change basic default html structure.
> >
> >I think this last is important, and maybe Express could end with no use
> >due
> >to the lack of more HTML structure in each component.
> >Without that is very complicated stylize controls, and without stylizing,
> >the UI set is almost useless. If the purpose of Basic and Express is
> >having
> >the foundation of a third UI set, then that's ok. Just want to notice this
> >fact.
> >
> >About my intentions with all of this: First let you know that I'll be
> >focusing in make JSOnly controls, and will not spend time with SWF for

Re: First Theme in place

[Alex Harui]

Thanks for getting started on this.  Good to know that Theme is working
for you.  I think we've used Theme in a few other places already like Flat
in case you want to see it working somewhere else.

AIUI, Vivid is just one look-and-feel you and others will provide based on
a new "sub-DOM" within the UI components like TextInput.  Someone will
provide a Wireframe, others will come up with completely different looks.
So it may be that you will create some other SWC called "HighlyStyleable"
and that's where the newly structured components will go, and Vivid and
VividBlue will be more or less just a set of styles and assets to plug
into those sub-DOMs.

It is fine if this work reduces usage of Express.  I don't believe
everyone uses Bootstrap or MDL for every web page.  I believe there are
people who don't need control over every pixel and are happy using the
browser Checkbox as-is.  They will continue to use Express and Basic.

But also, I hope that this styling work ends up being a SWC full of new
Views and no other beads.  And the components are empty subclasses of some
Basic or Express component.  That would be ideal.  It would mean that all
other kinds of beads in Basic can be re-used in these highly-styled
components and that we've put the right boundary around what a View is.
Speak up if it doesn't look like that will be possible.

Finally, I'm wondering how this work, which I think has the goal of
providing a new default look for Royale, relates to the goal of a "truly
skinnable" component set, where just about every pixel would be described
in SVG.  It feels like the sub-DOM approach is similar to the Bootstrap
and MDL technique of allowing customizations that can be described in CSS
operating on the given sub-DOM, which is great.  But is the only way to
truly allow any look to allow SVG to describe every pixel or can it be
done with these sub-DOMs?

Thoughts?
-Alex

PS: Done for tonight.  Will pick this up in my morning.


On 2/11/18, 9:13 AM, "carlos.rov...@gmail.com on behalf of Carlos Rovira"
 wrote:

>Hi,
>
>just let you know that I have the basic structure of Vivid new UI set, a
>first Vivid theme test project and a example for this working.
>Right now nothing relevant as a final results, but Alex advice about
>"theme" compiler option is working for me. The only control in this set of
>projects using all of this is "TextField" vivid control, but now I need to
>implement some concrete look and feel.
>
>As well, I finaly see what Harbs said about make a new UI set due to html
>structure change. I need to change basic default html structure.
>
>I think this last is important, and maybe Express could end with no use
>due
>to the lack of more HTML structure in each component.
>Without that is very complicated stylize controls, and without stylizing,
>the UI set is almost useless. If the purpose of Basic and Express is
>having
>the foundation of a third UI set, then that's ok. Just want to notice this
>fact.
>
>About my intentions with all of this: First let you know that I'll be
>focusing in make JSOnly controls, and will not spend time with SWF for
>now.
>Don't know if this is important for someone right now.
>
>Finally, "RoyaleThemes" example project can be removed since now is
>totally
>useless. I'm working in a new branch "feature/themes". If anyone wants to
>join the effort let me know! (for example make new controls, implements
>swf
>version,...)
>
>:)
>
>Carlos
>
>-- 
>Carlos Rovira
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2
>Fcarlosrovira=02%7C01%7Caharui%40adobe.com%7C4e1bceecd0ec438af45608d5
>7172e2ea%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636539660665370162
>data=Sho46ZzxMYnpV5FRQy%2BwDX%2By14zsYH8mrGlLUDMbORk%3D=0

Re: First Theme in place

[Piotr Zarzycki]

Hi Carlos,

I may join in the next 2 weeks or so. Depends how my free time allows...

Thanks,
Piotr


2018-02-11 18:13 GMT+01:00 Carlos Rovira :

> Hi,
>
> just let you know that I have the basic structure of Vivid new UI set, a
> first Vivid theme test project and a example for this working.
> Right now nothing relevant as a final results, but Alex advice about
> "theme" compiler option is working for me. The only control in this set of
> projects using all of this is "TextField" vivid control, but now I need to
> implement some concrete look and feel.
>
> As well, I finaly see what Harbs said about make a new UI set due to html
> structure change. I need to change basic default html structure.
>
> I think this last is important, and maybe Express could end with no use due
> to the lack of more HTML structure in each component.
> Without that is very complicated stylize controls, and without stylizing,
> the UI set is almost useless. If the purpose of Basic and Express is having
> the foundation of a third UI set, then that's ok. Just want to notice this
> fact.
>
> About my intentions with all of this: First let you know that I'll be
> focusing in make JSOnly controls, and will not spend time with SWF for now.
> Don't know if this is important for someone right now.
>
> Finally, "RoyaleThemes" example project can be removed since now is totally
> useless. I'm working in a new branch "feature/themes". If anyone wants to
> join the effort let me know! (for example make new controls, implements swf
> version,...)
>
> :)
>
> Carlos
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>



-- 

Piotr Zarzycki

Patreon: *https://www.patreon.com/piotrzarzycki
*

First Theme in place

[Carlos Rovira]

Hi,

just let you know that I have the basic structure of Vivid new UI set, a
first Vivid theme test project and a example for this working.
Right now nothing relevant as a final results, but Alex advice about
"theme" compiler option is working for me. The only control in this set of
projects using all of this is "TextField" vivid control, but now I need to
implement some concrete look and feel.

As well, I finaly see what Harbs said about make a new UI set due to html
structure change. I need to change basic default html structure.

I think this last is important, and maybe Express could end with no use due
to the lack of more HTML structure in each component.
Without that is very complicated stylize controls, and without stylizing,
the UI set is almost useless. If the purpose of Basic and Express is having
the foundation of a third UI set, then that's ok. Just want to notice this
fact.

About my intentions with all of this: First let you know that I'll be
focusing in make JSOnly controls, and will not spend time with SWF for now.
Don't know if this is important for someone right now.

Finally, "RoyaleThemes" example project can be removed since now is totally
useless. I'm working in a new branch "feature/themes". If anyone wants to
join the effort let me know! (for example make new controls, implements swf
version,...)

:)

Carlos

-- 
Carlos Rovira
http://about.me/carlosrovira