Skip to content

Commit acef2d6

Browse files
akaromlakaroml
authored
Getting Started - Quick Start (#183)
* Improve JDK acquisition UX Signed-off-by: Rome Li <[email protected]> * Getting Started - Quick Start Signed-off-by: Rome Li <[email protected]>
1 parent 672069d commit acef2d6

File tree

9 files changed

+238
-4
lines changed

9 files changed

+238
-4
lines changed

‎package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,9 @@
3939
"onCommand:java.showReleaseNotes",
4040
"onWebviewPanel:java.overview",
4141
"onCommand:java.runtime",
42-
"onWebviewPanel:java.runtime"
42+
"onWebviewPanel:java.runtime",
43+
"onCommand:java.gettingStarted",
44+
"onWebviewPanel:java.gettingStarted"
4345
],
4446
"contributes": {
4547
"commands": [
@@ -54,6 +56,10 @@
5456
{
5557
"command": "java.runtime",
5658
"title": "Java: Configure Java Runtime"
59+
},
60+
{
61+
"command": "java.gettingStarted",
62+
"title": "Java: Getting Started"
5763
}
5864
]
5965
},

‎src/assets/vscode.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,19 @@ $link-hover-color: $link-color;
55
$link-hover-decoration: none !default;
66

77
$list-group-bg: var(--vscode-notifications-background) !default;
8-
$list-group-active-bg: $list-group-bg;
8+
$list-group-active-color: var(--vscode-notifications-foreground) !default;
9+
$list-group-active-bg: var(--vscode-notifications-border) !default;
910
$list-group-hover-bg: $list-group-bg;
1011
$list-group-action-active-bg: $list-group-bg;
11-
$list-group-border-color: var(--vscode-notifications-border) !default;
12+
$list-group-border-color: var(--vscode-notifications-background) !default;
1213
$list-group-action-color: var(--vscode-notifications-foreground) !default;
1314
$list-group-item-padding-y: .75rem !default;
1415
$list-group-item-padding-x: 1rem !default;
1516

1617
$list-group-border-radius: 0 !default;
1718

1819
$font-size-base: .8rem !default;
20+
$pre-color: var(--vscode-textPreformat-foreground) !default;
1921

2022
$text-muted: var(--vscode-editorCodeLens-foreground) !default;
2123

‎src/commands/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { instrumentCommand } from "../utils";
77
import { createMavenProjectCmdHanlder, createSpringBootProjectCmdHandler, showExtensionCmdHandler, openUrlCmdHandler, showReleaseNotesHandler, installExtensionCmdHandler } from "./handler";
88
import { overviewCmdHandler } from "../overview";
99
import { javaRuntimeCmdHandler } from "../java-runtime";
10+
import { javaGettingStartedCmdHandler } from "../getting-started";
1011

1112
export function initialize(context: vscode.ExtensionContext) {
1213
context.subscriptions.push(vscode.commands.registerCommand("java.overview", instrumentCommand(context, "java.overview", instrumentCommand(context, "java.helper.overview", overviewCmdHandler))));
@@ -17,4 +18,5 @@ export function initialize(context: vscode.ExtensionContext) {
1718
context.subscriptions.push(vscode.commands.registerCommand("java.showReleaseNotes", instrumentCommand(context, "java.showReleaseNotes", showReleaseNotesHandler)));
1819
context.subscriptions.push(vscode.commands.registerCommand("java.runtime", instrumentCommand(context, "java.runtime", javaRuntimeCmdHandler)));
1920
context.subscriptions.push(vscode.commands.registerCommand("java.helper.installExtension", instrumentCommand(context, "java.helper.installExtension", installExtensionCmdHandler)));
21+
context.subscriptions.push(vscode.commands.registerCommand("java.gettingStarted", instrumentCommand(context, "java.gettingStarted", javaGettingStartedCmdHandler)));
2022
}

‎src/extension.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { initialize as initRecommendations } from "./recommendation";
1010
import { initialize as initMisc, showReleaseNotesOnStart } from "./misc";
1111
import { showOverviewPageOnActivation, OverviewViewSerializer } from "./overview";
1212
import { validateJavaRuntime, JavaRuntimeViewSerializer } from "./java-runtime";
13+
import { JavaGettingStartedViewSerializer } from "./getting-started";
1314

1415
export async function activate(context: vscode.ExtensionContext) {
1516
initializeTelemetry(context);
@@ -24,6 +25,7 @@ async function initializeExtension(operationId: string, context: vscode.Extensio
2425

2526
context.subscriptions.push(vscode.window.registerWebviewPanelSerializer("java.overview", new OverviewViewSerializer()));
2627
context.subscriptions.push(vscode.window.registerWebviewPanelSerializer("java.runtime", new JavaRuntimeViewSerializer()));
28+
context.subscriptions.push(vscode.window.registerWebviewPanelSerializer("java.gettingStarted", new JavaGettingStartedViewSerializer()));
2729

2830
await showOverviewPageOnActivation(context);
2931
await showReleaseNotesOnStart(context);

‎src/getting-started/assets/index.html‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
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 Getting Started</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 Getting Started</h1>
15+
</div>
16+
</div>
17+
<div class="row">
18+
<div class="col">
19+
<div class="card">
20+
<div class="card-body">
21+
<div class="row">
22+
<div class="col d-block d-md-none">
23+
<ul class="nav nav-tabs mb-3" role="tablist">
24+
<li class="nav-item">
25+
<a class="nav-link active" id="quick-start-tab" data-toggle="tab" href="#quick-start-panel" role="tab" aria-controls="quick-start-panel" aria-selected="true" title="">Quick Start</a>
26+
</li>
27+
<li class="nav-item d-none">
28+
<a class="nav-link" id="files-folders-tab" data-toggle="tab" href="#files-folders-panel" role="tab" aria-controls="files-folders-panel" aria-selected="false" title="">Files & Folders</a>
29+
</li>
30+
<li class="nav-item">
31+
<a class="nav-link" id="code-editing-tab" data-toggle="tab" href="#code-editing-panel" role="tab" aria-controls="code-editing-panel" aria-selected="false" title="">Code Editing</a>
32+
</li>
33+
<li class="nav-item">
34+
<a class="nav-link d-none" id="compile-build-tab" data-toggle="tab" href="#compile-build-panel" role="tab" aria-controls="compile-build-panel" aria-selected="false" title="">Compile & Build</a>
35+
</li>
36+
<li class="nav-item">
37+
<a class="nav-link" id="debugging-tab" data-toggle="tab" href="#debugging-panel" role="tab" aria-controls="debugging-panel" aria-selected="false" title="">Debugging</a>
38+
</li>
39+
<li class="nav-item d-none">
40+
<a class="nav-link" id="projects-dependencies-tab" data-toggle="tab" href="#projects-dependencies-panel" role="tab" aria-controls="projects-dependencies-panel" aria-selected="false" title="">Projects</a>
41+
</li>
42+
<li class="nav-item d-none">
43+
<a class="nav-link" id="customize-tab" data-toggle="tab" href="#customize-panel" role="tab" aria-controls="customize-panel" aria-selected="false" title="">Customize</a>
44+
</li>
45+
<li class="nav-item">
46+
<a class="nav-link" id="faq-tab" data-toggle="tab" href="#faq-panel" role="tab" aria-controls="faq-panel" aria-selected="false" title="">FAQ</a>
47+
</li>
48+
</ul>
49+
</div>
50+
</div>
51+
<div class="row">
52+
<div class="col">
53+
<div class="tab-content">
54+
<div class="tab-pane fade show active" id="quick-start-panel" role="tabpanel" aria-labelledby="quick-start-tab">
55+
<p>Welcome to Visual Studio Code!<br/>
56+
In this 1-minute tutorial, we'll show you how to create a quick-start Java program in VS Code.
57+
</p>
58+
<h3 class="font-weight-light">Setup the Workspace</h3>
59+
<p>
60+
To setup the workspace, simply open a folder by:
61+
<dl class="row">
62+
<dt class="col-sm-3">Windows</dt>
63+
<dd class="col-sm-9">File > <a href="command:workbench.action.files.openFileFolder">Open Folder...</a></dd>
64+
<dt class="col-sm-3">Mac</dt>
65+
<dd class="col-sm-9">File > <a href="command:workbench.action.files.openFileFolder">Open...</a></dd>
66+
</dl>
67+
</p>
68+
<blockquote class="card-body">
69+
<h5 class="font-weight-light">No Import Needed</h5>
70+
<p class="mb-0">
71+
VS Code Java works directly with <strong>folders</strong> that have source code. If the folder you open has project/build configuration files like <code>pom.xml</code> or <code>build.gradle</code>, they will be picked up automatically and the folder will be treated as a project.
72+
</p>
73+
</blockquote>
74+
<h3 class="font-weight-light">Create a Class</h3>
75+
<p>
76+
A program needs an entry and a Java program needs a class to host its entry. To create a class for our quick-start program, <a href="command:explorer.newFile">create a file</a> and set its name to <code>QuickStart.java</code>.<br/>
77+
Now you can put the code in the new file:
78+
</p>
79+
<blockquote class="card-body">
80+
<pre class="mb-0"><code>class QuickStart {
81+
public static void main(String[] args) {
82+
System.out.println("Hello, World.");
83+
}
84+
}</code></pre>
85+
</blockquote>
86+
<h3 class="font-weight-light">Run the program</h3>
87+
<p>
88+
To run the program, press <a href="command:workbench.action.debug.start"><kbd>F5</kbd></a>. By default, the program is launched in the <a href="command:workbench.action.terminal.toggleTerminal">Intergrated Terminal</a>. You should already see the output there.
89+
</p>
90+
<blockquote class="card-body">
91+
<h5 class="font-weight-light">How to Debug?</h5>
92+
<p class="mb-0">
93+
When you press <a href="command:workbench.action.debug.start"><kbd>F5</kbd></a>, you are already debugging. Try set some breakpoint by clicking on the line numbers before each code line and run the program again. You'll see the execution paused at the breakpoint.<br/>
94+
While debugging, switch to the <a href="command:workbench.view.debug">Debug View</a> to see the variables and call stacks.
95+
</p>
96+
</blockquote>
97+
<h3 class="font-weight-light">Congratulations!</h3>
98+
<p>
99+
Now the quick-start program is running and you are free to build more.<br/>
100+
What you saw is just a tiny part of VS Code Java. You can do much more with it. Feel free to explore:
101+
</p>
102+
<dl class="row mb-0" id="navigationPanel">
103+
<dt class="col-sm-3"><a href="#code-editing-tab">Code Editing</a></dt>
104+
<dd class="col-sm-9">Learn more about Refactoring, Code Completion, and Linting</dd>
105+
<dt class="col-sm-3"><a href="#debugging-tab">Debugging</a></dt>
106+
<dd class="col-sm-9">Learn more about Breakpoints, Variables, Threads, and Call Stacks</dd>
107+
<dt class="col-sm-3"><a href="#faq-tab">FAQ</a></dt>
108+
<dd class="col-sm-9">Frequently asked questions</dd>
109+
</dl>
110+
</div>
111+
<div class="tab-pane fade" id="files-folders-panel" role="tabpanel" aria-labelledby="files-folders-tab">
112+
<p>How to deal with files and folders</p>
113+
</div>
114+
<div class="tab-pane fade" id="code-editing-panel" role="tabpanel" aria-labelledby="code-editing-tab">
115+
<p>Explore code editing features</p>
116+
</div>
117+
<div class="tab-pane fade" id="compile-build-panel" role="tabpanel" aria-labelledby="compile-build-tab">
118+
<p>Understand the compile and build mechanism of the language server</p>
119+
</div>
120+
<div class="tab-pane fade" id="debugging-panel" role="tabpanel" aria-labelledby="debugging-tab">
121+
<p>How to use the debugger</p>
122+
</div>
123+
<div class="tab-pane fade" id="projects-dependencies-panel" role="tabpanel" aria-labelledby="projects-dependencies-tab">
124+
<p>How to deal with projects and dependencies</p>
125+
</div>
126+
<div class="tab-pane fade" id="customize-panel" role="tabpanel" aria-labelledby="customize-tab">
127+
<p>How to customize vs code</p>
128+
</div>
129+
<div class="tab-pane fade" id="faq-panel" role="tabpanel" aria-labelledby="faq-tab">
130+
<p>Frequently asked questions</p>
131+
</div>
132+
</div>
133+
</div>
134+
<div class="col-3 d-none d-md-block">
135+
<div class="list-group list-group-flush" role="tablist">
136+
<a class="list-group-item list-group-action active" id="quick-start-tab" data-toggle="list" href="#quick-start-panel" role="tab" aria-controls="quick-start-panel" aria-selected="true" title="">Quick Start</a>
137+
<a class="list-group-item list-group-action d-none" id="files-folders-tab" data-toggle="list" href="#files-folders-panel" role="tab" aria-controls="files-folders-panel" aria-selected="false" title="">Files & Folders</a>
138+
<a class="list-group-item list-group-action" id="code-editing-tab" data-toggle="list" href="#code-editing-panel" role="tab" aria-controls="code-editing-panel" aria-selected="false" title="">Code Editing</a>
139+
<a class="list-group-item list-group-action d-none" id="compile-build-tab" data-toggle="list" href="#compile-build-panel" role="tab" aria-controls="compile-build-panel" aria-selected="false" title="">Compile & Build</a>
140+
<a class="list-group-item list-group-action" id="debugging-tab" data-toggle="list" href="#debugging-panel" role="tab" aria-controls="debugging-panel" aria-selected="false" title="">Debugging</a>
141+
<a class="list-group-item list-group-action d-none" id="projects-dependencies-tab" data-toggle="list" href="#projects-dependencies-panel" role="tab" aria-controls="projects-dependencies-panel" aria-selected="false" title="">Projects</a>
142+
<a class="list-group-item list-group-action d-none" id="customize-tab" data-toggle="list" href="#customize-panel" role="tab" aria-controls="customize-panel" aria-selected="false" title="">Customize</a>
143+
<a class="list-group-item list-group-action" id="faq-tab" data-toggle="list" href="#faq-panel" role="tab" aria-controls="faq-panel" aria-selected="false" title="">FAQ</a>
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
</div>
149+
</div>
150+
</div>
151+
</div>
152+
</body>
153+
154+
</html>

‎src/getting-started/assets/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
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")).tab('show');
10+
});

‎src/getting-started/index.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT license.
3+
4+
import * as vscode from "vscode";
5+
import * as path from "path";
6+
import { loadTextFromFile, getExtensionContext } from "../utils";
7+
8+
let javaGettingStartedView: vscode.WebviewPanel | undefined;
9+
10+
export async function javaGettingStartedCmdHandler(context: vscode.ExtensionContext, operationId: string) {
11+
if (javaGettingStartedView) {
12+
javaGettingStartedView.reveal();
13+
return;
14+
}
15+
16+
javaGettingStartedView = vscode.window.createWebviewPanel("java.gettingStarted", "Java Getting Started", {
17+
viewColumn: vscode.ViewColumn.One,
18+
}, {
19+
enableScripts: true,
20+
enableCommandUris: true,
21+
retainContextWhenHidden: true
22+
});
23+
24+
await initializeJavaGettingStartedView(context, javaGettingStartedView, onDidDisposeWebviewPanel);
25+
}
26+
27+
function onDidDisposeWebviewPanel() {
28+
javaGettingStartedView = undefined;
29+
}
30+
31+
async function initializeJavaGettingStartedView(context: vscode.ExtensionContext, webviewPanel: vscode.WebviewPanel, onDisposeCallback: () => void) {
32+
webviewPanel.iconPath = vscode.Uri.file(path.join(context.extensionPath, "logo.lowres.png"));
33+
const resourceUri = context.asAbsolutePath("./out/assets/getting-started/index.html");
34+
webviewPanel.webview.html = await loadTextFromFile(resourceUri);
35+
36+
context.subscriptions.push(webviewPanel.onDidDispose(onDisposeCallback));
37+
}
38+
39+
export class JavaGettingStartedViewSerializer implements vscode.WebviewPanelSerializer {
40+
async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
41+
if (javaGettingStartedView) {
42+
javaGettingStartedView.reveal();
43+
webviewPanel.dispose();
44+
return;
45+
}
46+
47+
javaGettingStartedView = webviewPanel;
48+
initializeJavaGettingStartedView(getExtensionContext(), webviewPanel, onDidDisposeWebviewPanel);
49+
}
50+
}

‎src/java-runtime/assets/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ declare function acquireVsCodeApi(): any;
5858
const vscode = acquireVsCodeApi();
5959

6060
function requestJdkInfo(jdkVersion: string, jvmImpl: string) {
61+
console.log(`request ${jdkVersion} ${jvmImpl}`);
6162
vscode.postMessage({
6263
command: "requestJdkInfo",
6364
jdkVersion: jdkVersion,

‎webpack.config.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ module.exports = function (env, argv) {
1010
mode: 'none',
1111
entry: {
1212
overview: './src/overview/assets/index.ts',
13-
'java-runtime': './src/java-runtime/assets/index.ts'
13+
'java-runtime': './src/java-runtime/assets/index.ts',
14+
'getting-started': './src/getting-started/assets/index.ts'
1415
},
1516
module: {
1617
rules: [{
@@ -54,6 +55,12 @@ module.exports = function (env, argv) {
5455
inlineSource: '.(js|css)$',
5556
chunks: ['java-runtime']
5657
}),
58+
new HtmlWebpackPlugin({
59+
filename: path.resolve(__dirname, 'out/assets/getting-started/index.html'),
60+
template: 'src/getting-started/assets/index.html',
61+
inlineSource: '.(js|css)$',
62+
chunks: ['getting-started']
63+
}),
5764
new HtmlWebpackInlineSourcePlugin(),
5865
],
5966
devtool: 'source-map',

0 commit comments

Comments
 (0)