Best choice for Responsive Jewel App using forms.

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

Best choice for Responsive Jewel App using forms.

dslotemaker
Hi All,

The app I am building has a lot of states and most states contain a large form, I am using Jewel.

I would like to have a app header and footer and I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.

Looking at Tour de Jewel I see that there is a HorizontalFlow and HorizontalTile Containers, also the example seems to use a GridCell tag with some properties:

 <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">

 are these specific to different user system (desktop, tablet, mobil)? How does it work?

I tried putting the FormItems first in aHorizontalFlow and then in a HorizontalTile container, but didn't get the result I wanted (nothing flowed). I then tried putting the FormItems in two different Card Containers and this flowed well, but when there was a lot of horizontal space available the cards didn't expand to fill them.

Below some of the forms is a Datagrid, is there a way to hide columns based on the size of the screen?

Any pointers?

Cheers,

David
Reply | Threaded
Open this post in threaded view
|

Re: Best choice for Responsive Jewel App using forms.

Carlos Rovira-2
Hi David,

First, please avoid FormItem use for now, I still need to do a major refactor since the actual layout is not ok from many points of view. As a temporal solution you can yse better a VGroup or HGroup for now.

HorizontalFlow should be only be used for layouts like "tag clouds" or similar where you want to "cascade" things to the next row or column, but gaps are not usable for that kind of layout. TileHorizonalLayout is a better implementation since is based on Flex Tile Layout and I think works ok. I used it here [1]

About "I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.", maybe you want to say "columns" instead of "rows"?

About Grid/GridCell. Please check this [2].

About hiding columns in DataGrid, check [3]  at the end "Column swapping", to remove a column or add it. So I think you could combine with a "ResponsiveResizeListener" in order to add/remove columns at a certain screen break point (mobile, tablet, desktop,...)

HTH

Carlos

[3] https://royale.apache.org/tourdejewel/#!datagrid_panel



El jue, 11 feb 2021 a las 17:24, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi All,

The app I am building has a lot of states and most states contain a large form, I am using Jewel.

I would like to have a app header and footer and I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.

Looking at Tour de Jewel I see that there is a HorizontalFlow and HorizontalTile Containers, also the example seems to use a GridCell tag with some properties:

 <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">

 are these specific to different user system (desktop, tablet, mobil)? How does it work?

I tried putting the FormItems first in aHorizontalFlow and then in a HorizontalTile container, but didn't get the result I wanted (nothing flowed). I then tried putting the FormItems in two different Card Containers and this flowed well, but when there was a lot of horizontal space available the cards didn't expand to fill them.

Below some of the forms is a Datagrid, is there a way to hide columns based on the size of the screen?

Any pointers?

Cheers,

David


--

Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com


AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIF A85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada en Paseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email a [hidden email], con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de datos: [hidden email]


Reply | Threaded
Open this post in threaded view
|

Re: Best choice for Responsive Jewel App using forms.

dslotemaker
Hi Carlos,

Thanks, yes I meant column instead of row. I will have a look at the examples you sent and try them out!

David

On Fri, 12 Feb 2021 at 10:10, Carlos Rovira <[hidden email]> wrote:
Hi David,

First, please avoid FormItem use for now, I still need to do a major refactor since the actual layout is not ok from many points of view. As a temporal solution you can yse better a VGroup or HGroup for now.

HorizontalFlow should be only be used for layouts like "tag clouds" or similar where you want to "cascade" things to the next row or column, but gaps are not usable for that kind of layout. TileHorizonalLayout is a better implementation since is based on Flex Tile Layout and I think works ok. I used it here [1]

About "I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.", maybe you want to say "columns" instead of "rows"?

About Grid/GridCell. Please check this [2].

About hiding columns in DataGrid, check [3]  at the end "Column swapping", to remove a column or add it. So I think you could combine with a "ResponsiveResizeListener" in order to add/remove columns at a certain screen break point (mobile, tablet, desktop,...)

HTH

Carlos

[3] https://royale.apache.org/tourdejewel/#!datagrid_panel



El jue, 11 feb 2021 a las 17:24, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi All,

The app I am building has a lot of states and most states contain a large form, I am using Jewel.

I would like to have a app header and footer and I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.

Looking at Tour de Jewel I see that there is a HorizontalFlow and HorizontalTile Containers, also the example seems to use a GridCell tag with some properties:

 <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">

 are these specific to different user system (desktop, tablet, mobil)? How does it work?

I tried putting the FormItems first in aHorizontalFlow and then in a HorizontalTile container, but didn't get the result I wanted (nothing flowed). I then tried putting the FormItems in two different Card Containers and this flowed well, but when there was a lot of horizontal space available the cards didn't expand to fill them.

Below some of the forms is a Datagrid, is there a way to hide columns based on the size of the screen?

Any pointers?

Cheers,

David


--

Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com


AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIF A85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada en Paseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email a [hidden email], con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de datos: [hidden email]




--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Best choice for Responsive Jewel App using forms.

Carlos Rovira-2
Ok David,

So think on Grid as a "row", then you add inside GridCells, 1 per column
Since you want 3 columns on desktop and tablet you must put the numerator/denominator for both to 1/3 while for mobile will be 1/1 ok?
That's just for main responsiveness of columns in different devices
Now you need to add to each GridCell the content. As I said, don't use FormItem for now, use here HGroup or VGroup and inside a Label and a control.

You need to start playing with it to see how it looks and then start to find the best layout that fits what you want. You'll see that responsiveness is a world itself, but the main thing is to try to find a few things that work for your use case.

HTH


El vie, 12 feb 2021 a las 11:06, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

Thanks, yes I meant column instead of row. I will have a look at the examples you sent and try them out!

David

On Fri, 12 Feb 2021 at 10:10, Carlos Rovira <[hidden email]> wrote:
Hi David,

First, please avoid FormItem use for now, I still need to do a major refactor since the actual layout is not ok from many points of view. As a temporal solution you can yse better a VGroup or HGroup for now.

HorizontalFlow should be only be used for layouts like "tag clouds" or similar where you want to "cascade" things to the next row or column, but gaps are not usable for that kind of layout. TileHorizonalLayout is a better implementation since is based on Flex Tile Layout and I think works ok. I used it here [1]

About "I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.", maybe you want to say "columns" instead of "rows"?

About Grid/GridCell. Please check this [2].

About hiding columns in DataGrid, check [3]  at the end "Column swapping", to remove a column or add it. So I think you could combine with a "ResponsiveResizeListener" in order to add/remove columns at a certain screen break point (mobile, tablet, desktop,...)

HTH

Carlos

[3] https://royale.apache.org/tourdejewel/#!datagrid_panel



El jue, 11 feb 2021 a las 17:24, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi All,

The app I am building has a lot of states and most states contain a large form, I am using Jewel.

I would like to have a app header and footer and I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.

Looking at Tour de Jewel I see that there is a HorizontalFlow and HorizontalTile Containers, also the example seems to use a GridCell tag with some properties:

 <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">

 are these specific to different user system (desktop, tablet, mobil)? How does it work?

I tried putting the FormItems first in aHorizontalFlow and then in a HorizontalTile container, but didn't get the result I wanted (nothing flowed). I then tried putting the FormItems in two different Card Containers and this flowed well, but when there was a lot of horizontal space available the cards didn't expand to fill them.

Below some of the forms is a Datagrid, is there a way to hide columns based on the size of the screen?

Any pointers?

Cheers,

David


--

Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com


AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIF A85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada en Paseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email a [hidden email], con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de datos: [hidden email]




--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation

Reply | Threaded
Open this post in threaded view
|

Re: Best choice for Responsive Jewel App using forms.

dslotemaker
Hi Carlos,

Excellent, I have the grid view doing exactly as I need, once I get the datagrid at the bottom of the resizing I could send you the app to use as an example on the site if you like.

I am having trouble finding any info about: ResponsiveResizeListener

  I need to add it as a bead I guess? How do I go about listening for the different events? Where can I find documentation about this?

Cheers,

David



On Fri, 12 Feb 2021 at 11:43, Carlos Rovira <[hidden email]> wrote:
Ok David,

So think on Grid as a "row", then you add inside GridCells, 1 per column
Since you want 3 columns on desktop and tablet you must put the numerator/denominator for both to 1/3 while for mobile will be 1/1 ok?
That's just for main responsiveness of columns in different devices
Now you need to add to each GridCell the content. As I said, don't use FormItem for now, use here HGroup or VGroup and inside a Label and a control.

You need to start playing with it to see how it looks and then start to find the best layout that fits what you want. You'll see that responsiveness is a world itself, but the main thing is to try to find a few things that work for your use case.

HTH


El vie, 12 feb 2021 a las 11:06, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

Thanks, yes I meant column instead of row. I will have a look at the examples you sent and try them out!

David

On Fri, 12 Feb 2021 at 10:10, Carlos Rovira <[hidden email]> wrote:
Hi David,

First, please avoid FormItem use for now, I still need to do a major refactor since the actual layout is not ok from many points of view. As a temporal solution you can yse better a VGroup or HGroup for now.

HorizontalFlow should be only be used for layouts like "tag clouds" or similar where you want to "cascade" things to the next row or column, but gaps are not usable for that kind of layout. TileHorizonalLayout is a better implementation since is based on Flex Tile Layout and I think works ok. I used it here [1]

About "I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.", maybe you want to say "columns" instead of "rows"?

About Grid/GridCell. Please check this [2].

About hiding columns in DataGrid, check [3]  at the end "Column swapping", to remove a column or add it. So I think you could combine with a "ResponsiveResizeListener" in order to add/remove columns at a certain screen break point (mobile, tablet, desktop,...)

HTH

Carlos

[3] https://royale.apache.org/tourdejewel/#!datagrid_panel



El jue, 11 feb 2021 a las 17:24, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi All,

The app I am building has a lot of states and most states contain a large form, I am using Jewel.

I would like to have a app header and footer and I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.

Looking at Tour de Jewel I see that there is a HorizontalFlow and HorizontalTile Containers, also the example seems to use a GridCell tag with some properties:

 <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">

 are these specific to different user system (desktop, tablet, mobil)? How does it work?

I tried putting the FormItems first in aHorizontalFlow and then in a HorizontalTile container, but didn't get the result I wanted (nothing flowed). I then tried putting the FormItems in two different Card Containers and this flowed well, but when there was a lot of horizontal space available the cards didn't expand to fill them.

Below some of the forms is a Datagrid, is there a way to hide columns based on the size of the screen?

Any pointers?

Cheers,

David


--

Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com


AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIF A85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada en Paseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email a [hidden email], con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de datos: [hidden email]




--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Best choice for Responsive Jewel App using forms.

Carlos Rovira-2
Hi David, 

About the example cool!, if you want to make a Blog example to be added that will be great! It should be a minimum code (just one file will the simple example). You can send me and I can transform.

About "ResponsiveResizeListener" you can see it working in TDJ's MainContent.mxml



El vie, 12 feb 2021 a las 17:08, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

Excellent, I have the grid view doing exactly as I need, once I get the datagrid at the bottom of the resizing I could send you the app to use as an example on the site if you like.

I am having trouble finding any info about: ResponsiveResizeListener

  I need to add it as a bead I guess? How do I go about listening for the different events? Where can I find documentation about this?

Cheers,

David



On Fri, 12 Feb 2021 at 11:43, Carlos Rovira <[hidden email]> wrote:
Ok David,

So think on Grid as a "row", then you add inside GridCells, 1 per column
Since you want 3 columns on desktop and tablet you must put the numerator/denominator for both to 1/3 while for mobile will be 1/1 ok?
That's just for main responsiveness of columns in different devices
Now you need to add to each GridCell the content. As I said, don't use FormItem for now, use here HGroup or VGroup and inside a Label and a control.

You need to start playing with it to see how it looks and then start to find the best layout that fits what you want. You'll see that responsiveness is a world itself, but the main thing is to try to find a few things that work for your use case.

HTH


El vie, 12 feb 2021 a las 11:06, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

Thanks, yes I meant column instead of row. I will have a look at the examples you sent and try them out!

David

On Fri, 12 Feb 2021 at 10:10, Carlos Rovira <[hidden email]> wrote:
Hi David,

First, please avoid FormItem use for now, I still need to do a major refactor since the actual layout is not ok from many points of view. As a temporal solution you can yse better a VGroup or HGroup for now.

HorizontalFlow should be only be used for layouts like "tag clouds" or similar where you want to "cascade" things to the next row or column, but gaps are not usable for that kind of layout. TileHorizonalLayout is a better implementation since is based on Flex Tile Layout and I think works ok. I used it here [1]

About "I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.", maybe you want to say "columns" instead of "rows"?

About Grid/GridCell. Please check this [2].

About hiding columns in DataGrid, check [3]  at the end "Column swapping", to remove a column or add it. So I think you could combine with a "ResponsiveResizeListener" in order to add/remove columns at a certain screen break point (mobile, tablet, desktop,...)

HTH

Carlos

[3] https://royale.apache.org/tourdejewel/#!datagrid_panel



El jue, 11 feb 2021 a las 17:24, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi All,

The app I am building has a lot of states and most states contain a large form, I am using Jewel.

I would like to have a app header and footer and I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.

Looking at Tour de Jewel I see that there is a HorizontalFlow and HorizontalTile Containers, also the example seems to use a GridCell tag with some properties:

 <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">

 are these specific to different user system (desktop, tablet, mobil)? How does it work?

I tried putting the FormItems first in aHorizontalFlow and then in a HorizontalTile container, but didn't get the result I wanted (nothing flowed). I then tried putting the FormItems in two different Card Containers and this flowed well, but when there was a lot of horizontal space available the cards didn't expand to fill them.

Below some of the forms is a Datagrid, is there a way to hide columns based on the size of the screen?

Any pointers?

Cheers,

David


--

Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com


AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIF A85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada en Paseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email a [hidden email], con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de datos: [hidden email]




--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation

Reply | Threaded
Open this post in threaded view
|

Re: Best choice for Responsive Jewel App using forms.

dslotemaker
Hi Carlos,

I have looked at MainContent.mxml  in TDJ and can see there is a BrowserOrientation bead (really cool) and that it is using ApplicationResponsiveView as the parent container instead of the Application tag (what "Responsive" things does this this tag do?) 

But I can't find any reference to ResponsiveResizeListener in the file.

Additional question, can you save source code for a view to an external .as file like you could in Flex? I can't see a "src" property.

Cheers,

David




On Fri, 12 Feb 2021 at 20:34, Carlos Rovira <[hidden email]> wrote:
Hi David, 

About the example cool!, if you want to make a Blog example to be added that will be great! It should be a minimum code (just one file will the simple example). You can send me and I can transform.

About "ResponsiveResizeListener" you can see it working in TDJ's MainContent.mxml



El vie, 12 feb 2021 a las 17:08, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

Excellent, I have the grid view doing exactly as I need, once I get the datagrid at the bottom of the resizing I could send you the app to use as an example on the site if you like.

I am having trouble finding any info about: ResponsiveResizeListener

  I need to add it as a bead I guess? How do I go about listening for the different events? Where can I find documentation about this?

Cheers,

David



On Fri, 12 Feb 2021 at 11:43, Carlos Rovira <[hidden email]> wrote:
Ok David,

So think on Grid as a "row", then you add inside GridCells, 1 per column
Since you want 3 columns on desktop and tablet you must put the numerator/denominator for both to 1/3 while for mobile will be 1/1 ok?
That's just for main responsiveness of columns in different devices
Now you need to add to each GridCell the content. As I said, don't use FormItem for now, use here HGroup or VGroup and inside a Label and a control.

You need to start playing with it to see how it looks and then start to find the best layout that fits what you want. You'll see that responsiveness is a world itself, but the main thing is to try to find a few things that work for your use case.

HTH


El vie, 12 feb 2021 a las 11:06, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

Thanks, yes I meant column instead of row. I will have a look at the examples you sent and try them out!

David

On Fri, 12 Feb 2021 at 10:10, Carlos Rovira <[hidden email]> wrote:
Hi David,

First, please avoid FormItem use for now, I still need to do a major refactor since the actual layout is not ok from many points of view. As a temporal solution you can yse better a VGroup or HGroup for now.

HorizontalFlow should be only be used for layouts like "tag clouds" or similar where you want to "cascade" things to the next row or column, but gaps are not usable for that kind of layout. TileHorizonalLayout is a better implementation since is based on Flex Tile Layout and I think works ok. I used it here [1]

About "I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.", maybe you want to say "columns" instead of "rows"?

About Grid/GridCell. Please check this [2].

About hiding columns in DataGrid, check [3]  at the end "Column swapping", to remove a column or add it. So I think you could combine with a "ResponsiveResizeListener" in order to add/remove columns at a certain screen break point (mobile, tablet, desktop,...)

HTH

Carlos

[3] https://royale.apache.org/tourdejewel/#!datagrid_panel



El jue, 11 feb 2021 a las 17:24, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi All,

The app I am building has a lot of states and most states contain a large form, I am using Jewel.

I would like to have a app header and footer and I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.

Looking at Tour de Jewel I see that there is a HorizontalFlow and HorizontalTile Containers, also the example seems to use a GridCell tag with some properties:

 <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">

 are these specific to different user system (desktop, tablet, mobil)? How does it work?

I tried putting the FormItems first in aHorizontalFlow and then in a HorizontalTile container, but didn't get the result I wanted (nothing flowed). I then tried putting the FormItems in two different Card Containers and this flowed well, but when there was a lot of horizontal space available the cards didn't expand to fill them.

Below some of the forms is a Datagrid, is there a way to hide columns based on the size of the screen?

Any pointers?

Cheers,

David


--

Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com


AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIF A85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada en Paseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email a [hidden email], con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de datos: [hidden email]




--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Best choice for Responsive Jewel App using forms.

Carlos Rovira-2

El dom, 14 feb 2021 a las 12:38, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

I have looked at MainContent.mxml  in TDJ and can see there is a BrowserOrientation bead (really cool) and that it is using ApplicationResponsiveView as the parent container instead of the Application tag (what "Responsive" things does this this tag do?) 

But I can't find any reference to ResponsiveResizeListener in the file.

Additional question, can you save source code for a view to an external .as file like you could in Flex? I can't see a "src" property.

Cheers,

David




On Fri, 12 Feb 2021 at 20:34, Carlos Rovira <[hidden email]> wrote:
Hi David, 

About the example cool!, if you want to make a Blog example to be added that will be great! It should be a minimum code (just one file will the simple example). You can send me and I can transform.

About "ResponsiveResizeListener" you can see it working in TDJ's MainContent.mxml



El vie, 12 feb 2021 a las 17:08, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

Excellent, I have the grid view doing exactly as I need, once I get the datagrid at the bottom of the resizing I could send you the app to use as an example on the site if you like.

I am having trouble finding any info about: ResponsiveResizeListener

  I need to add it as a bead I guess? How do I go about listening for the different events? Where can I find documentation about this?

Cheers,

David



On Fri, 12 Feb 2021 at 11:43, Carlos Rovira <[hidden email]> wrote:
Ok David,

So think on Grid as a "row", then you add inside GridCells, 1 per column
Since you want 3 columns on desktop and tablet you must put the numerator/denominator for both to 1/3 while for mobile will be 1/1 ok?
That's just for main responsiveness of columns in different devices
Now you need to add to each GridCell the content. As I said, don't use FormItem for now, use here HGroup or VGroup and inside a Label and a control.

You need to start playing with it to see how it looks and then start to find the best layout that fits what you want. You'll see that responsiveness is a world itself, but the main thing is to try to find a few things that work for your use case.

HTH


El vie, 12 feb 2021 a las 11:06, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

Thanks, yes I meant column instead of row. I will have a look at the examples you sent and try them out!

David

On Fri, 12 Feb 2021 at 10:10, Carlos Rovira <[hidden email]> wrote:
Hi David,

First, please avoid FormItem use for now, I still need to do a major refactor since the actual layout is not ok from many points of view. As a temporal solution you can yse better a VGroup or HGroup for now.

HorizontalFlow should be only be used for layouts like "tag clouds" or similar where you want to "cascade" things to the next row or column, but gaps are not usable for that kind of layout. TileHorizonalLayout is a better implementation since is based on Flex Tile Layout and I think works ok. I used it here [1]

About "I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.", maybe you want to say "columns" instead of "rows"?

About Grid/GridCell. Please check this [2].

About hiding columns in DataGrid, check [3]  at the end "Column swapping", to remove a column or add it. So I think you could combine with a "ResponsiveResizeListener" in order to add/remove columns at a certain screen break point (mobile, tablet, desktop,...)

HTH

Carlos

[3] https://royale.apache.org/tourdejewel/#!datagrid_panel



El jue, 11 feb 2021 a las 17:24, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi All,

The app I am building has a lot of states and most states contain a large form, I am using Jewel.

I would like to have a app header and footer and I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.

Looking at Tour de Jewel I see that there is a HorizontalFlow and HorizontalTile Containers, also the example seems to use a GridCell tag with some properties:

 <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">

 are these specific to different user system (desktop, tablet, mobil)? How does it work?

I tried putting the FormItems first in aHorizontalFlow and then in a HorizontalTile container, but didn't get the result I wanted (nothing flowed). I then tried putting the FormItems in two different Card Containers and this flowed well, but when there was a lot of horizontal space available the cards didn't expand to fill them.

Below some of the forms is a Datagrid, is there a way to hide columns based on the size of the screen?

Any pointers?

Cheers,

David


--

Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com


AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIF A85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada en Paseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email a [hidden email], con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de datos: [hidden email]




--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation

Reply | Threaded
Open this post in threaded view
|

Re: Best choice for Responsive Jewel App using forms.

Carlos Rovira-2
Forgot to said that ApplicationResponsiveView was renamed to ResponsiveView,
Responsive in Jewel use to mean width is 100% by default since you want width be managed by the app container (in this case the browser)

About source code do you mean the "View source code" link adobe use to add to the context menu? Yes, I remember see that in earlier example, but can't say so much about it. I made a search over the code and found this bead:

<js:ViewSourceContextMenuOption />

Check in /examples for some uses of it in example apps




El dom, 14 feb 2021 a las 19:58, Carlos Rovira (<[hidden email]>) escribió:

El dom, 14 feb 2021 a las 12:38, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

I have looked at MainContent.mxml  in TDJ and can see there is a BrowserOrientation bead (really cool) and that it is using ApplicationResponsiveView as the parent container instead of the Application tag (what "Responsive" things does this this tag do?) 

But I can't find any reference to ResponsiveResizeListener in the file.

Additional question, can you save source code for a view to an external .as file like you could in Flex? I can't see a "src" property.

Cheers,

David




On Fri, 12 Feb 2021 at 20:34, Carlos Rovira <[hidden email]> wrote:
Hi David, 

About the example cool!, if you want to make a Blog example to be added that will be great! It should be a minimum code (just one file will the simple example). You can send me and I can transform.

About "ResponsiveResizeListener" you can see it working in TDJ's MainContent.mxml



El vie, 12 feb 2021 a las 17:08, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

Excellent, I have the grid view doing exactly as I need, once I get the datagrid at the bottom of the resizing I could send you the app to use as an example on the site if you like.

I am having trouble finding any info about: ResponsiveResizeListener

  I need to add it as a bead I guess? How do I go about listening for the different events? Where can I find documentation about this?

Cheers,

David



On Fri, 12 Feb 2021 at 11:43, Carlos Rovira <[hidden email]> wrote:
Ok David,

So think on Grid as a "row", then you add inside GridCells, 1 per column
Since you want 3 columns on desktop and tablet you must put the numerator/denominator for both to 1/3 while for mobile will be 1/1 ok?
That's just for main responsiveness of columns in different devices
Now you need to add to each GridCell the content. As I said, don't use FormItem for now, use here HGroup or VGroup and inside a Label and a control.

You need to start playing with it to see how it looks and then start to find the best layout that fits what you want. You'll see that responsiveness is a world itself, but the main thing is to try to find a few things that work for your use case.

HTH


El vie, 12 feb 2021 a las 11:06, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi Carlos,

Thanks, yes I meant column instead of row. I will have a look at the examples you sent and try them out!

David

On Fri, 12 Feb 2021 at 10:10, Carlos Rovira <[hidden email]> wrote:
Hi David,

First, please avoid FormItem use for now, I still need to do a major refactor since the actual layout is not ok from many points of view. As a temporal solution you can yse better a VGroup or HGroup for now.

HorizontalFlow should be only be used for layouts like "tag clouds" or similar where you want to "cascade" things to the next row or column, but gaps are not usable for that kind of layout. TileHorizonalLayout is a better implementation since is based on Flex Tile Layout and I think works ok. I used it here [1]

About "I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.", maybe you want to say "columns" instead of "rows"?

About Grid/GridCell. Please check this [2].

About hiding columns in DataGrid, check [3]  at the end "Column swapping", to remove a column or add it. So I think you could combine with a "ResponsiveResizeListener" in order to add/remove columns at a certain screen break point (mobile, tablet, desktop,...)

HTH

Carlos

[3] https://royale.apache.org/tourdejewel/#!datagrid_panel



El jue, 11 feb 2021 a las 17:24, David Slotemaker de Bruine (<[hidden email]>) escribió:
Hi All,

The app I am building has a lot of states and most states contain a large form, I am using Jewel.

I would like to have a app header and footer and I would like the form take up 2 (or 3 rows)  on the desktop and 1 on Mobile.

Looking at Tour de Jewel I see that there is a HorizontalFlow and HorizontalTile Containers, also the example seems to use a GridCell tag with some properties:

 <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">

 are these specific to different user system (desktop, tablet, mobil)? How does it work?

I tried putting the FormItems first in aHorizontalFlow and then in a HorizontalTile container, but didn't get the result I wanted (nothing flowed). I then tried putting the FormItems in two different Card Containers and this flowed well, but when there was a lot of horizontal space available the cards didn't expand to fill them.

Below some of the forms is a Datagrid, is there a way to hide columns based on the size of the screen?

Any pointers?

Cheers,

David


--

Carlos Rovira

Presidente Ejecutivo

M: +34 607 22 60 05

http://www.codeoscopic.com


AVISO LEGAL: La información contenida en este correo electrónico, y en su caso en los documentos adjuntos, es información privilegiada para uso exclusivo de la persona y/o personas a las que va dirigido. No está permitido el acceso a este mensaje a cualquier otra persona distinta a los indicados. Si Usted no es uno de los destinatarios, cualquier duplicación, reproducción, distribución, así como cualquier uso de la información contenida en él o cualquiera otra acción u omisión tomada en relación con el mismo, está prohibida y puede ser ilegal. En dicho caso, por favor, notifíquelo al remitente y proceda a la eliminación de este correo electrónico, así como de sus adjuntos si los hubiere. En cumplimiento de la legislación española vigente en materia de protección de datos de carácter personal y del RGPD 679/2016 le informamos que sus datos están siendo objeto de tratamiento por parte de CODEOSCOPIC S.A. con CIF A85677342, con la finalidad del mantenimiento y gestión de relaciones comerciales y administrativas. La base jurídica del tratamiento es el interés legítimo de la empresa. No se prevén cesiones de sus datos, salvo que exista una obligación legal. Para ejercitar sus derechos puede dirigirse a CODEOSCOPIC S.A., domiciliada en Paseo de la Habana, 9-11, 28036 de Madrid (MADRID), o bien por email a [hidden email], con el fin de ejercer sus derechos de acceso, rectificación, supresión (derecho al olvido), limitación de tratamiento, portabilidad de los datos, oposición, y a no ser objeto de decisiones automatizadas, indicando como Asunto: “Derechos Ley Protección de Datos”, y adjuntando fotocopia de su DNI. Delegado de protección de datos: [hidden email]




--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--

David Slotemaker de Bruïne
Head of Educational Robotics



Av. Sarriá, 130 - 08017 Barcelona 

T. +34 932 523 729 ext. 135

[hidden email]



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation



--
Carlos Rovira
Apache Member & Apache Royale PMC
Apache Software Foundation