使用 PhotoGallery 控制項的 HTML 碼, 置於 div 元素中。如程式碼 1 所示, UI 具有兩個按鈕, 分別用來移至上一張或下一張照片。img 元素 (ID 為 gal_image) 用來顯示目前的照片。第二個 img 元素 (ID 為 gal_progress) 用來指示正在載入下一張照片。

程式碼1：PhotoGallery控制項UI的HTML碼

<div id="photoGallery">
    <div>
	<input type="button" id="gal_prevButton" value="Prev" />
	<input type="button" id="gal_nextButton" value="Next" />
	<img id="gal_progress" src="Images/progress.gif" alt="" 
            style="visibility:hidden" />
    </div>
    <div>
	<img src="Images/placeholder.png" id="gal_image" alt="" />
    </div>
</div>

為求簡化, 上列HTML 碼並未包含控制項的樣式。

將用戶端控制項與結構化標記碼關聯, 建立一個簡單的照片瀏覽控制項。

接著來看用戶端控制項的程式碼。由於是開發自訂用戶端控制項, 因此建立名為 Samples.PhotoGallery 的類別, 並使它繼承 Sys.UI.Control 基礎類別。為了方便說明, 在此將程式碼分成兩部分。第一部分包含建構式, 以及呼叫 registerClass 方法。第二部分包含 Samples.PhotoGallery 類別的 prototype 物件。將這兩部分合併, 才是完整的 PhotoGallery 控制項程式碼。程式碼 2 為建構式的程式碼。

程式碼2：PhotoGallery類別的建構式

Type.registerNamespace('Samples');
Samples.PhotoGallery = function(element) {
	Samples.PhotoGallery.initializeBase(this, [element]);

	this._imageElement = null;
	this._nextElement = null;
	this._prevElement = null;
	this._progressElement = null;
	this._images = [];
	this._index = -1;
	this._imgPreload = null;
}

Samples.ImageGallery.registerClass('Samples.PhotoGallery',
	Sys.UI.Control);

建構式中包含了類別的欄位。前四個欄位的名稱, 結尾皆是 Element。這四個欄位可儲存關聯 DOM 元素子節點的參考。雖然包含元素的 div 元素, 成為 PhotoGallery 控制項的關聯元素, 所要存取的子元素, 仍是儲存在控制項的欄位中。

_images 陣列儲存照片的 URL, _index 變數用來追蹤陣列中 URL 的索引。_imgPreload 儲存動態 img 元素。當仍在顯示目前照片時, 可用來載入下一張照片。此一技術將使得更換照片時更為流暢。

PhotoGallery 控制項的 prototype 物件包含載入與瀏覽照片的所有邏輯, 請見程式碼 2。