On this page
Guides
UI Customization
The folder of “ComPDFKit_Tools” includes the UI components to help conveniently integrate ComPDFKit PDF SDK. We have also built six standalone function programs, namely Viewer, Annotations, ContentEditor, Forms, DocsEditor, and Digital Signature, using this UI component library. Additionally, we have developed a program called PDFViewer that integrates all the above-mentioned example features for reference.
In this section, we will introduce how to use it from the following parts:
- Overview of "ComPDFKit_Tools" Folder: Show the folder structure and the main features included in the corresponding component.
- UI Components: Introduce the UI components and how to use them easily and fast.
Overview of "ComPDFKit_Tools" Folder
There are nine modules in "compDEkit Tools": "Common", "Viewer", "Annotations", "ContentEditor", "Forms", "DocsEditor", "DigitalSignature", "Security", and "Watermark". Each of them includes the code and UI components like the following table to process PDFs.
| Folder | SubFolder | Description |
|---|---|---|
| Common | BaseControl | Basic components used to compose other components, such as the value component to control the value of opacity, font size, border width, etc. |
| Convert | Data converter | |
| Helper | Static classes and static methods that provide assistance for common functions, such as a static method that can invoke a file open dialog and get the selected PDF file path: GetFilePathOrEmpty. | |
| PasswordControl | Include the UI components and interaction of typing file passwords. | |
| PropertyControl | Include the UI components and interaction of handling specified data type inputting. | |
| PDFView | PDFBookmark | Include the UI components and interaction of editing bookmarks and jumping pages. |
| PDFInfo | Include the UI components and interaction of document information. | |
| PDFDisplaySettings | Include the UI components and interaction of PDF viewing like setting themes, display modes, etc. | |
| PDFOutline | Include the UI components and interaction of jumping and displaying the PDF outline. | |
| PDFSearch | Include the UI component and interaction for searching PDFs and generating the search list. | |
| PDFThumbnail | Include the UI component and interaction of PDF thumbnails. | |
| Annotations | PDFAnnotationBar | Include the toolbar that indicates the required annotation type and order. Clicking on the navigation bar will pass the corresponding comment type enumeration through an event. |
| PDFAnnotationPanel | When creating or modifying annotations, specific property panels are displayed, and controls for handling data are provided. | |
| PDFAnnotationList | Include the UI component and interaction of displaying all annotations in a list, selecting and deleting specific annotations/all annotations. | |
| ContentEditor | PDFImageEditControl | Include the toolbar to edit PDF images and undo/redo the processing of editing PDF images. |
| PDFTextEditControl | Include the toolbar to edit PDF text and undo/redo the processing of editing PDF text. | |
| Forms | FormBarControl | Include the UI component and interaction of specifying needed form fields and the order of displaying the form field types in UI. |
| FormPropertyControl | Include the property panel and interaction to set the properties of forms. | |
| Docs Editor | PDFPageEditBar | Include the toolbar for creating, replacing, rotating, extracting, and deleting PDF pages |
| PDFPageEdit | Include the UI component and interaction of document editing like thumbnails, drag, right-click menu, etc. | |
| PDFPageExtract | Include the popup window of page extraction. It only processes and transfers the data. You can refer to PDFPageEdit for inserting pages. | |
| PDFPageInsert | Include the popup window of page insertion. It only processes and transfers the data. You can refer to PDFPageEdit for inserting pages. | |
| Digital Signatures | AddCertificationDialog | Include the popup window to create new certificates or using existing certificates. |
| CPDFSignatureListControl | Include the UI component and interaction of displaying the list of digital signatures and their status, with options to navigate to a specific signature location or open a signature status popup. | |
| VerifyDigitalSignatureControl | Include the popup window to display the signature status. | |
| SignatureStatusBarControl | Include the popup window to display all the signature statuses in this file. | |
| FillDigitalSignatureDialog | Include the popup window to create the signature appearance. | |
| ViewCertificateDialog | Include the popup window to view the signature certificates. |
UI Component
This section mainly introduces the connection between the UI components and API configuration of "ComPDFKit_Tools", which can not only help you quickly get started with the default UI but also help you view the associated API configuration. These UI components could be used and modified to create your customize UI.
Part 1:
The picture above shows the main UI components associated with the API of Viewer, which are also the fundamental UI components of "ComPDFKit_Tools". The following table shows the details of the connection between UI components and APIs.
| Number | Name | Functionality | Description |
|---|---|---|---|
| 1-1 | Title bar | CPDFTitleBarControl | The toolbar at the top of the PDF view window: Include the help center and file center. |
| 1-2 | Open file button | / | Control to switch a new document. |
| 1-3 | Save button | / | Control to save the current file. |
| 1-4 | Right panel button | CPDFBOTABarControl | Control the display status of the property panel. |
| 1-5 | Page scalling control | CPDFScalingControl | Control to change the zoom ratio of PDF. |
| 1-6 | Mode switcher | / | Switch the feature modules. |
| 1-7 | Search button | CPDFBOTABarControl | Enter the searching mode. |
| 1-8 | Display settings button | CPDFDisplaySettingsControl | Control to show or hide the setting panel. |
| 1-9 | Left panel button | CPDFAnnotationControl、FromPropertyControl、PDFContentEditControl | Control the displaying status of property panel. |
| 1-10 | PDF info button | CPDFInfoControl | Control the popup window of document information. |
| 1-11 | Page turning control | PageNumberControl | Control to jump to other specific pages quickly. |
| 1-12 | PDFViewControl | PDFViewControl | Basic interactions like zooming PDF view with mouse and executing page jumping or push button actions. |
Part 2:
The picture above shows the UI components associated with the API of outline, bookmark, thumbnail, annotation list, and searching. The following table shows the details of the connection between UI components and APIs.
| Number | Name | Functionality | Description |
|---|---|---|---|
| 1-1 | Thumbnails | CPDFThumbnailControl | Enter the thumbnails of PDFs. |
| 1-2 | Outlines | CPDFOutlineControl | Enter the outlines of PDFs. |
| 1-3 | Bookmark | CPDFBookmarkControl | Enter the bookmark list of PDFs. |
| 1-4 | Annotation List | CPDFThumbnailControl | Enter the annotation list of PDFs. |
| 1-5 | Search | CPDFSearchControl | Enter the PDF keywords searching. |
Part 3:
The picture above shows the UI components associated with the API of annotation. The following table shows the details of the connection between UI components and APIs.
| Number | Name | Functionality | Description |
|---|---|---|---|
| 1-1 | Annotation bar | CPDFAnnotationBarControl | Annotated toolbar, allowing specifying the annotation types and the order of displaying the annotation types in UI. |
| 1-2 | Undo redo | / | Undo/redo the processing of annotations. |
| 1-3 | Annotation panel | CPDFAnnotationControl | Preset annotation properties for creating annotation. |
Part 4:
The picture above shows the UI components associated with the API of the content editor. The following table shows the details of the connection between UI components and APIs.
| Number | Name | Functionality | Description |
|---|---|---|---|
| 1-1 | Content edit bar | / | The tool bar of content editor. Enter a state of creating text and only text editing, after clicking on text editing. After clicking on image editing, you can add images. After adding the images, you will enter the default mode, in which both images and text can be edited. |
| 1-2 | Undo redo | / | Undo redo the processing of editing PDF text/images. |
| 1-3 | Content edit panel | PDFContentEditControl | Preset text properties for adding text. After clicking on text or image, you will get the attributes of the currently selected object and can modify them. |
Part 5:
The picture above shows the UI components associated with the API of forms. The following table shows the details of the connection between UI components and APIs.
| Number | Name | Functionality | Description |
|---|---|---|---|
| 1-1 | Forms edit bar | CPDFFormBarControl | Tool bar of PDF forms. |
| 1-2 | Undo redo | / | Undo/redo the processing of forms. |
| 1-3 | Forms panel | FromPropertyControl | Set the properties of forms. |
Part 6:
The picture above shows the UI components associated with the API of the document editor. The following table shows the details of the connection between UI components and APIs.
| Number | Name | Functionality | Description |
|---|---|---|---|
| 1-1 | Docs edit bar | CPDFPageEditBarControl、CPDFPageExtractWindow、CPDFPageInsertWindow | Tool bar of document editor. |
| 1-2 | Docs editor | CPDFPageEditControl | Show the thumbnails of PDF pages and interaction for editing PDF pages. |
Part 7:
The picture above shows the UI components associated with the API of the digital signature. The following table shows the details of the connection between UI components and APIs.
| Number | Name | Functionality | Description |
|---|---|---|---|
| 1-1 | Signature bar | AddCertificationDialog、FillDigitalSignatureDialog | Add signature field, and verify all the signatures. |
| 1-2 | Signature status bar | SignatureStatusBarControl | Show the status of all the digital signatures. |
| 1-3 | Signature list | ViewCertificateDialog | A list to display all the digital signatures in PDFs. |