Programmers Office

テキストによるエクササイズの続きです。6.2　画面のライフサイクル: Ajaxのエクササイズ（OutSystems セルフトレーニング） Part 1: Create a Web Block for star ratings Placeholder のwidth はempty にはできず、Fullにしておく Part 2: Make the stars in the Block clickable Search Box で「Notify」を検索することとなっているが、検索されない。 https://www.outsystems.com/forums/discussion/41219/notify-deprecated-in-service-studio-11-what-can-i-use-to-replace-it/ Manage Dependencies (ctrl + q) で探してくれは良いけど、Deprecated（廃止予定）ってどういうこと？そちらを教えて欲しい・・・ ・・・一応その回答はこちら。 https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Reuse_UI/Use_Events_to_Propagate_Changes_From_a_Block_to_the_Parent これまでは、ウェブブロックの中でScreenAction（テキストではStarClicked）を定義して、それをNotifyするという仕組みだったのが、11では、ScreenActionとは別のEventというものが定義できるようになった。 Notifyのメッセージとして、値等（StarIterator.List.CurrentRowNumber + 1）を定義し、さらに親画面におけるウェブブロックインスタンスのDestinationとしてアクション（OnRatingNotify）を作成して指定する、と言う流れだったのが、バージョン11では、親画面でイベントに対応するハンドラを書く、と言う感じ？ そして、Destinationのアクション（OnRatingNotify）の記述として、Figure 26のような割と複雑なロジックを作っていくわけですが、これはどう書くのだろう・・・ ちょっとテキストがバージョン11に追いついていないので、ここは飛ばしていきます。 Eventsという形にしたのは悪くないと思うのですが。

テキストによるエクササイズの続きです。5.7　Input Validationのエクササイズ（OutSystems セルフトレーニング） Part 1: Add a comments sidebar to movie Container の幅指定の方法は変わっている。 Styles Editor を指定。 bold 、italic 設定もStyles Editor で。 CreateUserMovieComment はCoreUserMovieComment の中

Assign してReflesh すると言う流れを理解する

テキストによるエクササイズの続きです。5.5　Actionとコードを再利用してみよう（OutSystems セルフトレーニング） Part 1: Test the built-in validations Validation設定のServer とServer & Client を試す Part 2: Add validations to editing a movie Feedbackメッセージを日本語で入力しようとしたら文字化けした！ ここまで長くなってくると全体が見通せなくなる。 一つ一つのプロパティを見ないと何をやっているのか分からない。 また、この辺でソース管理についての説明があると良いのでは Part 3: Test the validations for editing a movie 動作確認 Part 4: Add validations for editing a person 自分でやってみよう、ということなので、一つだけやって、取り急ぎ進めます。 Part 5: Test the validations for editing people 動作確認

テキストによるエクササイズの続きです。5.3　データのクエリとウィジェットのエクササイズ（OutSystems セルフトレーニング） Part 1: Create a reusable Action 淡々と進めます Part 2: Convert Action to a Function こうして作ったユーザアクションは、基本的には、ステートメントとしてのみ呼び出すことができる、方法はアクションフローへのドラッグ&ドロップ。 FunctionにすることでExpressionの中で呼ぶこともできるようになる。 やることはプロパティを変えるだけ Part 3: Test calling an Action and a Function できるけど、分かったような分からないような（分かっていない）

テキストによるエクササイズの続きです。4.4　画面のライフサイクル: インタラクションのエクササイズ（OutSystems セルフトレーニング） Part 1: Add participants to a movie アクションからの「New Web Screen」で自動的には名前はつけてくれなかった。（Mac版だから？） 「Link」のプロパティの設定は、Widget Treeで「Actions」の中ににあるリンクを選択。 タイトル欄にExpressionを追加したのち、ムービータイトルを表示させるようにするための設定は、下記の図のような形でダブルクリックにより指定できる。 Windows環境とMac環境両方で開発している場合、すなわち、複数人で開発している場合、モジュール（今回でいうとOSMDb_Core）が変更された場合の再読み込みはそれぞれで行う必要がある（当たり前といえば当たり前）。 再読み込みを行なったいないために、データタイプにPersonMovieRoleが表示されなくて悩んだ。 Part 2: Test the ‘add participants’ to a movie ここまで順調にきたわけですが、ついにエラー発生。よりによって実行時エラー。開発環境側にはエラーはない。 こうなってしまうと、何をすれば良いか分からない。 が、もう少し冷静になって考えてみると、画面を開く時点でエラーになっているので、preparation が怪しいと考えられる。見てみると、赤ではないが黄色の波線。 SQLを実行してみるとエラー。ピリオドとカンマ！ ということで修正したら動きました。 SQL書いたらその場でテストしましょう。 Part 3: Display the participants of a movie ではPersonエンティティを取得した上で、PersonMovieRole もソースとして追加し、PersonMovieRoleへのフィルタとして、MovieId とActor を指定しようとしています。 しかし、このActor のフィルタ追加で、PersonRole はないよと言われています。正解は、PersonalRole。 その後Group By の設定をしますが、若干表現が異なります。 そして、それをやった後の画面も相当異なります。 Group By の設定を、テキストの画像にあるように、▽ボタンを押して行うのではなく、右クリックで行なったら、近い形になったので、こちら右リック推奨です。 Part 4: Search and filter the list of movies 淡々と進める

テキストによるエクササイズの続きです。4.2　リレーションのモデリングをしてみよう（OutSystems セルフトレーニング） Part 1: Add the ‘Edit Movie’ feature テキスト通り進められます。 途中で、Movieの中にGenreIdが表示されなくて、追加し忘れていたかと思ったら、追加はしたけど表示更新していなかったということでした。 とりあえず、テキストボックスをドラッグして幅を広げる際のデザイナの表示がかっこいい。こういうの待ってたよ！ Part 2: Add the ‘New Movie’ feature 最初に「＜＞」タブをクリックすると書かれていますが、現在のバージョン11では「Widget Tree」タブですね。 そしてテキストでは「Layout_London」が指定されていたのを今知る・・・ まあ、そのまま進めます。（後から変えられるのかな・・・） Part 3: Test the creation and update of movies 動作確認 ちゃんと動いています Part 4: Add the ‘Edit Person’ feature そのまま進めます Part 5: Add the ‘New Person’ feature 衝撃の事実？ 実はここまでにも若干気になっていたのですが、 People とPerson Detail が、結構出来上がっている。 フォームを自動的に作ってくれるので、ある程度上記でやってきたSaveボタンとかは自動的に作ってくれるのかなと思ったりしていたのですが、ちょっとできすぎじゃない？という気が・・・更新後のメッセージとか、このあと作るんじゃないの？みたいなのまでできている。 まさか、小人が作ってる？ そうじゃないとすると、他の人と被って更新している？同じ名前だとそんなことが起きうる？ちょっと変な感じ。

Modeling Data Relationships Exercise https://www.outsystems.com/learn/lesson/859/modeling-data-relationships-exercise/ 3.3、3.6に続き、テキストをやってみます。3.6　ウィジェットを使ってみよう（OutSystems セルフトレーニング） Part 1: Create a foreign key between Entities テキスト通り 外部キーを追加する際に、カラムの型はデータ自体の型を指定するのではなく、データIdentifierを指定する、というのが面白い Part 2: Create the junction Entities テキスト通り、関連テーブルのエンティティを作成 Part 3: Create an Entity Diagram リレーションの線が自動的に描画されるはずが、最初描画されずに、あれ？と思いましたが、画面をクリックすると表示されました。 Part 4: Publish the application module Management Dependencies画面は若干変わっている。

Widgets I Exercise https://www.outsystems.com/learn/lesson/876/widgets-i-exercise/ 3.3と同様3.3　データのモデリングをしてみよう（OutSystems セルフトレーニング） テキストを進めます。 Part 1: Add a new module to the application まず「Responsive」ではなく「Web Responsive」になっている、ちょっと気になる。 また、ワークスペースの画面状態も、初期コンテントがない状態、ちょっと気になる。 Part 2: Reference Entities from core module 書いてある通り Part 3: Retrieve and display the movie list テキストでは、既存のHomescreenの名前を変えることになっているが、新しくscreenを作る。 テンプレートはとりあえず「Empty」。名前は最初から「Movies」。 スクリーンの準備としてアグリゲートの指定をする。そこにエンティティを指定することでデータの取得処理が作られる。 スクリーンのコンテントにテーブルレコードを指定して、そのデータソースとして準備で取得したデータを指定する。 という流れですね。これで画面も表示されました。 Part 4: Retrieve and display a movie’s details 詳細画面の表示のさせ方＝画面へのデータの連携のさせ方は同様ですが、フィルタをかけて１件を表示対象とするということ。 なので、Input Parameter を設定する。 Widthを「8 col」に指定する、というところの画面説明がないですが、Stylesの中。 フォームの名前が自動的に変わると言われても、どこで確認できるか分かりませんでしたが、Widget Tree で見ることができました。 モデルの項目をドロップすると画面を構成してくれるのは大変助かります。 その際、テキストではラベルと入力域が左右に並ぶ形になっていますが、今回は縦に並ぶ形になってしまいました。 Part 5: Add a Screen to the top Menu そのまま

Modeling Data Exercise https://www.outsystems.com/learn/lesson/875/modeling-data-exercise/ Lesson Materialsをダウンロードすると、その中にテキストPDFが入っているので、それを見て進めます。 テキストはバージョン10ベース、現在の最新環境は11のため、所々違うところが出てくると思われます。 Part 1: Create the application いきなり、Blank module templateを使うようにとなっていますが、それが見当たらない。（先を進めると、このことを言っているのではなく、最初のモジュールを作る時にBlankを選択するのだと分かりますが） 何かテーマを選んでみるか。 参考：http://annatokugawa.blog.fc2.com/blog-entry-45.html とも思いましたが、またハマると嫌。 出来上がりイメージはトップメニューの形のようなので、「TOP MENU」テンプレートを選択します。 それ以降は、テキストの通り。 Part 2: Create Entities Mandatoryとは「必須」の意味。 で進めていってたら、キーボード入力を受け付けなくなった。mac版で進めるのはやはりリスキーだな・・・ 一回終了したら正常化されました。なお、終了する際は、Uploadします。Saveではない、すなわち、これは実は全てサーバ管理になっているということですね。 Part 3: Create Static Entities データを追加していくのみ Part 4: Publish the application module クリックするのみ。 ただ、「Template_TopMenu」が見つかりませんというメッセージ。 むう・・・テンプレートを選ばないこともできたのだろうか。 さらにタイムアウトになったりしましたが、再度ボタンを押すと成功します。 ただ、NOTEとして書かれている通り、この時点ではUIがないので、「Wrong URL address – this module does not contain a default entry.」というエラーメッセージが表示されるのみです。

OutSystemsもおもしろうそうなので、早速、WebAPIのデータを表示させるアプリを作ってみようかと思います。 その際、mac版を使ったところ、読み込み時にエラーになってしまう。Windows版では成功したということは、やはりmac版は多少不安定な面がるかもしれません。 そして、呼び出しはできる（WebAPI読み込みコンポーネントのようなものは作れる）ものの、それを画面のListに表示させる方法がいまいちわからない。 もう少し勉強しようということで、こちらをしばらくやってみたいと思います。 OutSystems セルフトレーニング http://www.bluememe.jp/outsystems/outsystems_support/self_training.html （しばらくこのページを随時更新していく形になります） 1　コースイントロダクション 日本語字幕あり（しばらくあるようなので、特筆しない限りは以降、日本語字幕ありです） 各セッションの概要 どういうアプリを作っていくか 映画管理 ホテル予約 試験制度 どんな問題が出るか 2　OutSystemsの基礎知識 2.1　OutSystems概要 development quality production プラットフォームサーバ コンパイル デプロイ 管理 service studio integration studio service center 2.2　Service Studioとは ここで使われているのはバージョン10 基本的なIDE機能は概ね予想通り 最後にソースの競合、マージの説明 ソース管理ツールも統合されているイメージ 3　ウェブアプリ開発の基礎 3.1　画面のライフサイクル Webアプリケーションとは何か ブラウザは何をするのか 静的リソースと動的コンテンツ Preparationという概念を使用しており、その中でデータ取得等を行う 3.2　データのモデリング Entity→テーブルの行 Attribute→列 Service Studioのデータレイヤーで作成 名前からデータ型を推測してテーブルを作る！ 例：Amount→Currency 3.3　データのモデリングをしてみよう これから行うExerciseの説明。（ビデオなし） movie databaseのwebアプリケーションを作ります。 継続的に拡張、公開、テストを行います。 行う内容は 1.アプリケーション作成 2.最初のモジュールの作成 3.エンティティとbootstrapデータの作成 4.静的エンティティとレコードの作成 5.Outsystems webサーバでの公開