جعبه ویرایش سفارشی HarmonyOS و Sandbox مشترک: پیاده‌سازی روش ورودی شخصی‌سازی شده تعاملی و جعبه ویرایش

Summarize this content to 400 words in Persian Lang

هدف این مقاله بررسی عمیق جزئیات فنی جعبه‌های ویرایش سفارشی و جعبه‌های sandbox مشترک در اشتراک‌گذاری داده‌های متقابل است و بر اساس شیوه‌های توسعه واقعی خلاصه می‌شود. به طور عمده به عنوان یک حامل برای اشتراک گذاری و تبادل فنی عمل می کند، ممکن است خطاها و حذفیات وجود داشته باشد. همکاران می توانند نظرات و سوالات ارزشمندی را برای پیشرفت مشترک مطرح کنند. این مقاله محتوای اصلی است. هر نوع تجدید چاپ باید منبع و نویسنده اصلی را ذکر کند.

در توسعه برنامه های کاربردی مدرن، تقاضای کاربران برای تجربیات شخصی سازی شده در حال افزایش است. برای روش‌های ورودی و جعبه‌های ویرایش، دستیابی به تعامل مؤثر بین این دو و ماندگاری و اشتراک‌گذاری داده‌ها می‌تواند تجربه کاربر را تا حد زیادی افزایش دهد. این مقاله به طور مفصل نحوه ساخت یک برنامه جعبه ویرایش قابل تنظیم در سیستم Huawei HarmonyOS Next (API 12) را معرفی می‌کند و آن را قادر می‌سازد تا به تعامل داده با برنامه روش ورودی از طریق یک سندباکس مشترک، از جمله جنبه‌هایی مانند تجزیه و تحلیل نیازمندی‌ها، طراحی معماری دست یابد. ، پیاده سازی فناوری کلیدی، سازگاری داده ها و مدیریت خطا.

I. تجزیه و تحلیل نیازمندی ها و طراحی کلی معماری

(I) الزامات جعبه را ویرایش کنید

کاربران انتظار دارند که جعبه ویرایش دارای عملکردهای عملیاتی اولیه مانند ورودی سفارشی، حذف و کنترل مکان نما باشد. در عین حال، باید بتواند با توجه به عادات شخصی مانند اندازه و رنگ فونت، شخصی سازی شود. این تنظیمات شخصی‌شده باید بتوانند در سناریوهای برنامه‌های مختلف تداوم داشته باشند و ثابت بمانند.

(II) نقش Sandbox مشترک

سندباکس مشترک در این مورد نقش مهمی ایفا می کند. به عنوان یک لایه میانی برای ذخیره و به اشتراک گذاری داده ها، از آن برای ذخیره مداوم داده های تنظیمات شخصی شده کاربر، مانند پیکربندی سبک جعبه ویرایش و رکوردهای ورودی تاریخی استفاده می شود. از طریق سندباکس مشترک، برنامه روش ورودی و برنامه جعبه ویرایش می‌توانند به اشتراک‌گذاری داده‌های متقابل برنامه‌ای دست یابند تا اطمینان حاصل شود که کاربران می‌توانند در هنگام استفاده از روش ورودی در برنامه‌های مختلف، یک تجربه شخصی‌سازی شده ثابت به دست آورند.

(III) طراحی کلی معماری

ما یک معماری سه لایه طراحی کردیم که شامل لایه برنامه ویرایش جعبه، لایه sandbox اشتراکی و لایه کاربردی روش ورودی است. لایه برنامه ویرایش جعبه مسئول ارائه رابط کاربری، دریافت ورودی کاربر، و تعامل با جعبه ماسه‌ای مشترک برای به دست آوردن و ذخیره تنظیمات شخصی‌شده است. لایه sandbox به اشتراک گذاشته شده مسئول مدیریت ذخیره سازی و اشتراک گذاری داده ها و ارائه یک رابط دسترسی به داده یکپارچه است. هنگامی که کاربران ورودی را وارد می کنند، لایه برنامه کاربردی روش ورودی با برنامه جعبه ویرایش ارتباط برقرار می کند، تنظیمات شخصی را به دست می آورد و آنها را در فرآیند ورودی اعمال می کند، و در عین حال داده های مربوطه (مانند سابقه ورودی) را در جعبه ایمنی مشترک ذخیره می کند.

II. طراحی تعامل بین جعبه ویرایش و روش ورودی

(I) اجرای نظارت بر عملیات ورودی و حذف در جعبه ویرایش سفارشی

در توسعه جعبه های ویرایش سفارشی، ما از Text جزء به عنوان مولفه نمایش متن و مدیریت محتوای متن از طریق متغیرهای حالت. در عین حال، برای اجرای نظارت بر عملیات ورودی و حذف، باید یک نمونه از InputMethodController. کد زیر یک مثال ساده است:

import { inputMethod } from ‘@kit.IMEKit’;

@Component
export struct CustomInput {
@State inputText: string = “”;
private isAttach: boolean = false;
private inputController: inputMethod.InputMethodController = inputMethod.getController();

build() {
Text(this.inputText)
.fontSize(16)
.width(‘100%’)
.lineHeight(40)
.id(‘customInput’)
.onBlur(() => {
this.off();
})
.height(45)
.border({ color: ‘#554455’, radius: 30, width: 1 })
.maxLines(1)
.onClick(() => {
this.attachAndListener();
});
}

async attachAndListener() {
focusControl.requestFocus(‘CustomInput’);
await this.inputController.attach(true, {
inputAttribute: {
textInputType: inputMethod.TextInputType.TEXT,
enterKeyType: inputMethod.EnterKeyType.SEARCH
}
});
if (!this.isAttach) {
this.inputController.on(‘insertText’, (text) => {
this.inputText += text;
});
this.inputController.on(‘deleteLeft’, (length) => {
this.inputText = this.inputText.substring(0, this.inputText.length – length);
});
this.isAttach = true;
}
}

off() {
this.isAttach = false;
this.inputController.off(‘insertText’);
this.inputController.off(‘deleteLeft’);
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

(II) با استفاده از InputMethodController برای اتصال روش ورودی و پاسخ به ورودی در زمان واقعی

با تماس با attach روش از InputMethodController، می توانیم روش ورودی را به کادر ویرایش متصل کنیم. پس از موفقیت آمیز بودن صحافی، کادر ویرایش می تواند به عملیات ورودی روش ورودی به صورت بلادرنگ پاسخ دهد و محتوای نمایش را به روز کند. در عین حال می‌توانیم ویژگی‌های مربوط به روش ورودی مانند نوع ورودی و نوع کلید را نیز در صورت نیاز تنظیم کنیم.

III. به اشتراک گذاری داده ها و طراحی پایدار Sandbox مشترک

(I) پیکربندی data-group-ids برای اطمینان از اینکه برنامه روش ورودی و جعبه ویرایش Sandbox را به اشتراک می گذارند

پیکربندی کنید data-group-ids در برنامه profile فایل و تنظیمات مربوطه را در module.json5 فایل کجا InputMethodExtensionAbility برای دستیابی به تنظیمات مجوز دسترسی برای جعبه ایمنی مشترک برای برنامه روش ورودی و برنامه جعبه ویرایش قرار دارد. در زیر یک مثال پیکربندی ساده است (با فرض data-group-ids است “myDataGroup”):

در profile فایل:

{
“app”: {
“data-group-ids”: [“myDataGroup”] }
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در module.json5 فایل:

{
“module”: {
“extensionAbilities”: [
{
“description”: “InputMethodExtDemo”,
“icon”: “Smedia:icon”,
“name”: “InputMethodExtAbility”,
“srcEntry”: “./ets/InputMethodExtensionAbility/InputMethodService.ts”,
“type”: “inputMethod”,
“exported”: true,
“metadata”: [
{
“name”: “ohos.extension.input_method”,
“resource”: “Sprofile:input_method_config”
}
],
“dataGroupIds”: [“myDataGroup”] }
] }
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

(II) با استفاده از getGroupDir برای دستیابی به پایداری داده و اجازه دادن به جعبه ویرایش و روش ورودی برای اشتراک‌گذاری تنظیمات و سابقه

در اپلیکیشن جعبه ویرایش و اپلیکیشن روش ورودی، می توانیم از getGroupDir روشی برای به دست آوردن مسیر سندباکس مشترک، و سپس پیاده سازی ذخیره سازی و خواندن مداوم داده ها از طریق عملیات فایل. برای مثال، می‌توانیم تنظیمات شخصی‌شده کادر ویرایش (مانند اندازه فونت، رنگ و غیره) را به‌عنوان یک فایل پیکربندی ذخیره کنیم و زمانی که برنامه شروع به بازیابی تنظیمات شخصی‌سازی کرد، این فایل را بخوانیم. مثال زیر یک مثال ساده از ماندگاری داده است:

ذخیره تنظیمات در برنامه جعبه ویرایش:

import { inputMethod } from ‘@kit.IMEKit’;

// Obtain the path of the shared sandbox
let groupDir = inputMethod.getGroupDir(‘myDataGroup’);
let configPath = `${groupDir}/editor_config.json`;

// Save edit box settings
function saveEditorSettings(settings: any) {
try {
fs.writeFileSync(configPath, JSON.stringify(settings));
} catch (error) {
console.error(‘Failed to save settings:’, error);
}
}

// Read edit box settings
function loadEditorSettings(): any {
try {
let data = fs.readFileSync(configPath);
return JSON.parse(data);
} catch (error) {
console.error(‘Failed to read settings:’, error);
return {};
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ذخیره تاریخچه ورودی در برنامه روش ورودی:

import { inputMethod } from ‘@kit.IMEKit’;

// Obtain the path of the shared sandbox
let groupDir = inputMethod.getGroupDir(‘myDataGroup’);
let historyPath = `${groupDir}/input_history.json`;

// Save input history
function saveInputHistory(history: string[]) {
try {
fs.writeFileSync(historyPath, JSON.stringify(history));
} catch (error) {
console.error(‘Failed to save input history:’, error);
}
}

// Read input history
function loadInputHistory(): string[] {
try {
let data = fs.readFileSync(historyPath);
return JSON.parse(data);
} catch (error) {
console.error(‘Failed to read input history:’, error);
return [];
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

IV. سازگاری داده های بین فرآیندی و مدیریت خطا

(I) رسیدگی به تضادها و مسائل همگام سازی در انتقال داده های بین فرآیندی

در فرآیند به اشتراک گذاری داده های متقابل، ممکن است شرایطی وجود داشته باشد که چندین فرآیند به طور همزمان به داده های مشترک دسترسی پیدا کرده و آنها را اصلاح می کنند که منجر به تضاد داده ها می شود. برای حل این مشکل می توانیم از روش هایی مانند مکانیسم های قفل یا صف پیام برای دستیابی به دسترسی همزمان به داده ها استفاده کنیم. به عنوان مثال، هنگام نوشتن روی داده های مشترک، ابتدا یک قفل بگیرید تا مطمئن شوید که تنها یک فرآیند می تواند همزمان عملیات نوشتن را انجام دهد.

(II) رسیدگی به خطا: استثناهای خواندن و نوشتن فایل و مشکلات مجوز داده مشترک

در طول فرآیند ماندگاری داده، ممکن است استثناهای خواندن و نوشتن فایل وجود داشته باشد، مانند فایل پیدا نشد، فضای دیسک کافی، و غیره. در عین حال، برای مسائل مربوط به مجوز داده مشترک، مانند زمانی که برنامه مجوز کافی برای دسترسی به جعبه ایمنی مشترک را ندارد، مدیریت خطای مربوطه نیز برای اطمینان از ثبات و امنیت برنامه مورد نیاز است.

V. نمونه کد و نمودار معماری

(I) کد نمونه

در زیر نمونه‌ای از ساختار کد برای خواندن و نوشتن داده‌های ساده شده جعبه‌های ویرایش سفارشی و جعبه‌های ایمنی مشترک است:

// Custom edit box component in the edit box application
import { inputMethod } from ‘@kit.IMEKit’;
import fs from ‘@ohos.file.fs’;

@Component
export struct CustomInput {
//… Omitted part of the code

// Save edit box settings
saveSettings() {
let settings = { fontSize: 16, color: ‘#000’ }; // Assume saving font size and color here
saveEditorSettings(settings);
}

// Load edit box settings
loadSettings() {
let settings = loadEditorSettings();
if (settings.fontSize) {
// Update the style of the edit box such as font size
}
}
}

// Shared sandbox data reading and writing functions
function saveEditorSettings(settings: any) {
let groupDir = inputMethod.getGroupDir(‘myDataGroup’);
let configPath = `${groupDir}/editor_config.json`;
try {
fs.writeFileSync(configPath, JSON.stringify(settings));
} catch (error) {
console.error(‘Failed to save settings:’, error);
}
}

function loadEditorSettings(): any {
let groupDir = inputMethod.getGroupDir(‘myDataGroup’);
let configPath = `${groupDir}/editor_config.json`;
try {
let data = fs.readFileSync(configPath);
return JSON.parse(data);
} catch (error) {
console.error(‘Failed to read settings:’, error);
return {};
}
}

// Saving input history in the input method application
function saveInputHistory(history: string[]) {
let groupDir = inputMethod.getGroupDir(‘myDataGroup’);
let historyPath = `${groupDir}/input_history.json`;
try {
fs.writeFileSync(historyPath, JSON.stringify(history));
} catch (error) {
console.error(‘Failed to save input history:’, error);
}
}

function loadInputHistory(): string[] {
let groupDir = inputMethod.getGroupDir(‘myDataGroup’);
let historyPath = `${groupDir}/input_history.json`;
try {
let data = fs.readFileSync(historyPath);
return JSON.parse(data);
} catch (error) {
console.error(‘Failed to read input history:’, error);
return [];
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

(II) نمودار معماری

شکل زیر یک نمودار شماتیک از معماری تعامل داده های متقابل برنامه است:

لایه کاربردی
شرح عملکرد

برنامه ویرایش جعبه
رابط کاربری را فراهم می کند، ورودی کاربر را دریافت می کند، با جعبه ایمنی مشترک تعامل می کند تا تنظیمات شخصی شده را به دست آورد و ذخیره کند، و با روش ورودی از طریق ارتباط برقرار می کند. InputMethodController.

جعبه شنی مشترک
تنظیمات و داده‌های شخصی‌شده کاربر را ذخیره می‌کند، رابط‌های دسترسی به داده‌ها را فراهم می‌کند، و به اشتراک‌گذاری داده‌های بین برنامه‌ای را متوجه می‌شود.

کاربرد روش ورودی
با برنامه ویرایش جعبه تعامل می کند، تنظیمات شخصی را به دست می آورد و آنها را در فرآیند ورودی اعمال می کند، و داده هایی مانند تاریخچه ورودی را در جعبه ایمنی مشترک ذخیره می کند.

از طریق طراحی و پیاده‌سازی فوق، ما با موفقیت سیستمی ساخته‌ایم که از تعامل داده‌ها بین جعبه‌های ویرایش سفارشی و برنامه‌های کاربردی روش ورودی پشتیبانی می‌کند و از جعبه‌های ایمنی مشترک برای دستیابی به اشتراک‌گذاری و تداوم داده‌های بین برنامه‌ای استفاده می‌کند. در توسعه واقعی، عملکرد را می توان بیشتر بهینه کرد، گزینه های تنظیمات شخصی تر را می توان اضافه کرد، و مکانیسم رسیدگی به خطا را می توان بهبود بخشید. امیدوارم این مقاله بتواند منابع و راهنمایی های ارزشمندی را برای سناریوهای مربوط به تعامل جعبه ویرایش و روش ورودی و به اشتراک گذاری داده در توسعه برنامه HarmonyOS ارائه دهد.

import { inputMethod } from '@kit.IMEKit';

@Component
export struct CustomInput {
  @State inputText: string = "";
  private isAttach: boolean = false;
  private inputController: inputMethod.InputMethodController = inputMethod.getController();

  build() {
    Text(this.inputText)
   .fontSize(16)
   .width('100%')
   .lineHeight(40)
   .id('customInput')
   .onBlur(() => {
        this.off();
      })
   .height(45)
   .border({ color: '#554455', radius: 30, width: 1 })
   .maxLines(1)
   .onClick(() => {
        this.attachAndListener();
      });
  }

  async attachAndListener() {
    focusControl.requestFocus('CustomInput');
    await this.inputController.attach(true, {
      inputAttribute: {
        textInputType: inputMethod.TextInputType.TEXT,
        enterKeyType: inputMethod.EnterKeyType.SEARCH
      }
    });
    if (!this.isAttach) {
      this.inputController.on('insertText', (text) => {
        this.inputText += text;
      });
      this.inputController.on('deleteLeft', (length) => {
        this.inputText = this.inputText.substring(0, this.inputText.length - length);
      });
      this.isAttach = true;
    }
  }

  off() {
    this.isAttach = false;
    this.inputController.off('insertText');
    this.inputController.off('deleteLeft');
  }
}

{
  "app": {
    "data-group-ids": ["myDataGroup"]
  }
}

{
  "module": {
    "extensionAbilities": [
      {
        "description": "InputMethodExtDemo",
        "icon": "Smedia:icon",
        "name": "InputMethodExtAbility",
        "srcEntry": "./ets/InputMethodExtensionAbility/InputMethodService.ts",
        "type": "inputMethod",
        "exported": true,
        "metadata": [
          {
            "name": "ohos.extension.input_method",
            "resource": "Sprofile:input_method_config"
          }
        ],
        "dataGroupIds": ["myDataGroup"]
      }
    ]
  }
}

import { inputMethod } from '@kit.IMEKit';

// Obtain the path of the shared sandbox
let groupDir = inputMethod.getGroupDir('myDataGroup');
let configPath = `${groupDir}/editor_config.json`;

// Save edit box settings
function saveEditorSettings(settings: any) {
  try {
    fs.writeFileSync(configPath, JSON.stringify(settings));
  } catch (error) {
    console.error('Failed to save settings:', error);
  }
}

// Read edit box settings
function loadEditorSettings(): any {
  try {
    let data = fs.readFileSync(configPath);
    return JSON.parse(data);
  } catch (error) {
    console.error('Failed to read settings:', error);
    return {};
  }
}

import { inputMethod } from '@kit.IMEKit';

// Obtain the path of the shared sandbox
let groupDir = inputMethod.getGroupDir('myDataGroup');
let historyPath = `${groupDir}/input_history.json`;

// Save input history
function saveInputHistory(history: string[]) {
  try {
    fs.writeFileSync(historyPath, JSON.stringify(history));
  } catch (error) {
    console.error('Failed to save input history:', error);
  }
}

// Read input history
function loadInputHistory(): string[] {
  try {
    let data = fs.readFileSync(historyPath);
    return JSON.parse(data);
  } catch (error) {
    console.error('Failed to read input history:', error);
    return [];
  }
}

// Custom edit box component in the edit box application
import { inputMethod } from '@kit.IMEKit';
import fs from '@ohos.file.fs';

@Component
export struct CustomInput {
  //... Omitted part of the code

  // Save edit box settings
  saveSettings() {
    let settings = { fontSize: 16, color: '#000' }; // Assume saving font size and color here
    saveEditorSettings(settings);
  }

  // Load edit box settings
  loadSettings() {
    let settings = loadEditorSettings();
    if (settings.fontSize) {
      // Update the style of the edit box such as font size
    }
  }
}

// Shared sandbox data reading and writing functions
function saveEditorSettings(settings: any) {
  let groupDir = inputMethod.getGroupDir('myDataGroup');
  let configPath = `${groupDir}/editor_config.json`;
  try {
    fs.writeFileSync(configPath, JSON.stringify(settings));
  } catch (error) {
    console.error('Failed to save settings:', error);
  }
}

function loadEditorSettings(): any {
  let groupDir = inputMethod.getGroupDir('myDataGroup');
  let configPath = `${groupDir}/editor_config.json`;
  try {
    let data = fs.readFileSync(configPath);
    return JSON.parse(data);
  } catch (error) {
    console.error('Failed to read settings:', error);
    return {};
  }
}

// Saving input history in the input method application
function saveInputHistory(history: string[]) {
  let groupDir = inputMethod.getGroupDir('myDataGroup');
  let historyPath = `${groupDir}/input_history.json`;
  try {
    fs.writeFileSync(historyPath, JSON.stringify(history));
  } catch (error) {
    console.error('Failed to save input history:', error);
  }
}

function loadInputHistory(): string[] {
  let groupDir = inputMethod.getGroupDir('myDataGroup');
  let historyPath = `${groupDir}/input_history.json`;
  try {
    let data = fs.readFileSync(historyPath);
    return JSON.parse(data);
  } catch (error) {
    console.error('Failed to read input history:', error);
    return [];
  }
}