新しいユーザーインターフェースの追加

このチュートリアルのこの部分を完全に理解するにはよく知っておいたほうがよい ジオネットワークユーザインタフェースをカスタマイズする. まずチュートリアルです。

GeoNetworkでは,同一展開上に複数のパターンを実装することができる.設定マネージャで使用するスタイルを選択することができます。また、パラメータ“?view=$name”を使用して、ページ要求に特定のスタイルを強制的に使用することもできます。

空のスタイルを作成する

現在、以前に作成したSeparated Mavenプロジェクトでカスタムスタイルを作成します。まず,最小のユーザインタフェースカスタマイズを定義し,我々のパターンが生成されて使用されているかどうかをテストすることができる.

カスタム/src/main/Resources/Catalog/Views/Custom/less/gn_search_custom.lessパス上で空ファイルを作成する必要があります

そして,このパターンで使用する基本的な角度モジュールを定義する必要がある.Custom/src/main/Resources/Catalog/Views/Custom/mode.jpにファイルを作成し、以下を追加します。

(  function() {
     goog.provide('gn_search_custom');
     goog.require('gn_search');
     var module = angular.module('gn_search_custom', ['gn_search']);
})();

次に、Custom/src/main/Resources/Catalog/Views/Custom/Templates/index.htmlに新しいファイルを作成し、以下を追加します。

<div>This is my custom GeoNetwork</div>

最後に、私たちはwro 4 jライブラリに私たちのファイルがどこに置かれるのか教えなければならない。ファイルWeb-ui/src/main/resource/WEB-INF/class/web-ui-wro-Soures.xmlを編集し、フォルダを追加します:

<require pathOnDisk="web-ui/src/main/resources" >
  <jsSource webappPath="/catalog/js/" />
  <jsSource webappPath="/catalog/views/default/" />
  <jsSource webappPath="/catalog/views/custom/" />
  <jsSource webappPath="/catalog/components/" />
  <cssSource webappPath="/catalog/views/default/" />
  <cssSource webappPath="/catalog/views/custom/" />
  <cssSource webappPath="/catalog/style/" />
  <cssSource webappPath="/catalog/lib/bootstrap-table/dist" />
</require>

現在,GeoNetworkを構築,展開すれば,“カスタム”という新しいスタイルを用いることができる:http://localhost:8080/geonnetwork/srv/eng/Catalog.search?view=Custom

デフォルト·スタイルの導入

新しいスタイルの使用を容易に開始するために、デフォルトのスタイルを導入することができます。

カスタム/src/main/resources/Catalog/Views/Custom/less/gn_search_custom.lessを編集し、以下の行を追加します。

@import "gn_search_default.css";

次いで、角度モジュールをデフォルト角度UIモジュールに従属させる。カスタム/src/main/resource/Catalog/Views/Custom/mode.jpを編集し、コンテンツを:

(  function() {
      goog.provide('gn_search_custom');
      goog.require('gn_search_default');
      var module = angular.module('gn_search_custom', ['gn_search_default']);
})();

最後に、ファイルCustom/src/main/directory/views/Custom/Templates/index.htmlをファイルweb-ui/src/main/resource/Catalog/views/Default/Templates/index.htmlを使用して置き換える

現在、デフォルトスタイルのコピーを持っており、自分のカスタマイズによって改善することができます。

コードをデカップリングする主な利点の1つは,GeoNetworkユーザインタフェース上でデフォルトで提供されるいくつかのファイルをカバーすることができ,将来のコードアップと衝突しないことである.

検索結果を修正する

GeoNetworkスタイルの中で最も一般的なカスタマイズの1つは,検索結果リストの外観を修正することである.Configg.jsファイル上の他のテンプレートを指すことができます。ファイルCustom/src/main/resources/Catalog/Views/Custom/configg.jsを編集し、属性searchSettings.result tViewTplsを修正します。

searchSettings.resultViewTpls = [{
                tplUrl: '../../catalog/views/custom/resultsview/' +
                'partials/viewtemplates/grid.html',
                tooltip: 'Grid',
                icon: 'fa-th'
              }];

現在、参照ファイルweb-ui/src/main/resources/Catalog/views/Custom/Resultsview/artials/viewplates/grid.htmlを作成し、以下に示すように必要なテンプレートを使用しなければなりません。

<ul class="list-group gn-resultview gn-resultview-sumup">
  <li class="list-group-item gn-grid"
    data-ng-repeat="md in searchResults.records"
    data-gn-fix-mdlinks=""
    data-gn-displayextent-onhover=""
    data-gn-zoomto-onclick="">

   <div title="{{(md.abstract || md.defaultAbstract) | striptags}}"
       data-ng-click="openRecord($index, md, searchResults.records)">
    <!-- Thumbnail -->
    <div class="gn-md-thumbnail">
      <img class="gn-img-thumbnail"
           data-ng-src="{{md.getThumbnails().list[0].url}}"
           data-ng-if="md.getThumbnails().list[0].url"/>

      <!-- Display the first metadata status (apply to ISO19139 record) -->
      <div data-ng-if="md.status_text.length > 0"
           title="{{md.status_text[0]}}"
           class="gn-status gn-status-{{md.status[0]}}">{{md.status_text[0]}}
      </div>
    </div>
   </div>
  </li>
</ul>

私たちが望む任意のクラスを定義し、gn_search_default.csファイル上でそれを参照して、いくつかのパターンを与えることができます。