ユーザーインターフェイス / コンポーネント / RadSideDrawer / アプリケーションルートとして使用しナビゲーションバーにかぶせる

アプリケーションのライフサイクル全体を通して単一のRadSideDrawerを共有する

人気のある要望により、RadSideDrawerの在り方、かつての在り方、そしてコミュニティが望んでいた在り方を再検討しました。 現在の仕様のAPIが期待どおりに機能しているケースがいくつかありましたが、RadSideDrawerはほとんどのモバイルアプリケーションの基本的な要素であり、その中のどこにでも簡単に表示できるようにすべきだという意見が、コミュニティから圧倒的に多くありました。 3.xxのバージョンでは、それぞれの要素を表示するために、各PageのXML宣言で要素を複製する必要があり、メンテナンスが非常に冗長になっていました。 これを念頭に置いて、RadSideDrawerのAPIを再検討し、 大きな重大な変更を回避しつつ、APIをあまり変更せずに上記の「共有」ユースケースが可能になるように実装しました。

4.XXのプラグインのバージョンでは、RadSideDrawerを アプリケーションのルート要素として使用することが可能です。 このようにして、アプリケーションのライフサイクル全体を通じて永続化され、「共有」されます。 要素をルートとして使用するには、以下のようにします。

• NativeScript 3.xxでは、Pageインスタンスを宣言するために使用した場所で、これを宣言します。
• "drawerContent"をいつものように設定します。
• Frameインスタンスに"mainContent"を設定し、 defaultPageを、アプリケーションの最初のページに設定します。

例えば：

<nsDrawer:RadSideDrawer xmlns:nsDrawer="nativescript-ui-sidedrawer">
	<nsDrawer:RadSideDrawer.drawerContent>
		<GridLayout>
			<Label text="Side Menu"></Label>
		</GridLayout>
	</nsDrawer:RadSideDrawer.drawerContent>
	<nsDrawer:RadSideDrawer.mainContent>
		<Frame defaultPage="./main-content-page"></Frame>
	</nsDrawer:RadSideDrawer.mainContent>
</nsDrawer:RadSideDrawer>

デモソース

設計上、NativeScriptアプリケーションでナビゲーションを実行すると、そのナビゲーションはFrameインスタンス内で実行されます。 つまり、RadSideDrawerインスタンスはそのナビゲーション中に永続化されます。

また、RadSideDrawerをルート要素として使用する場合、常にナビゲーションバーの上に表示されます。

図1. ルート要素としてのRadSideDrawerとナビゲーションバー（ActionBar）

バージョン3.xxから最新バージョンへの移行

最新の4.xx以降のバージョンでは、RadSideDrawer要素のAPIと使用法にいくつかの変更が加えられています。 2つの大きな変更がありました。

• showOverNavigationプロパティは、要素が利用されるように変更することにより除去し、置換されています。 詳細については、以下のナビゲーションバーの上にRadSideDrawerを表示する"セクションを参照してください。
• RadSideDrawerは、アプリケーションのライフサイクル全体を通じて「共有」することができます。

ナビゲーションバーの上にRadSideDrawerを表示する

最新バージョンでは、RadSideDrawerをナビゲーションバーの上または下に表示するよう再設計され、 プロパティによって制御されるのではなく、要素がアプリケーションで使用される方法によって制御されるようになりました。 コミュニティから多くのフィードバックを聞いていると、その大部分がshowOverNavigationプロパティをデフォルト値のfalseからtrueに変更し、各ページの要素を複製していることに気付きました。 これが、アプリケーションのライフサイクル全体を通じて要素を永続化できるようにすることで、両方の場合に改善を導入した理由です。 これも設計上、ナビゲーションバーに表示されます。 プロパティを設定する必要はなくなりました。 をアプリケーションのルートとして設定するだけです。 詳細については、上記の"アプリケーションのライフサイクル全体を通して単一のRadSideDrawerを共有する" セクションを参照してください。

複製されたRadSideDrawerから単一のルート要素に移行する方法

3.x.xでRadSideDrawer要素を使用していた場合は、アプリ内の各Pageでその宣言を複製して終了している可能性があります。 4.x.xでは、これは不要になりましたが、下位互換性があり、期待どおりに機能するはずです。 最新バージョンでは、アプリケーション全体で1つの宣言を真に「共有」することができます。 これは、パフォーマンスの観点からも推奨されるアプローチです。 3.x.xから4.x.xに移行するには、次の一般的な手順に従ってください。

• 重複したRadSideDrawerの宣言をXMLから削除します。
• ブートストラップされたPageのXMLで、そのタグ宣言を次のように置き換えます。

<nsDrawer:RadSideDrawer xmlns:nsDrawer="nativescript-ui-sidedrawer">
	...
</nsDrawer:RadSideDrawer>

• mainContentをFrameインスタンスに設定し、defaultPageをアプリケーションの最初のページに設定します。

<nsDrawer:RadSideDrawer.mainContent>
	<Frame defaultPage="main-content-page"></Frame>
</nsDrawer:RadSideDrawer.mainContent>

• アプリケーションのブートストラップを新しいrun構文に変更します。

import * as app from "application";

app.run({ moduleName: "main-page" });

ページの1つからRadSideDrawerにアクセスする必要がある場合は、 新しいapplicationモジュールのgetRootView()関数を使用できます。

import * as app from "tns-core-modules/application";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";

let sideDrawer = <RadSideDrawer>app.getRootView();