Atlassian User Interface upgrade guide

このページの内容

お困りですか?

アトラシアン コミュニティをご利用ください。

コミュニティに質問

Confluence 7.0 には、AUI (Atlassian User Interface) から AUI 8.3.2) へのメジャー アップグレードが含まれます。AUI 8 アップグレード ガイドに加え、アプリのアップグレードを容易にするベスト プラクティスをいくつか作成しました。

We update this page each week as our work progresses.

変更

AJS.indexOf

AJS.indexOf
This method is no longer available.
修正方法

Use native array methods like [].indexOf[].includes.


Backbone

AUI プラグインの Backbone ライブラリがアップグレードされましたが、Confluence コードベースは引き続き 1.0.0 を使用します。

Backbone 1.0.0 を使用する必要がある場合、次の依存関係を宣言します。 

Confluence の Backbone 1.0.0
<dependency>confluence.web.resources:backbone</dependency>

また、提供された AMD モジュールを使用する必要があります。

Backbone 1.0.0 の使用
define('my-module', [
    'backbone'
], function(
    Backbone
) {
    // Your module code
});

Backbone 1.3.3 を使用したい場合、jslibs から工場出荷時の AMD モジュールとして取得できます。

Backbone 1.3.3
<dependency>confluence.web.resources:underscore</dependency>
<dependency>confluence.web.resources:jquery</dependency>
<dependency>com.atlassian.plugin.jslibs:backbone-1.3.3-factory</dependency>

次に、Backbone インスタンスを構築します。

Backbone 1.3.3 の使用
define('my-module', [
    'confluence.web.resources:underscore',
    'jquery',
    'atlassian/libs/factories/backbone-1.3.3'
], function(
    _,
    $,
    BackboneFactory
) {
    const Backbone = BackboneFactory(_, $);
    // Your module code
});

これは Confluence が提供するグローバル Backbone と競合するため、AUI プラグインから Backbone バージョンを直接要求しないようにします。

AUI プラグインの Backbone 1.3.0
<dependency>com.atlassian.auiplugin:ajs-backbone</dependency>


jQuery 1.7.2 から 2.2.4 へのアップグレード

Confluence now only provides jQuery 2.2.4. We recommend checking the relevant upgrade guides, in particular jQuery 1.9, where most of the breaking changes happened.

The delivery is same as in previous Confluence releases:

  • jQuery web-resource で依存関係を宣言します。 
<dependency>confluence.web.resources:jquery</dependency>
  • Javascript で、jquery AMD モジュールを要求します。
const $ = require('jquery');
 
// or
 
define('my-module', ['jquery'], function($) {
});
  • Preserve context objects when multiple Deferred object are passed to $.when(). See jQuery ticket 11749 for more details.
  • $.fn.enable()and $.fn.disable() are now deprecated, and may not work correctly. We recommend using the new methods disableElement and enableElement from AMD module confluence/form-state-control. The web-resource has key com.atlassian.confluence.plugins.confluence-frontend:form-state-control


//declare dependency in atlassian-plugin.xml
<dependency>com.atlassian.confluence.plugins.confluence-frontend:form-state-control</dependency>
//in JS file
define('moduleA', ['confluence/form-state-control'], function(FormStateControl) {
    FormStateControl.disableElement(element);
    FormStateControl.enableElement(element);
})


グローバル変数 $ 経由での使用は推奨されません。この変数は他のすべてのグローバル変数と同様に、将来的には無効になる予定です。

Confluence 7.0 には、一部の古い jQuery API の提供に使用されている jquery-migrate プラグインがありましたが、これは将来的に削除される予定です。プラグインは、最初の 7.0 バージョン以降で提供される 1.x API に依存しないようにします。

AUI jQuery form

$.ajaxForm() and $.ajaxSubmit() now require an explicit dependency.

<dependency>com.atlassian.auiplugin:jquery-form</dependency>


AUI message update

The AUI message style has been updated. 

更新内容を確認

These screenshots show the visual appearance of the AUI messages before and after the upgrade to AUI 8.3.2

Before AUI upgrade


After AUI upgrade


AUI message classes

The legacy AUI message CSS class (such as success, warning, and error) will not exist in Confluence 7.0.

修正方法

If your app needs to control the behaviour of the AUI message in Javascript, query the element with the new class (with the aui-message prefix).

アイコン

The AUI message now renders an icon automatically, and doesn't hide the extra icon from the old template. This may cause an unwanted icon or blank line as shown below.

修正方法

To fix this, remove the extra icon html markup.

Before

<div class="aui-message warning">
	<span class="aui-icon icon-info"></span>
	Message Body.
</div>

現バージョン

<div class="aui-message warning">
	Message Body.
</div>


Confluence モバイル 

Confluence Mobile web now uses jQuery 2.2.4 instead of Zepto.js 0.8. This means the Confluence Mobile Web Plugin can pull in any dependencies from Confluence or the AUI plugin without the risk of polluting the global $ variable.

The Mobile Web view uses Backbone 0.9.2. The Backbone view extend method doesn't support jQuery object as an element property.

Backbone.View.extend({
    // ...
    el: $(".css-selector")[0] // native dom only for Backbone 0.9.2
    // ...
}


Removed Zepto-specific functions

As part of this work, we've removed the following Zepto-specific functions:

  • $.cookie has been replaced by AJS.cookie
  • $.visible() has been removed. Use $.filter(":visible").length instead.

Removed Mobile CSS helper classes

We've removed all platform-specific Mobile CSS helper classes, such as class="platform-android" and class="platform-ios".

最終更新日 2019 年 7 月 14 日

この内容はお役に立ちましたか?

はい
いいえ
この記事についてのフィードバックを送信する
Powered by Confluence and Scroll Viewport.