كيفية إنشاء الإضافات رسم العائمة ، الجزء الأول

لقد قمنا مؤخرًا بفتح Alembic ، المكون الإضافي Sketch الذي يستخلص الألوان من الصور. عندما بدأت العمل عليه ، كنت أعلم أن استخدام نافذة حوار أساسية لن يعمل مع الواجهة التي كنت أفكر فيها. لذلك ، جربت طرقًا أخرى لإنشاء واجهة مخصصة لإضافات Sketch وقررت استخدام لوحة عائمة مع WebView داخلًا لإنشاء الواجهة الفعلية.

لسوء الحظ ، لا يوجد الكثير من الوثائق حول كيفية استخدام مكونات الكاكاو المتقدمة مسبقًا لـ Sketch. في هذه المقالة ، سنبحث في كيفية إنشاء نموذج إضافي مع لوحة عائمة تحتوي على WebView والأهم من ذلك ، كيفية جعل WebView على التواصل مع Sketch.

إذا لم تكن معتادًا على إنشاء مكونات إضافية لـ Sketch ، فإنني أوصي بشدة بالبدء في تقديم موقع المطور الخاص بـ Sketch والأمثلة الأساسية قبل قراءة هذه المقالة. إذا كنت تواجه أي مشكلة أو أسئلة عند تجربة الأفكار الجديدة للمكونات الإضافية ، فإنني أوصي أيضًا بالذهاب إلى منتدى Sketch Plugins الذي أنشأته Ale من Sketch ، لمعرفة ما إذا كان شخص ما قد واجه نفس المشكلة بالفعل.

تنقسم المقالة إلى قسمين: الجزء الأول يتعلق بإنشاء اللوحة والواجهة ، أما الجزء الثاني فهو يتعلق بالاتصال بين Sketch و WebView.

إنشاء لوحة

للقيام بشيء أكثر تقدمًا من مربعات حوار Sketch الافتراضية ، سيتعين علينا استخدام أطر عمل Cocoa التي توفرها macOS مثل AppKit لعناصر الواجهة و WebKit لإنشاء WebView.

سنبدأ بإنشاء اللوحة نفسها ، ولكن قبل القيام بذلك ، يمكنك تنزيل بنية المكون الإضافي الأساسي لتبدأ. سنستخدم فئة NSPanel التابعة لـ AppKit ، وهي فئة فرعية من NSWindow تستخدم لإنشاء نوافذ ثانوية ، وهذا بالضبط ما نريد لوحتنا.

لدينا لوحة! خلفية بيضاء واضحة هو لطيف قليلا لجعلها تبدو وكأنها نافذة ينتمي في ماك. دعنا نضيف خلفية غير واضحة مع فئة NSKVisualEffectView من AppKit.

لقد انتهت اللوحة الآن بشكل مرئي ، لكن لدينا بعض المشكلات: يمكننا تشغيل أكبر عدد ممكن من اللوحات ولا يمكننا إغلاق أي منها.

لإصلاح إمكانية تشغيل لوحات متعددة ، سنقوم بتخزين إشارة إلى اللوحة الأولى التي نفتحها باستخدام NSThread من Foundation. الآن ، يمكننا التحقق مما إذا كانت هناك بالفعل لوحة مفتوحة قبل تشغيل المكون الإضافي مرة أخرى.

الخطوة التالية هي إغلاق اللوحة عند النقر فوق الزر "إغلاق" ، وسنقوم أيضًا بإزالة المرجع (حتى نتمكن من فتحه مرة أخرى) وإيقاف المكون الإضافي.

إنشاء الواجهة

الآن وبعد أن أصبح لدينا اللوحة ، سنستخدم فئة WebView الخاصة بـ WebKit لإضافة صفحة ويب إليها ، الموجودة في مجلد "الموارد" للمكون الإضافي.

بعد ذلك ، سنضيف بعض CSS وجافا سكريبت إلى صفحة الويب لنجعلها أكثر انسجامًا مع نظام التشغيل macOS.

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

في الجزء التالي ، سنرى الجزء الأكثر أهمية: كيفية جعل WebView و Sketch على اتصال حتى نتمكن من فعل شيء مع الواجهة التي أنشأناها للتو. تأكد من أن تكون هناك!