教學課程的第7章使用原生Android行動應用程式來使用AEM Content Services的內容。
本教學課程使用 簡易原生Android行動應用程式 使用及顯示AEM Content Services公開的事件內容。
使用 Android 這在很大程度上並不重要,而且耗用的行動應用程式可以在任何行動平台的任何框架中撰寫,例如iOS。
Android之所以用於教學課程,是因為其可在Windows、macOs和Linux上執行Android模擬器、其受歡迎程度以及可寫成Java (AEM開發人員完全瞭解的語言)。
本教學課程的Android行動應用程式為not旨在指示如何建置Android行動應用程式或傳達Android開發最佳實務,而非說明如何從行動應用程式使用AEM Content Services。
如果AEM Publish未在上執行 http://localhost:4503 主機和連線埠可在行動應用程式的 Settings 指向屬性AEM發佈主機/連線埠。
本節重點說明互動最多、且取決於AEM Content Services及其JSON輸出的Android行動應用程式程式碼。
載入時,行動應用程式會執行 HTTP GET
至 /content/wknd-mobile/en/api/events.model.json
這是設定為提供內容以驅動行動應用程式的AEM Content Services端點。
因為Events API的可編輯範本(/content/wknd-mobile/en/api/events.model.json
)已鎖定,行動應用程式可經過編碼,以在JSON回應中的特定位置中尋找特定資訊。
HTTP GET
請求發佈至AEM Publish /content/wknd-mobile/en/api/events.model.json
收集內容以填入行動應用程式的UI。以下為行動應用程式程式碼中的 MainActivity
負責叫用AEM Content Services來收集推動行動應用程式體驗的內容。
protected void onCreate(Bundle savedInstanceState) {
...
// Create the custom objects that will map the JSON -> POJO -> View elements
final List<ViewBinder> viewBinders = new ArrayList<>();
viewBinders.add(new LogoViewBinder(this, getAemHost(), (ImageView) findViewById(R.id.logo)));
viewBinders.add(new TagLineViewBinder(this, (TextView) findViewById(R.id.tagLine)));
viewBinders.add(new EventsViewBinder(this, getAemHost(), (RecyclerView) findViewById(R.id.eventsList)));
...
initApp(viewBinders);
}
private void initApp(final List<ViewBinder> viewBinders) {
final String aemUrl = getAemUrl(); // -> http://localhost:4503/content/wknd-mobile/en/api/events.mobile.json
JsonObjectRequest request = new JsonObjectRequest(aemUrl, null,
new Response.Listener<JSONObject>() {
@Override
public void onResponse(JSONObject response) {
for (final ViewBinder viewBinder : viewBinders) {
viewBinder.bind(response);
}
}
},
...
);
}
onCreate(..)
是行動應用程式的初始化掛接,並註冊3個自訂 ViewBinders
負責剖析JSON並將值繫結至 View
元素。
initApp(...)
接著會呼叫,以向AEM Publish上的AEM Content Services端點發出HTTPGET請求來收集內容。 收到有效的JSON回應後,JSON回應會傳遞至每個 ViewBinder
負責剖析JSON並將其繫結至行動裝置 View
元素。
接下來,我們將審視 LogoViewBinder
,很簡單,但會強調幾個重要考量。
public class LogoViewBinder implements ViewBinder {
...
public void bind(JSONObject jsonResponse) throws JSONException, IOException {
final JSONObject components = jsonResponse.getJSONObject(":items").getJSONObject("root").getJSONObject(":items");
if (components.has("image")) {
final Image image = objectMapper.readValue(components.getJSONObject("image").toString(), Image.class);
final String imageUrl = aemHost + image.getSrc();
Glide.with(context).load(imageUrl).into(logo);
} else {
Log.d("WKND", "Missing Logo");
}
}
}
第一行 bind(...)
透過索引鍵向下導覽JSON回應 :items → root → :items 代表新增元件的AEM配置容器。
從此處,會對名為的金鑰進行檢查 影像,代表影像元件(再次強調,此節點名稱→JSON索引鍵穩定非常重要)。 如果此物件存在,則會讀取並對應至 自訂影像POJO 透過Jackson ObjectMapper
資料庫。 以下說明影像POJO。
最後,圖志的 src
會使用載入到Android ImageView中 Glide 協助程式庫。
請注意,我們必須提供AEM結構描述、主機和連線埠(透過 aemHost
)至AEM Publish執行個體,因為AEM Content Services只會提供JCR路徑(即 /content/dam/wknd-mobile/images/wknd-logo.png
)至參考的內容。
雖然可選用,但使用 Jackson ObjectMapper 或由其他程式庫(例如Gson)提供的類似功能,有助於將複雜的JSON結構對應到Java POJO,而不必費心直接處理原生JSON物件本身。 在這個簡單的案例中,我們會將 src
索引鍵來自 image
JSON物件,至 src
屬性直接透過 @JSONProperty
註解。
package com.adobe.aem.guides.wknd.mobile.android.models;
import com.fasterxml.jackson.annotation.JsonProperty;
public class Image {
@JsonProperty(value = "src")
private String src;
public String getSrc() {
return src;
}
}
事件POJO需要從JSON物件選取更多資料點,比起簡單的影像(我們只想要 src
.
現在您已瞭解AEM Content Services如何推動原生行動體驗,請使用您已學到的知識執行以下步驟,並檢視您的變更已反映在行動應用程式中。
在每個步驟後,提取以重新整理行動應用程式,並驗證行動體驗的更新。
您已完成AEM Headless教學課程!
若要進一步瞭解AEM Content Services和AEM as a Headless CMS,請造訪Adobe的其他檔案和啟用資料: