Skip to content

Commit 3145a80

Browse files
akaromlakaroml
authored
Jave Extension Guide - Frontend (#456)
Signed-off-by: Rome Li <[email protected]>
1 parent a44e8b7 commit 3145a80

File tree

6 files changed

+406
-2
lines changed

6 files changed

+406
-2
lines changed

‎package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@
4141
"onCommand:java.runtime",
4242
"onWebviewPanel:java.runtime",
4343
"onCommand:java.gettingStarted",
44-
"onWebviewPanel:java.gettingStarted"
44+
"onWebviewPanel:java.gettingStarted",
45+
"onCommand:java.extGuide",
46+
"onWebviewPanel:java.extGuide"
4547
],
4648
"contributes": {
4749
"commands": [
@@ -60,6 +62,10 @@
6062
{
6163
"command": "java.gettingStarted",
6264
"title": "Java: Getting Started"
65+
},
66+
{
67+
"command": "java.extGuide",
68+
"title": "Java: Extension Guide"
6369
}
6470
],
6571
"configuration": {

‎src/commands/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { createMavenProjectCmdHandler, createSpringBootProjectCmdHandler, create
88
import { overviewCmdHandler } from "../overview";
99
import { javaRuntimeCmdHandler } from "../java-runtime";
1010
import { javaGettingStartedCmdHandler } from "../getting-started";
11+
import { javaExtGuideCmdHandler } from "../ext-guide";
1112

1213
export function initialize(context: vscode.ExtensionContext) {
1314
context.subscriptions.push(vscode.commands.registerCommand("java.overview", instrumentCommand(context, "java.overview", instrumentCommand(context, "java.helper.overview", overviewCmdHandler))));
@@ -21,4 +22,5 @@ export function initialize(context: vscode.ExtensionContext) {
2122
context.subscriptions.push(vscode.commands.registerCommand("java.runtime", instrumentCommand(context, "java.runtime", javaRuntimeCmdHandler)));
2223
context.subscriptions.push(vscode.commands.registerCommand("java.helper.installExtension", instrumentCommand(context, "java.helper.installExtension", installExtensionCmdHandler)));
2324
context.subscriptions.push(vscode.commands.registerCommand("java.gettingStarted", instrumentCommand(context, "java.gettingStarted", javaGettingStartedCmdHandler)));
25+
context.subscriptions.push(vscode.commands.registerCommand("java.extGuide", instrumentCommand(context, "java.extGuide", javaExtGuideCmdHandler)));
2426
}

‎src/ext-guide/assets/index.html‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline'">
7+
<title>Java Extension Guide</title>
8+
</head>
9+
10+
<body>
11+
<div class="container mt-5 mb-5">
12+
<div class="row mb-3">
13+
<div class="col">
14+
<h1 class="font-weight-light">Java Extension Guide</h1>
15+
<h6 class="font-weight-light">Recommended extensions for Java development.</h5>
16+
</div>
17+
</div>
18+
<div class="row">
19+
<div class="col">
20+
<div class="card">
21+
<div class="card-body">
22+
<div class="row">
23+
<div class="col-3 d-block">
24+
<ul class="nav nav-pills flex-column mb-3" role="tablist">
25+
<li class="nav-item">
26+
<a class="nav-link active" id="tab-basics" data-toggle="tab" href="#panel-basics" role="tab" aria-controls="panel-basics" aria-selected="true" title="">Basics</a>
27+
</li>
28+
<li class="nav-item">
29+
<a class="nav-link" id="tab-frameworks" data-toggle="tab" href="#panel-frameworks" role="tab" aria-controls="panel-frameworks" aria-selected="false" title="">Frameworks</a>
30+
</li>
31+
<li class="nav-item">
32+
<a class="nav-link" id="tab-app-servers" data-toggle="tab" href="#panel-app-servers" role="tab" aria-controls="panel-app-servers" aria-selected="false" title="">Application Servers</a>
33+
</li>
34+
<li class="nav-item">
35+
<a class="nav-link" id="tab-keymaps" data-toggle="tab" href="#panel-keymaps" role="tab" aria-controls="panel-keymaps" aria-selected="false" title="">Keymaps</a>
36+
</li>
37+
</ul>
38+
</div>
39+
<div class="col-5">
40+
<div class="tab-content">
41+
42+
<!-- Basics -->
43+
<div class="tab-pane fade show active" id="panel-basics" role="tabpanel" aria-labelledby="tab-basics">
44+
<table class="table table-borderless table-hover table-sm">
45+
<tbody>
46+
<tr>
47+
<td>
48+
<div class="form-check">
49+
<input class="form-check-input" type="checkbox" value="redhat.java" id="chk.redhat.java">
50+
<label class="form-check-label" for="chk.redhat.java">
51+
Language Support for Java by Red Hat
52+
</label>
53+
54+
</div>
55+
</td>
56+
</tr>
57+
<tr>
58+
<td>
59+
<div class="form-check">
60+
<input class="form-check-input" type="checkbox" value="vscjava.vscode-java-debug" id="chk.vscjava.vscode-java-debug">
61+
<label class="form-check-label" for="chk.vscjava.vscode-java-debug">
62+
Debugger for Java
63+
</label>
64+
</div>
65+
</td>
66+
</tr>
67+
<tr>
68+
<td>
69+
<div class="form-check">
70+
<input class="form-check-input" type="checkbox" value="vscjava.vscode-java-project" id="chk.vscjava.vscode-java-project">
71+
<label class="form-check-label" for="chk.vscjava.vscode-java-project">
72+
Project Manager for Java
73+
</label>
74+
</div>
75+
</td>
76+
</tr>
77+
<tr>
78+
<td>
79+
<div class="form-check">
80+
<input class="form-check-input" type="checkbox" value="vscjava.vscode-java-test" id="chk.vscjava.vscode-java-test">
81+
<label class="form-check-label" for="chk.vscjava.vscode-java-test">
82+
Test Runner for Java
83+
</label>
84+
</div>
85+
</td>
86+
</tr>
87+
<tr>
88+
<td>
89+
<div class="form-check">
90+
<input class="form-check-input" type="checkbox" value="vscjava.vscode-maven" id="chk.vscjava.vscode-maven">
91+
<label class="form-check-label" for="chk.vscjava.vscode-maven">
92+
Maven for Java
93+
</label>
94+
</div>
95+
</td>
96+
</tr>
97+
<tr>
98+
<td>
99+
<div class="form-check">
100+
<input class="form-check-input" type="checkbox" value="sonarsource.sonarlint-vscode" id="chk.sonarsource.sonarlint-vscode">
101+
<label class="form-check-label" for="chk.sonarsource.sonarlint-vscode">
102+
Sonarlint
103+
</label>
104+
</div>
105+
</td>
106+
</tr>
107+
</tbody>
108+
</table>
109+
</div>
110+
111+
<!-- Frameworks -->
112+
<div class="tab-pane fade" id="panel-frameworks" role="tabpanel" aria-labelledby="tab-frameworks">
113+
<table class="table table-borderless table-hover table-sm">
114+
<tbody>
115+
<tr>
116+
<td>
117+
<div class="form-check">
118+
<input class="form-check-input" type="checkbox" value="pivotal.vscode-boot-dev-pack" id="chk.pivotal.vscode-boot-dev-pack">
119+
<label class="form-check-label" for="chk.pivotal.vscode-boot-dev-pack">
120+
Spring Boot Extension Pack
121+
</label>
122+
</div>
123+
</td>
124+
</tr>
125+
<tr>
126+
<td>
127+
<div class="form-check">
128+
<input class="form-check-input" type="checkbox" value="microprofile-community.vscode-microprofile-pack" id="chk.microprofile-community.vscode-microprofile-pack">
129+
<label class="form-check-label" for="chk.microprofile-community.vscode-microprofile-pack">
130+
MicroProfile Extension Pack
131+
</label>
132+
</div>
133+
</td>
134+
</tr>
135+
<tr>
136+
<td>
137+
<div class="form-check">
138+
<input class="form-check-input" type="checkbox" value="redhat.vscode-quarkus" id="chk.redhat.vscode-quarkus">
139+
<label class="form-check-label" for="chk.redhat.vscode-quarkus">
140+
Quarkus
141+
</label>
142+
</div>
143+
</td>
144+
</tr>
145+
</tbody>
146+
</table>
147+
</div>
148+
149+
<!-- Application Servers -->
150+
<div class="tab-pane fade" id="panel-app-servers" role="tabpanel" aria-labelledby="tab-app-servers">
151+
<table class="table table-borderless table-hover table-sm">
152+
<tbody>
153+
<tr>
154+
<td>
155+
<div class="form-check">
156+
<input class="form-check-input" type="checkbox" value="redhat.vscode-community-server-connector" id="chk.redhat.vscode-community-server-connector">
157+
<label class="form-check-label" for="chk.redhat.vscode-community-server-connector">
158+
Community Server Connectors
159+
</label>
160+
</div>
161+
</td>
162+
</tr>
163+
</tbody>
164+
</table>
165+
</div>
166+
167+
<!-- Keymaps -->
168+
<div class="tab-pane fade" id="panel-keymaps" role="tabpanel" aria-labelledby="tab-keymaps">
169+
<table class="table table-borderless table-hover table-sm">
170+
<tbody>
171+
<tr>
172+
<td>
173+
<div class="form-check">
174+
<input class="form-check-input" type="checkbox" value="alphabotsec.vscode-eclipse-keybindings" id="chk.alphabotsec.vscode-eclipse-keybindings">
175+
<label class="form-check-label" for="chk.alphabotsec.vscode-eclipse-keybindings">
176+
Eclipse Keymap
177+
</label>
178+
</div>
179+
</td>
180+
</tr>
181+
<tr>
182+
<td>
183+
<div class="form-check">
184+
<input class="form-check-input" type="checkbox" value="k--kato.intellij-idea-keybindings" id="chk.k--kato.intellij-idea-keybindings">
185+
<label class="form-check-label" for="chk.k--kato.intellij-idea-keybindings">
186+
IntelliJ IDEA Keybindings
187+
</label>
188+
</div>
189+
</td>
190+
</tr>
191+
</tbody>
192+
</table>
193+
</div>
194+
195+
</div>
196+
</div>
197+
<div class="col-4">
198+
<p class="d-none" ext="redhat.java">
199+
Java Linting, Intellisense, formatting, refactoring, Maven/Gradle support and more.
200+
</p>
201+
<p class="d-none" ext="vscjava.vscode-java-debug">
202+
Debug Java applications.
203+
</p>
204+
<p class="d-none" ext="vscjava.vscode-java-project">
205+
Manage Java projects, dependencies, and generate packages.
206+
</p>
207+
<p class="d-none" ext="vscjava.vscode-java-test">
208+
Run and debug JUnit & TestNG test cases.
209+
</p>
210+
<p class="d-none" ext="vscjava.vscode-maven">
211+
Manage Maven projects, work with goals & dependencies, generate projects from archetypes.
212+
</p>
213+
<p class="d-none" ext="sonarsource.sonarlint-vscode">
214+
Detect and fix quality issues as you write code.
215+
</p>
216+
<p class="d-none" ext="pivotal.vscode-boot-dev-pack">
217+
Spring Boot-specific support for `.java` files. As well as validation and content assist for Spring Boot `application.properties`, `application.yml` properties files.
218+
</p>
219+
<p class="d-none" ext="microprofile-community.vscode-microprofile-pack">
220+
A collection of extensions to develop Java microservices with Eclipse MicroProfile
221+
</p>
222+
<p class="d-none" ext="redhat.vscode-quarkus">
223+
Quarkus Tools for Visual Studio Code.
224+
</p>
225+
<p class="d-none" ext="redhat.vscode-community-server-connector">
226+
Manage and publish to servers and runtimes like Tomcat, Apache Felix, and Karaf.
227+
</p>
228+
<p class="d-none" ext="alphabotsec.vscode-eclipse-keybindings">
229+
Port of Eclipse keyboard shortcuts.
230+
</p>
231+
<p class="d-none" ext="k--kato.intellij-idea-keybindings">
232+
Port of IntelliJ IDEA Keybindings, including for WebStorm, PyCharm, PHP Storm, etc.
233+
</p>
234+
<p class="text-right">
235+
<a role="button" class="btn btn-primary btn-sm d-none" id="btn-learn-more" href="#">Learn More</a>
236+
</p>
237+
</div>
238+
</div>
239+
<div class="row">
240+
<div class="col-3"></div>
241+
<div class="col-5 text-right">
242+
<button type="button" class="btn btn-primary btn-sm d-none" id="btn-install-selected">Install Selected</button>
243+
<button type="button" class="btn btn-primary btn-sm" id="btn-install-all">Install All</button>
244+
</div>
245+
</div>
246+
</div>
247+
</div>
248+
</div>
249+
</div>
250+
</div>
251+
</body>
252+
253+
</html>

‎src/ext-guide/assets/index.ts‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT license.
3+
4+
import "../../assets/vscode.scss";
5+
import "bootstrap/js/src/tab";
6+
import * as $ from "jquery";
7+
8+
$("#navigationPanel a").click(e => {
9+
($($(e.target).attr("href")||"") as any).tab("show");
10+
});
11+
12+
let os = "win";
13+
if (navigator.platform.toLowerCase().indexOf("mac") === 0) {
14+
os = "mac";
15+
}
16+
17+
const osToHide = os === "win" ? "mac" : "win";
18+
$(`[data-os=${osToHide}]`).hide();
19+
20+
declare function acquireVsCodeApi(): any;
21+
const vscode = acquireVsCodeApi && acquireVsCodeApi();
22+
23+
$("a[data-toggle='tab']").on("shown.bs.tab", e => {
24+
vscode.postMessage({
25+
command: "tabActivated",
26+
tabId: e.target.id
27+
});
28+
29+
bsHide($("p[ext]:visible"));
30+
bsHide($("#btn-learn-more"));
31+
updateSelection();
32+
});
33+
34+
$("tr").hover(e => {
35+
const $chkBox = $(e.target).closest("tr").find("input[type='checkbox']");
36+
if ($chkBox.length === 0) {
37+
return;
38+
}
39+
40+
const ext = $chkBox.val();
41+
const $visibleDesc = $("p[ext]:visible");
42+
if ($visibleDesc.length > 0 && $visibleDesc.val() !== ext) {
43+
bsHide($visibleDesc);
44+
}
45+
46+
const $nextDesc = $(`p[ext='${ext}'].d-none`);
47+
bsShow($nextDesc);
48+
49+
const $learnMore = $("#btn-learn-more");
50+
$learnMore.attr("href", `https://marketplace.visualstudio.com/items?itemName=${ext}`);
51+
bsShow($learnMore);
52+
});
53+
54+
function updateSelection() {
55+
const $checked = $("input:checked:visible:enabled");
56+
const $btnSelected = $("#btn-install-selected");
57+
if ($checked.length === 0) {
58+
bsHide($btnSelected);
59+
return;
60+
}
61+
62+
$btnSelected.text(`Install Selected (${$checked.length})`);
63+
bsShow($btnSelected);
64+
}
65+
66+
$("input[type='checkbox']").change(updateSelection);
67+
68+
function bsHide($elem: JQuery<HTMLElement>) {
69+
$elem.addClass("d-none");
70+
}
71+
72+
function bsShow($elem: JQuery<HTMLElement>) {
73+
$elem.removeClass("d-none");
74+
}

0 commit comments

Comments
 (0)