« Star Wars: сравнение AS2 и AS3 в наглядных примерахКончились праздники »

Скроллинг в контейнерах: решение

Многие, думаю, сталкивались с необходимостью компоновки приложения с помощью Box-контейнеров. Понятно, что чаще всего приложение может иметь любой размер по горизонтали и вертикали (зависит от размера окна браузера). И, соответственно, чаще всего приходится оперировать размером контейнеров в процентах. И вот тут возникает проблема: если в одном из контейнеров контент больше по размерам, чем отводимый родительскому Box’у, то скроллинг появляется совсем не там, где мы бы хотели. Например, для такого приложения:

XML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical">
    <mx:Style>
        Box
        {
            border-style:solid;
            border-color:#000000;
        }
        Text
        {
            font-size: 20;
        }
    </mx:Style>
    <mx:Box
        width="100%"
        height="100%" />
    <mx:Box
        width="100%"
        height="100%">
        <mx:Text
            width="100%">
            <mx:text>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
            nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
            volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
            ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel illum dolore eu feugiat nulla facilisis at
            vero eros et accumsan et iusto odio dignissim qui blandit praesent
            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
            </mx:text>
        </mx:Text>
    </mx:Box>
    <mx:Box
        width="100%"
        height="100%" />
</mx:Application>

Получим следующее:

This text is replaced by the Flash movie.

Если мы комнем глубже, то обнаружим, что положение можно спасти путем установки фиксированной высоты контейнера:

XML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical">
    <mx:Style>
        Box
        {
            border-style:solid;
            border-color:#000000;
        }
        Text
        {
            font-size: 20;
        }
    </mx:Style>
    <mx:Box
        width="100%"
        height="100%" />
    <mx:Box
        width="100%"
        height="100">
        <mx:Text
            width="100%">
            <mx:text>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
            nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
            volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
            ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel illum dolore eu feugiat nulla facilisis at
            vero eros et accumsan et iusto odio dignissim qui blandit praesent
            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
            </mx:text>
        </mx:Text>
    </mx:Box>
    <mx:Box
        width="100%"
        height="100%" />
</mx:Application>

Результат:

This text is replaced by the Flash movie.

Но и это не совсем то, что нам нужно. Мы ведь хотим чтобы все три контейнера имели одинаковую высоту!

Ответ лежит внутри класса mx.containers.Box, а точнее mx.containers.utilityClasses.BoxLayout. В случае процентной высоты контейнера он просто устанавливает его высоту в сумму высот всех его детей. Непорядок!

Но теперь мы знаем, где править. Напишем два коротких класса:

  1. package
  2. {
  3.     import mx.containers.utilityClasses.BoxLayout;
  4.     import mx.core.Container;
  5.  
  6.     public class PercentBoxFixedLayout extends BoxLayout
  7.     {
  8.         override public function measure():void
  9.         {
  10.             var target:Container = this.target as Container;
  11.  
  12.             super.measure();
  13.  
  14.             if (!isNaN(target.percentWidth))
  15.             {
  16.                 target.measuredMinWidth = 0;
  17.                 target.measuredWidth = 0;
  18.             }
  19.             if (!isNaN(target.percentHeight))
  20.             {
  21.                 target.measuredMinHeight = 0;
  22.                 target.measuredHeight = 0;
  23.             }
  24.         }
  25.     }
  26. }

и

  1. package
  2. {
  3.     import mx.containers.Box;
  4.     import mx.core.mx_internal;
  5.  
  6.     use namespace mx_internal;
  7.  
  8.     public class PercentBoxFixed extends Box
  9.     {
  10.         public function PercentBoxFixed ()
  11.         {
  12.             super();
  13.             layoutObject = new PercentBoxFixedLayout ();
  14.             layoutObject.target = this;
  15.         }
  16.     }
  17. }

Теперь наш пример:

XML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns="*"
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical">
    <mx:Style>
        Box
        {
            border-style:solid;
            border-color:#000000;
        }
        Text
        {
            font-size: 20;
        }
    </mx:Style>
    <mx:Box
        width="100%"
        height="100%" />
    <PercentBoxFixed
        width="100%"
        height="100%">
        <mx:Text
            width="100%">
            <mx:text>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
            nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
            volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
            ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel illum dolore eu feugiat nulla facilisis at
            vero eros et accumsan et iusto odio dignissim qui blandit praesent
            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
            </mx:text>
        </mx:Text>
    </PercentBoxFixed>
    <mx:Box
        width="100%"
        height="100%" />
</mx:Application>

Ну и вот желаемый результат:

This text is replaced by the Flash movie.

Это и есть то, что нам нужно. Для VBox и HBox вы можете поступить двояко:

  • Явно задавать ориентацию контейнера direction="vertical|horizontal".
  • Сделать простейшие подклассы нашего PercentBoxFixed с явным заданием в нем ориентации.

Много получилось букав :)

Bookmark this article at …

Эта запись была сделана Январь 11th, 2007 в 17:14:42 и находится в Flex, ActionScript 3, Components, Маленькие хитрости.

Трекбек адрес этой записи

URL трекбека (щелкните правой кнопкой мыши и скопируйте ссылку)

5 комментариев

Комментарий от: nirth [Учаснег] Email · http://blog.orangeflash.eu
Это и есть то, что нам нужно. Для VBox и HBox вы можете поступить двояко

Я кстати недавно столкнулся с похожей проблемой, сделал я LinkButton который может подерживать много строчность, и теперь думаю как добавить подобный функционал в Button (может быть полезным например в Header к Accordion). есть два способа

Сделать многострочную кнопку, и от нее сделать свой LinkButton, либо сделать два сабкласса - для LinkButton и Button отдельно. Все никак не решу, что лучше =)

P.S. ну как ты понимаешь, Button делать многострочным, это скорее баловство, нежели практическая нужда но обидно что фреймворк не достаточно гибок, либо я недосмотрел пути пока что я переопределяю updateDidplayList и measure.
2007-01-12 @ 05:47
Комментарий от: Konstantin Kovalev [Учаснег] Email · http://riapriority.com/blogs/constantiner.php
А что ты называешь негибкостью или гибкостью? Если у тебя есть возможность добавить функционал переопределив всего один или два метода - это ли не гибкость? А наличие уже готового функционала на все случаи жизни - это утопия.

Тем более можно вспомнить как олдскульные товарищи ругали компоненты Макромедии как раз за то, что, по их мнению, там слишком много функционала, который им не нужен :) Что для одгих достоинство, для других - недостаток. И Adobe постарались выбрать золотую середину.

А включение в уже готовую иерархию переопределенных компонентов - действительно проблема. Понятно, что в каждом случае решается индивидуально, но постараюсь подумать над основными стратегиями...
2007-01-12 @ 10:38
Комментарий от: nirth [Учаснег] Email · http://blog.orangeflash.eu
Я называю негибкостью это потому что.

Для того чтобы сделать Layout контейнеры, с подобным функционалом, мне нужно отдельно расширить
Box(VBox/HBox), Panel, TileWindow, Module и еще какой то компонент вроде есть, подерживающий вертикальный\горизонтальный лэйаут.
Было бы намного удобнее, если бы можно было на лету определеить класс, занимающийся расположением компонентовм.

Имхо это не гибкость, но по сравнению с v2 компонентами, это конечно прорыв =)

Пойми меня правильно, я не ругаю F2F, я скорее ворчу, что нету и этого тоже =).
2007-01-12 @ 16:21
Комментарий от: Konstantin Kovalev [Учаснег] Email · http://riapriority.com/blogs/constantiner.php
Ну вот насчет стратегий, позволяющих избегать параллельной иерархии наследования в типичных случаях я и собираюсь провести анализ и написать. Думаю, не все так плохо :)
2007-01-12 @ 16:33
Комментарий от: nirth [Учаснег] Email · http://blog.orangeflash.eu
Подождем =)
2007-01-12 @ 17:00

Оставить комментарий


Ваш email адрес. (Не будет показан на сайте.)

Ваш URL будет показан.
ПлохоПревосходно
:!: :?: :idea: :) :D :p B) ;) :> :roll: :oops: :| :-/ :( :'( |-| :>> :yes: ;D :P :)) 88| :. :no: XX( :lalala: :crazy: >:XX
(Заменить прерывания строк на <br />)
(Имя, email и сайт)
(Разрешить пользователям посылать вам сообщения (ваш email не отображается).)
3 + 2 + 7 - 1?
antispam test

Вы можете использовать OpenID чтобы предоставить ваше имя, email и url.