Hongmeng分散型クロスデバイスファイルサービスレター管理に基づく

[[431770]]

詳細については、以下をご覧ください。

51CTOとHuaweiが共同で構築したHongmengテクノロジーコミュニティ

https://harmonyos..com

I. はじめに

まず、このクロスデバイス ファイル サービス レター管理アプリケーションを作成する前に、何をしようと考えていたかについてお話しします。まず、分散ファイル サービスに基づく Liang Didi のテキスト エディターを読み、Word、Excel、PDF ファイルの作成などのドキュメントを作成し、クリックして WPS ソフトウェアを開いて編集したいと考えました。残念ながら、インターネットで検索しても WPS を開く方法が見つからなかったので、結局諦めました。そこで、お絵かきボードを作って、そこに表現したいものを描いて、それを絵として保存し、その絵を開いてさまざまなデバイスで閲覧できるようにしようと思いました。最初は、画像を保存し、スクリーンショット方式を使用してドキュメントを表示したいと考えていました。 Java でシステムを呼び出すためのスクリーンショット メソッドが見つかりませんでした。 JSも見ましたが、API7でしかサポートされていなかったので結局諦めました。しかし、頭の中でひらめきが起こり、勉強していた頃は自習授業で大声で話す必要はなかったことを思い出しました。多くのクラスメートがメモを渡し合った。当時は手紙を書くことも流行っていたので、このアイデアでコーディングを始めました。テキストボックスに入力した内容を便箋に書き写し、画像として保存する方法など、これまで書いていなかった知識ポイントがいくつかあります。別のデバイスで画像をクリックすると、その中のコンテンツが表示されます。オンライン検索を通じて、同様の知識ポイントが見つかったので、今日このクロスデバイス ファイル表示アプリケーションを作成できます。

まず最初に、このクロスデバイスレター管理アプリケーションについて簡単に説明します。電話Aは文字を作成し、画像を生成します。ローカル エンドは電話機 A に表示され、リモート エンドは電話機 B に表示されます。同時に、電話機 A と B の両方でレターの内容を開いて表示できます。ここでは分散データベース管理が使用されます。リスト表示を容易にするために、画像名はリストに保存されます。次に、対応する画像をクリックして画像名を取得し、分散ファイルパスから画像を取得して表示します。

2. 達成効果

開発ツール環境でのビデオ: https://www.bilibili.com/video/BV16L4y1i7b1/

携帯電話+携帯電話環境でのビデオ：https://www.bilibili.com/video/BV1mL411g72B/

3. プロジェクトを作成する

DevEco-Studio 開発ツールの最新バージョンがインストールされていると仮定し、[ファイル] -> [新規] -> [新しいプロジェクト] をクリックします。[HarmonyOS プロジェクトの作成] ウィンドウがポップアップ表示されます。ここでは、空の Java テンプレートを選択して作成します。前のビデオ再生の例は JS で記述されたインターフェイスであり、このクロスデバイス文字管理インターフェイスは Java で記述されています。JS の方がインターフェイスの記述が速く、デバッグも高速です。

Java モジュール レイアウト モジュール

4. メインインターフェースの開発

まず、パブリック クラスの Java コードを紹介します。これらのパブリック クラスを使用すると、パブリック クラス ファイルを直接コピーし、将来同様の機能を備えたアプリケーションを作成するときに使用できます。

DistributedFileUtil 分散ファイル ツール クラス:

パッケージ com.army.study.util; 
 
 com.army.study.ResourceTable をインポートします。
 ohos.agp.render.Canvas をインポートします。
 ohos.agp.render.Paint をインポートします。
 ohos.agp.render.Texture をインポートします。
 ohos.agp.utils.Color をインポートします。
 ohos.app.Context をインポートします。
 ohos をインポートします。グローバル.resource.NotExistException;
 ohos.media.image.ImagePacker をインポートします。
 ohos.media.image.ImageSource をインポートします。
 ohos.media.image.PixelMap をインポートします。
 ohos.media.image.common.Sizeをインポートします。 
 
 java.io.* をインポートします。
 java.util.ArrayList をインポートします。
 java.util.Arrays をインポートします。
 java.util.List をインポートします。 
 
 /**
 * 分散ファイルツール
 */
パブリッククラスDistributedFileUtil {
    // コンテクスト
    プライベート最終コンテキスト mContext; 
 
    /**
     * 施工方法
     * @param コンテキスト
     */
パブリックDistributedFileUtil(コンテキストコンテキスト) {
        this.mContext = コンテキスト;
    } 
 
    /**
     * 手紙を書く
     * @param ファイル名
     * @param 文字コンテンツ
     * @戻る 
     */
パブリックPixelMap writeLetter(文字列ファイル名、文字列文字コンテンツ) {
        // 分散ファイルパスを取得する
        文字列 filePath = mContext.getDistributedDir() + File.separator + fileName + ".jpg" ;
        テクスチャ テクスチャ = null ;
        試す {
            // リソースファイルから文房具の背景画像を取得します
            入力ストリーム inputStream = mContext.getResourceManager().getResource(ResourceTable.Media_bg);
            ImageSource.SourceOptions srcOpts = 新しい ImageSource.SourceOptions();
            srcOpts.formatHint = "image/jpeg" ;
            ImageSource imageSource = ImageSource. （入力ストリーム、srcOpts）を作成します。
            // 画像のパラメータを設定する
            ImageSource.DecodingOptions デコーディングオプション = new ImageSource.DecodingOptions();
            デコードオプション.desiredSize=新しいサイズ(720,1080);
            ピクセルマップpixelMap = imageSource.createPixelmap(デコーディングオプション);
            //描画結果を保存するために使用される
            テクスチャ=新しいテクスチャ(ピクセルマップ);
            キャンバス canvas=新しいキャンバス(テクスチャ);
            ペイント paint = new Paint();
            ペイント.setTextSize(50);
            ペイントのストローク幅を設定します。
            ペイントの色を黒に設定します。
            // 便箋に内容を書きます
            キャンバスに文字を描画します。
            // ファイル出力ストリーム
            FileOutputStream fos = 新しい FileOutputStream(filePath); 
 
            ImagePacker imagePacker = ImagePacker.create ();
            ImagePacker.PackingOptions パッキングオプション = 新しい ImagePacker.PackingOptions();
            梱包オプション.format = "image/jpeg" ; //image/jpegのみサポート
            梱包オプション.品質 = 90;
            ブール結果 = imagePacker.initializePacking(fos, packedOptions);
            if(結果)
            {
                //ここでペイントした後、ピクセルマップを取得して保存します
                結果 = imagePacker.addImage(texture.getPixelMap());
                if (結果) {
                    長いデータサイズ = imagePacker.finalizePacking();
                    System.out.println ( "ファイルサイズ: " +dataSize) ;
                    ToastUtil.getInstance().showToast(mContext, "正常に作成されました!" );
                }
            } 
 
            fos.flush();
            fos.close ();
        } キャッチ (IOException | NotExistException e) {
            システム。 out .println( "ファイルの保存中にエラーが発生しました: " + e.getMessage());
            e.printStackTrace();
        } 
         
 texture.getPixelMap()を返します。
    } 
 
    /**
     * 手紙を読む
     * @param ファイル名
     * @param 文字コンテンツ
     * @戻る 
     */
パブリックPixelMap readImage(文字列ファイル名、文字列文字コンテンツ) {
        // 分散ファイルパスを取得する
        文字列 filePath = mContext.getDistributedDir() + File.separator + fileName;
        // 分散ファイルパスに基づいてファイルを生成する
        ファイル file = new File(filePath);
        ファイルが存在する場合（）{
            // ファイルが存在しない場合はwriteを呼び出します
            writeLetter(ファイル名、文字の内容);
        }
        // 画像パラメータ
        ImageSource.SourceOptions srcOpts = 新しい ImageSource.SourceOptions();
        srcOpts.formatHint = "image/jpeg" ;
        // 画像ソースを作成する
        ImageSource imageSource = ImageSource.作成(ファイル、srcOpts);
        // 画像を生成する
        ピクセルマップpixelMap = imageSource.createPixelmap( null ); 
 
ピクセルマップを返します。
    } 
 
    /**
     * ファイルのリストを取得する
     * @戻る 
     */
パブリックリスト<文字列> getFileList() {
        // 配布されたファイルリストを取得する
        ファイル[] files = mContext.getDistributedDir().listFiles();
        リスト<File> listFile = 新しい ArrayList<>(Arrays.asList(files));
        // ファイルを順番に並べ替える
        listFile.sort((ファイル, newFile) -> {
            (file.lastModified() > newFile.lastModified()) の場合 {
 -1 を返します。
            }そうでない場合 (file.lastModified() == newFile.lastModified()) {
 0を返します。
            }それ以外{
 1 を返します。
            }
        });
        リスト<文字列> listFileName = 新しいArrayList<>();
        // ファイルリストのファイル名を取得する
for (ファイル f : listFile) {
            if (f.isFile()) {
                文字列名= f.getName();
                リストファイル名。 (名前)を追加します。
            }
        }
 listFileNameを返します。
    }
 }

ToastUtil プロンプト メッセージ ボックス:

パッケージ com.army.study.util; 
 
 
 com.army.study.ResourceTable をインポートします。
 ohos.agp.components.Component をインポートします。
 ohos.agp.components.LayoutScatter をインポートします。
 ohos.agp.components.Text をインポートします。
 ohos.agp.window.dialog.ToastDialog をインポートします。
 ohos.app.Context をインポートします。 
 
 /**
 * トーストツール
 *
 */
パブリッククラスToastUtil {
    プライベート ToastDialog toastDialog; 
 
    プライベートToastUtil() {
    } 
 
公共 静的ToastUtil getInstance() {
 ToastUtilInstance.INSTANCEを返します。
    } 
 
    プライベート静的クラス ToastUtilInstance {
        プライベート静的最終 ToastUtil INSTANCE = new ToastUtil();
    } 
 
    /**
     * トーストを表示
     *
     * @param コンテキスト
     * @param コンテンツ
     */
パブリックvoid showToast(コンテキスト コンテキスト、文字列コンテンツ) {
        toastDialog がnullの場合、 toastDialog.isShowing() は次のように記述します。
            トーストダイアログをキャンセルします。
        } 
 
        コンポーネント toastLayout = LayoutScatter.getInstance(context)
                .parse(ResourceTable.Layout_layout_toast, null 、 false );
        テキスト toastText = (テキスト) toastLayout.findComponentById(ResourceTable.Id_text_msg_toast);
        toastText.setText(コンテンツ);
        toastDialog = 新しい ToastDialog(コンテキスト);
        toastDialog.setComponent(toastLayout);
        pastDialog.setTransparent( true );
        トーストダイアログを表示します。
    }
 }

手紙の内容をプレビューします:

 /**
 * 手紙の内容をプレビューする
 */
パブリッククラスPreviewLetterDialogはCommonDialogを拡張します{ 
 
パブリックプレビューレターダイアログ(コンテキストコンテキスト、ピクセルマップ画像ID) {
        super(コンテキスト);
        コンポーネント コンテナー = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_dialog_previce_letter, null , false );
        コンテナにカスタムコンポーネントを設定します。
        MATCH_PARENT と MATCH_CONTENT のサイズを設定します。 
 
        SetCornerRadius(AttrHelper.vp2px(20, コンテキスト)); 
 
        画像 image = (画像) container.findComponentById(ResourceTable.Id_preview);
        イメージIDをピクセルマップに設定します。 
 
 
        ボタン btnCancel = (Button) container.findComponentById(ResourceTable.Id_button_dialog_create_file_cancel);
        ボタン btnConfirm = (Button) container.findComponentById(ResourceTable.Id_button_dialog_create_file_confirm); 
 
        btnCancel.setClickedListener(コンポーネント -> { destroy();});
        btnConfirm.setClickedListener(コンポーネント -> { destroy();});
    } 
 
 }

手紙を書くダイアログボックス:

 /**
 * 手紙を書くダイアログ
 */
パブリッククラスCreateLetterDialogはCommonDialogを拡張します{
    プライベートOnCallBack onCallBack; 
 
パブリックCreateLetterDialog(コンテキストコンテキスト) {
        super(コンテキスト);
        コンポーネント コンテナー = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_dialog_write_letter, null , false );
        コンテナにカスタムコンポーネントを設定します。 
 
        オプション<Display> display = DisplayManager.getInstance().getDefaultDisplay(context);
 int幅 = ( int ) (display.get().getAttributes().width * 0.9);
 int高さ = AttrHelper.vp2px(270, コンテキスト);
        setSize(幅、高さ);
        SetCornerRadius(AttrHelper.vp2px(20, コンテキスト)); 
 
        テキストフィールド letterContent = (テキストフィールド) container.findComponentById(ResourceTable.Id_tf_dialog_create_file_name);
        ボタン btnCancel = (Button) container.findComponentById(ResourceTable.Id_button_dialog_create_file_cancel);
        ボタン btnConfirm = (Button) container.findComponentById(ResourceTable.Id_button_dialog_create_file_confirm);
        btnConfirm.setEnabled( false );
        btnConfirm.setAlpha(0.5f);
        letterContent.addTextObserver((テキスト、i、i1、i2) -> {
            テキストが空の場合
                btnConfirm.setEnabled( false );
                btnConfirm.setAlpha(0.5f);
            }それ以外{
                btnConfirm.setEnabled( true );
                btnConfirm.setAlpha(1f);
            }
        }); 
 
        btnCancel.setClickedListener(コンポーネント -> { destroy();}); 
 
        btnConfirm.setClickedListener(コンポーネント -> {
            onCallBack! = nullの場合{
                // デバイスID
                文字列デバイスID = KvManagerFactory.getInstance().createKvManager(新しいKvManagerConfig(コンテキスト))
                        .getLocalDeviceInfo().getId();
                // ファイル名を結合して、現在のデバイスによって作成されたファイルかどうかを区別します
                文字列名= deviceID + "-" + letterContent.getText();
                onCallBack.onConfirm(名前);
            }
            破壊する（）;
        });
    } 
 
パブリックvoid setOnCallBack(OnCallBack onCallBack) {
        onCallBack メソッドは、次のコードで呼び出されます。
    } 
 
パブリックインターフェースOnCallBack{
        void onConfirm(文字列名);
    }
 }

メインインターフェースコード図:

それだけです。 config.json ファイルで権限を設定することを忘れないでください。モジュールの下に追加します。

 「必要な権限」 : [
    {
 「名前」 : 「ohos.permission.DISTRIBUTED_DATASYNC」  
    },
    {
 「名前」 : 「ohos.permission.GET_DISTRIBUTED_DEVICE_INFO」  
    },
    {
 「名前」 : 「ohos.permission.DISTRIBUTED_DEVICE_STATE_CHANGE」  
    },
    {
 「名前」 : 「ohos.permission.WRITE_MEDIA」  
    },
    {
 「名前」 : 「ohos.permission.READ_MEDIA」  
    }
  ]、

詳細については、以下をご覧ください。

51CTOとHuaweiが共同で構築したHongmengテクノロジーコミュニティ

https://harmonyos..com