java
/
jMonkeyEngine-wiki
mirror of https://github.com/jMonkeyEngine/wiki.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Build a UI Project for Local Preview :: jMonkeyEngine Docs</title>
    <link rel="canonical" href="https://wiki.jmonkeyengine.org/wiki-ui/build-preview-ui.html">
    <link rel="prev" href="set-up-project.html">
    <link rel="next" href="development-workflow.html">
    <meta name="generator" content="Antora 3.0.1">
    <link rel="stylesheet" href="../_/css/site.css">
<meta property="og:image" content="https://wiki.jmonkeyengine.org/_/img/iconx128.png">
<meta property="og:description" content="Build a UI Project for Local Preview">
<meta property="og:title" content="jMonkeyEngine Docs">
<link rel="stylesheet" href="../_/css/site-extra.css">
<link rel="stylesheet" href="../_/css/vendor/docsearch.min.css">
<!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css -->
<link rel="icon" href="../_/img/favicon.ico" type="image/x-icon">
  </head>
  <body class="article">
<header class="header">
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://wiki.jmonkeyengine.org">
        <img alt="" src="../_/img/jme-logo.png" height="32" type="image/x-icon">
      </a>
      <div class="navbar-item hide-for-print">
        <input id="search-input" type="text" placeholder="Search docs">
      </div>
      <button class="navbar-burger" data-target="topbar-nav">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
    <div id="topbar-nav" class="navbar-menu">
      <div class="navbar-end">
        <div class="navbar-item theme-switch-wrapper">
          <label class="theme-switch" for="checkbox">
            <input type="checkbox" id="checkbox" />
            <div class="slider round"></div>
          </label>
        </div>
        <a class="navbar-item" href="https://github.com/jmonkeyengine/wiki">Github</a>
      </div>
    </div>
  </nav>
</header>
<div class="body">
<div class="nav-container" data-component="wiki-ui" data-version="master">
  <aside class="nav">
    <div class="panels">
<div class="nav-panel-menu is-active" data-panel="menu">
  <nav class="nav-menu">
    <h3 class="title"><a href="index.html">Wiki UI</a></h3>
<ul class="nav-list">
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="prerequisites.html">UI Development Prerequisites</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="set-up-project.html">Set up a UI Project</a>
  </li>
  <li class="nav-item is-current-page" data-depth="1">
    <a class="nav-link" href="build-preview-ui.html">Build and Preview the UI</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="development-workflow.html">UI Development Workflow</a>
  </li>
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="templates.html">Work with the Handlebars Templates</a>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="stylesheets.html">Work with the CSS Stylesheets</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="add-fonts.html">Add Fonts</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="1">
    <button class="nav-item-toggle"></button>
    <a class="nav-link" href="style-guide.html">UI Element Styles</a>
<ul class="nav-list">
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="inline-text-styles.html">Inline Text</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="admonition-styles.html">Admonitions</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="list-styles.html">Lists</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="sidebar-styles.html">Sidebars</a>
  </li>
  <li class="nav-item" data-depth="2">
    <a class="nav-link" href="ui-macro-styles.html">UI Macros</a>
  </li>
</ul>
  </li>
</ul>
  </li>
</ul>
  </nav>
</div>
<div class="nav-panel-explore" data-panel="explore">
  <div class="context">
    <span class="title">Wiki UI</span>
    <span class="version">master</span>
  </div>
  <ul class="components">
    <li class="component">
      <span class="title">JME</span>
      <ul class="versions">
        <li class="version">
          <a href="../docs/3.8/documentation.html">3.8</a>
        </li>
        <li class="version">
          <a href="../docs/3.4/documentation.html">3.4</a>
        </li>
        <li class="version">
          <a href="../docs/3.3/documentation.html">3.3</a>
        </li>
        <li class="version">
          <a href="../docs/3.2/documentation.html">3.2</a>
        </li>
      </ul>
    </li>
    <li class="component">
      <span class="title">Wiki Contribution</span>
      <ul class="versions">
        <li class="version">
          <a href="../docs-wiki/3.8/wiki_contributor.html">3.8</a>
        </li>
      </ul>
    </li>
    <li class="component is-current">
      <span class="title">Wiki UI</span>
      <ul class="versions">
        <li class="version is-current">
          <a href="index.html">master</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
    </div>
  </aside>
</div>
<main class="article">
<div class="toolbar" role="navigation">
<button class="nav-toggle"></button>
<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ul>
    <li><a href="index.html">Wiki UI</a></li>
    <li><a href="build-preview-ui.html">Build and Preview the UI</a></li>
  </ul>
</nav>
  <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki-ui/edit/master/docs/modules/ROOT/pages/build-preview-ui.adoc">Edit this Page</a></div>
  </div>
  <div class="content">
<article class="doc">
<h1 class="page">Build a UI Project for Local Preview</h1>
<div class="sect1">
<h2 id="build-preview-site"><a class="anchor" href="#build-preview-site"></a>Build Preview Site</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Once you&#8217;ve modified the site UI, the first thing you&#8217;ll want to do is check out how it looks.
That&#8217;s what the files in the <em class="path">preview-src/</em> folder are for.
This folder contains HTML file fragments that provide a representative sample of content from the site.
The preview saves you from having to generate the whole site just to test the UI.
These files should give you an idea of how the UI will look when applied to the actual site.</p>
</div>
<div class="paragraph">
<p>The pages in the preview site are assembled using the Handlebars templates and link to the pre-compiled asset files (emulating the behavior of the site generator).
Thus, to look at them, you need to run them through the UI build.</p>
</div>
<div class="paragraph">
<p>There are two preview modes available.
You can run the build once and examine the result or you can run the build continuously so you can see changes as you make them.
The next two sections explain how to use these modes.</p>
</div>
<div class="sect2">
<h3 id="build-once"><a class="anchor" href="#build-once"></a>Build Once</h3>
<div class="paragraph">
<p>To build the UI once for preview, then stop, execute the following command:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ gulp preview:build</pre>
</div>
</div>
<div class="paragraph">
<p>This task pre-compiles the UI files into the <em class="path">public</em> directory.
To view the preview pages, navigate to the HTML pages in the <em class="path">public</em> directory using your browser (e.g., <em class="path">public/index.html</em>).</p>
</div>
</div>
<div class="sect2">
<h3 id="build-continuously"><a class="anchor" href="#build-continuously"></a>Build Continuously</h3>
<div class="paragraph">
<p>To avoid the need to run the <code>preview:build</code> task over and over while developing, you can use the <code>preview</code> command instead to have it run continuously.
This task also launches a local HTTP server so updates get synchronized with the browser (i.e., &#8220;live reload&#8221;).</p>
</div>
<div class="paragraph">
<p>To launch the preview server, execute the following command:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ gulp preview</pre>
</div>
</div>
<div class="paragraph">
<p>You&#8217;ll see a URL listed in the output of this command:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>[12:59:28] Starting 'preview:serve'...
[12:59:28] Starting server...
[12:59:28] Server started http://localhost:5252
[12:59:28] Running server</pre>
</div>
</div>
<div class="paragraph">
<p>Navigate to the URL to view the preview site.
While this command is running, any changes you make to the source files will be instantly reflected in the browser.
This works by monitoring the project for changes, running the <code>preview:build</code> task if a change is detected, and sending the updates to the browser.</p>
</div>
<div class="paragraph">
<p>Press <span class="keyseq"><kbd>Ctrl</kbd>+<kbd>C</kbd></span> to stop the preview server and end the continuous build.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="package-for-previewing"><a class="anchor" href="#package-for-previewing"></a>Package for Previewing</h2>
<div class="sectionbody">
<div class="paragraph">
<p>If you need to bundle the UI in order to preview the UI on the real site in local development, run the following command:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ gulp bundle</pre>
</div>
</div>
<div class="paragraph">
<p>The <code>bundle</code> command also invokes the <code>lint</code> command to check that the CSS and JavaScript follow the coding standards.</p>
</div>
<div class="paragraph">
<p>The UI bundle will be available at <em class="path">build/ui-bundle.zip</em>.
You can then point Antora at this bundle using the <code>--ui-bundle-url</code> command-line option.</p>
</div>
<div class="paragraph">
<p>If you have the preview running, and you want to bundle without causing the preview to be clobbered, use:</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ gulp bundle:pack</pre>
</div>
</div>
<div class="paragraph">
<p>The UI bundle will again be available at <em class="path">build/ui-bundle.zip</em>.</p>
</div>
</div>
</div>
<nav class="pagination">
  <span class="prev"><a href="set-up-project.html">Set up a UI Project</a></span>
  <span class="next"><a href="development-workflow.html">UI Development Workflow</a></span>
</nav>
</article>
<aside class="toc sidebar" data-title="Contents" data-levels="2">
  <div class="toc-menu"></div>
</aside>
  </div>
</main>
</div>
<footer class="footer">
  <p>Copyright 2020 jMonkeyEngine Wiki Contributors. Licensed BSD-3.</p>
</footer>
<script src="../_/js/vendor/docsearch.min.js"></script>
<!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js -->
<script>
var search = docsearch({
  apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  indexName: 'jmonkeyengine',
  inputSelector: '#search-input',
  autocompleteOptions: { hint: false, keyboardShortcuts: ['s'] },
  algoliaOptions: { hitsPerPage: 10 }
}).autocomplete
search.on('autocomplete:closed', function () { search.autocomplete.setVal() })
function focusSearchInput () { document.querySelector('#search-input').focus() }
if (document.querySelector('.home-link.is-current')) window.addEventListener('load', focusSearchInput)
</script>
<script src="../_/js/site.js"></script>
<script async src="../_/js/vendor/highlight.js"></script>
  </body>
</html>