شرح المكون FilePicker في سكيتشوير – جلب الصور والملفات داخل التطبيق

شرح التعامل مع المكونFilePicker في سكيتشوير

مرحباً بكم في مدونة كبير المبرمجين،

في هذا الدرس سنتعلم كيفية التعامل مع المكون FilePicker في تطبيق Sketchware Pro. الهدف هو جلب صورة أو ملف من الهاتف وعرضه داخل التطبيق. يُعد هذا المكون من الأدوات المهمة لأي مبرمج يستخدم سكيتشوير، خصوصاً في التطبيقات التي تحتاج إلى إدراج ملفات أو صور من معرض الهاتف أو من ذاكرة الجهاز.

شرح المكونFilePicker في سكيتشوير

شرحنا في مقال آخر >>> بلوكات التعامل مع مكون التأريخ في سكيشوير.

ماهو المكونFilePicker في سكيتشوير؟

عبارة عن مجموعة من الأكواد المكتوبة بلغة الجافا وتم اضافة هذا الأكواد كمكون واحد في تطبيق سكيتشوير يتكون من أحد أنواع ال Intent راجع درس المكون Intent, لكن هذا من نوع خاص الغرض منه الإنتقال من داخل إلى المعرض، ملفات ذاكرة الهاتف أوبطاقة SD، وهذا المكون يسهل من جلب أي ملف الى تطبيقك مثلا جلب صورة من المعرض وعرضها داخل التطبيق عن طريق مسار الصورة الموجود في الذاكرة كما سنوضح لك في مثال عملي عن إستخدام المكون FilePicker.

لماذا نستخدم المكون FilePicker في سكيتشوير؟

نستخدم هذا المكون في المشاريع التي يحتاج المستخدم فيها أن يضيف مرفق أو ملف الى التطبيق مثلا نريد أن يكون المستخدم قادر على تغير صورة ملفه الشخصي أو استعراض صورة من المعرض داخل التطبيق، إرسال صورة أو ملف لشخص في تطبيقات الدردشة، يعتبر FilePicker مكون مهم في برمجة تطبيقات أندرويد بأستخدام سكيتشوير.

شرح بلوكات المكون FilePicker

توجد البلوكة الرئيسية تسمى pick files

بلوكات filepicker في سكيتشوير برو

pick files :نستخدم هذا البلوك في زر النقر لجلب الملف تقوم هذه البلوكة بإضافة كود المكون.

بلوكة قص الصورة في سكيتشوير

CropImageView : نستخدم هذه البلوكة للصور بشكل خاص من أجل قص الصورة بعد جلبها من المعرض.

أحداث المكونFilePicker

يوجد حدثان لهذا المكون وهما:

الحدث OnFilesPicked: ينفذ هذا الحدث بشكل تلقائي بعد جلب الملف من أي نوع ويعيد هذا الحدث مسار الملف من وحدة التخزين الداخلية ويخزن في متغير من نوعString, يمكنك تخزين مسار الملف من هذا الحدث.

داخل صفحة الحدث OnFilesPicked

2- OnFilesPickedCancle : ينفذ عند إلغاء جلب الملف أو عند العودة بدون إختيار أي ملف لداخل التطبيق.

مثال عملي عن المكونFilePicker

في هذا المثال سنقوم ببرمجة تطبيق أندرويد بأستخدام سكيتشوير نشرح فيه طريقة أستخدام المكون FilePicker سنقوم بعمل مثال بأستخدام FilePicker ونجعله يقبل جلب أي نوع من الملفات من الذاكرة لداخل التطبيق وعرض مسار الملف أو الصورة.

أولآ نقوم بإنشاء المكون FilePicker

من تبويب مكوّن نضغط على علامة الزائد(+) نختار المكونFilePicker كما هو موضح في الصورة.

إنشاء مكون جديد في سكيتشوير

نقوم بتسمية المكون file ونحدد نوع الملف صورة

نحدد نوعه صورة لعرض الصور فقط للإختيار

تسمية المكون filePicker

تحديد نوع المكون

ثانيآ تصميم واجهة جلب صورة من الذاكرة وعرضها داخل التطبيق بإستخدام سكيتشوير.

نحتاج في هذه الواجهة إلى Button للإنتقال للمعرض واختيار الصورة وTextView لعرض مسار الصورة وImageView لعرض الصوره لتكون الواجهه بهذا الشكل :

شرح المكونFilePicker في سكيتشوير

نقوم ببرمجةButton حدث عند النقر (Onclick) ينتقل للمعرض لإختيار الصورة والعودة لعرضها داخل التطبيق داخل ImageView.

شرح المكونFilePicker في سكيتشوير

التعامل مع الأحداث في مكون FilePicker

الان سنتعامل مع الحدث OnFilesPicked (عند إلتقاط ملف) الذي ينفذ عند العوده للتطبيق مع الملف الذي إخترناه

احداث المكون filepicker

في داخل حدث عند التقاط ملفات OnFilesPicked يعيد هذا الحدثList تحتوي على مسارات الصور التي إخترناها يمكننا إختيار أكثر من صورة ولكن في هذا المثال سنقوم بجلب صورة واحده ونقوم بتخزين مسار الصورة في متغير أسمه path وعرض الصورة داخلImageView كما هو موضح في الصورة التالية