作者PsMonkey (痞子军团团长)
看板java
标题[GWT] 粗探 Image 内的实做方式
时间Mon Sep 19 01:10:58 2011
关键字有上色之 Blog 版：
http://pt2club.blogspot.com/2011/09/gwt-image.html
备注：这篇是退伍後的复健治疗... 所以... [遮脸]
========
GWT 当中的 Widget，大概只有 Button 的使用率大於 Image
（这也难讲，说不定有些人直接用 Image 作 button...... XD）。
所以来探究一下 source code 写了啥东西。
要建立一个 Image，最直接了当的用法是给它 url：
Image img = new Image("
http://an.url/pic.jpg");
这里的 url 使用相对路径亦可，
不过得注意是相对於载入这个 GWT module 的页面就是了。
切到这个 Image(String) 这个 constructor，
会发现当中做了两件事情：
将 state 设定为新产生的 UnclippedState 物件
设定 style name 为 "gwt-Image"
设定 style name 这档子事情有点无关紧要，忽略不管。
至於 state 这个 field 是怎麽一回事？
这似乎得要回头看开头 JavaDoc 写的：
「The image can be in 'unclipped' mode (the default) or
'clipped' mode.」
也就是说，Image 透过 state 来决定当下是哪一种使用方式，
这可以解释为甚麽有另一个 Image(String, int, int, int, int) 的 constructor。
实际去看 Image 的 method 行为，getter、setter、onLoad() 等都是由 state 负责，
只有跟 event handler 有关的 method 是用 Widget.addHandler() 处理。
於是找到 Image 里头 State 这个 private 的 abstract class。
它只有两个 method 不是 abstract 的：
onLoad(Image)
fireSyntheticLoadEvent(Image)
这两个都跟 event 有关，在这篇文章当中先略过，以免枝节太多。
其余的 abstract method 留给 ClippedState、UnclippedState 实做。
比对 ClippedState 与 UnclippedState 实做 method 的差异，
差别在於 ClippedState 多了 width、height、left、top 这几个 field，
UnclippedState 在取这些值时，是直接对 Image 所属的 ImageElement 取值，
而 ClippedState 则直接回传 field 的值。
另外，如果叫用到 ClippedState.setUrl() 会将 state 切换到 UnclippedState；
反之，如果叫用到 UnclippedState.setVisibleRect() 与 setUrlAndVisibleRect()
会将 state 切换到 ClippedState。
这到底在干什麽？
回归实际用途，ClippedState 的目的是只显示图片上的某个矩形区块，
所以得加上长、宽、起始位置等资讯。
制造出这种效果的方法，则是靠 CSS 设定 span 的 background 来办到。
怎麽知道的呢？答案在 constructor 当中的这行：
image.replaceElement(
impl.createStructure(url, left, top, width, height)
);
先用 ClippedImageImpl.createStructure() 制造出一个 Element 物件，
然後再把原本 Image 的 element 换成这个。
再仔细看一下 ClippedImageImpl 里头的写法，
发现它直接用最硬干的方式设定 element 的 HTML 与 style，
也难怪会抽出去自成一个 class。
这说明了为甚麽 JavaDoc 强调当 clipped 与 unclipped 互换时，
所有的 style 设定都会消失。
重新回到 Image，会发现这个 class 只是逻辑上的存在，
为了做到 clipped/unclipped 的效果，所以透过 State 来处理；
因为底层实做方式的不同，所以当物件的行为模式转换时变更到对应的 state。
而真正对应 DOM，则是 ImageElement（unclipped mode）与
SpanElement（clipped mode）。
使用 Image 时哪会想到底下这麽多怪东西？好的 class 如当是也......
Image 最後还有一个 perfetch(String) 的功能，就留待下回分解了（？）
--
钱锺书：
说出来的话
http://www.psmonkey.org
比不上不说出来的话
Java 版 cookcomic 版
只影射着说不出来的话
and more......
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 114.25.3.189