diff --git a/zk_studio_essentials/Check_and_Upgrade_Latest_ZK_Binary_Distribution.md b/zk_studio_essentials/Check_and_Upgrade_Latest_ZK_Binary_Distribution.md index 60f903a..6998015 100644 --- a/zk_studio_essentials/Check_and_Upgrade_Latest_ZK_Binary_Distribution.md +++ b/zk_studio_essentials/Check_and_Upgrade_Latest_ZK_Binary_Distribution.md @@ -6,7 +6,7 @@ and **ZK Storage View**. If the bundled version is not the very latest one or not the one you wish to work with, please follow the next section to manually download and link to the latest version. -![](images/images/studio-project-zks.png) +![](images/studio-project-zks.png) # Manually Download and Configure diff --git a/zk_studio_essentials/Create_a_New_ZK_Maven_Project.md b/zk_studio_essentials/Create_a_New_ZK_Maven_Project.md index 890ee7d..e0926f3 100644 --- a/zk_studio_essentials/Create_a_New_ZK_Maven_Project.md +++ b/zk_studio_essentials/Create_a_New_ZK_Maven_Project.md @@ -8,7 +8,7 @@ install the plugin first. Click **\[Help\]/\[Eclipse Marketplace...\]** and enter "maven" in "Find" textbox to find **Maven Integration for Eclipse**. Then click "Install" button. -![](images/images/studio-maven-plugin.png) +![](images/studio-maven-plugin.png) After completing the installation and restarting Eclipse, we can continue the following steps. @@ -17,40 +17,33 @@ continue the following steps. 1\. Select **\[File\]/\[New\]/\[Project\]** to open a New Project dialog. Then choose **Maven Project** under **Maven** item and click -"Next \>". ![ center \| -500px](studio-maven-project-wizard.png " center | 500px") +"Next \>". ![](images/studio-maven-project-wizard.png " center | 500px") -2\. Select location. We usually use default workspace location. ![ -center \| 500px](studio-maven-project-wizard-2.png " center | 500px") +2\. Select location. We usually use default workspace location. ![](images/studio-maven-project-wizard-2.png " center | 500px") 3\. Enter "zk" in filter to search ZK maven archetypes and select what -you want. Click **Next**. ![ center \| -500px](studio-maven-archetype.png " center | 500px") +you want. Click **Next**. ![](images/studio-maven-archetype.png " center | 500px") -- Notice: If you cannot find ZK maven archetypes, please refer to [ Add - ZK Maven - Archeype](ZK_Installation_Guide/Quick_Start/Create_and_Run_Your_First_ZK_Application_with_Eclipse_and_Maven#Add_ZK_Maven_Archetype). +- Notice: If you cannot find ZK maven archetypes, please refer to [ Add ZK Maven Archeype](ZK_Installation_Guide/Quick_Start/Create_and_Run_Your_First_ZK_Application_with_Eclipse_and_Maven#Add_ZK_Maven_Archetype). 4\. Enter preferred ZK version in `zk-version-since` and click -**Finish**. ![ center \| -500px](studio-maven-archetype-parameter.png " center | 500px") +**Finish**. ![](images/studio-maven-archetype-parameter.png " center | 500px") -5\. The new ZK maven project is created with ZK dependencies added. ![ -center \| 400px](studio-maven-project.png " center | 400px") +5\. The new ZK maven project is created with ZK dependencies added. ![](images/studio-maven-project.png " center | 400px") # Run ZK Maven Project 1\. Right click on your project icon and select **\[Run as\]/\[Maven build...\]** to open run configuration dialog. ![ center \| -600px](studio-maven-run.png " center | 600px") +600px](images/studio-maven-run.png " center | 600px") 2\. Enter **jetty:run** in **Goals** textbox and click **Run**. ![ -center \| 500px](studio-maven-run-jetty.png " center | 500px") +center \| 500px](images/studio-maven-run-jetty.png " center | 500px") - Running jetty the firs time may take a while because Maven plugins needs to download some necessary resources, please be patient. 3\. You can see the server starting messages showing up in Console view. -![ center \| 600px](studio-maven-run-console.png " center | 600px") +![ center \| 600px](images/studio-maven-run-console.png " center | 600px") Then visit to see the result. diff --git a/zk_studio_essentials/Create_a_New_ZK_Project.md b/zk_studio_essentials/Create_a_New_ZK_Project.md index 016c6c5..b6d7d8f 100644 --- a/zk_studio_essentials/Create_a_New_ZK_Project.md +++ b/zk_studio_essentials/Create_a_New_ZK_Project.md @@ -7,7 +7,7 @@ 1. Click **\[File\]/\[New\]/\[Other...\]/\[ZK Project\]** in Eclipse main menu. - ![](images/images/zk_studio_094_create_proj_0.png) + ![](images/zk_studio_094_create_proj_0.png) 2. Type the project name. Eclipse will automatically include the @@ -15,19 +15,19 @@ however, you can select another installed ZK release by "ZK Verstion" drop-down list. Then, click **Next**. - ![](images/images/zk_studio_094_create_proj_1.png) + ![](images/zk_studio_094_create_proj_1.png) 3. You can modify the **Source folders** and **Default output folder** if you like. Then, click **Next**. - ![](images/images/zk_studio_094_create_proj_4_1.png) + ![](images/zk_studio_094_create_proj_4_1.png) 4. You can modify **Context root** or **Content directory** if you like. Then, Click **Finish**. - ![](images/images/zk_studio_094_create_proj_4.png) + ![](images/zk_studio_094_create_proj_4.png) 5. After clicking **Finish**, the New Project Wizard will setup the ZK @@ -38,11 +38,11 @@ 1. The project icon's top right corner includes a ZK mark which indicates that it has ZK Studio supported: - ![](images/images/hasZKLibrary.png) + ![](images/hasZKLibrary.png) 2. The ZK package source code will be automatically attached to the related jar files - ![](images/images/Zk_studio_094_source_attach.png) + ![](images/Zk_studio_094_source_attach.png) # Creating a New ZUL File @@ -52,7 +52,7 @@ - Right click on a dynamic web project in "Project Explorer" view or "Package Explorer" view and select **\[New\]/\[ZUL\]**. - ![](images/images/NewZULFileRightClick.png) + ![](images/NewZULFileRightClick.png) @@ -60,13 +60,13 @@ - Click **\[File\]/\[New\]/\[Other\]** in Eclipse's main menu and select "ZUL" under "ZK" node then click **Next**. - ![](images/images/NewZULFileWizard_0.png) + ![](images/NewZULFileWizard_0.png) 2. Type the file name and optional page title, click **Finish**. - ![](images/images/NewZULFileWizard.png) + ![](images/NewZULFileWizard.png) 3. The newly created ZUL File will be opened in ZUL Editor. @@ -77,20 +77,20 @@ You can create new ZUL file by selecting the **\[File\]/\[New\]/\[File\]** in Eclipse's main menu. -![](images/images/NewZULFileMethod1-1.png) +![](images/NewZULFileMethod1-1.png) However, you have to enter the "**.zul**" extension by yourself and the newly create zul file will not contain any sample code. -![](images/images/NewZULFileMethod1-2.png) +![](images/NewZULFileMethod1-2.png) # Running the ZK Project 1\. Right click on the **MyApp** project in explorer and in the Menu dialog select **Run As / Run on Server** -![](images/images/studio-run-on-server.png) +![](images/studio-run-on-server.png) 2\. If you have not defined a server before, Eclipse will show a dialog with "Manually define a new server" option selected. Then Select @@ -100,12 +100,12 @@ environment", please refer to [WTP Tutorials – Building and Running a Web Application](http://www.eclipse.org/webtools/community/tutorials/BuildJ2EEWebApp/BuildJ2EEWebApp.html). -![](images/images/studio-run-select-server.png) +![](images/studio-run-select-server.png) 3\. Eclipse will display the result in its internal browser or you can view the result in your browser. -![](images/images/studio-run-result.png) +![](images/studio-run-result.png) **Tips:** diff --git a/zk_studio_essentials/Global_Preferences.md b/zk_studio_essentials/Global_Preferences.md index 51ba34c..5a0c0f2 100644 --- a/zk_studio_essentials/Global_Preferences.md +++ b/zk_studio_essentials/Global_Preferences.md @@ -4,7 +4,7 @@ from the tree on the left hand side. # Services -![](images/images/studio-preference-services.png) +![](images/studio-preference-services.png) **Error Reporter** @@ -31,7 +31,7 @@ automatically used for any new ZK web application. If you don't select a default ZK package, ZK Studio will automatically choose the latest version of your imported ZK Packages. -![](images/images/studio-preference-package.png) +![](images/studio-preference-package.png) Another way to import ZK package is through ZK Storage view, please refer to [Configure ZK Binary @@ -41,7 +41,7 @@ Distribution](ZK_Studio_Essentials/Features_of_ZK_Studio/ZKs#Configure_ZK_Binary This page is used to configure ZUL Editor. -![](images/images/studio-preference-editor.png) +![](images/studio-preference-editor.png) - **Use plugin's built in zul.xsd** diff --git a/zk_studio_essentials/Installation.md b/zk_studio_essentials/Installation.md index 79d2526..b9d0833 100644 --- a/zk_studio_essentials/Installation.md +++ b/zk_studio_essentials/Installation.md @@ -69,14 +69,14 @@ Marketplace is the easiest way to install plugins. Go to menu **\[Help\] \> \[Eclipse Markpetplace\]** and search **"zk studio"** you'll find **ZK Studio** to install. -![](images/images/Eclipse36_marketplace.png) +![](images/Eclipse36_marketplace.png) ## Update Site 1. Open Eclipse, click the **\[Help\]** menu and select **\[Install New Software...\]**. A install window will popup, and then click **Add** - ![](images/images/zkstudio_installation_35_1.png) + ![](images/zkstudio_installation_35_1.png) 2. Name the site as **"ZK Studio"** and copy corresponding update @@ -88,20 +88,20 @@ Marketplace is the easiest way to install plugins. Go to menu **\[Help\] The URL of ZK Studio for Eclipse 3.7: - ![](images/images/zkstudio_installation_35_2.png) + ![](images/zkstudio_installation_35_2.png) 3. Expand the update entry of ZK Studio, check **ZK Studio** and then click **Next** - ![](images/images/zkstudio_installation_35_3.png) + ![](images/zkstudio_installation_35_3.png) The Eclipse Installation System will now attempt to retrieve information from the update site. This will take some time depending on your eclipse environment, please be patient. 4. Click **Next** on the pop-up install wizard dialog. - ![](images/images/zkstudio_installation_35_4.png) + ![](images/zkstudio_installation_35_4.png) @@ -118,7 +118,7 @@ Marketplace is the easiest way to install plugins. Go to menu **\[Help\] The Installation process will now begin. - ![](images/images/zkstudio_installation_35_5.png) + ![](images/zkstudio_installation_35_5.png) @@ -135,7 +135,7 @@ Marketplace is the easiest way to install plugins. Go to menu **\[Help\] 5. Once the installation is complete, please restart Eclipse as prompted. - ![](images/images/zkstudio_installation_35_6.png) + ![](images/zkstudio_installation_35_6.png) ## Offline Installation diff --git a/zk_studio_essentials/Introduction.md b/zk_studio_essentials/Introduction.md index c619ca4..9142bcd 100644 --- a/zk_studio_essentials/Introduction.md +++ b/zk_studio_essentials/Introduction.md @@ -8,7 +8,7 @@ you are able to develop ZK-based applications easily and efficiently. ZK Studio includes the tools shown and listed below: -![](images/images/studio-introduction.png) +![](images/studio-introduction.png) 1. **ZUL Editor**: ZUL Editor is a document editor for writing \*.zul files. diff --git a/zk_studio_essentials/New_ZK_Project.md b/zk_studio_essentials/New_ZK_Project.md index 8b534f2..0351d3e 100644 --- a/zk_studio_essentials/New_ZK_Project.md +++ b/zk_studio_essentials/New_ZK_Project.md @@ -5,13 +5,13 @@ while ZK Studio does the rest for you. 1. Click **\[File\]/\[New\]/\[Other...\]/\[ZK Project\]** in Eclipse main menu. - ![](images/images/zk_studio_094_create_proj_0.png) + ![](images/zk_studio_094_create_proj_0.png) 2. Type the project name. Eclipse will automatically include the default ZK package configured in the ZK Package preferences, however, you can select any other installed ZK package by selecting it from the combo box. Then, click **Next**. - ![](images/images/zk_studio_094_create_proj_1.png) + ![](images/zk_studio_094_create_proj_1.png) We recommend you to use the latest ZK Packages to get the most features and performances. You can download the latest ZK packages @@ -22,10 +22,10 @@ while ZK Studio does the rest for you. 3. You can modify the **Source folders** and **Default output folder** if you like. Then, click **Next**. - ![](images/images/zk_studio_094_create_proj_4_1.png) + ![](images/zk_studio_094_create_proj_4_1.png) 4. You can modify **Context root** or **Content directory** if you like. Then, Click **Finish**. - ![](images/images/zk_studio_094_create_proj_4.png) + ![](images/zk_studio_094_create_proj_4.png) 5. After clicking **Finish**, the New Project Wizard will setup the ZK Project ready for development. diff --git a/zk_studio_essentials/Outline_View_of_ZUL.md b/zk_studio_essentials/Outline_View_of_ZUL.md index 9b4c54a..2799b69 100644 --- a/zk_studio_essentials/Outline_View_of_ZUL.md +++ b/zk_studio_essentials/Outline_View_of_ZUL.md @@ -3,7 +3,7 @@ currently selected ZUL Editor. It can be opened by clicking **\[Window\]/\[Show View\]/\[Outline\]**. Through this view, you can quickly get a big picture of the components you have used in a ZUL. -![](images/images/studio-outline-view.png) +![](images/studio-outline-view.png) Each component in this view is prefixed with an icon to distinguish different tag elements. Any modification made to the zul file will be diff --git a/zk_studio_essentials/Project_Properties.md b/zk_studio_essentials/Project_Properties.md index 4d102b4..0bbe9b1 100644 --- a/zk_studio_essentials/Project_Properties.md +++ b/zk_studio_essentials/Project_Properties.md @@ -8,7 +8,7 @@ Otherwise, **Package Setting** page is invisible. # ZK -![](images/images/studio-project-preference-zk.png) +![](images/studio-project-preference-zk.png) This preference page lists the version number, library location, and the add-ons currently available for the current project's ZK package. diff --git a/zk_studio_essentials/Property_View_of_a_Component.md b/zk_studio_essentials/Property_View_of_a_Component.md index e35ac5c..d902a6f 100644 --- a/zk_studio_essentials/Property_View_of_a_Component.md +++ b/zk_studio_essentials/Property_View_of_a_Component.md @@ -4,7 +4,7 @@ Outline view or of a component you have put the cursor on in the ZUL Editor. You can open it by clicking **\[Window\]/\[Show View\]/\[Properties\]**. -![](images/images/studio-properties-view.png) +![](images/studio-properties-view.png)
diff --git a/zk_studio_essentials/Welcome_Page.md b/zk_studio_essentials/Welcome_Page.md index 6c24061..952d43d 100644 --- a/zk_studio_essentials/Welcome_Page.md +++ b/zk_studio_essentials/Welcome_Page.md @@ -10,4 +10,4 @@ The page's hyperlinks consist of two types: The Welcome Page can be opened by clicking **\[Help\]/\[ZK Help\]/\[ZK Welcome Page\]** -![](images/images/studio-welcome-page.png) +![](images/studio-welcome-page.png) diff --git a/zk_studio_essentials/Work_with_Existing_Dynamic_Web_Projects.md b/zk_studio_essentials/Work_with_Existing_Dynamic_Web_Projects.md index f86c7b9..a4c3dad 100644 --- a/zk_studio_essentials/Work_with_Existing_Dynamic_Web_Projects.md +++ b/zk_studio_essentials/Work_with_Existing_Dynamic_Web_Projects.md @@ -8,4 +8,4 @@ project. 3. Check **ZK Studio Supports**on right panel and click **Apply**. 4. Click **OK** to close project preference window. -![](images/images/addZKtoExistProject_1.png) +![](images/addZKtoExistProject_1.png) diff --git a/zk_studio_essentials/ZK_Perspective.md b/zk_studio_essentials/ZK_Perspective.md index 9561891..9ca6cee 100644 --- a/zk_studio_essentials/ZK_Perspective.md +++ b/zk_studio_essentials/ZK_Perspective.md @@ -4,4 +4,4 @@ including the **Properties** view, the **ZK Storage View**, the clicking **\[Window\]/\[Open Perspective\]/\[Others\]** and selecting **ZK**, and it will look like this: -![](images/images/studio-perspective.png) +![](images/studio-perspective.png) diff --git a/zk_studio_essentials/ZKs.md b/zk_studio_essentials/ZKs.md index 00512af..fee4ef5 100644 --- a/zk_studio_essentials/ZKs.md +++ b/zk_studio_essentials/ZKs.md @@ -4,7 +4,7 @@ ZKs stands for **ZK Storage**. It is the mechanism by which ZK studio manages ZK releases that your ZK project or ZK studio may use. You can see the contents of ZK Storage in the **ZK Storage View** -![](images/images/studio-storage-view.png) +![](images/studio-storage-view.png) # ZK Binary Distribution Management @@ -15,12 +15,12 @@ To browse and install ZK binary releases, open ZK Storage view and click **\[Window\]/\[Show View\]/\[Other\]** and selecting **ZK / ZK Storage View**. -![](images/images/studio-storage-view-download.png) +![](images/studio-storage-view-download.png) Click on the icon, and the Installation dialog will popup where you can browse and select. -![](images/images/studio-release-install-process.png) +![](images/studio-release-install-process.png) After clicking **Start**, the installation process will be triggered and selected releases will appear in your ZK Storage. @@ -39,7 +39,7 @@ View\]/\[Other\]** and selecting **ZK / ZK Storage View**. Step 1: Click **Import** in ZK Storage View. -![](images/images/studio-storage-view-import.png) +![](images/studio-storage-view-import.png) Step 2: Click **File Import** and a file dialog will appear, choose the ZK archive file you have downloaded, and click **Finish** to import. @@ -62,7 +62,7 @@ title=" center | 450px" /> To remove a ZK release, simply right click on it and click **Delete a Package**. -![](images/images/studio-storage-view-delete.png) +![](images/studio-storage-view-delete.png) ### Configure ZK Binary Distribution @@ -73,4 +73,4 @@ ZK Studio will automatically choose the latest version of those imported ZK Packages as the default package. You can remove unwanted ZK package by selecting the row in **ZK Package** then click **Remove**. -![](images/images/studio-preference-package.png) +![](images/studio-preference-package.png) diff --git a/zk_studio_essentials/ZUL_Editor.md b/zk_studio_essentials/ZUL_Editor.md index fcc5f19..a7ac872 100644 --- a/zk_studio_essentials/ZUL_Editor.md +++ b/zk_studio_essentials/ZUL_Editor.md @@ -14,12 +14,12 @@ variable, object, method, or class declaration, and selected token's all occurrences (read/write access) in the currently opened zul file will be marked. -![](images/images/mark1.png) +![](images/mark1.png) Mark Occurrence also works when the token is located within an EL Expression. -![](images/images/el_mark.png) +![](images/el_mark.png) # Syntax Checking @@ -31,29 +31,29 @@ discover how many errors are present in the zul file and the location of said errors. By clicking on the marker you can jump to the line which contains the error. -![](images/images/syntaxCheckRightBar.png) +![](images/syntaxCheckRightBar.png) The markers on the left hand side show an appropriate error message when clicked. -![](images/images/syntaxCheckLeftMark.png) +![](images/syntaxCheckLeftMark.png) Move the mouse on the occurrence of the error marked by a red wavy line (or the warning marked by a yellow wavy line) and the error message will be display in a tooltip. -![](images/images/syntaxCheckTooltip.png) +![](images/syntaxCheckTooltip.png) Syntax checking also works on data binding expressions. -![](images/images/studio-syntax-checking-mvvm.png) +![](images/studio-syntax-checking-mvvm.png) # Syntax Coloring Java code enclosed within and tags are colored appropriately according to the syntax. -![](images/images/studio-syntax-coloring.png) +![](images/studio-syntax-coloring.png) # Content Assist @@ -74,7 +74,7 @@ For basic usage scenario, please refer to Eclipse official tutorial: ZUL & XML tags support content assist and can be invoked by using the default content assist keyboard shortcut. -![](images/images/contentAssistXMLTag.png) +![](images/contentAssistXMLTag.png) This feature doesn't work on those add-on components like ZK Charts and ZK Spreadsheet. @@ -84,7 +84,7 @@ ZK Spreadsheet. The content within **use** and **apply** attributes also supports content assist. -![](images/images/contentAssistinAttribute.png) +![](images/contentAssistinAttribute.png) ## Zscript Content Assist @@ -93,20 +93,20 @@ auto completion functionality within **`...`**, **`...`** code blocks and event attribute values in the ZUML tag. -![](images/images/contentAssistZscript.png) +![](images/contentAssistZscript.png) Classes located in JAR files can also be included in content assist. In addition to that if the JAR's source code is available, JavaDoc can be shown beside the content assist window. -![](images/images/contentAssistJavaDoc.png) +![](images/contentAssistJavaDoc.png) ## EL Expression Content Assist Inside the EL Expression you can also invoke the content assist via a keyboard shortcut. -![](images/images/contentAssistEL.png) +![](images/contentAssistEL.png) ## MVVM Content Assist @@ -125,7 +125,7 @@ title=" center | 500px" /> When you enter a **dot** ('.'), it list a ViewModel's properties. ![ center \| -600px](studio-contentassist-mvvm-properties.png " center | 600px") +600px](images/studio-contentassist-mvvm-properties.png " center | 600px") ### Available variables @@ -141,7 +141,7 @@ ZK Studio provides Javadoc hovering functionality. When a cursor hovers over the code, Javadoc belonging to the element will be shown in a tooltip. -![](images/images/JAVADocHover.png) +![](images/JAVADocHover.png) Please note in order for content assist and Javadoc to work with JAR files you need to set source and/or Javadoc of said files, please refer @@ -200,7 +200,7 @@ resource). A ZUML tag's event attribute value is also accessible using Hyperlink Navigation. -![](images/images/attrHyperlink.png) +![](images/attrHyperlink.png) # ZUL File Formatting @@ -217,4 +217,4 @@ source format keyboard shortcut is **'Ctrl + Shift + F**. You can reconfigure the keyboard shortcut as described in [Configure Keyboard Shortcuts](ZK_Studio_Essentials/Eclipse_Tips#Configure_Keyboard_Shortcuts). -![](images/images/sourceFormat.png) +![](images/sourceFormat.png) diff --git a/zk_studio_essentials/ZUL_Palette.md b/zk_studio_essentials/ZUL_Palette.md index 5bb5e33..26206a1 100644 --- a/zk_studio_essentials/ZUL_Palette.md +++ b/zk_studio_essentials/ZUL_Palette.md @@ -27,4 +27,4 @@ The ZUL Palette supports ZUML tag name filtering. Upon typing a component's name into the filter text box to search, the palette will filter listed components automatically. -![](images/images/studio-palette-filter.png) +![](images/studio-palette-filter.png) diff --git a/zk_studio_essentials/images/Zk_studio_094_source_attach.png b/zk_studio_essentials/images/Zk_studio_094_source_attach.png new file mode 100644 index 0000000..5aa6dad Binary files /dev/null and b/zk_studio_essentials/images/Zk_studio_094_source_attach.png differ diff --git a/zk_studio_essentials/zk_xml_Editor.md b/zk_studio_essentials/zk_xml_Editor.md index 0b6e3d2..5086261 100644 --- a/zk_studio_essentials/zk_xml_Editor.md +++ b/zk_studio_essentials/zk_xml_Editor.md @@ -3,7 +3,7 @@ your project's `WEB-INF/zk.xml`). The editor can be opened by right clicking the zk.xml file and selecting **\[Open With\]/\[XML Editor for zk.xml\]** from the context menu. -![](images/images/zkxmlEditor.png) +![](images/zkxmlEditor.png) The zk.xml editor provides content assist when editing the ZK configuration file. For detailed descriptions of every element in