Home   Single Page

イメージ

image コンポーネントはブラウザ上でイメージを表示します。imageコンポーネントにイメージを指定する方法は二つあります。一つ目はsrcプロパティを使って、イメージが位置されているURIを指定します。この方法はHTMLがサポートしているものに似ています。静的なイメージを表示する場合、URLによって認識できるイメージを表示する場合、このアプローチは便利です。

<image src="/some/my.jpg"/>

地域(言語)依存イメージ

URIを受け取っている他のプロパティを使用しているように、地域依存イメージを“*”で表示します。例えば、異なった地域に異なったイメージを指定するなら、以下のように使用できます。

<image src="/my*.png"

そのため、ユーザーの一人がデフォルト地域がde_DEに設定されたブラウザで訪れることを想定します。ZKは/my_de_DE.pngと呼ばれるイメージファイルを位置しようと試みます。見つからない場合、/my_de.pngを探し、最後は/my.pngを試します。

より詳しくは、国際化の章のブラウザとロケール依存URIを参照してください。

二つ目は、setContentメソッドを使用して、イメージコンテンツをimageコンポーネントに直接指定できます。指定したと同時に、ブラウザで表示されているイメージが自動的に更新されます。このアプローチはイメージが動的に生成されるときに使うと便利です。

例えば、以下のようにユーザーに指定された位置にマップを生成させます。

Location: <textbox onChange="updateMap(self.value)"/>
Map: <image id="image"/>
<zscript>
    void updateMap(String location) {    
        if (location.length() > 0)        
            image.setContent(new MapImage(location));            
    }    
</zscript>

上の例では、指定された位置のマップを生成する、いわゆるビジネスロジックを持つMapImage というクラスがあるとします。

イメージコンポーネントはorg.zkoss.image.Imageインターフェースの中のコンテンツのみを受け取ります。ツールによって生成させたイメージがこのフォーマットでない場合、org.zkoss.image.AImageクラスを使用して、バイナリデータ配列、又はファイル、又は入力列を包みImageインターフェースに入れましょう。

従来のウェブアプリケーションでは、動的に発生したイメージをキャッシュすることは複雑です。imageコンポーネントを使えば心配する必要はありません。一度イメージコンテンツが指定されると、それはimageコンポーネントに属し、imageコンポーネントを使わなくなった後、メモリは自動的に開放されます。

【ヒント】:イメージや、オーディオ以外のPDFといったコンテンツを表示する場合、iframeコンポーネントを使用できます。詳細は関係セクションを参照。