You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Peter Ent <pe...@adobe.com.INVALID> on 2018/02/14 13:56:49 UTC

[Royale] DividedBox

Hi,

I've just pushed a new feature branch: "feature/DividedBox" that contains a new set of Basic components: HDividedBox and VDividedBox. There is also an example to go along with them: examples/royale/DividedBoxExample.

I've kept this as a feature branch so you can evaluate it and I'll put it into develop tomorrow or so depending on feedback. There are about 15 classes/interfaces in total that make up this component set.

The DividedBox classes should mimic the DividedBox components found in Flex. HDividedBox places its children into columns while VDividedBox places its children into rows. The children are separated with dividers containing grippers. You can drag the dividers to resize the children on either side.

Regards,
Peter Ent
Adobe Systems/Apache Royale Project

Re: [Royale] DividedBox

Posted by Peter Ent <pe...@adobe.com.INVALID>.
At Alex's recommendation, I have refactored all of the "DividedBox"
classes into "DividedContainer" to make more general. I also renamed the
example to be "DividedContainerExample". The branch is still
feature/DividedBox but that will not matter when I merge it into develop
sometime tomorrow, hopefully.

—peter

On 2/14/18, 9:10 AM, "Peter Ent" <pe...@adobe.com.INVALID> wrote:

>I used position:absolute on everything since pixel-level control was
>required for resizing. The only real difference between the SWF code and
>the JS code is that the JS code adds "position:absolute" to every
>immediate child of the DividedBoxes. I tried this out with several
>different types of children, and it worked for having a DataGrid as a
>child which is one of the most complex components we have.
>
>There are several ways to write the JS side but since getting it work on
>the Flash Player without inventing a complete CSS effects or Flexbox
>package was a huge task, I opted to just make the AS code that worked in
>the Flash Player work in the browser. One could use Flexbox or CSS Grid to
>do a similar job along with CSS effects to do the interactive resizing. In
>my head I pictured that effort to probably require a completely divergent
>code tree. Its certainly something to look into for the future.
>
>‹peter
>
>On 2/14/18, 8:59 AM, "Piotr Zarzycki" <pi...@gmail.com> wrote:
>
>>Hi Peter,
>>
>>How did you build rows/columns in HTML ?
>>
>>Thanks,
>>Piotr
>>
>>2018-02-14 14:56 GMT+01:00 Peter Ent <pe...@adobe.com.invalid>:
>>
>>> Hi,
>>>
>>> I've just pushed a new feature branch: "feature/DividedBox" that
>>>contains
>>> a new set of Basic components: HDividedBox and VDividedBox. There is
>>>also
>>> an example to go along with them: examples/royale/DividedBoxExample.
>>>
>>> I've kept this as a feature branch so you can evaluate it and I'll put
>>>it
>>> into develop tomorrow or so depending on feedback. There are about 15
>>> classes/interfaces in total that make up this component set.
>>>
>>> The DividedBox classes should mimic the DividedBox components found in
>>> Flex. HDividedBox places its children into columns while VDividedBox
>>>places
>>> its children into rows. The children are separated with dividers
>>>containing
>>> grippers. You can drag the dividers to resize the children on either
>>>side.
>>>
>>> Regards,
>>> Peter Ent
>>> Adobe Systems/Apache Royale Project
>>>
>>
>>
>>
>>-- 
>>
>>Piotr Zarzycki
>>
>>Patreon: 
>>*https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.pat
>>r
>>eon.com%2Fpiotrzarzycki&data=02%7C01%7Cpent%40adobe.com%7C39ee57f6b22d496
>>8
>>0b1b08d573b33d6f%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63654213602
>>2
>>860624&sdata=0Echs%2F8V98uUJ2nB1%2BMVsTgYDQ5QfSNvV8eEts%2FXuno%3D&reserve
>>d
>>=0
>><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.pat
>>r
>>eon.com%2Fpiotrzarzycki&data=02%7C01%7Cpent%40adobe.com%7C39ee57f6b22d496
>>8
>>0b1b08d573b33d6f%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63654213602
>>2
>>860624&sdata=0Echs%2F8V98uUJ2nB1%2BMVsTgYDQ5QfSNvV8eEts%2FXuno%3D&reserve
>>d
>>=0>*
>

Re: [Royale] DividedBox

Posted by Peter Ent <pe...@adobe.com.INVALID>.
I used position:absolute on everything since pixel-level control was
required for resizing. The only real difference between the SWF code and
the JS code is that the JS code adds "position:absolute" to every
immediate child of the DividedBoxes. I tried this out with several
different types of children, and it worked for having a DataGrid as a
child which is one of the most complex components we have.

There are several ways to write the JS side but since getting it work on
the Flash Player without inventing a complete CSS effects or Flexbox
package was a huge task, I opted to just make the AS code that worked in
the Flash Player work in the browser. One could use Flexbox or CSS Grid to
do a similar job along with CSS effects to do the interactive resizing. In
my head I pictured that effort to probably require a completely divergent
code tree. Its certainly something to look into for the future.

‹peter

On 2/14/18, 8:59 AM, "Piotr Zarzycki" <pi...@gmail.com> wrote:

>Hi Peter,
>
>How did you build rows/columns in HTML ?
>
>Thanks,
>Piotr
>
>2018-02-14 14:56 GMT+01:00 Peter Ent <pe...@adobe.com.invalid>:
>
>> Hi,
>>
>> I've just pushed a new feature branch: "feature/DividedBox" that
>>contains
>> a new set of Basic components: HDividedBox and VDividedBox. There is
>>also
>> an example to go along with them: examples/royale/DividedBoxExample.
>>
>> I've kept this as a feature branch so you can evaluate it and I'll put
>>it
>> into develop tomorrow or so depending on feedback. There are about 15
>> classes/interfaces in total that make up this component set.
>>
>> The DividedBox classes should mimic the DividedBox components found in
>> Flex. HDividedBox places its children into columns while VDividedBox
>>places
>> its children into rows. The children are separated with dividers
>>containing
>> grippers. You can drag the dividers to resize the children on either
>>side.
>>
>> Regards,
>> Peter Ent
>> Adobe Systems/Apache Royale Project
>>
>
>
>
>-- 
>
>Piotr Zarzycki
>
>Patreon: 
>*https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.patr
>eon.com%2Fpiotrzarzycki&data=02%7C01%7Cpent%40adobe.com%7C39ee57f6b22d4968
>0b1b08d573b33d6f%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636542136022
>860624&sdata=0Echs%2F8V98uUJ2nB1%2BMVsTgYDQ5QfSNvV8eEts%2FXuno%3D&reserved
>=0
><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.patr
>eon.com%2Fpiotrzarzycki&data=02%7C01%7Cpent%40adobe.com%7C39ee57f6b22d4968
>0b1b08d573b33d6f%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636542136022
>860624&sdata=0Echs%2F8V98uUJ2nB1%2BMVsTgYDQ5QfSNvV8eEts%2FXuno%3D&reserved
>=0>*

Re: [Royale] DividedBox

Posted by Piotr Zarzycki <pi...@gmail.com>.
Hi Peter,

How did you build rows/columns in HTML ?

Thanks,
Piotr

2018-02-14 14:56 GMT+01:00 Peter Ent <pe...@adobe.com.invalid>:

> Hi,
>
> I've just pushed a new feature branch: "feature/DividedBox" that contains
> a new set of Basic components: HDividedBox and VDividedBox. There is also
> an example to go along with them: examples/royale/DividedBoxExample.
>
> I've kept this as a feature branch so you can evaluate it and I'll put it
> into develop tomorrow or so depending on feedback. There are about 15
> classes/interfaces in total that make up this component set.
>
> The DividedBox classes should mimic the DividedBox components found in
> Flex. HDividedBox places its children into columns while VDividedBox places
> its children into rows. The children are separated with dividers containing
> grippers. You can drag the dividers to resize the children on either side.
>
> Regards,
> Peter Ent
> Adobe Systems/Apache Royale Project
>



-- 

Piotr Zarzycki

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