отображение HTML внутри приложения Flex

У меня есть HTML-код, который создается с помощью редактора форматированного текста вне приложения Flex, но я хотел бы отобразить его внутри Flex.

HTML - это простые HTML-теги, такие как стили, привязки и, возможно, теги изображений, есть ли элемент управления, который позволил бы мне отображать этот HTML-код в гибком формате, или мне придется закатать рукава и свернуть свой собственный?

Любые идеи приветствуются ... Спасибо.


actionscript-3 apache-flex
person mmattax    schedule 09.09.2008    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Если HTML действительно прост, вы можете отобразить его в обычном компоненте label или textarea. Если он более сложный, я процитирую то, что я ответил в этом вопросе. Обсуждение там также содержит немного больше информации.

Если это сложный HTML и Javascript, один из возможных способов - это HTMLComponent, метод, использующий iframe поверх вашего Flash для сделайте так, чтобы он выглядел так, как будто HTML находится в вашем приложении. Однако у этого метода есть несколько недостатков - большинство из них подробно описано в Deitte .com.

Если его можно переместить в автономный режим, вы можете использовать Air (он имеет встроенный компонент mx: HTML). Deitte.com также подробно описывает эту технику.

person Raleigh Buckner    schedule 09.09.2008

arrow_upward
1
arrow_downward

Ознакомьтесь с документацией по mx.controls.Label и _ 2_ (что отображает текст в элемент управления Text или Label в Flex). В документации TextField указано, что

Тег ‹img› позволяет вставлять внешние файлы изображений (JPEG, GIF, PNG), SWF-файлы и видеоклипы в текстовые поля. Текст автоматически обтекает изображения, которые вы вставляете в текстовые поля. Чтобы использовать этот тег, вы должны сделать текстовое поле многострочным и переносить текст.

Это означает, что вы можете отображать изображение в компоненте Text в Flex, задав его свойству htmlText некоторый HTML, содержащий тег <img>. Вы не можете использовать Label, потому что он не многострочный.

Я заметил, что у текстовых полей возникают проблемы с правильным измерением их высоты, если отображаемые в них изображения выровнены по левому или правому краю с обтекающим их текстом (например, align="left"). Возможно, вам придется добавить дополнительный интервал ниже, чтобы противостоять этому, если вы планируете использовать выровненные изображения.

person Theo    schedule 09.09.2008

arrow_upward
1
arrow_downward

Вам нужно будет использовать гибкий элемент управления iFrame. Это не 100% флеш-решение, оно сочетает в себе немного js-вызовов, но для меня отлично работает.

Вы можете получить последний исходный код с github https://github.com/flex-users/flex-iframe

Вот пример кода от автора компонента.

<!---
    A basic example application showing how to embed a local html page in a Flex application.

    @author Alistair Rutherford
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                xmlns:flexiframe="http://code.google.com/p/flex-iframe/"
                horizontalAlign="center"
                verticalAlign="middle"
                viewSourceURL="srcview/index.html">

    <!-- Example project presentation -->
    <mx:ApplicationControlBar dock="true">
        <mx:Text selectable="false">
            <mx:htmlText><![CDATA[<font color="#000000" size="12"><b>flex-iframe - Simple html example</b><br>This example shows how to embed a simple Html page in a Flex application.</font>]]></mx:htmlText>
        </mx:Text>
    </mx:ApplicationControlBar>

    <!-- HTML content stored in a String -->
    <mx:String id="iFrameHTMLContent">
        <![CDATA[
            <html>
                <head>
                    <title>About</title>
                </head>
                <body>
                    <div>About</div>
                    <p>Simple HTML Test application. This test app loads a page of html locally.</p>
                    <div>Credits</div>
                    <p> </p>
                    <p>IFrame.as is based on the work of</p>
                    <ul>
                      <li><a href="http://coenraets.org/" target="_top">Christophe Coenraets</a></li>
                      <li><a href="http://www.deitte.com/" target="_top">Brian Deitte</a></li>
                    </ul>
                </body>
            </html>
        ]]>
    </mx:String>

    <!-- Example using the 'source' property -->
    <mx:Panel title="A simple Html page embedded with the 'source' property"
              width="80%"
              height="80%">

        <flexiframe:IFrame id="iFrameBySource"
                           width="100%"
                           height="100%"
                           source="about.html"/>
    </mx:Panel>

    <!-- Example using the 'content' property -->
    <mx:Panel title="A simple Html page embedded with the 'content' property"
              width="80%"
              height="80%">

        <flexiframe:IFrame id="iFrameByContent"
                           width="100%"
                           height="100%"
                           content="{iFrameHTMLContent}"/>
    </mx:Panel>

</mx:Application>
person Adrian Pirvulescu    schedule 03.04.2012

arrow_upward
0
arrow_downward

@mmattax

Действительно, вы можете отображать изображения в компоненте TextArea. Подход не совсем без проблем, хотя ...

person Niko Nyman    schedule 30.12.2008