HTML コントロールで PDF 表示 :【AIR Flex】

関連ページ

AIR では、HTML コントロールによって、通常はブラウザで表示するようなコンテンツ
を使用する事ができますが、主に対象として 3 つ考えられます。

1) PDF
2) SWF
3) HTML

PDF と SWF は、もともと adobe のプラグインであり、
AIR に表示する事に特に問題はありません。

しかし、HTML はブラウザとしての機能には当然及ばず、
いろいろ問題があるようです。

2) SWF


3) 簡易ブラウザ


4) Google MAP

Mainw.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
    xmlns:mx="http://www.adobe.com/2006/mxml"
 
    showFlexChrome="true"
 
    initialize="initData();"
    creationComplete="initApp1()"
    applicationComplete="initApp2()"
    closing="endApp(event)"
 
    visible="true"
    usePreloader="true"
 
    alwaysInFront="false"
 
    titleIcon="@Embed('data/icon.png')"
    title="lightbox"
>
 
<mx:Style source="extern/Style.css" />
<mx:Script source="extern/Parts.as" />
 
<mx:Script>
<![CDATA[
 
    import control.*;
 
    private var win:HtmlWindow = null;
 
    // *********************************************************
    // endWindow
    // *********************************************************
    private function endApp(e:flash.events.Event):void {
 
        trace("[App:end]");
        this.exit();
 
    }
 
    // *********************************************************
    // pdfWindow
    // *********************************************************
    public function pdfWindow():void {
 
        trace("[App:pdfWindow]");
 
        var win:PdfWindow = new PdfWindow();
        win.open();
 
    }
 
    // *********************************************************
    // mapWindow
    // *********************************************************
    public function mapWindow():void {
 
        trace("[App:mapWindow]");
 
        var win:MapWindow = new MapWindow();
        win.open();
 
    }
 
    // *********************************************************
    // htmlWindow
    // *********************************************************
    public function htmlWindow():void {
 
        trace("[App:htmlWindow]");
 
        if ( win == null ) {
            win = new HtmlWindow();
            win.open();
        }
        else {
            win.visible = true;
            win.restore();
        }
 
    }
 
    // *********************************************************
    // htmlWindow2
    // *********************************************************
    public function htmlWindow2():void {
 
        trace("[App:htmlWindow]");
 
        var win:GmapWindow = new GmapWindow();
        win.open();
 
    }
 
    // *********************************************************
    // initialize
    // *********************************************************
    public function initData():void {
 
        trace("[App:beforeDisplay]");
 
    }
 
    // *********************************************************
    // creationComplete
    // *********************************************************
    private function initApp1():void {
 
        trace("[App:afterDisplay]");
 
    }
 
    // *********************************************************
    // applicationComplete
    // *********************************************************
    private function initApp2():void {
 
        trace("[App:start]");
 
        dr.setFocus();
 
    }
]]>
</mx:Script>
 
<mx:Image id="dr" source="@Embed('data/dr.png')" />
 
<mx:VBox>
    <mx:Button  
        id="btn1" 
        label="pdf ウインドウ"
        styleName="blackButton"
        click="pdfWindow()"
        width="300"
    />
    <mx:Button  
        id="btn2" 
        label="map ウインドウ(swf)"
        styleName="blackButton"
        click="mapWindow()"
        width="300"
    />
    <mx:Button  
        id="btn3" 
        label="html ウインドウ(簡易ブラウザ)" 
        styleName="blackButton"
        click="htmlWindow()"
        width="300"
    />
    <mx:Button  
        id="btn4" 
        label="html ウインドウ(Google Map)" 
        styleName="blackButton"
        click="htmlWindow2()"
        width="300"
    />
</mx:VBox>
 
</mx:WindowedApplication>

PDF

PDF の表示は全て adobe の reader に任せる形になるので、
プログラミングは殆ど必要ありません。

しかし、resize イベントは重要で、これをやっておかないと
HTML コントロールは本来の価値が発揮できません。

ただ、調整するサイズに関しては、計算ではなく定数で行っています。
( 計算で行えるかどうかは解りません )

PdfWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Window
    xmlns:mx="http://www.adobe.com/2006/mxml"
    horizontalAlign="center"
    verticalAlign="middle"
    type="normal"
    systemChrome="none"
    transparent="false"
    showFlexChrome="true"
    alwaysInFront="false"
 
    initialize="initData();"
    creationComplete="initApp1()"
    applicationActivate="initApp2()"
    resize="webResize(event)"
 
    width="750"
    height="550"
 
    title="  PdfWindow"
>
 
<mx:Script>
<![CDATA[
 
    import mx.core.*;
    import mx.events.*;
 
    // *****************************************************
    // 初期処理
    // *****************************************************
    private function initData():void {
 
        web.location = "data\\readme.pdf";
 
    }
 
    // *****************************************************
    // HTML コントロール のサイズコントロール
    // *****************************************************
    private function webResize(e:mx.events.ResizeEvent):void {
 
        try {
            web.width = this.width-2;
            web.height = this.height-45;
        }
        catch (error:Error) {
        }
 
    }
 
    // *********************************************************
    // creationComplete
    // *********************************************************
    private function initApp1():void {
 
        trace("[App:afterDisplay]");
 
    }
 
    // *********************************************************
    // applicationComplete
    // *********************************************************
    private function initApp2():void {
 
        trace("[App:start]");
 
    }
 
 
]]>
</mx:Script>
 
<mx:HTML
    id="web"
    width="700"
    height="500"
/>
 
</mx:Window>