透過AEM 5.6,Adobe針對作者環境推出了具有回應式設計的全新觸控式UI。 這與原有的傳統UI有很大不同,因為它設計為可在觸控和桌上型裝置上運作。
此觸控式UI現在是AEM的標準UI,取代傳統UI。
觸控式UI是AEM的標準UI,不過仍支援傳統UI。
啟用觸控的UI包括:
套裝標題:
左側邊欄(視需要顯示且可隱藏),可顯示:
導覽標題,此頁首也會區分上下文,並可顯示:
內容區域:
幾乎所有的AEM功能都已移植至觸控式UI。 但是,在某些有限的情況下,功能會回復為傳統UI。 如需詳細資訊,請參閱觸控UI功能狀態。
Adobe已設計觸控式UI,以提供跨多種產品的使用者體驗一致性。 它基於:
觸控式UI的基本原則為:
如需觸控式UI結構的進一步概觀,請參閱「AEM觸控式UI的結構」文章。
AEM以Granite平台為基礎,Granite平台包括Java內容儲存庫等。
Granite是Adobe的Open Web堆疊,提供多種元件,包括:
Granite是以開放開發專案的方式在Adobe中執行:對程式碼、討論和問題的貢獻來自整個公司。
但是,Granite是not開放原始碼專案。 它主要以數個開放原始碼專案(尤其是Apache Sling、Felix、Jackrabbit和Lucene)為基礎,但Adobe在公開項目與內部專案之間劃清了界限。
Granite工程平台也提供了一個基礎UI架構。 其主要目標是:
這些要求符合:
Granite UI:
此基礎元件庫可供其他元件庫使用或擴充。
Granite UI中的客戶機與伺服器通信由超文本(而非對象)組成,因此客戶機無需瞭解業務邏輯
這會使用HTML辭彙表的擴充功能,讓作者可以表達建立互動式網頁應用程式的意願。 這與WAI-ARIA和微格式類似。
它主要包含由JS和CSS程式碼解譯的互動模式(例如,非同步提交表格)集合,在用戶端執行。 用戶端的角色是增強互動性的標籤(以伺服器提供的超媒體支援為準)。
用戶端獨立於任何伺服器技術。 只要伺服器提供適當的標籤,用戶端就能發揮其作用。
目前,JS和CSS程式碼會以Granite clientlibs的形式傳送,位於類別下:
granite.ui.foundation and granite.ui.foundation.admin
這些內容會以內容套件的方式提供:
granite.ui.content
這是由sling元件的集合所組成,可讓作者快速完成compose網頁應用程式。 開發人員開發元件,作者將元件組裝成網頁應用程式。 伺服器端的角色是為用戶端提供超媒體可負擔性(標籤)。
這些元件當前位於Granite儲存庫中,網址為:
/libs/granite/ui/components/foundation
這是內容套件的一部分:
granite.ui.content
Granite UI和ExtJS(用於傳統UI)之間的差異也值得關注:
ExtJS | Granite UI |
遠程過程調用 |
州過渡 |
資料傳輸對象 | Hypermedia |
客戶端瞭解伺服器內部 | 客戶不知道內部 |
"胖客戶" | "瘦客戶機" |
專用的用戶端程式庫 | 通用用戶端程式庫 |
Granite UI基礎元件提供建立任何UI所需的基本建置區塊。 其中包括:
可在以下位置找到基礎元件:
/libs/granite/ui/components/foundation
此程式庫包含每個Coral元素的Granite UI元件。 元件是內容驅動的,其配置駐留在儲存庫中。 這樣,就可以不用手寫HTML標籤來合成Granite UI應用程式。
目的:
實施:
此基礎元件庫可供其他元件庫使用或擴充。
將ExtJS程式碼升級為使用Granite UI時,下列清單提供ExtJS xtypes和節點類型及其等效Granite UI資源類型的簡單概述。
ExtJS xtype | Granite UI資源類型 |
---|---|
button |
granite/ui/components/foundation/form/button |
checkbox |
granite/ui/components/foundation/form/checkbox |
componentstyles |
cq/gui/components/authoring/dialog/componentstyles |
cqinclude |
granite/ui/components/foundation/include |
datetime |
granite/ui/components/foundation/form/datepicker |
dialogfieldset |
granite/ui/components/foundation/form/fieldset |
hidden |
granite/ui/components/foundation/form/hidden |
html5smartfile, html5smartimage |
granite/ui/components/foundation/form/fileupload |
multifield |
granite/ui/components/foundation/form/multifield |
numberfield |
granite/ui/components/foundation/form/numberfield |
pathfield, paragraphreference |
granite/ui/components/foundation/form/pathbrowser |
selection |
granite/ui/components/foundation/form/select |
sizefield |
cq/gui/components/authoring/dialog/sizefield |
tags |
granite/ui/components/foundation/form/autocomplete cq/gui/components/common/datasources/tags |
textarea |
granite/ui/components/foundation/form/textarea |
textfield |
granite/ui/components/foundation/form/textfield |
節點類型 | Granite UI資源類型 |
---|---|
cq:WidgetCollection |
granite/ui/components/foundation/container |
cq:TabPanel |
granite/ui/components/foundation/container granite/ui/components/foundation/layouts/tabs |
cq:panel |
granite/ui/components/foundation/container |
Granite UI管理元件建立在基礎元件上,以提供任何管理應用程式皆可實作的通用建置區塊。 其中包括:
目的:
實施:
Coral UI(CUI)是Adobe針對觸控式UI的視覺風格實作,旨在提供跨多種產品的一致使用體驗。 Coral UI提供您所需的一切,讓您採用製作環境中使用的視覺化樣式。
Coral UI是AEM客戶提供的UI程式庫,可讓他們在授權使用產品的範圍內建立應用程式和網頁介面。
僅允許使用Coral UI:
Coral UI的使用應避免於:
Coral UI是開發網頁應用程式的建置區塊集。
從開始設計為模組化,每個模組根據其主要角色形成不同的層。 雖然這些圖層設計為彼此支援,但您也可以視需要獨立使用。 這可讓您在任何具HTML功能的環境中建置Coral的使用體驗。
使用Coral UI時,並非必須使用特定開發模型和/或平台。 Coral的主要目標是提供統一且簡潔的HTML5標籤,不受實際發出此標籤的方法所限。 這可能用於用戶端或伺服器端轉譯、範本、JSP、PHP或甚至Adobe Flash RIA應用程式——例如。
HTML元素提供所有基本UI元素(包括導覽列、按鈕、選單、邊欄等)的共同外觀和感覺。
在最基本的層級,HTML元素是具有專用類別名稱的HTML標籤。 更複雜的元素可由多個標籤組成,這些標籤彼此巢狀內嵌(以特定方式)。
CSS可用來提供實際的外觀和感覺。 為了能夠輕鬆自訂外觀和感覺(例如品牌),實際樣式值會宣告為變數,在執行時期期間由LESS前置處理器擴充。
目的:
實施:
例如,標籤:
<button class="btn btn-large btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>
顯示為:
外觀和感覺定義為LESS,以專用類別名稱系結至元素(為簡便起見,下列摘取已縮短):
.btn {
font-size: @baseFontSize;
line-height: @baseLineHeight;
.buttonBackground(@btnBackground,
@btnBackgroundHighlight,
@grayDark, 0 1px 1px rgba(255,255,255,.75));
實際值在LESS變數檔案中定義(以下摘取已縮短,以便簡化):
@btnBackgroundHighlight: darken(@white, 10%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@baseFontSize: 17px;
@baseFontFamily: @sansFontFamily;
許多HTML元素需要顯示某種動態行為,例如開啟和關閉快顯功能表。 這是元素外掛程式的角色,它可使用JavaScript控制DOM來完成此類工作。
外掛程式可以是:
DIV class=dialog
DIV
或LI
元素清單的版面配置外掛程式行為可透過下列其中一種方式,以參數自訂:
data-*
屬性雖然開發人員可以針對任何外掛程式選擇最佳方式,但經驗法則是:
data-*
屬性。例如,若要指定欄數相同的概念用於實作表單驗證。 對於要驗證的元素,必須將所需的輸入表單指定為自定義data-*
屬性。 然後,此屬性會用作驗證外掛程式的選項。
應盡可能使用HTML5原生表單驗證及/或擴充。
目的:
實施:
data-*
屬性自訂行為範例標籤的摘取(請注意指定為data-*屬性):
<ul data-column-width="220" data-layout="card" class="cards">
<li class="item">
<div class="thumbnail">
<img href="/a.html" src="/a.thumb.319.319..png">
<div class="caption">
<h4>Toolbar</h4>
<p><small>toolbar</small><br></p>
</div>
</div>
</li>
<li class="item">
<div class="thumbnail">
<img href="/a.html" src="/a.thumb.319.319..png">
<div class="caption">
<h4>Toolbar</h4>
<p><small>toolbar</small><br></p>
</div>
</div>
</li>
對jQuery外掛程式的呼叫:
$(‘.cards’).cardlayout ();
這將顯示為:
cardLayout
外掛程式會根據各元素的高度,並考量父項的寬度,來排列封閉的UL
元素。
介面工具集結合一或多個基本元素與javascript外掛程式,以形成「較高層級」的UI元素。 它們可實作比單一元素更複雜的行為,也能提供更複雜的外觀和感覺。 標籤選擇器或邊欄Widget就是很好的例子。
介面工具集可觸發並監聽自訂事件,以配合頁面上的其他介面工具集。 有些Widget實際上是使用Coral HTML元素的原生jQuery Widget。
目的:
實施:
示例標注為:
<input type="text" name="tags" placeholder="Tags" class="tagManager"/>
對jQuery外掛程式的呼叫(含選項):
$(".tagManager").tagsManager({
prefilled: ["Pisa", "Rome"] })
外掛程式會發出HTML標籤(此標籤會使用基本元素,這些元素可能會在內部使用其他外掛程式):
<span>Pisa</span>
<a title="Removing tag" tagidtoremove="0"
id="myRemover_0" class="myTagRemover" href="#">x</a></span>
<span id="myTag_1" class="myTag"><span>Rome</span>
<a title="Removing tag" tagidtoremove="1"
id="myRemover_1" class="myTagRemover" href="#">x</a></span>
<input type="text" data-original-title="" class="input-medium tagManager"
placeholder="Tags" name="tags" data-provide="typeahead" data-items="6"
autocomplete="off">
這將顯示為:
此程式庫是Javascript Helper外掛程式和/或函式的集合,這些外掛程式和/或函式包括:
這些包括XSS處理和事件匯流排。
雖然HTML元素外掛程式和Widget可能仰賴公用程式程式庫提供的功能,但公用程式庫不能對元素和Widget本身有任何硬性的依賴。
目的:
實施: