カスタムウィジェットの作成 Mendix

Mendix
2015 年 2 月 11 日
分読み

カスタムウィジェットは、特定のUXニーズを解決するために使用されます。 Mendix リッチテキストエディターや最近追加された Chart.js など、長年にわたって構築されてきた App Store のさまざまな機能をご利用いただけます。

コミュニティとして Mendix 開発者の皆さん、私たちは独自のカスタムウィジェットを作成して共有することで、お互いに素晴らしいアプリを開発するのを手伝うことができます。感謝の気持ちを表すために、 無料で配布しています Limited Edition Mendix ウィジェットビルダーTシャツ新しいカスタムウィジェットを作成するすべての方へ新しいウィジェットがApp Storeで利用可能になった日に、新しいウィジェットの配送手配についてご連絡いたします。 Mendix みやげ品！

この記事では、 Mendix R&D開発者兼建築家リチャード・エデンスは、基準を設定するプロセスについて説明します。 Mendix ウィジェットの作成、およびプロセスを自動化するツールの構築。

私が働き始めたとき Mendix 昨年、私は 2 つの部門に同時に参加しました。エキスパートサービス (CSM – カスタマーサクセスマネジメント) 部門では、カスタムウィジェットのアドバイザー、講師、開発者として働きました。R&D 部門では、カスタムウィジェットの作業に関連する問題の解決を支援しました。

このユニークなポジションのおかげで、パートナーやクライアントが実際にどのようにカスタムウィジェットの開発を行っているかなど、カスタムウィジェットの開発について多くのことを学ぶことができました。ソフトウェア開発者およびアーキテクトとしての私の専門分野の 1 つは、人々が使用するさまざまなプロセスに関するすべての情報を収集し、新しく改善された (機能する) 方法を考え出すことです。

Mendix 過去に構築したカスタムウィジェットの一部をオープンソース化することにしました。 Mendix プラットフォームです。カスタムウィジェットのコードを共有すれば、誰でも貢献でき、最終的にはより多くのエンドユーザーストーリーを完成させるより良い製品を提供できると考えています。さらに、カスタムウィジェットの開発は、より大きな開発者グループに分散できるため、コミュニティのメンバー全員にとってメリットのある状況が生まれます。 Mendix コミュニティ。

私の最初の取り組みは「AppStoreWidgetBoilerplate」を作成することでした。 Mendix クライアントAPIと既存のウィジェットの例私は、 HTML 定型文、Mathias BynensとHans Christian Reinlによって管理されています。ただし、この新しい定型文は、 Mendix プラットフォームを提供します。

私の目標は、新しい定型文を、 Mendixさらに、これは既存のカスタムウィジェットを移植できるテンプレートであり、新しいウィジェットや移植されたウィジェットは、 Mendix GitHub は一定の品質を備えています。その目標が達成された後、カスタムウィジェットを作成するために必要な他のプロセスを検討し始めました。

以前は、カスタムウィジェットを Mendix このプロジェクトには、ソースコードが変更されるたびに繰り返す必要のあるタスクが多数含まれていました。

カスタムウィジェットのチケットを解決しながら、学んだことを共有するためにカスタムウィジェットワークショップを開発しました。これにより、この繰り返し発生する作業パターンに対するソリューションを開発する機会が得られました。Adobe Bracketsのウィジェット開発プラグインは、BracketsをIDE（統合開発環境）に変換し、カスタムウィジェットを作成するためのプラグインです。 Mendix プラットフォーム。このプラグインにより、「AppStoreWidgetBoilerplate」に基づくウィジェットのパッケージ化が Adobe Bracket 内のワンクリックプロセスに変換されました。

「AppStoreWidgetBoilerplate」と「Brackets用ウィジェット開発プラグイン」を使用すると、すぐに拡張を開始できます。 Mendix クールな新しいユーザーエクスペリエンス！繰り返しになりますが、カスタムウィジェットの構築に興味がある場合は、 Mendix, このウェビナーをオンデマンドで視聴してください。私はこれらのツールの両方を「Hello World」で実演します。 Mendix カスタムウィジェット。

よくある質問

Q: カスタムウィジェットを構築すべきなのは誰ですか?
A: 答えは、JavaScript / HTMLとCSSに精通している人なら誰でもです。これらのスクリプト言語に基づいてのみカスタムウィジェットを作成できます。そのため、カスタムウィジェットの開発を始める前に、これらのスクリプト言語を暗記してください。 Mendix プラットフォームに関する確かな知識も必要です Mendix プラットフォームとそれを使用してアプリをモデル化する方法について説明します。

Q: カスタムウィジェットとは何ですか?
A: カスタムウィジェットとは、DIJITウィジェットのことです。 Mendix クライアントAPI JavaScript関数は、 Mendix 変更された DOJO 環境。適切な DIJIT ウィジェットを実際に記述するには、JavaScript と、JavaScript および DOJO / DIJIT のデザインパターンをしっかりと理解している必要があります。次のチュートリアルに従って、DIJIT ウィジェットの作成を始めましょう。 https://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html

A: カスタムウィジェットはいつ構築または使用すればよいですか?
Q: カスタムウィジェットは、特定のUX機能を提供することを目的としています。 Mendix アプリ。特別なUX（ユーザーエクスペリエンス）が必要な場合にソリューションを提供します。 Mendix すぐに使える機能は提供されません。

カスタムウィジェットの例は次のとおりです。

車を組み立てる: たとえば、自動車を視覚的に構成する機能が必要なアプリケーションがあるとします。その場合、カスタムウィジェットの構築を検討する必要があります。

検索フィルターの値に基づいて変化するメニュー: 検索結果に基づいてページリンクを表示する動的なメニューが必要な場合。

ドラッグアンドドロップ： 商品をショッピングカートにドラッグアンドドロップしたい場合。

Q: 高度なカスタムウィジェットワークショップは、 Mendix 学校？
A：はい！ Mendix は、「カスタムウィジェット構築の技術をマスターする」という高度なカスタムウィジェットワークショップを提供しています。カスタムウィジェット構築を最大限に活用したい場合は、お住まいの地域で次のコースがいつ提供されるかを確認してください。 https://academy.mendix.com/#1418913294132-2

追加リンク:

基礎訓練の Mendix モデラ
カスタムウィジェット開発 Mendix の知識が必要です Mendix アプリプラットフォームとビジネスモデラー。オンライン講座または、こちらから対面式入門コースに登録してください。 https://academy.mendix.com/#1418913294132-2

AppStoreWidgetBoilerplateの場所
次の場所にあります: https://github.com/mendix/AppStoreWidgetBoilerplate

Mendix カスタムウィジェットを備えた GitHub リポジトリ
ウィジェットの例は、GitHub リポジトリでご覧いただけます。 https://github.com/mendix/

JavaScript のデザインパターン
JavaScript のデザインパターンに関する優れた書籍として、Addy Osmani 著の Open Source があります。こちらから入手できます。 https://addyosmani.com/resources/essentialjsdesignpatterns/book/

最初の dijit ウィジェットの作成
dijit ウィジェットの作成を開始するための優れた方法については、こちらを参照してください。 https://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html

Mendix クライアントAPI
その Mendix クライアント API は次の場所にあります: https://apidocs.mendix.com/5/client/