使用CustomToolbars呈現HTMLForms rendering-html-forms-with-customtoolbars
本檔案中的範例和範例僅適用於JEE環境上的AEM Forms 。
使用自訂工具列呈現HTMLForms rendering-html-forms-with-custom-toolbars
Forms服務可讓您自訂以HTML表單呈現的工具列。 您可以自訂工具列,以透過覆寫預設CSS樣式來變更其外觀,並透過覆寫Java指令碼來新增動態行為。 工具列是使用名為fscmenu.xml的XML檔案自訂的。 依預設,Forms服務會從內部指定的URI位置擷取此檔案。
您可以從此位置複製fscmenu.xml,修改它以符合您的要求,然後將其置於自訂URI位置。 接下來,使用Forms Service API,從指定位置使用fscmenu.xml檔案設定導致Forms服務的執行階段選項。 這些動作會導致Forms服務轉譯具有自訂工具列的HTML表單。
除了fscmenu.xml檔案外,您還需要取得下列檔案:
- fscmenu.js
- fscattachments.js
- fscmenu.css
- fscmenu-v.css
- fscmenu-ie.css
- fscdialog.css
fscJS是與每個節點相關聯的Java指令碼。 必須為以下專案提供一個 div#fscmenu
節點和(選擇性)的 ul#fscmenuItem
節點。 JS檔案實作核心工具列功能,而預設檔案則可運作。
fscCSS是與特定節點關聯的樣式表。 CSS檔案中的樣式會指定工具列外觀。 fscVCSS 是垂直工具列的樣式表,顯示在已轉譯HTML表單的左側。 fscIECSS 是樣式表,用於HTML在Internet Explorer中轉譯的表單。
確定上述所有檔案都在fscmenu.xml檔案中參照。 也就是說,在fscmenu.xml檔案中,指定指向這些檔案的URI位置,讓Forms服務可以找到它們。 依預設,這些檔案可在以內部關鍵字開頭的URI位置取得 FSWebRoot
或 ApplicationWebRoot
.
若要自訂工具列,請使用外部關鍵字取代關鍵字 FSToolBarURI
. 此關鍵字代表在執行階段傳遞至Forms服務的URI (本節稍後將說明此方法)。
您也可以指定這些JS和CSS檔案的絕對位置,例如https://www.mycompany.com/scripts/misc/fscmenu.js。 在此情況下,您不需要使用 FSToolBarURI
關鍵字。
FSToolBarURI
關鍵字或絕對位置。您可以開啟adobe-forms以取得JS和CSS檔案。<appserver>.ear檔案。 在此檔案中,開啟adobe-forms-res.war。 所有這些檔案都在WAR檔案中。 Adobe-forms-<appserver>.ear檔案位於AEM forms安裝資料夾中(C:\是安裝目錄)。 您可以開啟Adobe Forms-<appserver>.ear使用檔案擷取工具,例如WinRAR。
下列XML語法顯示範例fscmenu.xml檔案。
<div id="fscmenu" fscJS="FSToolBarURI/scripts/fscmenu.js" fscCSS="FSToolBarURI/fscmenu.css" fscVCSS="FSToolBarURI/fscmenu-v.css" fscIECSS="FSToolBarURI/fscmenu-ie.css">
<ul class="fscmenuItem" id="Home">
<li>
<a href="#" fscTarget="_top" tabindex="1">Home</a>
</li>
</ul>
<ul class="fscmenuItem" id="Upload" fscJS="FSToolBarURI/scripts/fscattachments.js" fscCSS="FSToolBarURI/fscdialog.css">
<li>
<a tabindex="2">Upload Attachments</a>
<ul class="fscmenuPopup" id="fscUploadAttachments">
<li>
<a href="javascript:doUploadDialog();" tabindex="3">Add ...</a>
</li>
<li>
<a href="javascript:doDeleteDialog();" tabindex="4">Delete ...</a>
</li>
</ul>
</li>
</ul>
<ul class="fscmenuItem" id="Download">
<li>
<a tabindex="100">Download Attachments</a>
<ul class="fscmenuPopup">
<li>
<a tabindex="101">None available</a>
</li>
</ul>
</li>
</ul>
</div>
下列專案說明如何自訂工具列:
- 變更值
fscJS
,fscCSS
,fscVCSS
,fscIECSS
屬性(在fscmenu.xml檔案中),使用本節中說明的其中一種方法(例如,fscJS="FSToolBarURI/scripts/fscmenu.js"
)。 - 必須指定所有CSS和JS檔案。 如果未修改任何檔案,請在自訂位置提供預設檔案。 您可以依照本節所述開啟各種檔案來取得預設檔案。
- 允許為任何檔案提供絕對參照(例如,https://www.example.com/scripts/custom-vertical-fscmenu.css)。
- JS和CSS檔案可以
div#fscmenu
節點需要工具列功能的必要專案。 個人ul#fscmenuItem
節點可能有或沒有支援的JS或CSS檔案。
變更本機值
在自訂工具列時,您可以變更工具列的地區設定值。 也就是說,您可以用其他語言顯示它。 下圖顯示以法文顯示的自訂工具列。
若要變更工具列的語言環境值,請確定fscmenu.xml檔案包含您要顯示的語言。 下列XML語法顯示用來顯示法文工具列的fscmenu.xml檔案。
<div id="fscmenu" fscJS="FSToolBarURI/scripts/fscmenu.js" fscCSS="FSToolBarURI/fscmenu.css" fscVCSS="FSToolBarURI/fscmenu-v.css" fscIECSS="FSToolBarURI/fscmenu-ie.css">
<ul class="fscmenuItem" id="Home">
<li>
<a href="#" fscTarget="_top" tabindex="1">Accueil</a>
</li>
</ul>
<ul class="fscmenuItem" id="Upload" fscJS="FSToolBarURI/scripts/fscattachments.js" fscCSS="FSToolBarURI/fscdialog.css">
<li>
<a tabindex="2">Télécharger les pièces jointes</a>
<ul class="fscmenuPopup" id="fscUploadAttachments">
<li>
<a href="javascript:doUploadDialog();" tabindex="3">Ajouter...</a>
</li>
<li>
<a href="javascript:doDeleteDialog();" tabindex="4">Supprimer...</a>
</li>
</ul>
</li>
</ul>
<ul class="fscmenuItem" id="Download">
<li>
<a tabindex="100">Télécharger les pièces jointes</a>
<ul class="fscmenuPopup">
<li>
<a tabindex="101">Aucune disponible</a>
</li>
</ul>
</li>
</ul>
</div>
此外,請叫用 HTMLRenderSpec
物件的 setLocale
方法並傳遞字串值,該值會指定地區設定值。 例如,通過 fr_FR
以指定法文。 Forms服務隨附本地化工具列。
如需Forms服務的詳細資訊,請參閱 AEM Forms服務參考.
步驟摘要 summary-of-steps
若要呈現包含自訂工具列的HTML表單,請執行以下工作:
- 包含專案檔案。
- 建立Forms Java API物件。
- 參考自訂fscmenu XML檔案。
- 呈現HTML表單。
- 將表單資料流寫入使用者端網頁瀏覽器。
包含專案檔案
在您的開發專案中包含必要的檔案。 如果您使用Java建立使用者端應用程式,請包含必要的JAR檔案。 如果您使用Web服務,請包含Proxy檔案。
建立Forms Java API物件
您必須先建立Forms使用者端物件,才能以程式設計方式執行Forms服務支援的操作。
參考自訂fscmenu XML檔案
若要呈現包含自訂工具列的HTML表單,請參照描述工具列的fscmenu XML檔案。 (本節提供fscmenu XML檔案的兩個範例。) 此外,請確定fscmenu.xml檔案正確指定所有參照檔案的位置。 如本節先前所述,請確定所有檔案已被 FSToolBarURI
關鍵字或其絕對位置。
呈現HTML表單
若要呈現HTML表單,請指定在Designer中建立並儲存為XDP檔案的表單設計。 同時選取HTML轉換型別。 例如,您可以指定轉譯Internet Explorer 5.0或更新版本動態HTML的HTML轉換型別。
呈現HTML表單也需要值,例如呈現其他表單型別的URI值。
將表單資料流寫入使用者端網頁瀏覽器
Forms服務轉譯HTML表單時,會傳回您必須寫入使用者端網頁瀏覽器的表單資料流,才能讓使用者看到HTML表單。
另請參閱
使用Java API呈現具有自訂工具列的HTML表單 render-an-html-form-with-a-custom-toolbar-using-the-java-api
使用Forms Service API (Java)呈現包含自訂工具列的HTML表單:
-
包含專案檔案
在您的Java專案的類別路徑中包含使用者端JAR檔案,例如adobe-forms-client.jar。
-
建立Forms Java API物件
- 建立
ServiceClientFactory
包含連線屬性的物件。 - 建立
FormsServiceClient
物件,使用它的建構函式並傳遞ServiceClientFactory
物件。
- 建立
-
參考自訂fscmenu XML檔案
- 建立
HTMLRenderSpec
物件(使用其建構函式)。 - 若要使用工具列呈現HTML表單,請叫用
HTMLRenderSpec
物件的setHTMLToolbar
方法並傳遞HTMLToolbar
列舉值。 例如,若要顯示垂直HTML工具列,請傳遞HTMLToolbar.Vertical
. - 透過叫用
HTMLRenderSpec
物件的setToolbarURI
方法並傳遞字串值,該值會指定XML檔案的URI位置。 - 如果適用,請叫用
HTMLRenderSpec
物件的setLocale
方法並傳遞字串值,該值會指定地區設定值。 預設值為英文。
note note NOTE 與此區段關聯的「快速入門」會將此值設為 fr_FR
. - 建立
-
呈現HTML表單
叫用
FormsServiceClient
物件的renderHTMLForm
方法並傳遞下列值:- 字串值,指定表單設計名稱,包括副檔名。 如果您參照的表單設計屬於Forms應用程式的一部分,請務必指定完整路徑,例如
Applications/FormsApplication/1.0/FormsFolder/Loan.xdp
. - A
TransformTo
指定HTML偏好設定型別的列舉值。 例如,若要呈現與Internet Explorer 5.0或更新版本的動態HTML相容的HTML表單,請指定TransformTo.MSDHTML
. - A
com.adobe.idp.Document
包含要與表單合併之資料的物件。 如果您不想合併資料,請傳遞空白字元com.adobe.idp.Document
物件。 - 此
HTMLRenderSpec
儲存HTML執行階段選項的物件。 - 字串值,指定
HTTP_USER_AGENT
標頭值,例如Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)
. - A
URLSpec
此物件儲存轉譯HTML表單所需的URI值。 - A
java.util.HashMap
儲存檔案附件的物件。 這是選用引數,您可以指定null
如果您不想將檔案附加至表單。
此
renderHTMLForm
方法傳回FormsResult
包含必須寫入使用者端Web瀏覽器的表單資料流的物件。 - 字串值,指定表單設計名稱,包括副檔名。 如果您參照的表單設計屬於Forms應用程式的一部分,請務必指定完整路徑,例如
-
將表單資料流寫入使用者端網頁瀏覽器
- 建立
com.adobe.idp.Document
物件(透過叫用FormsResult
物件getOutputContent
方法。 - 取得
com.adobe.idp.Document
物件(透過叫用其getContentType
方法。 - 設定
javax.servlet.http.HttpServletResponse
物件的內容型別,透過叫用其setContentType
方法並傳遞的內容型別com.adobe.idp.Document
物件。 - 建立
javax.servlet.ServletOutputStream
用來將表單資料流寫入使用者端網頁瀏覽器的物件,方法是叫用javax.servlet.http.HttpServletResponse
物件的getOutputStream
方法。 - 建立
java.io.InputStream
物件(透過叫用com.adobe.idp.Document
物件的getInputStream
方法。 - 建立位元組陣列,並叫用
InputStream
物件的read
方法,並將位元組陣列作為引數傳遞。 - 叫用
javax.servlet.ServletOutputStream
物件的write
將表單資料流傳送至使用者端web瀏覽器的方法。 將位元組陣列傳遞至write
方法。
- 建立
另請參閱
快速入門(SOAP模式):使用Java API使用自訂工具列轉譯HTML表單
使用網站服務API呈現具有自訂工具列的HTML表單 rendering-an-html-form-with-a-custom-toolbar-using-the-web-service-api
使用Forms Service API (Web服務)呈現包含自訂工具列的HTML表單:
-
包含專案檔案
- 建立使用Forms服務WSDL的Java Proxy類別。
- 在類別路徑中包含Java Proxy類別。
-
建立Forms Java API物件
建立
FormsService
物件並設定驗證值。 -
參考自訂fscmenu XML檔案
- 建立
HTMLRenderSpec
物件(使用其建構函式)。 - 若要使用工具列呈現HTML表單,請叫用
HTMLRenderSpec
物件的setHTMLToolbar
方法並傳遞HTMLToolbar
列舉值。 例如,若要顯示垂直HTML工具列,請傳遞HTMLToolbar.Vertical
. - 透過叫用
HTMLRenderSpec
物件的setToolbarURI
方法並傳遞字串值,該值會指定XML檔案的URI位置。 - 如果適用,請叫用
HTMLRenderSpec
物件的setLocale
方法並傳遞字串值,該值會指定地區設定值。 預設值為英文。
note note NOTE 與此區段關聯的「快速入門」會將此值設為 fr_FR
. - 建立
-
呈現HTML表單
叫用
FormsService
物件的renderHTMLForm
方法並傳遞下列值:- 字串值,指定表單設計名稱,包括副檔名。 如果您參照的表單設計屬於Forms應用程式的一部分,請務必指定完整路徑,例如
Applications/FormsApplication/1.0/FormsFolder/Loan.xdp
. - A
TransformTo
指定HTML偏好設定型別的列舉值。 例如,若要呈現與Internet Explorer 5.0或更新版本的動態HTML相容的HTML表單,請指定TransformTo.MSDHTML
. - A
BLOB
包含要與表單合併之資料的物件。 如果您不想合併資料,請傳遞null
. - 此
HTMLRenderSpec
儲存HTML執行階段選項的物件。 - 字串值,指定
HTTP_USER_AGENT
標頭值,例如Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322
)。 如果您不想設定此值,可以傳遞空字串。 - A
URLSpec
此物件儲存轉譯HTML表單所需的URI值。 - A
java.util.HashMap
儲存檔案附件的物件。 此引數為選用引數,您可以指定null
如果您不打算將檔案附加至表單。 - 空白
com.adobe.idp.services.holders.BLOBHolder
由填入的物件renderHTMLForm
方法。 此引數值會儲存演算後的表單。 - 空白
com.adobe.idp.services.holders.BLOBHolder
由填入的物件renderHTMLForm
方法。 此引數會儲存輸出XML資料。 - 空白
javax.xml.rpc.holders.LongHolder
由填入的物件renderHTMLForm
方法。 此引數會儲存表單中的頁數。 - 空白
javax.xml.rpc.holders.StringHolder
由填入的物件renderHTMLForm
方法。 此引數會儲存地區設定值。 - 空白
javax.xml.rpc.holders.StringHolder
由填入的物件renderHTMLForm
方法。 此引數會儲存所使用的HTML演算值。 - 空白
com.adobe.idp.services.holders.FormsResultHolder
將包含此作業結果的物件。
此
renderHTMLForm
方法填入com.adobe.idp.services.holders.FormsResultHolder
以表單資料流傳遞作為最後一個引數值的物件,必須寫入使用者端Web瀏覽器。 - 字串值,指定表單設計名稱,包括副檔名。 如果您參照的表單設計屬於Forms應用程式的一部分,請務必指定完整路徑,例如
-
將表單資料流寫入使用者端網頁瀏覽器
- 建立
FormResult
物件,方法是取得com.adobe.idp.services.holders.FormsResultHolder
物件的value
資料成員。 - 建立
BLOB
包含表單資料的物件(透過叫用FormsResult
物件的getOutputContent
方法。 - 取得
BLOB
物件(透過叫用其getContentType
方法。 - 設定
javax.servlet.http.HttpServletResponse
物件的內容型別,透過叫用其setContentType
方法並傳遞的內容型別BLOB
物件。 - 建立
javax.servlet.ServletOutputStream
用來將表單資料流寫入使用者端網頁瀏覽器的物件,方法是叫用javax.servlet.http.HttpServletResponse
物件的getOutputStream
方法。 - 建立位元組陣列,並透過叫用
BLOB
物件的getBinaryData
方法。 此任務會指派FormsResult
物件至位元組陣列。 - 叫用
javax.servlet.http.HttpServletResponse
物件的write
將表單資料流傳送至使用者端web瀏覽器的方法。 將位元組陣列傳遞至write
方法。
- 建立
另請參閱