You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@royale.apache.org by Nicolas Aguttes <ni...@gmail.com> on 2020/05/25 06:03:06 UTC
Form presentation
Hello all,
Sorry if this is a dumb question, but looking at the tour de jewel, I was
wondering how do you achieve the right align for the labels and the left
align for input in the form validation (
https://royale.apache.org/tourdejewel/#!form_validation_panel).
I looked at the source code and did not see the corresponding code (like
rightalign)
Thanks
Nicolas
Re: Form presentation
Posted by Piotr Zarzycki <pi...@gmail.com>.
Happy to help. It is pretty cumbersome at the beginning digging into all of
that in a way which I have presented, but it would be very rewarding I
assure you. ;) Good Luck!
pon., 25 maj 2020 o 16:46 Nicolas Aguttes <ni...@gmail.com>
napisał(a):
> Hello Piotr,
>
> Thanks very much for your answer. I think I have understood what you mean.
> I need to dig a little deeper to see what you are doing differently in the
> tour de jewel demo compare to my form to have the same presentation (labels
> in one "column" right aligned, and inputs in another "column", left aligned)
>
> Nicolas
>
> Le lun. 25 mai 2020 à 09:03, Piotr Zarzycki <pi...@gmail.com> a
> écrit :
>
>> Hello Nicolas,
>>
>> Usually if cannot see something in the code there are two options:
>>
>> 1. Something has been done in css file - in case of Jewel it is here [1].
>> Even if there is no class assigned (explicitly) in code sometimes it may
>> have been situation that someone wanted to have same behavior in whole
>> application for a component so he would just overwrite css for a component.
>> For example in order to overwrite some behavior for every button in
>> application you would do:
>>
>> .jewel.button {
>> }
>>
>> 2. Internally in framework code there has been assigned some styles or
>> css class which makes behavior which you are trying to understand.
>>
>> I believe your case is 2. In FormItemView bead which is part of Form is
>> being assigned labelAlign from model [2]. When we look into the model we
>> can see default value for labelAlign [3].
>>
>> I'm in Royale from the beginning, so there were times were there wasn't
>> any documentation in framework at all, even now we don't have enough. In
>> order to understand something which is not obvious I was simply looking
>> into the code for each part of components. In order to find each part you
>> can take a look into main css of Jewel [4]. When you search "j|Form" you
>> will be able to find each part of Form. That approach works for any
>> component. It give a bit more internal knowledge about Royale and
>> understanding over a time.
>>
>> I hope it helps instead of gets you more confusion. ;)
>>
>> [1]
>> https://github.com/apache/royale-asjs/blob/develop/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
>> [2]
>> https://github.com/apache/royale-asjs/blob/426a93e68d6ebe356df21e7b68bb7c60cdf539f3/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormItemView.as#L190
>> [3]
>> https://github.com/apache/royale-asjs/blob/3877171715b2843add477264f07dba7f328f5ce8/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/FormItemModel.as#L87
>> [4]
>> https://github.com/apache/royale-asjs/blob/develop/frameworks/projects/Jewel/src/main/resources/defaults.css
>>
>> Thanks,
>> Piotr
>>
>> pon., 25 maj 2020 o 08:03 Nicolas Aguttes <ni...@gmail.com>
>> napisał(a):
>>
>>> Hello all,
>>>
>>> Sorry if this is a dumb question, but looking at the tour de jewel, I
>>> was wondering how do you achieve the right align for the labels and the
>>> left align for input in the form validation (
>>> https://royale.apache.org/tourdejewel/#!form_validation_panel).
>>> I looked at the source code and did not see the corresponding code (like
>>> rightalign)
>>>
>>> Thanks
>>> Nicolas
>>>
>>
>>
>> --
>>
>> Piotr Zarzycki
>>
>> Patreon: *https://www.patreon.com/piotrzarzycki
>> <https://www.patreon.com/piotrzarzycki>*
>>
>
--
Piotr Zarzycki
Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*
Re: Form presentation
Posted by Nicolas Aguttes <ni...@gmail.com>.
Hello Piotr,
Thanks very much for your answer. I think I have understood what you mean.
I need to dig a little deeper to see what you are doing differently in the
tour de jewel demo compare to my form to have the same presentation (labels
in one "column" right aligned, and inputs in another "column", left aligned)
Nicolas
Le lun. 25 mai 2020 à 09:03, Piotr Zarzycki <pi...@gmail.com> a
écrit :
> Hello Nicolas,
>
> Usually if cannot see something in the code there are two options:
>
> 1. Something has been done in css file - in case of Jewel it is here [1].
> Even if there is no class assigned (explicitly) in code sometimes it may
> have been situation that someone wanted to have same behavior in whole
> application for a component so he would just overwrite css for a component.
> For example in order to overwrite some behavior for every button in
> application you would do:
>
> .jewel.button {
> }
>
> 2. Internally in framework code there has been assigned some styles or css
> class which makes behavior which you are trying to understand.
>
> I believe your case is 2. In FormItemView bead which is part of Form is
> being assigned labelAlign from model [2]. When we look into the model we
> can see default value for labelAlign [3].
>
> I'm in Royale from the beginning, so there were times were there wasn't
> any documentation in framework at all, even now we don't have enough. In
> order to understand something which is not obvious I was simply looking
> into the code for each part of components. In order to find each part you
> can take a look into main css of Jewel [4]. When you search "j|Form" you
> will be able to find each part of Form. That approach works for any
> component. It give a bit more internal knowledge about Royale and
> understanding over a time.
>
> I hope it helps instead of gets you more confusion. ;)
>
> [1]
> https://github.com/apache/royale-asjs/blob/develop/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
> [2]
> https://github.com/apache/royale-asjs/blob/426a93e68d6ebe356df21e7b68bb7c60cdf539f3/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormItemView.as#L190
> [3]
> https://github.com/apache/royale-asjs/blob/3877171715b2843add477264f07dba7f328f5ce8/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/FormItemModel.as#L87
> [4]
> https://github.com/apache/royale-asjs/blob/develop/frameworks/projects/Jewel/src/main/resources/defaults.css
>
> Thanks,
> Piotr
>
> pon., 25 maj 2020 o 08:03 Nicolas Aguttes <ni...@gmail.com>
> napisał(a):
>
>> Hello all,
>>
>> Sorry if this is a dumb question, but looking at the tour de jewel, I was
>> wondering how do you achieve the right align for the labels and the left
>> align for input in the form validation (
>> https://royale.apache.org/tourdejewel/#!form_validation_panel).
>> I looked at the source code and did not see the corresponding code (like
>> rightalign)
>>
>> Thanks
>> Nicolas
>>
>
>
> --
>
> Piotr Zarzycki
>
> Patreon: *https://www.patreon.com/piotrzarzycki
> <https://www.patreon.com/piotrzarzycki>*
>
Re: Form presentation
Posted by Piotr Zarzycki <pi...@gmail.com>.
I forgot to mention that I'm looking first into generated HTML in Chrome
dev tools to understand what css classes are assigned to [1]
[1] https://ibb.co/2hcqpfX
pon., 25 maj 2020 o 09:02 Piotr Zarzycki <pi...@gmail.com>
napisał(a):
> Hello Nicolas,
>
> Usually if cannot see something in the code there are two options:
>
> 1. Something has been done in css file - in case of Jewel it is here [1].
> Even if there is no class assigned (explicitly) in code sometimes it may
> have been situation that someone wanted to have same behavior in whole
> application for a component so he would just overwrite css for a component.
> For example in order to overwrite some behavior for every button in
> application you would do:
>
> .jewel.button {
> }
>
> 2. Internally in framework code there has been assigned some styles or css
> class which makes behavior which you are trying to understand.
>
> I believe your case is 2. In FormItemView bead which is part of Form is
> being assigned labelAlign from model [2]. When we look into the model we
> can see default value for labelAlign [3].
>
> I'm in Royale from the beginning, so there were times were there wasn't
> any documentation in framework at all, even now we don't have enough. In
> order to understand something which is not obvious I was simply looking
> into the code for each part of components. In order to find each part you
> can take a look into main css of Jewel [4]. When you search "j|Form" you
> will be able to find each part of Form. That approach works for any
> component. It give a bit more internal knowledge about Royale and
> understanding over a time.
>
> I hope it helps instead of gets you more confusion. ;)
>
> [1]
> https://github.com/apache/royale-asjs/blob/develop/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
> [2]
> https://github.com/apache/royale-asjs/blob/426a93e68d6ebe356df21e7b68bb7c60cdf539f3/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormItemView.as#L190
> [3]
> https://github.com/apache/royale-asjs/blob/3877171715b2843add477264f07dba7f328f5ce8/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/FormItemModel.as#L87
> [4]
> https://github.com/apache/royale-asjs/blob/develop/frameworks/projects/Jewel/src/main/resources/defaults.css
>
> Thanks,
> Piotr
>
> pon., 25 maj 2020 o 08:03 Nicolas Aguttes <ni...@gmail.com>
> napisał(a):
>
>> Hello all,
>>
>> Sorry if this is a dumb question, but looking at the tour de jewel, I was
>> wondering how do you achieve the right align for the labels and the left
>> align for input in the form validation (
>> https://royale.apache.org/tourdejewel/#!form_validation_panel).
>> I looked at the source code and did not see the corresponding code (like
>> rightalign)
>>
>> Thanks
>> Nicolas
>>
>
>
> --
>
> Piotr Zarzycki
>
> Patreon: *https://www.patreon.com/piotrzarzycki
> <https://www.patreon.com/piotrzarzycki>*
>
--
Piotr Zarzycki
Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*
Re: Form presentation
Posted by Piotr Zarzycki <pi...@gmail.com>.
Hello Nicolas,
Usually if cannot see something in the code there are two options:
1. Something has been done in css file - in case of Jewel it is here [1].
Even if there is no class assigned (explicitly) in code sometimes it may
have been situation that someone wanted to have same behavior in whole
application for a component so he would just overwrite css for a component.
For example in order to overwrite some behavior for every button in
application you would do:
.jewel.button {
}
2. Internally in framework code there has been assigned some styles or css
class which makes behavior which you are trying to understand.
I believe your case is 2. In FormItemView bead which is part of Form is
being assigned labelAlign from model [2]. When we look into the model we
can see default value for labelAlign [3].
I'm in Royale from the beginning, so there were times were there wasn't any
documentation in framework at all, even now we don't have enough. In order
to understand something which is not obvious I was simply looking into the
code for each part of components. In order to find each part you can take a
look into main css of Jewel [4]. When you search "j|Form" you will be able
to find each part of Form. That approach works for any component. It give a
bit more internal knowledge about Royale and understanding over a time.
I hope it helps instead of gets you more confusion. ;)
[1]
https://github.com/apache/royale-asjs/blob/develop/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
[2]
https://github.com/apache/royale-asjs/blob/426a93e68d6ebe356df21e7b68bb7c60cdf539f3/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormItemView.as#L190
[3]
https://github.com/apache/royale-asjs/blob/3877171715b2843add477264f07dba7f328f5ce8/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/FormItemModel.as#L87
[4]
https://github.com/apache/royale-asjs/blob/develop/frameworks/projects/Jewel/src/main/resources/defaults.css
Thanks,
Piotr
pon., 25 maj 2020 o 08:03 Nicolas Aguttes <ni...@gmail.com>
napisał(a):
> Hello all,
>
> Sorry if this is a dumb question, but looking at the tour de jewel, I was
> wondering how do you achieve the right align for the labels and the left
> align for input in the form validation (
> https://royale.apache.org/tourdejewel/#!form_validation_panel).
> I looked at the source code and did not see the corresponding code (like
> rightalign)
>
> Thanks
> Nicolas
>
--
Piotr Zarzycki
Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*