Get best of the week

كيفية تكوين صداقات Electron و Webix

المقدمة


الوقت المناسب من اليوم! أود أن أشارككم تجربتي الشخصية في إنشاء تطبيق JavaScript لسطح المكتب باستخدام مزيج من Electron و Webix. تسمح لك هذه الحزمة بتسريع عملية تخطيط الواجهة ، خاصة دون إضاعة الوقت في التخطيط وأشياء الويب الأخرى التي يمكن أن يقوم بها إطار عمل Webix.

أدوات


فلنبدأ ، سنحتاج إلى الأدوات التالية:

  1. محرر سنكتب فيه كودنا مباشرة. سأستخدم كود الاستوديو المرئي (VSC) ، والذي يمكن أخذه من هنا ؛
  2. خادم Node.js ، والذي يمكن أخذه من هنا . تنزيله وتثبيته ؛
  3. إن إطار Webix Framework هو نسخة مجانية (Webix Standard هي مكتبة واجهة مستخدم مجانية بموجب ترخيص GNU GPLv3) ، والتي نأخذها من هنا webix.com/get-webix-gpl . لتنزيله ، تحتاج إلى الانتقال إلى الرابط أعلاه ، وإدخال بريد إلكتروني واسم ولقب ، ووضع ثلاث علامات اختيار ، انقر فوق إرسال ، وبعد ذلك سيتم إرسال رابط تنزيل إلى بريدك.

بشكل عام ، هذا كل ما نحتاجه.

قم بتثبيت الأدوات اللازمة


لذلك ، ننتقل مباشرة إلى الخلق:

1. قم بتثبيت "node.js". لن أتوقف هنا. أنا متأكد من أنه يمكنك القيام بذلك بدوني.

2. قم بإنشاء مجلد سنكتب فيه الكود الخاص بنا - على سبيل المثال electron_webix (الشكل 1).


تين. 1 - إنشاء مجلد عمل

3. قم بتشغيل VSC وافتح هذا المجلد (الشكل 2).


تين. 2 - افتح مجلد العمل

4. افتح محطة VSC باستخدام تركيبة المفاتيح "Ctrl +" وأدخل الأمر "npm init" ، الذي سيبدأ مشروع "node.js" الخاص بنا. وبعد ذلك سيطلب النظام مجموعة من الأسئلة المختلفة والمفيدة للغاية ، والتي لا يلزم الإجابة عليها. ثم نضغط بثقة طوال الوقت على زر "Enter" ولا نفكر في أي شيء سيئ (الشكل 3).


تين. 3 - بدء المشروع

5. تثبيت إلكترون نفسه مباشرة. لماذا ندخل الأمر "npm install - حفظ-إلكترون" في وحدة تحكم VSC ، ثم نجلس وننتظر حتى يتم تثبيت كل شيء (الشكل 4).


تين. 4 - تركيب الكترون

تنظيم مساحة العمل


ننتقل الآن إلى تنظيم مساحة العمل. أول شيء يتعين علينا القيام به هو إنشاء العديد من المجلدات والملفات التي لا يمكننا الاستغناء عنها (الشكل 5):

  • المجلد "libs" ، هنا نضع الملفات التي تم تنزيلها من موقع "Webix" ؛
  • المجلد ".vscode" ، هنا نضع ملف json الذي سيقوم بتشغيل تطبيقنا في VSC ؛
  • ملف "main.js" ، الملف الرئيسي الذي سيقوم بتشغيل تطبيق Electron الخاص بنا ؛
  • سيحتوي ملف "index.html" على المحتوى والترميز ؛
  • ملف "enderer.js "، معالج الأحداث لتطبيقنا. يعمل بالاقتران مع index.html ؛
  • ملف "launch.json" ، في المجلد ".vscode" الملف المطلوب لتشغيل الكود الخاص بنا في بيئة "VSC" باستخدام الزر "F5" ؛
  • ملف "style.css" ، في هذا الملف لا يزال يتعين علينا تسجيل بعض الأنماط بحيث تبدو نافذتنا لائقة.


تين. 5- المجلدات والملفات المطلوبة

املأ مساحة العمل بالمحتوى الأولي


دعنا نبدأ بملء مساحة العمل بملف "launch.json" ، والذي يُستخدم لتشغيل تطبيقنا في بيئة "VSC" بدون أي أوامر إضافية من وحدة التحكم.
تم أخذ محتويات ملف "launch.json" من هنا . هنا لن نتعمق في محتويات هذا الملف ، فقط انسخه واحفظه. يتم عرض محتويات الملف أدناه (الشكل 6).

  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."],
      "outputCapture": "std"
    }
  ]
}


تين. 6 - ملف "launch.json" في بيئة "VSC"

بعد ذلك ، نحتاج إلى تصحيح ملف "package.json" ، الذي تم إنشاؤه تلقائيًا عند تشغيل أمر "npm init". يجب تغييره في سطرين كما هو موضح أدناه (الشكل 7):

كان هناك مثل "package.json":

  "name": "electron_webix",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.2.3"
  }
}

هنا حزمة. json:

{
  "name": "electron_webix",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
   "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.2.3"
  }
}


تين. 7 - ملف “package.json” في بيئة “VSC”

الآن ننتقل لملء ملف “main.js” ، وانسخ محتوياته من هنا . إدراج وحفظ.

const { app, BrowserWindow } = require('electron')

function createWindow () {
  //   .
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')

  //   .
  win.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
//  API       .
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  //       macOS    
  //    ,       Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
   //  MacOS     ,
   //  ,           .
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code.            require.


تين. 8 - ملف "main.js" في بيئة "VSC"

وبعد ذلك يمكننا أخيرًا تنفيذ أول إطلاق لـ "مفتاح F5 " لتطبيقنا . لذا ، اضغط على "F5" وهنا هي نافذتنا (الشكل 9).


تين. 9 - ملف "main.js" في بيئة "VSC"

ما نراه في الشكل. 9؟ هذه هي منطقة عمل تطبيقنا على اليسار ، وأدوات التصحيح على اليمين.

الآن قم بإنشاء الترميز الأولي في ملف index.html. لماذا تفعل ما يلي في "VSC": افتح الملف "index.html" => أدخل "!" => وانقر على "أدخل" => ثم السحر والنتيجة التالية:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

حسنًا ، كما هو الحال في أفضل تقليد لكتابة التعليمات البرمجية بين العلامات "" ، أدخل النص "Hello world !!!"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello world!!!
</body>
</html>

وبعد ذلك نحاول الضغط على "F5" مرة أخرى والتحقق من أن كل شيء يعمل لصالحنا (الشكل 10)


الشكل. 10 - نافذة "Hello world !!!"

نحتاج الآن إلى استخراج محتويات المجلد "codebase" بالكامل من أرشيف webix.zip الذي قمنا بتنزيله ونقله إلى مجلد libs (الشكل 11).

افتح الأرشيف وانتقل إلى مجلد التعليمات البرمجية وأخذ محتوياته ونقله إلى حزمة libs.


تين. 11 - محتويات المجلد "libs"

بعد ملء محتويات المجلد "libs" ، افتح ملف "overer.js "واكتب ما يلي:

//   
const { remote } = require('electron')
//           
let WIN = remote.getCurrentWindow()
//   webix
const webix = require('./libs/webix.min.js')
//  JQuery
$ = require('jquery')
// ,              
webix.ui({
})

بعد ذلك ، سنقوم بضبط واجهتنا. لماذا اذهب هنا designer.webix.com/welcome انقر على زر "البدء السريع" وأعد إلى تنسيق الواجهة. على سبيل المثال ، كما هو موضح في الشكل 12.


الشكل. 12 - تخطيط الواجهة في Webix Web Designer التصميم

الموضح في الشكل 12 بسيط للغاية ويتكون من سحب وإسقاط العنصر المطلوب في مساحة عمل المصمم. الجزء الأيمن من المُنشئ هو تحرير خصائص العناصر. عند اكتمال التخطيط (الشكل 13) ، تحتاج إلى نقله إلى ملف adver.js. لماذا انقر على زر "الرمز" والحصول على تخطيط جاهز في شكل نص. حدد هذا النص ونسخه.


تين. 13 - تحويل التخطيط إلى نص

بعد ذلك ، نفتح ملف "enderer.js "في" VSC "ونلصق النص المنسوخ في وظيفة" webix.ui "المعدة (الشكل 14).

//   
const { remote } = require('electron')
//           
let WIN = remote.getCurrentWindow()
//   webix
const webix = require('./libs/webix.min.js')
//  JQuery
$ = require('jquery')
//               
webix.ui(
    {
        "id": 1587908357897,
        "rows": [
            {
                "css": "webix_dark",
                "view": "toolbar",
                "height": 0,
                "cols": [
                    { "view": "label", "label": "Elcetron +Webix its cool!"},
                    { "label": "-", "view": "button", "height": 38, "width": 40},
                    { "label": "+", "view": "button", "height": 38, "width": 40},
                    { "label": "x", "view": "button", "height": 38, "width": 40}
                ]
            },
            {
                "width": 0,
                "height": 0,
                "cols": [
                    { "url": "demo->5ea58f0e73f4cf00126e3769", "view": "sidebar", "width": 177 },
                    {
                        "width": 0,
                        "height": 0,
                        "rows": [
                            { "template": "Hello WORLD! ", "view": "template" },
                            {
                                "url": "demo->5ea58f0e73f4cf00126e376d",
                                "type": "bar",
                                "xAxis": "#value#",
                                "yAxis": {},
                                "view": "chart"
                            }
                        ]
                    }
                ]
            }
        ]
    }
)


تين. 14 - إضافة تصميم تم إنشاؤه مع المصمم

يعاني أكثر من ذلك بقليل. بعد ذلك ، خذ وافتح في "VSC" ملف index.html الذي تم إعداده مسبقًا وإلحاقه حرفيًا بالسطور الثلاثة التالية :،
وسيأخذ ملف index.html الشكل التالي:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./libs/webix.css">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <script src="./renderer.js"></script>
</body>
</html>

بعد ذلك ، انقر فوق "F5" واحصل على تطبيقنا بالتخطيط من Webix (الشكل 15)


الشكل. 15 - نافذة عمل التطبيق مع تخطيط من Webix

أضف بضع رقائق.


يبدو أن كل شيء يعمل. لكني أرغب في إزالة إطار النافذة الذي لا نحتاجه ، والذي لا يتناسب مع تصميمنا حقًا. سنستخدم حل مخصص معك. لماذا نفتح ملف "main.js" ونضيف معلمة الإطار هناك: false عند إنشاء BrowserWindow ، تزيل هذه العلامة القائمة القياسية وحدود النافذة. يجب أن تبدو هذه:

const win = new BrowserWindow({
    width: 800,
    height: 600,
    frame:false,
    webPreferences: {
      nodeIntegration: true
    }
  })

انقر على "F5" وانظر إلى النتيجة بدون نافذة إطار (الشكل 16).


تين. 16 - نافذة عمل التطبيق مع تخطيط من Webix

ويبقى تعليم نافذتنا الرد على الحدث من الماوس. في البداية ، سنجعل العنوان نشطًا حتى يتمكن من تحريك نافذتنا حول شاشة الشاشة. لماذا تفتح ملف "adver.js" ، ابحث عن طريقة العرض: عنصر التسمية فيه وأضف خاصية css: "head_win" إليه كما هو مبين في الشكل 17.

   { "view": "label", "label": "Elcetron +Webix its cool!", css:"head_win" },
                    { "label": "-", "view": "button", "height": 38, "width": 40},
                    { "label": "+", "view": "button", "height": 38, "width": 40 },
                    { "label": "x", "view": "button", "height": 38, "width": 40}


تين. 17 - إضافة نمط للعرض: عنصر التسمية

الآن تحتاج إلى تسجيل هذا النمط في ملف تم إنشاؤه خصيصًا لهذا الغرض. افتح الملف "style.css" وأنشئ النمط التالي:

.head_win {
    -webkit-app-region: drag;
}

بعد ذلك أطلقنا تطبيق "F5" وحاولنا سحب النافذة من العنوان. يجب أن يعمل كل شيء.

أخيرًا ، سوف يستجيب طلبنا للنقر على أزرار العنوان في نافذة "-، +، x". لماذا تضيف التعليمة البرمجية التالية إلى نهاية ملف adver.js:

//  
$$("close-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    window.close();
})

//  
$$("min-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    window.minimize();
})

//  
$$("max-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    if (!window.isMaximized()) {
        window.maximize();
    } else {
        window.unmaximize();
    }
})

في هذا الكود ، يعني إدخال النموذج "$$ (" max-bt ")" الوصول إلى عنصر "Webix" بواسطة "id" الخاص به. لذلك ، من الضروري لأزرار الرأس أن تحدد هذه المعرف في ملف "overer.js "، الذي سنفعله كما هو موضح في الشكل 18:

   { "view": "label", "label": "Elcetron +Webix its cool!", css:"head_win" },
                    { "label": "-", "view": "button", "height": 38, "width": 40, id:"min-bt" },
                    { "label": "+", "view": "button", "height": 38, "width": 40, id:"max-bt" },
                    { "label": "x", "view": "button", "height": 38, "width": 40, id:"close-bt" }


تين. 18 - إضافة نمط للعرض: عنصر التسمية

هذا كل شيء الآن. جربها يجب أن تعمل. يمكن تنزيل شفرة المصدر من github ، وهنا الرابط . شكرآ لك على أهتمامك.

More articles:


All Articles