円形のプログレスバーのプラグイン可能なウィジェットを作成する方法 | Mendix

メインコンテンツへスキップ

サイト内検索

営業担当者へ連絡
無料でお試し

円形のプログレスバーのプラグイン可能なウィジェットを作成する方法

円形プログレスバーのプラグイン可能なウィジェットを作成する方法

日々の業務でプラグイン可能なウィジェットを作成する機会はめったにありません。そのため、スキルを新鮮に保つために、定期的に使用するウィジェットを再現して自分自身に挑戦するのが好きです。これをしてからしばらく経っているので、今週は自分のスキルを試し、ネイティブモバイルリソースモジュールに含まれる円形プログレスバーウィジェットを再現してみることにしました。それでは、シートベルトを締めて、Reactの世界の探索の旅に出かけましょう。 Mendix.

始める前に

始める前に少し時間を取って、すべてがセットアップされていることを確認してください。必要なものは次のとおりです。

使用するgithubライブラリの選択

このようなプロジェクトをどこから始めたらよいかを知ることは、開発者にとって時々気が遠くなるようなことです。だからこそ、少し調べた後に何をすべきかを知る方がずっと簡単だと思います。そこで私はgithubに行き、すでに公開されているものを調べました。私は次のリポジトリを見つけました。 エピコードアカデミー これをコンポーネントのベースとして使うことにしました。このリポジトリには他にもプロジェクトがあるので、正確なリンクを探している場合は こちら.

コードの分析

コードを書き始める前に、提供されているコードを実際に確認し、何が起こっているのか理解することが重要です。例を見ると、これが関数コンポーネントを使用していることがすでにわかります。また、メイン コンポーネントは通常クラス コンポーネントであるため、プラグ可能なウィジェットに実装するには、何らかの変更が必要になることもわかっています。

コンポーネントには、クラス コンポーネントと関数コンポーネントの 2 種類があります。関数コンポーネントは、引数として props を受け入れ、React 要素を返す単純な JavaScript 関数です。クラス コンポーネントでは、React から拡張する必要があります。

ウィジェットのスキャフォールドを作成する

読むのは十分です。コードを書きましょう。まずはターミナルを開いてプロジェクト ディレクトリに移動します。これを行う簡単な方法は、Studio Pro のトップ メニューの [アプリ] の下にある [エクスプローラーでアプリ ディレクトリを表示] をクリックすることです。これにより、アプリのファイルを含むファイル エクスプローラーが開きます。ナビゲーション バーのファイル パスをコピーして、開いたターミナルに戻ります。「cd」と入力して、次のようにファイル パスを貼り付けます。

cd yourFilePath

次に、カスタム ウィジェットを保存するフォルダーを作成する必要があります。ターミナルで次のように入力します。

mkdir CustomWidgets

次に、cd を使用して、作成したフォルダーに移動します。

cd CustomWidgets

これでウィジェットビルダーを使用してウィジェットのスキャフォールドを作成できます。ターミナルで再度このコマンドを使用して Mendix ウィジェットジェネレーター:

@mendix/widget CircularProgressBar

ウィジェット ジェネレーターは、いくつかの質問をしてウィジェットの作成をガイドします。私が使用したのは次の質問です。

  • ウィジェット名: {ウィジェット名}
  • ウィジェットの説明: {ウィジェットの説明}
  • 組織名： {あなたの組織名}
  • 著作権： {著作権の日付}
  • ライセンス： {あなたのライセンス}
  • 初期バージョン:{初期バージョン番号}
  • 著者： {著者名}
  • Mendix プロジェクトパス: ../../
  • プログラミング言語： ジャバスクリプト ES6
  • ウィジェットタイプ: ネイティブモバイル
  • ウィジェットテンプレート: 空のウィジェット（経験豊富な開発者に推奨）
  • ユニットテスト: いいえ
  • エンドツーエンドテスト: いいえ

ウィジェットXMLの設定

最初に行う必要があるのは、ウィジェット XML を変更して、コンテキスト エンティティから属性の形式でデータを受け取れるようにすることです。これを行うには、整数値を受け入れることができるプロパティを作成する必要があります。このプロパティのキー値を定義することも重要です。以下に私のウィジェット XML を示します。

<?xml version="1.0" encoding="utf-8"?>
<widget id="mendix.circularprogressbar.CircularProgressBar" needsEntityContext="true" offlineCapable="true" pluginWidget="true"
supportedPlatform="Native" xmlns="https://www.mendix.com/widget/1.0/"
xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
<name>Circular Progress Bar</name>
<description>Animated Circle Progress widget</description>
<icon>
iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABp1BMVEUAAABV//9mzP9LtP9Ms/9Jtv9NsvdJsfpLtPpJsfdJsfhJsvhJsvdKsvdJsPhKsPhJsfdJsPhJsfdIsfhJsfdIsPdJsfhJsfhJsPhJsPhIsfhIsPdJsPdKsPdKsfdNsvdOsvdPs/dQs/dRtPdStPdTtPdUtfdWtvdXtvdauPdcuPdeufdeufhguvhiu/hju/hkvPhmvfhnvfhpvvhrv/huwPhvwfhxwfhywvhzwvh4xfl5xfl6xfl8xvl9xvl9x/mByPmCyfmFyvmGyvmJzPmKzPmLzfmNzvqPzvqQz/qT0PqU0PqU0fqX0vqY0vqa0/qe1fqg1vqj1/uk1/un2fup2vut2/uv3Puw3Puw3fuz3vu13/u23/u34Pu44Pu64fu64fy84vy94vy+4/y/4/zD5fzE5fzG5vzH5vzI5/zK6PzL6PzR6/zT7P3U7P3V7f3W7f3Y7v3Z7v3c8P3e8f3f8f3g8f3i8v3l8/3l9P3n9P3r9v7t9/7u9/7v+P7w+P7x+f7y+f70+v71+v74/P75/P76/f77/f78/f78/v79/v7+/v7////6dMsRAAAAG3RSTlMAAwURGxwhMTNic3SEh4iVp7XBzejt7vH5/f6PsMNWAAABsklEQVR4AWIYfGAUjIJRMAqYuYREJKWJAqLCPGwY+jnFpEkBEryMqPr5pEkFgkwo9kuTDviR/S9GhgFSHAgDuKXJAQIIA4TIMkAcEY4i0mQBVrgBkuQZwA43QJo8wIFhQEhEOIBQOutHJozDOP5Crp4e1RhkJ0tKGJFd6oNEdtmJyEIzpaZl5nrRZgaHM/2Pf5/vwXXfyagXgG93bwSAlEolowLMm9w83gibhXH2gKKVdD67gTnWjwCk+VVjMQS4suSnnjMLRVFc9sAHvAX2A9fySaXNBMbEZVUWscaHIMRuqwBgD8hDEbnsRmfjUKJkAQZGCTlO/xWBwIADQLIZBlY441MvfoF1xlFS/4fy+bzXKh4dgNJE7L3eh3tmtuWa+AMcMIY3dgUvZQpGEYmMw2kD7HC+R29UqyoXLaBd0QZxzgXgikLLDSqJTKU5HOcS0MsbA9jPqtwCRvXm2eorBbNIJBw3KJ9O4Yl+AAXdnyaLt7PWN3jRWLvzmAVp94zO5+n41/onfo/UpExxZqI0O7NQr0DhIq9Io7hQpbRYp7hiobRqo6ByFcNWuY6CUTAKRgEAo8X0lBD3V30AAAAASUVORK5CYII=
</icon>
<properties>
<propertyGroup caption="General">
<property key="progress" type="attribute" required="true">
<caption>Progress Indicator</caption>
<description>The attribute that contains the circularprogressbar value, should be an integer between 0 and 100</description>
<attributeTypes>
<attributeType name="Integer"/>
</attributeTypes>
</property>
</propertyGroup>
</properties>
</widget>

主成分

データ入力が定義されたので、メイン コンポーネントで作業できます。この場合のメイン コンポーネントは、子コンポーネントをレンダリングし、そのプロパティを使用して提供されたデータを渡すことを目的としています。

「Props」は React の特別なキーワードで、プロパティを表し、あるコンポーネントから別のコンポーネントにデータを渡すために使用されます。ただし、ここで重要なのは、データ プロパティが一方向 (一方向) のフローでのみ渡されることです。

ここで注意すべき点は、前述のとおり、メイン コンポーネントはクラス コンポーネントとしてスキャフォールディング内に作成されることです。つまり、Github コードを少し変更する必要があります。

以下は、CircularProgressBar と呼ばれるメイン コンポーネントのコードです。

import { React,Component ,createElement} from "react";
import CircularProgress from "./components/CircleComponent";
export class CircularProgressBar extends Component {
constructor(props){
super(props);
this.handleChange =this.handleChange.bind(this);
const {progress} = this.props;
console.log('constuctor triggered');
}
render() {
const {progress} = this.props;
console.log('render triggered');
return (
<CircularProgress
progress={progress.value}
size={200}
/>
)
}
}

子コンポーネント

子コンポーネントは、ロジックの大部分が実行される場所です。ここで、再び props を使用して親コンポーネントからデータを受け取り、少しのロジックと 'styled-components/native' のスタイル付きライブラリを使用して、プログレスバーを構成する個々の部分にスタイルを設定します。最後に、コンポーネントをレンダリングする return ステートメントで終了します。以下の子コンポーネント「CircleComponent」コードを確認してください。

import React, { useRef, useEffect, createElement } from "react";
import styled from 'styled-components/native';
import {Animated} from 'react-native';
const EmptyColour = '#a0a0a1';
const ProgressColour = '#0085ff';
const CircleBase = styled(Animated.View)`
width: ${props => props.size}px;
height: ${props => props.size}px;
border-radius: ${props => props.size / 2}px;
border-width: ${props => props.size / 10}px;
`;
const EmptyCircle = styled(CircleBase)`
border-color: ${EmptyColour};
justify-content:center;
align-items: center;
transform: rotate(-45deg);
`;
const Indicator = styled(CircleBase)`
position: absolute;
border-left-color:${ProgressColour};
border-top-color:${ProgressColour};
border-bottom-color:transparent;
border-right-color:transparent;
`;
const CoverIndicator = styled(CircleBase)`
position: absolute;
border-left-color:${EmptyColour};
border-top-color:${EmptyColour};
border-bottom-color:transparent;
border-right-color:transparent;
`;
export default function CircularProgress(props) { //added input props
const {progress, size} = this.props //destructured the props
console.log (styled)
const animatedProgress = useRef(new Animated.Value(0)).current;
const animateProgress = useRef(toValue => {
Animated.spring(animatedProgress, {
toValue,
useNativeDriver: true,
}).start();
}).current;
useEffect(() => {
animateProgress(progress);
}, [animateProgress,progress]);
const firstIndicatorRotate = animatedProgress.interpolate({
inputRange: [0, 50],
outputRange: ['0deg', '180deg'],
extrapolate: 'clamp',
});
const secondIndicatorRotate = animatedProgress.interpolate({
inputRange: [0, 100],
outputRange: ['0deg', '360deg'],
extrapolate: 'clamp',
});
const secondIndictorVisibility = animatedProgress.interpolate({
inputRange: [0, 49, 50, 100],
outputRange: [0, 0, 1, 1],
extrapolate: 'clamp',
});
return (
<EmptyCircle size={size}>
<Indicator
style={{transform: [{rotate: firstIndicatorRotate}]}}
size={size}
/>
<CoverIndicator size={size} />
<Indicator
size={size}
style={{
transform: [{rotate: secondIndicatorRotate}],
opacity: secondIndictorVisibility,
}}
/>
</EmptyCircle>
);
}

依存関係のインストール

ウィジェットをテストする時間が近づいてきましたが、その前にいくつか確認しておく必要があります。使用したライブラリがウィジェット フォルダーに正しくインポートされていることを確認する必要があります。ターミナルを再度開き、コマンドを入力します。

npm install --save

コードに必要な依存関係がダウンロードされ、インストールされるまで待ちます。

何か問題が発生した場合や、これをやり直す必要がある場合は、このコマンドを使用してすべてのノードモジュールを削除し、再インストールするクリーンインストールを実行することもできます。 (ただし、100% 必要な場合にのみ実行してください!)

npm ci --save

ウィジェット .mpk ファイルの作成

ウィジェットをバンドルして、.mpkファイルを作成し、 Mendix プロジェクトを実行するには、ターミナルで次のコマンドを実行します。

npm run build

このアクションによりウィジェット コードが構築され、ウィジェットがウィジェット フォルダーにコピーされます。最後の手順は、F4 キーを押すか、Studio Pro のトップ メニューで [アプリ] → [アプリ ディレクトリの同期] に移動して、Studio Pro でアプリ ディレクトリを同期することです。

これで、Studio Pro で開発するときにウィジェットにアクセスできるようになりました。ウィジェットはコンテキストのデータビュー内に配置する必要があり、整数属性がそれに接続されていることが想定されますが、これを設定したら、Make it Native 9 アプリを使用して新しいウィジェットを実行してテストできます。

プラグイン可能なウィジェットの作成について詳しく読む

言語を選択してください