Flex 3 - проблемы с использованием HTML-тегов в пользовательской подсказке - PullRequest
Новая
       15

Flex 3 - проблемы с использованием HTML-тегов в пользовательской подсказке

0 голосов
/ 23 ноября 2011

Я использую пользовательскую подсказку, чтобы иметь возможность использовать HTML-теги. Метод, который я использовал, описан здесь .

Я использую SDK v.3.5.
Я также сделал небольшой хак, чтобы TooltipManager.tooltipClass работал (проверьте этот пост для более подробной информации).

Вот код.

HtmlTooltip.as: 

public class HtmlTooltip extends ToolTip
{
    public function HtmlTooltip()
    {
        super();
        setStyle("borderColor", "0xF6F4F4");
    setStyle("shadowColor", "0xababab"); 
    setStyle("color", 'none'); 
    setStyle("fontWeight", 'normal');
    }

    override protected function commitProperties():void
{
    super.commitProperties();

    textField.htmlText = text;
}
}

замена всплывающей подсказки по умолчанию моей собственной ... 

    private function initializeTooltips() : void {
        ToolTipManager.toolTipClass = HtmlTooltip;

        ToolTipManager.showDelay = 750;
        ToolTipManager.hideDelay = Infinity;
    }

TooltipsManager.as (этот класс создает всплывающую подсказку для получения окончательного стиля) 

public class TooltipsManager
{
    private static var _customToolTip:HtmlTooltip;
    private static var _onTooltip:Boolean = false;
    private static var _onTarget:Boolean = true;
    private static var _timerOn:Boolean = false;
    private static const TIMER_DURATION:int = 1500;

    public function TooltipsManager()
    {
    }

    public static function showToolTipLeft(e:MouseEvent, text:String):void
{
    removeTooltip('newTooltip');
    _onTarget = true;

    var ptMouse:Point = new Point(e.currentTarget.mouseX, e.currentTarget.mouseY);

    // Convert the targets 'local' coordinates to 'global' -- this fixes the
    // tooltips positioning within containers.
    ptMouse = e.currentTarget.contentToGlobal(ptMouse);

    // Move tooltip below the target
    var ptTarget:Point = new Point(e.currentTarget.x, e.currentTarget.y);
    ptTarget = e.currentTarget.parent.contentToGlobal(ptTarget);

    // Create tooltip and add mouseevents listeners         
    _customToolTip = ToolTipManager.createToolTip(text, ptMouse.x, ptMouse.y, "errorTipLeft") as HtmlTooltip;  

        _customToolTip.addEventListener(MouseEvent.MOUSE_OVER, customToolTipHandler);
        _customToolTip.addEventListener(MouseEvent.MOUSE_OUT, customToolTipHandler); 

    // Move tooltip above target
    _customToolTip.x = ptTarget.x - _customToolTip.width - 2;
}

/**
* Remove tooltip if conditions fullfiled
* Case 1: destruction is called after the countdown ends (=> not over target anymore), 
*           still have to check if mouse is over the tooltip
* Case 2: destruction is called when mouseout from tooltip (=> not over tooltip anymore),
*           still have to check if mouse is on target or if the timer is running
* Case 3: destruction is called because new tooltip is to be created 
*/
private static function removeTooltip(from:String):void
{
    if(_customToolTip != null 
        && ((from == 'timer' && !_onTooltip)
            || (from == 'tooltip' && !_onTarget && !_timerOn)
            || from == 'newTooltip')){
            ToolTipManager.destroyToolTip(_customToolTip);
            _customToolTip = null;
            _onTarget = _onTooltip = _timerOn = false;
    }            
}

/**
* Launch TIMER_DURATION milliseconds timer
* In some cases, the tooltip will contain clickable links, which wouldn't be able to be clicked
* if the tooltip was destroyed just after a mouseout event from the target.
* If after TIMER_DURATION milliseconds, the mouse is not over the tooltip, then it's destroyed. 
*/
    public static function launchTooltipTimer():void{
        _onTarget = false;
        _timerOn = true;
        setTimeout(timerOut, TIMER_DURATION);
    }

    private static function timerOut():void{
        _timerOn = false;
        removeTooltip('timer');
    }

    /**
     * Handler for mouseevents from tooltip
     * If the mouse is over the tooltip, it won't be destroyed.
     */
    private static function customToolTipHandler(e:MouseEvent):void{
        switch(e.type){
            case MouseEvent.MOUSE_OVER:
                _onTooltip = true;
                break;
            case MouseEvent.MOUSE_OUT:
                _onTooltip = false;
                removeTooltip('tooltip');
                break;
        }
    }
}

Все отлично работает, НО 2 вещи:

  • Во-первых, теги цветов шрифта не работают. Если я когда-либо использую что-то вроде <font color='0xadadad'>...</font>, это не сработает. Однако, если я использую <u>...</u>, он отлично работает
  • Во-вторых, <a href='...'>...</a> тоже не работает. Я зарегистрировался на нескольких веб-сайтах, и решение было бы установить свойство selectable текста в true. Этот трюк не работает для меня, и я вне идей ...

Я буду рад добавить любые детали, если вам нужно больше данных. Ваши предложения приветствуются:)

Привет

1 Ответ

0 голосов
/ 12 декабря 2011

Я нашел решение для первой части моей проблемы, так что здесь на всякий случай кто-нибудь встретит тот же pb:

При использовании свойства цвета вместо 0X[hexa color code] просто используйте[hexa color code] и это работает!

...