Create and Run Your First ZK Application with Visual Studio Code"

From Documentation
m
 
(9 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
== Introduction ==
 
== Introduction ==
  
We assume you chose VS Code because it is your favourite IDE and you already know your way around. Hence this article doesn't go into much detail. The bottom line is, there shouldn't be any surprise, ZK application can be run like any servlet web application (war) or spring boot (jar) application - the project structure remains the same (following the conventions of a maven or gradle project). Ideally your project should not depend on a specific IDE and run from command line. That allows your team members to pick an IDE of their choice. That being said a pointers to get started below.
+
We assume you chose VS Code because it is your favourite IDE and you already know your way around. Hence this article doesn't go into much detail about the IDE itself. The bottom line is, there shouldn't be any surprise, ZK application can be run like any servlet web application (war) or spring boot (jar) application - the project structure remains the same (following the conventions of a maven or gradle project). Ideally your project should not depend on a specific IDE and run from command line. That allows your team members to pick an IDE of their choice. That being said a few pointers to get started below.
  
 
== Install Visual Studio Code ==
 
== Install Visual Studio Code ==
Line 12: Line 12:
 
The [https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack Extension Pack for Java] works sufficiently well.
 
The [https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack Extension Pack for Java] works sufficiently well.
  
=== Syntax Highlighting for ZUL Files ===
+
=== ZUL Support in VS Code ===
 +
The ZK plugin for VS Code is available in the [https://marketplace.visualstudio.com/items?itemName=zkoss.vscode-zk-autocomplete VS Code Marketplace].
 +
 
 +
Highlighted features include syntax highlighting, autocompletion, element/attribute suggestion, auto tag closing and linking to Java file.
 +
 
 +
<!--
 +
=== Syntax Highlighting and Auto-Completion for ZUL Files ===
 
As of now, there is no official ZK Extension available. However since zul files are technically XML files you can add XML Schema based auto-completion. The popular extension [https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml XML Tools] can be configured like this.
 
As of now, there is no official ZK Extension available. However since zul files are technically XML files you can add XML Schema based auto-completion. The popular extension [https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml XML Tools] can be configured like this.
  
Line 30: Line 36:
 
Now element and attribute names will be suggested while typing.
 
Now element and attribute names will be suggested while typing.
  
[[File:VSCodeAutocomplete01.png]]
+
<gallery>
[[File:VSCodeAutocomplete02.png]]
+
VSCodeAutocomplete01.png|ZUL Element completion
 
+
VSCodeAutocomplete02.png|ZUL Attibute completion
=== Run the Project ===
+
</gallery>
 +
-->
 +
== Run the Project ==
  
Each project has a different ways to build/run. ZK projects produce standard war files or runnable spring boot jars, which can be run with the respective tools - e.g. Maven/Gradle plugins or Tomcat, Jetty extension in VS Code. As mentioned above ZK doesn't add anything specific here -> just run your project using the plugin of your choice.
+
Each project has a different ways to build/run. ZK projects produce standard war files or runnable spring boot jars, which can be run with the respective tools - e.g. Command Line, Maven/Gradle plugins or Tomcat, Jetty extension in VS Code.  
 +
As mentioned above ZK doesn't add anything specific here -> just run your project using the method of your choice.

Latest revision as of 11:02, 23 September 2021

Introduction

We assume you chose VS Code because it is your favourite IDE and you already know your way around. Hence this article doesn't go into much detail about the IDE itself. The bottom line is, there shouldn't be any surprise, ZK application can be run like any servlet web application (war) or spring boot (jar) application - the project structure remains the same (following the conventions of a maven or gradle project). Ideally your project should not depend on a specific IDE and run from command line. That allows your team members to pick an IDE of their choice. That being said a few pointers to get started below.

Install Visual Studio Code

Install VS Code from the official website.

Java Support in VS Code

As ZK is based on JAVA the first thing to add is java support to VS Code following the official guide.

The Extension Pack for Java works sufficiently well.

ZUL Support in VS Code

The ZK plugin for VS Code is available in the VS Code Marketplace.

Highlighted features include syntax highlighting, autocompletion, element/attribute suggestion, auto tag closing and linking to Java file.

Run the Project

Each project has a different ways to build/run. ZK projects produce standard war files or runnable spring boot jars, which can be run with the respective tools - e.g. Command Line, Maven/Gradle plugins or Tomcat, Jetty extension in VS Code. As mentioned above ZK doesn't add anything specific here -> just run your project using the method of your choice.