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

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

2 голосов
/ 09 сентября 2008

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

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

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

Ответы [ 4 ]

3 голосов
/ 09 сентября 2008

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

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

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

1 голос
/ 03 апреля 2012

Вам нужно будет использовать элемент управления Flex 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>
1 голос
/ 09 сентября 2008

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

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

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

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

0 голосов
/ 30 декабря 2008

@ mmattax

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

...