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

WebclientサンプルPG「ひぐまショップデモ」

コメント

25件のコメント

  • ISHIJIMA

    サンプルありがとうございます。

    今後ともよろしくお願いします。

  • tanda

    竹本さん、サンプルデモをありがとうございます。WebClientがどんどん普及するといいですね。

  • kanai

    サンプルデモをありがとうございます。

    実行しようとしたところ、以下のようなエラーが出てしまうのですが、設定もれなど、なにかお心当たりありますでしょうか?

    Error: "Web client requests cannot be handled when the online MDI is open" (-276) Application: "higumashop" ("")

     

    4.6環境でWebClientが実行できることは確認していますが、4.7環境ではこのプロジェクトが初めてです。

    ご回答いただけましたら幸いです。

  • 竹本 靖夫

    kanai さんお世話になっております。

    オプション>設定>動作環境>実行モードが「バックグラウンド」になっていますか^-^?

  • ISHIJIMA

    バックグラウンドでない場合のこのエラーが発生しますね

  • kanai

    お二方とも、ありがとうございます。

    実行モードがオンラインとなっておりました、失念しておりました……。

    無事動作いたしました。

  • 竹本 靖夫

    kanai さんよかったです^-^。ここの設定も差分iniに入れておけばよかったですね;;

  • ISHIJIMA

    差分iniはいいですね(必須だという事がわかりやすいですね)

    実行したい場合は必ずバックグラウンドにしないといけないですからね

     

  • tanda

    RIAやWebClientのサンプルプログラム等も、バックグラウンドでの動作をデフォルトにしてもらえると分かりやすいですね。フォアグラウンドでも設定次第では動いてしまうところが分かりにくいのかもしれません。

  • kido

    サンプルプログラム公開ありがとうございます。

    動かしてみましたが、伝票形式の明細の追加方法がわかりません。

    ソースを見る限りでは、F4を押せば良いような気がしますが。。。

  • 竹本 靖夫

    kido さんこんにちは。

    Web系ではF5キーなど使うとリロードされたりするので
    なるべくファンクションキーを使わずにMEISAI.component.tsにて記述している

    PageDownでF4をシミュレートしていますー。

     
  • kido

    竹本様

    早速の回答ありがとうございます。

    PageDownで正常に動作しました。

    Webの開発は経験不足なもので。。。。

     

    ちなみにEdgeでは正常に動作しましたが、chromeだと以下のエラーで動作しませんでした。

    http://localhost/Magic47Scripts/MGrqispi.dll Http failure response for 

    http://localhost/Magic47Scripts/MGrqispi.dll:413 Request Entity Too Large Do you wish to retry connecting?

     

     

  • ISHIJIMA

    chromeのセキュリティの問題なのかな?

    HTTPSでないとだめだとか・・・

  • ISHIJIMA

    私の環境だとどちらでも問題なく起動しますね・・・・

     

  • 竹本 靖夫

    kido さん。

    1.Chromeのキャッシュを全削除

    2.Web_Client_Cacheフォルダの中身を全削除

    ではいかがでしょうか??

    Edgeはうごいているので1で終わりそうです^-^。

  • kido

    ISHIJIMA様

     こちらのPCの問題みたいですね。

     Edgeで動作するのでよしとします。 

     動作確認ありがとうございました。

  • kido

    竹本様

     Chromeのキャッシュクリアで解決しました。

     単純な事でした。。。お騒がせしました。

     竹本様、ISHIJIMA様ありがとうございました。

     

  • ISHIJIMA

    Chromeのキャッシュクリアで解決したんですね

    良かったです。

    動かない場合の手順として最初にキャッシュクリアが良いかもですね・・・

  • muka

    竹本さん、こんにちは。

    WebclientサンプルPGをありがとうございます。
    いろいろなノウハウが満載されていて、とても参考になりました。
    いくつかコメントさせてください。

    1.テンプレートのファイル名

     これは運用的なことですが、「*.ts」ファイルで「templateUrl」を「フォーム名.component.bs.html」のように変更し、MAGICの出力ファイルと一致しないように変更するアイデアはなかなか良いと思いました。

     ・不用意に編集したものを失う心配がない
     ・必要ならオリジナルといつでも比較できる

     複数のタスクを持つプログラムでも、割と気楽に再作成できるかもですね。(指定がプログラム単位だから...)
     勿論、出力後フォーム毎に「*.ts」の「templateUrl」や追加したロジックは書き直さなければなりませんが...
    (よく使うロジック等は定型文化しておかないと危険ですね)

    2.テーブルのWebスタイル

     プログラム「SLIPEDIT」の「MEISAI」タスクのテーブルは「R=繰り返し可能な項目」で作成されているようでした。
     どのスタイルを使うべきかについて、何か方針みたいなものはありますか?
     「R=繰り返し可能な項目」だと、テーブルヘッダのタイトルは手で追加しないといけないので、「H=HTMLテーブル」でも良さそうにも思いましたが...

    3.画面のデザインとロジックの追加の手順

     2のプログラムを見ると、MAGICが出力したと思われる「MEISAI.component.html」には、テーブルの末尾に追加されているボタンの部分が抜けていました。
     推測ですが、

      ①ボタンを追加する前の段階で「Webアプリケーションの作成」を行い、
      ②テンプレート「MEISAI.component.bs.html」の編集を行い、
      ③フォームのテーブルにボタンを追加し、
      ④ロジックを「MEISAI.component.ts」に追加

    という手順で作成したということでしょうか。
     やはり「隠す予定のボタンは最初からあると画面デザインの際に邪魔だから...」ということなんでしょうね。

  • 竹本 靖夫

    muka さんこんにちは!

    ちょっとでも参考になってWebClientが広まればうれしいです。

    1. よく上書きして「ひーーーー;;」ってなったもので。

    2. 弊社は基本「R=繰り返し可能な項目」でやっています。

    「H=HTMLテーブル」だと基本Tableタグを使用するのでスマホなどレスポンシブな画面には使いにくいという判断です。

    そこでBootstrapなどを使用しdivタグでゴリゴリ書いています。

    3. もったいないかもですが弊社の場合「Magicが吐き出したタグ」をほぼ使用していません。

    そうですね。ボタンはjavascriptからMaigcを制御するために。
    tsファイルからSimulateClick関数を使うためのものだけと割り切っています。

    明細だとペットショップデモだと「行編集」ボタンとか「行追加」ボタンで編集・追加を行うのですが
    「ボタンをクリックするのも面倒だなぁ」とキーボードでAPGのように操作したかったので作成いたしました^-^。

    ダウンロード本当にありがとうございました;;orz

  • muka

    竹本さん、こんにちは。

    コメントありがとうございます。

    >弊社は基本「R=繰り返し可能な項目」でやっています。

    >「H=HTMLテーブル」だと基本Tableタグを使用するのでスマホなどレスポンシブな画面には使いにくいという判断です。

    なるほど!参考になりました。
    ちなみにBootstrapのTableクラスに「table-responsive」がありますよね。これが使えるかなと思ったのですが、テーブルのヘッダ自体がスクロールによって動いて隠れてしまいますね。
    しかしこれを「R=繰り返し可能な項目」で作成されるスクロール領域の上にヘッダを書いてしまえば、件数が何件あっても固定的に表示できますね。

    有難うございました。またいろいろ教えて下さい。 m(__)m

  • muka

    竹本さん、こんにちは。

    今更ながら気付いたのですが、ひとつ質問させてください。
    このサンプルPGのウインドウタイプが「O=オーバレイ」になっている「MSYAINEDIT」「ZOOMMTOKUI」「ZOOMMSYOUHIN」等のプログラムの件です。
    通常であれば、「*.ts」ファイルの中の「private static readonly width」「private static readonly height」の値でウインドウのサイズが決まると思うのですが、これらの値は初期値のままで、実行すると画面一杯に表示します。
    これはどこでどのようにして実現しているのでしょうか?

    「O=オーバレイ」タイプのプログラムは、画面サイズを決めないといけないのですが、実行する端末環境に依存するため、決められないこともありますよね。
    当初、ウインドウのサイズによってフォームを複数作り切り替えたらいいかなとも思ったのですが、先ず「実行中のウインドウのサイズを取得する」方法が分からなくてどうしようもありませんでした。
    でも常に画面一杯に表示してくれるなら、それに越したことは無いなあと思う次第です。

  • 竹本 靖夫

    muka さんこんにちは!

    そうなんです。デフォルトだとサイズをピクセルで決めるので使いづらいんです。
    そこでカスタムオーバーレイといって「通常のオーバーレイはつかいません」という仕様です。

    オーバーレイは

    src\app\magic\Common\custom-overlay

    を使うように変更しています。

    そこで作ったものを

    app.module.ts

    から呼び出して「常にこっちのオーバーレイを使ってね!」というふうに捻じ曲げています。

    そのほかアラートも通常だとWindow.Alertなのですがちょっぴりカッコよく仕上げています。

    修正すべきところは

    custom-overlay.html
    custom-overlay.scss
    custom-overlay.ts

    となります^-^

    弊社だと

    custom-overlay.tsの中身を

        styles["width"] = "100%";
        styles["height"] = "100%";
     
    と変更することも多いです。
  • muka

    竹本さん、こんにちは。

    自前のプロジェクトに「Common」フォルダをコピーし、関連するファイルの定義を修正することにより、「通常のオーバーレイはつかいません」モードができました!
    これはなかなか感動的ですねぇ...

    「捻じ曲げる」なんて神業としか思えません。
    本当に有難うございます。m(__)m
    (MGICもデフォルトでこちらの仕様にしてくれたらいいのに…独り言)

    アラートも試してみます。
    またいろいろ教えて下さい。
    m(__)m

  • 櫻井永一

    竹本さん、mukaさん、ありがとうございます。

    また、貴重なご意見も頂戴し感謝いたします。

    MAGIC「Web Client」ももっと簡単にオーバーレイの振る舞いを変更できると

    良いのですが、現状は竹本さんからお伝え頂いている方法になります。

    Web ClientはAngularに準拠(継承)する形でアーキテクチャが設計されています。

    そしてAngular自体がオブジェクト指向の設計思想が強いので、その結果、

    Web Clientもオブジェクト指向でデザインされている部分が多くございます。

    例えば、オーバーレイに関しても、Angularのオーバーレイを継承する形で、

    Magic(Web Client)用のオーバーレイのクラス(コンポーネント)が

    用意されています。

    BaseMagicOverlayContainerクラスがWeb Client用のオーバーレイ用のクラスとして
    用意されています。
     
    その結果、オーバーレイを拡張「カスタムオーバーレイと呼んでいます」する場合は
    このBaseMagicOverlayContainerクラスを継承します。
    継承する場合には、TSファイルの中のクラス定義のときに、
    親クラス(BaseMagicOverlayContainer)を継承(extends)するという意味で
    以下のような定義になります。
    export class クラス名 extends BaseMagicOverlayContainer
     
    そして、拡張したコンポーネント(カスタムオーバーレイ)を作成した後に、
    依存性の注入 【DI】 Dependency Injectionというデザインパターンの仕組みで
    実行する振る舞い(コンポーネント)を差し替えます。
    この依存性の注入の仕組みで、拡張したカスタムオーバーレイのコンポーネント
    が呼ばれるように変更します。
    竹本さんのご説明のとおり、app.module.tsファイルに捻じ曲げる定義を加えることで
    拡張したカスタムオーバーレイが実行されるようになります。
     
    また現在、Web Client基礎トレーニングコースの中でも「カスタムオーバーレイ」
    を取り扱っている章がございますので、こちらもご検討いただけますと幸いです。
     
    説明が長くなりましたが、少しはご参考になりましたでしょうか。
     
     

サインインしてコメントを残してください。