Entandoアプリケーションを構成するコンポーネント-ページ、ユーザー管理およびローカライズコンポーネント


おい、私の仲間の開発者.
ここでは、entandoコンポーネントサブシリーズの3番目のエピソードです.CMSのコンテンツを発見した後、我々はどのようにページを管理する方法については、ユーザーグループとi 18 nコンポーネントを学びます.
このブログのポストは、どのようにバンドル内で定義することができますを含む構成要素についての詳細にダイブするシリーズの最後には、どのように彼らはentandoアプリケーションに展開することができますどのように、それらはEntandoアプリケーションビルダーを介して構成され、どのようにアプリケーションでレンダリングされます.

ページ管理


ページテンプレート


ページテンプレートは、ページのインスタンスに割り当てられた既定のページ構成を定義します.ページテンプレートは、標準的な2列のレイアウトまたは任意のデザインを満たすためにカスタマイズすることができます.テンプレートは、フレーム構成とFreemarkerでHTMLテンプレートレンダリングを結合します.
code: seed_home
description: Seed homepage
configuration:
 frames:
   - pos: 0
     description: brand
     mainFrame: false
     sketch:
       x1: 0
       y1: 0
       x2: 1
       y2: 0
   - pos: 1
     description: navbar
     mainFrame: false
     sketch:
       x1: 2
       y1: 0
       x2: 7
       y2: 0
   - pos: 2
     description: login widget
     mainFrame: false
     sketch:
       x1: 8
       y1: 0
       x2: 9
       y2: 0
   - pos: 3
     description: empty space
     mainFrame: false
     sketch:
       x1: 10
       y1: 0
       x2: 11
       y2: 0
[...]
templatePath: seed_home.ftl

  • 設定.フレームはテンプレートが持っている各フレーム、その位置と説明を含んでいます.

  • posページの位置、0から最大のフレーム数を指定します.位置はFreemarkerテンプレートで指定します.<@wp.show frame=2 />

  • 説明は、アプリケーションのビルダーのデザインページにどのようなフレームを知っているように表示される短い説明です

  • メインページフレームのメインフレーム

  • スケッチ

  • templatePath Freemarkerテンプレートへのパスを定義します.テンプレートプロパティを使用して、生のテンプレートを直接記述子に配置できます.
  • <#assign wp=JspTaglibs["/aps-core"]><#assign c=JspTaglibs["http://java.sun.com/jsp/jstl/core"]>
    <html lang="en">
    <head>
       <meta charset="utf-8" />
       <title><@wp.currentPage param="title" /> - <@wp.i18n key="STANDARD_DEMO" /></title>
       <meta name="viewport" content="width=device-width,  user-scalable=no" />
       <meta name="description" content="" />
       <meta name="author" content="" />
       <link rel="icon" href="<@wp.info key="systemParam" paramName="applicationBaseURL" />favicon.png" type="image/png" />
       <@wp.fragment code="insurance_inclusions" escapeXml=false />
    </head>
    <body>
    <@wp.fragment code="keycloak_auth" escapeXml=false/>
    <div class="custom-navbar ">
       [...]
       <@wp.show frame=4 />
       <@wp.show frame=5 />
       <@wp.show frame=6 />
       <@wp.show frame=7 />
       <@wp.show frame=8 />
       <@wp.show frame=9 />
       <@wp.show frame=10 />
       <@wp.show frame=11 />
       <@wp.show frame=12 />
       <@wp.show frame=13 />
    </div>
    <@wp.fragment code="insurance_inclusions_footer" escapeXml=false />
    </body>
    </html>
    
    Seerhome FreemarkerテンプレートNavbarを読みやすくするために削除されている

    テンプレートは、メニューページの下にApp Builderで編集することができます

    ページ


    ページは複数のウィジェットまたはUXフラグメントで構成され、それぞれの位置を定義します.ページはページテンプレート(“pagemodel”)へのリファレンスを含み、ページテンプレートに含まれるすべてを継承します.
    code: homepages
    parentCode: homepage
    titles:
     en: Home SD
     it: Home SD
    pageModel: seed_home
    ownerGroup: free
    joinGroups: []
    displayedInMenu: true
    seo: false
    charset: utf8
    status: published
    widgets:
     - code: Brand-Logo
       config: null
       pos: 0
     - code: Login_buttons
       config: null
       pos: 2
     - code: content_viewer
       config:
         contentDescription: main-banner
         modelId: '1'
         ownerGroup: free
         contentId: SDB37
         joinGroups: '[]'
       pos: 4
     - code: content_viewer
       config:
         contentDescription: banner light green
         modelId: '2'
         contentId: SDB34
       pos: 5
     - code: content_viewer
       config:
         contentDescription: Banner with inner card
         modelId: '3'
         contentId: SDB31
       pos: 6
     - code: content_viewer
       config:
         contentDescription: Banner with accordion
         modelId: '4'
         contentId: SDB16
       pos: 7
     - code: content_viewer
       config:
         contentDescription: Banner with dark green background
         modelId: '5'
         contentId: SDB28
       pos: 8
     - code: content_viewer
       config:
         contentDescription: Banner with white background
         modelId: '6'
         contentId: SDB19
       pos: 9
     - code: footer
       config: null
       pos: 13
    

  • コードはユニークなページ識別子です.

  • ParentCodeはページ親のコードで、ページは親ページかサブページのいずれかです.

  • PageModelはページをレンダリングするために使用するページテンプレートです.

  • Ownergroupはページの所有者です.ページが制限なしで使用できる場合

  • Joingroupsグループのリストをページに共有します.これらのグループは、ページを編集して使用することができます.

  • DisplayedInMenuこのページをデフォルトのウィジェットメニューに表示します.

  • SEO

  • charset使用するエンコーディングに従ってページをレンダリングするのに使用されるcharset.

  • ページがアプリケーションで使用可能な場合は、ステータスが発行されます.

  • ウィジェットは、どのウィジェットがページに含まれているかを定義するオブジェクトの配列で、必要に応じて位置と設定です.

  • コードを追加したいウィジェットコード.それは、ウィジェット記述子の「コード」と同じ値でなければなりません.

  • このウィジェットインスタンスの設定は、設定がない場合はNULLになります.設定オブジェクトはウィジェット自体に関連します.

  • posページの位置.これは、PageTemplate内のフレームpos値と一致する必要があります.

  • あなたが設計することができますし、アプリケーションのビルダーのページ構成を確認します

    SDホームページは、我々が定義したバンドル構成を通してレンダリングされます

    ユーザー管理


    グループ


    グループは、サブ組織の下でユーザーを集めることができて、一部の構成要素の所有権を定義するのに用いられることができます.
    - code: bpm_admin
     name: Bpm Admin
    - code: bpm_appraiser
     name: Bpm Appraiser
    - code: bpm_broker
     name: Bpm Broker
    - code: bpm_manager
     name: Bpm Manager
    

  • コードユニークなグループコード.

  • グループ名を指定します.

  • グループは、ユーザーを介して表示することができます

    I 18 N


    言語


    言語コンポーネントを使用すると、アプリケーションのいくつかの言語を有効にし、それらのラベルのロックを解除できます.
    - code: en
     description: English
    - code: it
     description: Italian
    

  • コード言語コード、基本的にISO 639 - 1コード(アルファ2コード).

  • 記述言語の簡単な説明、ほとんどの時間の言語名.
  • ラベル


    ラベルは、あなたのアプリケーションで有効になっている言語を設定するキー/値システムです.
    - key: ADMINISTRATION_BASIC
     titles:
       en: Normal
       it: Normale
    - key: ADMINISTRATION_BASIC_GOTO
     titles:
       en: Go to the administration with normal client
       it: Accedi con client normale
    - key: ADMINISTRATION_MINT
     titles:
       en: Advanced
       it: Avanzata
    - key: ADMINISTRATION_MINT_GOTO
     titles:
       en: Go to the administration with advanced client
       it: Accedi con client avanzato
    

  • keyはラベルのユニークキーです

  • titleには、それぞれの有効な言語(コードで)の値が含まれます.

  • 言語とラベルは、管理で利用できます

    メインディスクリプタファイルを作成する


    各コンポーネントを知っているので、コンポーネントごとにディスクリプタを定義し、コンベンションによってコンポーネントごとにフォルダーの下にグループ化できます.
    例えば、Standard Demo Bundle リポジトリには、このブログ記事でレビューされた各コンポーネントタイプの例があります.
    各コンポーネントのディスクリプタを作成したら、トップレベルディスクリプタからのパスで参照できる.YAMLファイル(静的リソースを除く).
    code: standard-demo
    description: Standard Demo bundle
    components:
     widgets:
       - widgets/brand-logo-descriptor.yaml
     pageModels:
       - pageModels/dashboard-descriptor.yaml
     fragments:
       - fragments/angular-descriptor.yaml
     pages:
       - pages/homepagesd-descriptor.yaml
     groups:
       - groups/groups-descriptor.yaml
     contentTypes:
       - contentTypes/mpc-descriptor.yaml
     contentModels:
       - contentModels/main-banner-descriptor.yaml
     assets:
       - assets/35/35-descriptor.yaml
     contents:
       - contents/mpc584-descriptor.yaml
     plugins:
       - plugins/standard-demo-banking-descriptor.yaml
     categories:
       - categories/categories-descriptor.yaml
     labels:
       - labels/labels-descriptor.yaml
     languages:
       - languages/languages-descriptor.yaml
    
    バンドルは、一部のコンポーネントの公式名前の代わりに技術的な名前を使用しています(例えばContent型のContentModel、ページテンプレート用のPageModels、CMSの資産のための資産…).どうぞdocumentation またはデモバンドルは、YAMLの正しいラベルを表示します.

    結論


    このブログのポストシリーズでは、我々のバンドルと我々のentandoアプリケーションで使用できるすべてのコンポーネントについて学んだ.各コンポーネントには、その動作と構造を定義できる属性があります.一旦コンポーネントを構築したら、メインバンドル記述子で宣言します.簡単ですね.
    すぐに次の冒険バンドルやコンポーネントを参照してください.