PDA

Просмотр полной версии : Позиционирование Callout


Astraport
19.11.2012, 13:39
Очень странно ведет себя этот компонент. Например, есть у меня контейнер где раскладываются карты. Нужно чтобы по тапу (клику) на карту появлялся колаут с описанием и чтобы стрелка указывала на эту карту. При этом колаут можно закрыть по клику кнопки внутри его и по клику на другую карту, но при этом он должен открыться в новой позиции. Код ниже.

<fx:Declarations>
<s:Callout id="callout" resize="calloutResize(event)" width="100%">
<s:BorderContainer backgroundColor="#C5CCD4" color="0x000000" borderWeight="2" width="100%" height="100%" cornerRadius="5">
<s:layout>
<s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" gap="5" horizontalAlign="center" />
</s:layout>
<s:Label id="calloutTitle" fontWeight="bold" textAlign="center"/>
<s:Label id="calloutText" textAlign="center" />
<s:Button click="callout.close();" label="OK"/>
</s:BorderContainer>
</s:Callout>
</fx:Declarations>

//слушатель по клику на карту
protected function showInfo(event:MouseEvent):void
{
var card:Card = event.currentTarget as Card;
if (callout.isOpen){
callout.close();
}

callout.open(card, false);
calloutTitle.text = 'Позиция ' + (card.name).slice(8);
calloutText.text= stripHTML(card.desc);
}

Получается, что если кликнуть по правой карте, то первое открытие колаута может произойти как на картинке - то есть он не влезает в экран. При этом, если закрыть колаут и кликнуть по этой же карте опять, то новое позиционирование будет правильным. Но закрывать нужно только через кнопку, тап на других картах приводит тоже к неправильному позиционированию. Вторая странность - при тапе на другие карты должно происходить закрытие с анимацией, но этого не происходит и иногда не происходит смещение колаута. В общем совершенно непредсказуемое поведение. Пробовал разные валидации - толком ничего не помогает.

alatar
19.11.2012, 20:35
А что в обработчике calloutResize?
Вторая странность - при тапе на другие карты должно происходить закрытие с анимацией, но этого не происходит
Для этого надо дождаться его закрытия, перед тем как снова открыть.

Astraport
20.11.2012, 00:13
А что в обработчике calloutResize?
Нет ничего. Это я экспериментировал, забыл убрать чтобы не смущал.
Для этого надо дождаться его закрытия, перед тем как снова открыть.
А какое событие наступает при полном закрытии? Пробовал updateComplete, но сложно понять, т. к. даже если ещё не было никакого окна, в самый первый раз, кликнуть на крайнюю правую карту, то колаут уже не будет правильно позиционирован (уйдет правее экрана, как на картинке). Второй клик - нормально позиционирует.

alatar
20.11.2012, 00:36
PopUpEvent.CLOSE

Добавлено через 6 минут
А зачем там внутри еще и BorderContainer? Collout и так является контейнером.

Astraport
20.11.2012, 01:04
А зачем там внутри еще и BorderContainer? Collout и так является контейнером.
Что-то там не получалось в плане дизайна:)

Запутался совершенно с этими колаутами. По прежнему первое окно, если карта справа, частично не видно (нужно проверить на реальном девайсе, вдруг все нормально, эмулятор иногда обманывает).
Выполняю так:
protected function showInfo(event:MouseEvent):void
{
card = event.currentTarget as Card;
if (callout.isOpen){
trace('1');
//callout.addEventListener(PopUpEvent.CLOSE, closed); слушатель добавлен через MXML
callout.close();
} else {
trace('2');
callout.open(card, false);
calloutTitle.text = 'Позиция ' + (card.name).slice(8);
calloutText.text= stripHTML(card.desc);
}
}

protected function closed(event:PopUpEvent):void
{
trace('3');
callout.open(card, false);
calloutTitle.text = 'Позиция ' + (card.name).slice(8);
calloutText.text= stripHTML(card.desc);
}
Клик по первой карте - все нормально, колаут открылся, трейс - 2.
Клик на второй карте - колаут закрылся, нового колаута нет, хотя должен быть, трейс - 1 и 3
Ещё клик на второй карте - нового колаута нет, трейс - 1
С третьего клика появляется новый колаут над второй картой, трейс - 2

Добавлено через 8 часов 49 минут
Видимо как-то связано с calloutText, который инициализируется после создания колаута. Его ширина задает ширину всего колаута и он растягивается за пределы экрана.

alatar
20.11.2012, 12:51
1. calloutTitle и calloutText можно инициализировать до вызова open() либо вызвать updatePopUpPosition() после из инициализации.
2. Для calloutTitle и calloutText не задана ширина, они будут растягивать компонент под свой размер, который будет определяться длинной текста.

Добавлено через 13 минут
Клик на второй карте - колаут закрылся, нового колаута нет, хотя должен быть, трейс - 1 и 3
Там немного дурацкий код. Событие PopUpEvent.CLOSE отправляется до того, как Callout будет удален из PopUpManager. Т.е. необходимо еще дождаться когда он будет удален.

Добавлено через 14 минут
Ну, или сделать как раньше, без отыгрывания анимации при тапе на карте.

Добавлено через 18 минут
Или каждый раз создавать новый Callout.

Astraport
20.11.2012, 15:28
updatePopUpPosition()
Вот оно! Вот что я искал:) В самом конце списка, несколько раз пытался все свойства колаута проверить перебором, но до этого не добрался. Спасибо!

alatar
20.11.2012, 16:26
несколько раз пытался все свойства колаута проверить перебором
В справке искать не пробовал? :)