Skip to content

Commit 65a7be9

Browse files
marcospereiramarcospereira
authored
Improvements for the "try-play" page (#206)
* Improvements for the "try-play" page This is a follow up of #192 by @rstento. There are some changes here that depends on documentation improvements too, so another pull request will be made to improve Play docs and make it consistent with the changes here. * Minor fixes after review * Configure redirect from Installing to Requirements
1 parent 598ce5a commit 65a7be9

8 files changed

Lines changed: 138 additions & 41 deletions

File tree

‎app/assets/css/main.styl‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ largeOn = "only screen and (min-width: 64.063em)"
1111

1212
body
1313
background: white
14-
color: sand-text
1514
text: default
1615
-webkit-font-smoothing: antialiased
1716

‎app/assets/css/pages/_getting-started.styl‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,22 @@
11
.getting-started
22
@extend .content-column
3+
4+
.try-section
5+
margin-bottom: 3em;
6+
.try-option:last-child
7+
border-bottom: 1px solid #dddddd;
8+
9+
.try-option
10+
border-top: 1px solid #dddddd;
11+
padding-bottom: 1em;
12+
13+
h3
14+
cursor: pointer;
15+
&:hover
16+
color: #548b0c;
17+
18+
span
19+
font-family: "Avenir", sans-serif
20+
21+
.try-option-content
22+
display: none;

‎app/assets/javascripts/main.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
$(function(){
22

3+
$(".try-option h3").on('click', function(el) {
4+
var content = $(this).parent().find(".try-option-content");
5+
$(content).slideToggle("fast");
6+
});
7+
38
// Right click on the logo
49
$("#logo").on("contextmenu",function(e){
510
e.preventDefault()

‎app/controllers/Application.scala‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -64,26 +64,26 @@ class Application @Inject() (
6464
MovedPermanently(routes.Application.gettingStarted.path)
6565
}
6666

67-
def gettingStarted = Action { implicit request =>
68-
Ok(html.gettingStarted())
69-
}
67+
def gettingStarted = Action.async { implicit request =>
7068

71-
def allreleases(platform: Option[String] = None) = Action.async { implicit request =>
72-
val selectedPlatform = Platform(platform.orElse(request.headers.get("User-Agent")))
73-
7469
exampleProjectsService.cached() match {
7570
case Some(cached) =>
7671
val examples = toExamples(cached)
7772
Future.successful {
78-
Ok(html.allreleases(releases, examples, selectedPlatform))
73+
Ok(html.gettingStarted(examples))
7974
}
8075
case None =>
8176
exampleProjectsService.examples().map { live =>
8277
val examples = toExamples(live)
83-
Ok(html.allreleases(releases, examples, selectedPlatform))
78+
Ok(html.gettingStarted(examples))
8479
}
8580
}
8681
}
82+
83+
def allreleases(platform: Option[String] = None) = Action { implicit request =>
84+
val selectedPlatform = Platform(platform.orElse(request.headers.get("User-Agent")))
85+
Ok(html.allreleases(releases, selectedPlatform))
86+
}
8787

8888
def changelog = markdownAction("public/markdown/changelog.md", { implicit request =>
8989
views.html.changelog(_)

‎app/views/allreleases.scala.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@(releases: PlayReleases, examples: PlayExamples, platform: Platform.Platform,
1+
@(releases: PlayReleases, platform: Platform.Platform,
22
title: String = "Play Releases")(implicit requestHeader: RequestHeader)
33

44
@renderRelease(linkClass: String, release: PlayRelease) = {

‎app/views/commonSidebar.scala.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<@hn>Documentation</@hn>
44
<ul>
5-
<li><a href="@controllers.documentation.ReverseRouter.latest(None, "Installing")">Installation instructions</a></li>
5+
<li><a href="@controllers.documentation.ReverseRouter.latest(None, "Requirements")">Play Requirements</a></li>
66
<li><a href="@controllers.documentation.ReverseRouter.latest(None, "NewApplication")">Build your first app</a></li>
77
<li><a href="@controllers.documentation.ReverseRouter.index(None)">Full documentation</a></li>
88
<li><a href="@routes.Application.changelog()">Change log</a></li>

‎app/views/gettingStarted.scala.html‎

Lines changed: 99 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,109 @@
1-
@(title: String = "Try Play")(implicit requestHeader: RequestHeader)
1+
@(examples: PlayExamples)(implicit requestHeader: RequestHeader)
22

3-
@main(title, "getting-started") {
3+
4+
@renderProject(project: ExampleProject) = {
5+
<tr>
6+
<td><a href="@project.downloadUrl" target="_blank">@project.displayName</a></td>
7+
<td><a href="@project.downloadUrl" target="_blank">Download (zip)</a></td>
8+
<td><a href="@project.gitHubUrl" target="_blank">View on GitHub</a></td>
9+
</tr>
10+
}
11+
12+
@main("Getting Started with Play Framework", "getting-started") {
413
<header id="top">
514
<div class="wrapper">
6-
<h1>It's quick and easy to get started</h1>
15+
<h1>Getting Started with Play Framework</h1>
716
</div>
817
</header>
918
<section id="content">
1019
<article>
11-
<h2>What would you like to do?</h2>
12-
<p>To learn about Play hands-on, try the examples as described below. When you are ready to build your own app, use a <a href="@controllers.documentation.ReverseRouter.latest(None, "NewApplication")">seed template</a> that sets up the project structure and dev environment for you. You can easily integrate Play projects into your <a href="@controllers.documentation.ReverseRouter.latest(None, "IDE")">favorite IDE</a>. </p>
13-
14-
<hr />
15-
16-
<h3>Downloading and building examples</h3>
17-
<p>Lightbend <a href="//developer.lightbend.com/start/?group=play" target="_blank" rel="noopener noreferrer">Tech Hub</a> offers a variety of Play examples for Java and Scala. We recommend trying the Play Starter Example first.</p>
18-
<p>The downloadable zip files include everything you need to build and run the examples, including a distribution of the <a href="//www.scala-sbt.org/index.html" target="_blank" rel="noopener noreferrer">sbt</a>. If you have <a href="//gradle.org/" target="_blank" rel="noopener noreferrer">Gradle</a>, you can use it as a build tool instead.</p>
19-
20-
<p>After choosing an example from <a href="//developer.lightbend.com/start/?group=play" target="_blank" rel="noopener noreferrer">Tech Hub</a> follow these steps:</p>
21-
<ol>
22-
<li>Click CREATE A PROJECT FOR ME to download the zipped project.</li>
23-
<li>Unzip the project in a convenient location.</li>
24-
<li>In a command window, navigate to the top level project directory.</li>
25-
<li>Enter one of the following commands:
26-
<ul>
27-
<li>On OSx or Linux systems: <code>./sbt run</code> or <code>./gradle runPlayBinary</code></li>
28-
<li>On Windows systems: <code>sbt.bat run</code> or <code>gradlew.bat runPlayBinary</code></li>
29-
</ul>
30-
<p>The build tool downloads dependencies and compiles the project.</p>
31-
</li>
32-
<li>
33-
After the build finishes, enter the following URL in a browser to view the app:
34-
<p><a href="http://localhost:9000"><code>http://localhost:9000/</code></a></p>
35-
</li>
36-
</ol>
37-
<p>Check out the readme file in the top level project directory to learn more about the example.</p>
20+
21+
<div class="try-section">
22+
<h2>New to Play?</h2>
23+
<p>Start with <a href="@controllers.documentation.ReverseRouter.latest(None)">our documentation</a> or the <a href="@controllers.documentation.ReverseRouter.latest(None, "HelloWorldTutorial")">Hello World Tutorial</a>.</p>
24+
25+
<div class="try-option">
26+
<h3><span>&raquo;</span> Learn whether Play Framework is right for your project</h3>
27+
<div class="try-option-content">
28+
<ul>
29+
<li><a href="@controllers.documentation.ReverseRouter.latest(None, "Introduction")">Introduction to Play</a></li>
30+
<li><a href="@controllers.documentation.ReverseRouter.latest(None, "Requirements")">Requirements for using Play</a></li>
31+
<li><a href="@controllers.documentation.ReverseRouter.latest(None, "Philosophy")">Our philosophy</a></li>
32+
</ul>
33+
</div>
34+
</div>
35+
36+
<div class="try-option">
37+
<h3><span>&raquo;</span> Follow the Hello World Tutorial</h3>
38+
<div class="try-option-content">
39+
<p>Play requires Java 8 or higher. You can check your version with the <code>java -version</code> command or install it from <a href="//www.oracle.com/technetwork/java/javase/downloads/index.html" rel="noopener">Oracle's site</a>. See details about <a href="@controllers.documentation.ReverseRouter.latest(None, "Requirements")">Play's system requirement</a>.</p>
40+
<p>First, download the starter project:</p>
41+
<table>
42+
@examples.sections.map { case (version, section) =>
43+
<tbody>
44+
<tr><th><h4>Play @version Starter Projects</h4></th></tr>
45+
@section.starters.getOrElse("java", Seq.empty).map { (project) =>
46+
@renderProject(project)
47+
}
48+
@section.starters.getOrElse("scala", Seq.empty).map { (project) =>
49+
@renderProject(project)
50+
}
51+
</tbody>
52+
}
53+
</table>
54+
<p>Then, unzip the project in a convenient location and follow the directions in the <code>README.md</code> file to build and run the tutorial.</p>
55+
</div>
56+
</div>
57+
</div>
58+
59+
<div class="try-section">
60+
<h2>Already know a bit about Play?</h2>
61+
<p>Check out our <a href="//developer.lightbend.com/start/?group=play">example projects for Java or Scala</a>. The downloadable zip files include everything you need, including <a href="//www.scala-sbt.org/index.html">sbt</a>, Play Framework, and an HTTP server. Examples also support <a href="//docs.gradle.org/current/userguide/play_plugin.html">Gradle</a>. You can also create a Play project from the command line using a template if you have sbt installed already.</p>
62+
<p>Play requires Java 8 or higher. You can check your version with the <code>java -version</code> command or install it from <a href="//www.oracle.com/technetwork/java/javase/downloads/index.html" rel="noopener">Oracle's site</a>. See details about the <a href="@controllers.documentation.ReverseRouter.latest(None, "Requirements")">requirements to work with Play</a>.</p>
63+
64+
<div class="try-option">
65+
<h3><span>&raquo;</span> Try a focused example</h3>
66+
<div class="try-option-content">
67+
<p>Follow these steps to try an example project:</p>
68+
<ol>
69+
<li>Choose an example from <a href="https://developer.lightbend.com/start/?group=play">Lightbend's Tech Hub</a>.</li>
70+
<li>Click "CREATE A PROJECT FOR ME" to download the zipped project.</li>
71+
<li>Unzip the project in a convenient location.</li>
72+
<li>In a command window, navigate to the top level project directory.</li>
73+
<li>Enter one of the following commands:
74+
<ul>
75+
<li>On macOS or Linux systems: <code>./sbt run</code> or <code>./gradlew runPlayBinary</code></li>
76+
<li>On Windows systems: <code>sbt.bat run</code> or <code>gradlew.bat runPlayBinary</code></li>
77+
</ul>
78+
</li>
79+
<li>The build tool downloads dependencies and compiles the project.</li>
80+
<li>After the build finishes, enter the following URL in a browser to view the app: <a href="http://localhost:9000/">http://localhost:9000/</a></li>
81+
82+
</ol>
83+
<p>Check out the <code>README.md</code> file in the top level project directory to learn more about the example.</p>
84+
</div>
85+
</div>
86+
87+
<div class="try-option">
88+
<h3><span>&raquo;</span> Create a Play Java or Scala project using <code>sbt new</code></h3>
89+
<div class="try-option-content">
90+
<p>In a command window, enter one of the following lines to create a new project:</p>
91+
92+
<h4>Java seed template</h4>
93+
<pre>sbt new playframework/play-java-seed.g8</pre>
94+
95+
<h4>Scala seed template</h4>
96+
<pre>sbt new playframework/play-scala-seed.g8</pre>
97+
98+
<p>After the template creates the project:</p>
99+
<ol>
100+
<li>Enter <code>sbt run</code> command to download dependencies and start the system.</li>
101+
<li>In a browser, enter <a href="http://localhost:9000">http://localhost:9000</a> to view the welcome page.</li>
102+
</ol>
103+
</div>
104+
</div>
105+
</div>
106+
38107
</article>
39108
<aside>
40109
@commonSidebar()

‎conf/application.conf‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,10 @@ documentation {
121121
from = "AkkaCore"
122122
to = "ThreadPools"
123123
},
124+
{
125+
from = "Installing"
126+
to = "Requirements"
127+
},
124128
{
125129
from = "AssetsGoogleClosureCompiler"
126130
to = "RequireJS-support"

0 commit comments

Comments
 (0)