الفرق بين المراجعتين لصفحة: «Cordova/webview ios»
أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:العوارض في منصة iOS في كوردوفا}}</noinclude> تصنيف: Cordova تصنيف: iOS يوضح هذا المجل...' |
لا ملخص تعديل |
||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:العوارض في منصة iOS في كوردوفا}}</noinclude> | <noinclude>{{DISPLAYTITLE:العوارض في منصة iOS في كوردوفا}}</noinclude> | ||
[[تصنيف: Cordova]] | [[تصنيف: Cordova]] | ||
[[تصنيف: iOS]] | [[تصنيف: iOS]] | ||
يوضح هذا المجلد كيفية تضمين مُكوّن (component) [[Cordova/webviews|عارض]] كوردوفا في تطبيقات منصة iOS الكبيرة. للمزيد من التفاصيل حول كيفية جعل تلك المكوّنات تتواصل مع بعضها، [[Cordova/plugins|دليل تطوير الإضافات]]. | |||
بدأ دعم [[Cordova/webviews|العوارض]] في منصة iOS منذ الإصدار 1.4 كوردوفا، باستخدام | بدأ دعم [[Cordova/webviews|العوارض]] في منصة iOS منذ الإصدار 1.4 كوردوفا، باستخدام مكوِّن <code>Cleaver</code> الذي بُنِي على قالب Xcode. منصة كوردوفا 2.0 والإصدارات الأحدث لا تدعم إلا التقديم المستند إلى المشروع الفرعي (subproject-based) للمكُوِّن <code>Cleaver</code>. | ||
تتطلب هذه الإرشادات | تتطلب هذه الإرشادات الإصدارين الرابع من كوردوفا والثامن من Xcode فما فوقهما، بالإضافة إلى الملف <code>[[Cordova/config ref|config.xml]]</code> من مشروع iOS المُنشا حديثًا. يمكنك استخدام الإجراء في [[Cordova/cli|واجهة سطر الأوامر]] لإنشاء مشروع جديد، ثم الحصول على الملف <code>[[Cordova/config ref|config.xml]]</code> من المجلد الفرعي للتطبيق <code>platforms/ios</code>. | ||
* لاتباع هذه التعليمات، تأكد من أنّ لديك أحدث توزيعة من كوردوفا. نزِّلها من [http://cordova.apache.org cordova.apache.org]، وفُكَّ ضغط حزمة iOS الموجودة فيها. | * لاتباع هذه التعليمات، تأكد من أنّ لديك أحدث توزيعة من كوردوفا. نزِّلها من [http://cordova.apache.org cordova.apache.org]، وفُكَّ ضغط حزمة iOS الموجودة فيها. | ||
هناك | هناك طريقتان لإضافة كوردوفا إلى مشروعك. الطريقة الأولى هي استخدام الأداة [https://github.com/Carthage/Carthage Carthage]، أمّا الطريقة الثانية فتعتمد إضافة كوردوفا يدويًا. تذكر أنّ Carthage ليست مدعومة إلا في الإصدار 4.0.0 من cordova-ios أو ما فوقه. | ||
بعد استخدام أيٍّ من هاتين الطريقتين، | بعد استخدام أيٍّ من هاتين الطريقتين، انتقل إلى القسم [[Cordova/webview ios#.D8.A7.D8.B3.D8.AA.D8.AE.D8.AF.D8.A7.D9.85 CDVViewController|استخدام <code>CDVViewController</code>]]. | ||
== | ==إضافة <code>Cordova.framework</code> إلى مشروع Xcode باستخدام أداة Carthage == | ||
* | * قم بتثبيت [https://github.com/Carthage/Carthage Carthage] | ||
* في الملف [https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile Cartfile] | * في الملف [https://github.com/Carthage/Carthage/blob/master/Documentation/Artifacts.md#cartfile Cartfile]، أضف ما يلي (مع استبدال الإصدار المناسب في <code><versionortag></code>): | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="shell">git "git://git.apache.org/cordova-ios.git" "<version_or_tag>" # Apache</syntaxhighlight> | ||
* | *قم بتنفيذ الأمر التالي: | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="shell">carthage update</syntaxhighlight> | ||
* أضف <code>Carthage/Build/iOS/Cordova.framework</code> إلى مشروع Xcode خاصتك. | * أضف <code>Carthage/Build/iOS/Cordova.framework</code> إلى مشروع Xcode خاصتك. | ||
== | == إضافة Cleaver إلى مشروع Xcode (CordovaLib Sub-Project) == | ||
* قم بإنهاء Xcode إذا كان قيد التشغيل. | * قم بإنهاء Xcode إذا كان قيد التشغيل. | ||
* افتح طرفيةً، وانتقل إلى المجلد المصدري لكوردوفا iOS. | * افتح طرفيةً، وانتقل إلى المجلد المصدري لكوردوفا iOS. | ||
* انسخ الملف <code>config.xml</code> الموضح أعلاه في مجلد المشروع. | * انسخ الملف <code>[[Cordova/config ref|config.xml]]</code> الموضح أعلاه في مجلد المشروع. | ||
* افتح Xcode واستخدم Finder لنسخ الملف <code>config.xml</code> في النافذة <code>Project Navigator</code> | * افتح Xcode واستخدم أداة Finder لنسخ الملف <code>config.xml</code> في النافذة <code>Project Navigator</code>. | ||
* اختر <code>Create groups for any added folders</code> واضغط على <code>Finish</code>. | * اختر <code>Create groups for any added folders</code> واضغط على الزر <code>Finish</code>. | ||
* استخدم Finder لنسخ الملف <code>CordovaLib/CordovaLib.xcodeproj</code> إلى <code>Project Navigator</code> | * استخدم Finder لنسخ الملف <code>CordovaLib/CordovaLib.xcodeproj</code> إلى <code>Project Navigator</code> الخاص بإطار العمل Xcode. | ||
* اختر <code>CordovaLib.xcodeproj</code> في <code>Project Navigator</code>. | * اختر <code>CordovaLib.xcodeproj</code> في النافذة <code>Project Navigator</code>. | ||
* ارقُم تركيبة المفاتيح <code>Option-Command-1</code> لإظهار <code>File Inspector</code>. | * ارقُم تركيبة المفاتيح <code>Option-Command-1</code> لإظهار <code>File Inspector</code>. | ||
* اختر <code>Relative to Group</code> في <code>File Inspector</code> | * اختر <code>Relative to Group</code> في <code>File Inspector</code> للقائمة المنسدلة التي تخص <code>Location</code>. | ||
* اختر <code>project icon</code> في <code>Project Navigator</code>، واختر <code>Target</code>، ثم | * اختر <code>project icon</code> في <code>Project Navigator</code>، واختر <code>Target</code>، ثم اذهب إلى علامة التبويب <code>Build Settings</code>. | ||
* اضف <code>-force_load</code> و <code>-ObjC</code> لقيمة <code>Other Linker Flags</code>. | * اضف <code>-force_load</code> و <code>-ObjC</code> لقيمة <code>Other Linker Flags</code>. | ||
* انقر على <code>project icon</code> في Project Navigator، واختر قيمة <code>Target</code>، ثم | * انقر على <code>project icon</code> في النافذة Project Navigator، واختر قيمة <code>Target</code>، ثم اذهب إلى علامة التبويب <code>Build Phases</code>. | ||
* قم بتوسيع <code>Link Binaries with Libraries</code>. | * قم بتوسيع <code>Link Binaries with Libraries</code>. | ||
* | * اضغط على الزر <code>+</code>، وأضف الإطارات <code>frameworks</code> التالية. واختياريًا داخل <code>Project Navigator</code>، قم بنقلها إلى المجموعة <code>Frameworks</code>: | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="shell">AssetsLibrary.framework | ||
CoreLocation.framework | CoreLocation.framework | ||
CoreGraphics.framework | CoreGraphics.framework | ||
MobileCoreServices.framework</syntaxhighlight> | MobileCoreServices.framework</syntaxhighlight> | ||
* قم بتوسيع <code>Target Dependencies</code>، المربع العلوي الذي له | * قم بتوسيع <code>Target Dependencies</code>، في حال كان هناك أكثر من مربع واحد، فاذهب إلى المربع العلوي الذي له ذلك الاسم. | ||
* اضغك على الزر <code>+</code>، وأضف منتج البناء <code>CordovaLib</code>. | * اضغك على الزر <code>+</code>، وأضف منتج البناء <code>CordovaLib</code>. | ||
* قم بتوسيع <code>Link Binaries with Libraries</code>، المربع العلوي الذي له هذا الاسم إذا كان هناك أكثر من مربع واحد. | * قم بتوسيع <code>Link Binaries with Libraries</code>، أو المربع العلوي الذي له هذا الاسم إذا كان هناك أكثر من مربع واحد. | ||
* اضغط على الزر <code>+</code>، وأضف <code>libCordova.a</code>. | * اضغط على الزر <code>+</code>، وأضف <code>libCordova.a</code>. | ||
* عيّن <code>Xcode Preferences → Locations → Derived Data → Advanced...</code> إلى القيمة <code>Unique</code>. | * عيّن <code>Xcode Preferences → Locations → Derived Data → Advanced...</code> إلى القيمة <code>Unique</code>. | ||
* | * حدد أيقونة المشروع <code>project icon</code> في النافذة Project Navigator، وحدد <code>Target</code>، ثم اذهب إلى علامة التبويب <code>Build Settings</code>. | ||
* ابحث عن <code>Header Search Paths</code>. وأضف إلى ذلك الإعداد القيمَ الثلاثة أدناه، بما في ذلك علامات الاقتباس: | * ابحث عن <code>Header Search Paths</code>. وأضف إلى ذلك الإعداد القيمَ الثلاثة أدناه، بما في ذلك علامات الاقتباس: | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="shell">"$(TARGET_BUILD_DIR)/usr/local/lib/include" | ||
"$(OBJROOT)/UninstalledProducts/include" | "$(OBJROOT)/UninstalledProducts/include" | ||
"$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include" | "$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include" | ||
"$(BUILT_PRODUCTS_DIR)"</syntaxhighlight> | "$(BUILT_PRODUCTS_DIR)"</syntaxhighlight> | ||
بدءًا من الإصدار 2.1.0 من كوردوفا، تمت ترقية <code>CordovaLib</code> لاستخدام <code>Automatic Reference Counting (ARC)</code>. | بدءًا من الإصدار 2.1.0 من كوردوفا، تمت ترقية <code>CordovaLib</code> لاستخدام <code>Automatic Reference Counting (ARC)</code>. فلم تعد تحتاج إلى الترقية إلى <code>ARC</code> لاستخدام <code>CordovaLib</code>، ولكن إن أردت ترقية مشروعك لاستخدام <code>ARC</code>، فعليك استخدام أداة الترحيل (migration wizard) في إطار العمل Xcode من القائمة <code>Edit → Refactor → Convert to Objective-C ARC...</code>، ثم <code>de-select libCordova.a</code>، ثم قم بتشغيل الأداة لاكمال المهمّة. | ||
== استخدام CDVViewController == | == استخدام <code>CDVViewController</code> == | ||
* أضف الترويسة التالية: | * أضف الترويسة التالية: | ||
<syntaxhighlight lang="javascript">#import <Cordova/CDVViewController.h></syntaxhighlight> | <syntaxhighlight lang="javascript">#import <Cordova/CDVViewController.h></syntaxhighlight> | ||
* قم بإنشاء نسخة جديدة من <code>CDVViewController</code> واحتفظ بها في مكانٍ ما، على سبيل المثال، في خاصية صنفيةٍ (class property): | * قم بإنشاء نسخة جديدة من <code>CDVViewController</code> واحتفظ بها في مكانٍ ما، على سبيل المثال، احتفظ بها في خاصية صنفيةٍ (class property): | ||
<syntaxhighlight lang="javascript">CDVViewController* viewController = [CDVViewController new];</syntaxhighlight> | <syntaxhighlight lang="javascript">CDVViewController* viewController = [CDVViewController new];</syntaxhighlight> | ||
* بشكل اختياري، قم بتعيين الخاصية <code>wwwFolderName</code>، ذات القيمة الافتراضية <code>www</code>: | * بشكل اختياري، قم بتعيين الخاصية <code>wwwFolderName</code>، ذات القيمة الافتراضية <code>www</code>: | ||
<syntaxhighlight lang="javascript">viewController.wwwFolderName = @"myfolder";</syntaxhighlight> | <syntaxhighlight lang="javascript">viewController.wwwFolderName = @"myfolder";</syntaxhighlight> | ||
* بشكل اختياري، قم بتعيين صفحة البداية في الوسم <code> | * بشكل اختياري، قم بتعيين صفحة البداية في الوسم <code><content></code> داخل الملف <code>config.xml</code>، إما لملفٍ محلي: | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="xml"><content src="index.html" /></syntaxhighlight> | ||
... أو لموقع بعيد: | ... أو لموقع بعيد: | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="xml"><content src="http://apache.org" /></syntaxhighlight> | ||
* بشكل اختياري، عيّن قيمة الخاصية <code>useSplashScreen</code>، ذات القيمة الافتراضية <code>NO</code>: | * بشكل اختياري، عيّن قيمة الخاصية <code>useSplashScreen</code>، ذات القيمة الافتراضية <code>NO</code>: | ||
<syntaxhighlight lang="javascript">viewController.useSplashScreen = YES;</syntaxhighlight> | <syntaxhighlight lang="javascript">viewController.useSplashScreen = YES;</syntaxhighlight> | ||
* عيّن قيمة الخاصية <code>view frame</code>. اترك | * عيّن قيمة الخاصية <code>view frame</code>. اترك تعيين هذه الخاصية دائمًا إلى الأخير: | ||
<syntaxhighlight lang="javascript">viewController.view.frame = CGRectMake(0, 0, 320, 480);</syntaxhighlight> | <syntaxhighlight lang="javascript">viewController.view.frame = CGRectMake(0, 0, 320, 480);</syntaxhighlight> | ||
* أضف Cleaver إلى [[Cordova/webviews|العارض]]: | * أضف Cleaver إلى [[Cordova/webviews|العارض]]: | ||
سطر 72: | سطر 72: | ||
== إضافة أصول HTML و CSS و JavaScript == | == إضافة أصول HTML و CSS و JavaScript == | ||
* أنشئ مجلدًا جديدًا داخل المشروع، مثلا: <code>www</code>. | * أنشئ مجلدًا جديدًا داخل المشروع، مثلا: <code>www</code>. | ||
* ضع أصول HTML | * ضع أصول [[HTML]] و [[CSS]] وجافاسكريبت في هذا المجلد. | ||
* استخدم Finder لنسخ المجلد في نافذة | * استخدم Finder لنسخ المجلد في نافذة <code>Project Navigator</code> في Xcode. | ||
* اختر <code>Create folder references for any added folders</code>. | * اختر <code>Create folder references for any added folders</code>. | ||
* قم بتعيين قيم الخاصيتين <code>wwwFolderName</code> و <code>startPage</code> المناسبتين للمجلد الذي قمت بإنشائه في البداية، أو استخدم الإعدادات الافتراضية (المحددة في القسم السابق) عند إنشاء نسخة من <code>CDVViewController</code>. | * قم بتعيين قيم الخاصيتين <code>wwwFolderName</code> و <code>startPage</code> المناسبتين للمجلد الذي قمت بإنشائه في البداية، أو استخدم الإعدادات الافتراضية (المحددة في القسم السابق) عند إنشاء نسخة من <code>CDVViewController</code>. | ||
<syntaxhighlight lang="javascript">/* | <syntaxhighlight lang="javascript">/* | ||
myfolder إن أنشأت ملفا اسمه | |||
الموجود فيه mypage.html وأردت أن يكون الملف | |||
startPage هو صفحة البداية | |||
*/ | */ | ||
viewController.wwwFolderName = @"myfolder"; | viewController.wwwFolderName = @"myfolder"; | ||
viewController.startPage = @"mypage.html"</syntaxhighlight> | viewController.startPage = @"mypage.html"</syntaxhighlight> | ||
== انظر أيضًا== | |||
*[[Cordova/webview android|عوارض أندرويد في كوردوفا]] | |||
*[[Cordova/platforms android|دليل التطوير على منصة أندرويد]] | |||
*[[Cordova/plugins|دليل تطوير الإضافات في كوردوفا]] | |||
==مصادر== | ==مصادر== | ||
*[https://cordova.apache.org/docs/en/latest/guide/platforms/ios/webview.html صفحة iOS WebViews في توثيق كوردوفا الرسمي.] | *[https://cordova.apache.org/docs/en/latest/guide/platforms/ios/webview.html صفحة iOS WebViews في توثيق كوردوفا الرسمي.] |
مراجعة 21:30، 26 ديسمبر 2018
يوضح هذا المجلد كيفية تضمين مُكوّن (component) عارض كوردوفا في تطبيقات منصة iOS الكبيرة. للمزيد من التفاصيل حول كيفية جعل تلك المكوّنات تتواصل مع بعضها، دليل تطوير الإضافات.
بدأ دعم العوارض في منصة iOS منذ الإصدار 1.4 كوردوفا، باستخدام مكوِّن Cleaver
الذي بُنِي على قالب Xcode. منصة كوردوفا 2.0 والإصدارات الأحدث لا تدعم إلا التقديم المستند إلى المشروع الفرعي (subproject-based) للمكُوِّن Cleaver
.
تتطلب هذه الإرشادات الإصدارين الرابع من كوردوفا والثامن من Xcode فما فوقهما، بالإضافة إلى الملف config.xml
من مشروع iOS المُنشا حديثًا. يمكنك استخدام الإجراء في واجهة سطر الأوامر لإنشاء مشروع جديد، ثم الحصول على الملف config.xml
من المجلد الفرعي للتطبيق platforms/ios
.
- لاتباع هذه التعليمات، تأكد من أنّ لديك أحدث توزيعة من كوردوفا. نزِّلها من cordova.apache.org، وفُكَّ ضغط حزمة iOS الموجودة فيها.
هناك طريقتان لإضافة كوردوفا إلى مشروعك. الطريقة الأولى هي استخدام الأداة Carthage، أمّا الطريقة الثانية فتعتمد إضافة كوردوفا يدويًا. تذكر أنّ Carthage ليست مدعومة إلا في الإصدار 4.0.0 من cordova-ios أو ما فوقه.
بعد استخدام أيٍّ من هاتين الطريقتين، انتقل إلى القسم استخدام CDVViewController
.
إضافة Cordova.framework
إلى مشروع Xcode باستخدام أداة Carthage
git "git://git.apache.org/cordova-ios.git" "<version_or_tag>" # Apache
- قم بتنفيذ الأمر التالي:
carthage update
- أضف
Carthage/Build/iOS/Cordova.framework
إلى مشروع Xcode خاصتك.
إضافة Cleaver إلى مشروع Xcode (CordovaLib Sub-Project)
- قم بإنهاء Xcode إذا كان قيد التشغيل.
- افتح طرفيةً، وانتقل إلى المجلد المصدري لكوردوفا iOS.
- انسخ الملف
config.xml
الموضح أعلاه في مجلد المشروع. - افتح Xcode واستخدم أداة Finder لنسخ الملف
config.xml
في النافذةProject Navigator
. - اختر
Create groups for any added folders
واضغط على الزرFinish
. - استخدم Finder لنسخ الملف
CordovaLib/CordovaLib.xcodeproj
إلىProject Navigator
الخاص بإطار العمل Xcode. - اختر
CordovaLib.xcodeproj
في النافذةProject Navigator
. - ارقُم تركيبة المفاتيح
Option-Command-1
لإظهارFile Inspector
. - اختر
Relative to Group
فيFile Inspector
للقائمة المنسدلة التي تخصLocation
. - اختر
project icon
فيProject Navigator
، واخترTarget
، ثم اذهب إلى علامة التبويبBuild Settings
. - اضف
-force_load
و -ObjC
لقيمةOther Linker Flags
. - انقر على
project icon
في النافذة Project Navigator، واختر قيمةTarget
، ثم اذهب إلى علامة التبويبBuild Phases
. - قم بتوسيع
Link Binaries with Libraries
. - اضغط على الزر
+
، وأضف الإطاراتframeworks
التالية. واختياريًا داخلProject Navigator
، قم بنقلها إلى المجموعةFrameworks
:
AssetsLibrary.framework
CoreLocation.framework
CoreGraphics.framework
MobileCoreServices.framework
- قم بتوسيع
Target Dependencies
، في حال كان هناك أكثر من مربع واحد، فاذهب إلى المربع العلوي الذي له ذلك الاسم. - اضغك على الزر
+
، وأضف منتج البناءCordovaLib
. - قم بتوسيع
Link Binaries with Libraries
، أو المربع العلوي الذي له هذا الاسم إذا كان هناك أكثر من مربع واحد. - اضغط على الزر
+
، وأضفlibCordova.a
. - عيّن
Xcode Preferences → Locations → Derived Data → Advanced...
إلى القيمةUnique
. - حدد أيقونة المشروع
project icon
في النافذة Project Navigator، وحددTarget
، ثم اذهب إلى علامة التبويبBuild Settings
. - ابحث عن
Header Search Paths
. وأضف إلى ذلك الإعداد القيمَ الثلاثة أدناه، بما في ذلك علامات الاقتباس:
"$(TARGET_BUILD_DIR)/usr/local/lib/include"
"$(OBJROOT)/UninstalledProducts/include"
"$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include"
"$(BUILT_PRODUCTS_DIR)"
بدءًا من الإصدار 2.1.0 من كوردوفا، تمت ترقية CordovaLib
لاستخدام Automatic Reference Counting (ARC)
. فلم تعد تحتاج إلى الترقية إلى ARC
لاستخدام CordovaLib
، ولكن إن أردت ترقية مشروعك لاستخدام ARC
، فعليك استخدام أداة الترحيل (migration wizard) في إطار العمل Xcode من القائمة Edit → Refactor → Convert to Objective-C ARC...
، ثم de-select libCordova.a
، ثم قم بتشغيل الأداة لاكمال المهمّة.
استخدام CDVViewController
- أضف الترويسة التالية:
#import <Cordova/CDVViewController.h>
- قم بإنشاء نسخة جديدة من
CDVViewController
واحتفظ بها في مكانٍ ما، على سبيل المثال، احتفظ بها في خاصية صنفيةٍ (class property):
CDVViewController* viewController = [CDVViewController new];
- بشكل اختياري، قم بتعيين الخاصية
wwwFolderName
، ذات القيمة الافتراضيةwww
:
viewController.wwwFolderName = @"myfolder";
- بشكل اختياري، قم بتعيين صفحة البداية في الوسم
<content>
داخل الملفconfig.xml
، إما لملفٍ محلي:
<content src="index.html" />
... أو لموقع بعيد:
<content src="http://apache.org" />
- بشكل اختياري، عيّن قيمة الخاصية
useSplashScreen
، ذات القيمة الافتراضيةNO
:
viewController.useSplashScreen = YES;
- عيّن قيمة الخاصية
view frame
. اترك تعيين هذه الخاصية دائمًا إلى الأخير:
viewController.view.frame = CGRectMake(0, 0, 320, 480);
- أضف Cleaver إلى العارض:
[myView addSubview:viewController.view];
إضافة أصول HTML و CSS و JavaScript
- أنشئ مجلدًا جديدًا داخل المشروع، مثلا:
www
. - ضع أصول HTML و CSS وجافاسكريبت في هذا المجلد.
- استخدم Finder لنسخ المجلد في نافذة
Project Navigator
في Xcode. - اختر
Create folder references for any added folders
. - قم بتعيين قيم الخاصيتين
wwwFolderName
وstartPage
المناسبتين للمجلد الذي قمت بإنشائه في البداية، أو استخدم الإعدادات الافتراضية (المحددة في القسم السابق) عند إنشاء نسخة منCDVViewController
.
/*
myfolder إن أنشأت ملفا اسمه
الموجود فيه mypage.html وأردت أن يكون الملف
startPage هو صفحة البداية
*/
viewController.wwwFolderName = @"myfolder";
viewController.startPage = @"mypage.html"