درس .. أساسيات حول صفحة ال Silver Light (الدرس الثاني )

[خليل سليم]

السلام عليكم

في هذا الدرس سنستعرض إن شاء الله ملف تشفيل مشروع السيلفر ونحاول ان نفهم بعض الأمور المتعلقة به

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

المهم الفكرة كما بأول درس

1- جافا سكريبت

2- زامل ( WPF )

3- أجاكس ( جافا سكريبت و XML )

4- مكتبة دوت نت ضخمة

5- أدوات ملحقة


1 و 3 مسؤولة عن التأثيرات الظاهرة امامنا ( الأحداث ) مثل حركة الماوس والنقر به واتصالها بالسيرفر

2 مسؤولة عن UI ( User Interface ) الشكل الظاهر

4 الإجراءات على الخادم

5 عرض الفيديو ، التعامل مع الصور تحميل البيانات .......


__________________________________________________________________________
__________________________________________________________________________


هناك عدة ملفات بالمشروع وسنحاول ان نفتح الملف

Silverlight.js

ستجد به اصدار بيئة تطوير السيلفر الحالية
انواع المتصفحات المدعومة ليفحصها أول
صورة السيلفر للمتصفحات الغير متوفر بها مشغل ورابط المشغل

وأمور لا تعنينا على الإطلاق

ولا داعي للتعديل عليها او حتى النظر لها



ثاني ملف وهو Scene.xaml مع كود الجافا سكريبت الخاص به وباحداثه سنعود له لاحقا ان شاء الله لان كل عملنا عليه



أهم ملف بكل العمل في النهاية هو الصفحة التي ستعرض أمام المستخدم وهي Default.Html

لنجرب أن ننظر لها ونرى ما بها

<div id="SilverlightPlugInHost">
		<script type="text/javascript">
			createSilverlight();
		</script>
	</div>

سكريبت جافا سكريبت يستدعي دالة باسم createSilverlight

الأمر جميل وبسيط وهذه الدالة بها كل ما يلزم


لنجرب أن نفتح الدالة ونرى ما بها

function createSilverlight()
{
	var scene = new FirstLesson.Scene();
	Silverlight.createObjectEx({
		source: 'Scene.xaml',
		parentElement: document.getElementById('SilverlightPlugInHost'),
		id: 'SilverlightPlugIn',
		properties: {
			width: '400',
			height: '400',
			background:'#ffffff',
            isWindowless: 'false',
			version: '1.0'
		},
		events: {
		    onError: null,
			onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
		},		
		context: null 
	});
}

الدالة بملف الجافا سكريبت الخلفي للصفحة

بها كلام بسيط


لنحاول ان نحلله
أول شي مصدر ملف الزامل
source: 'Scene.xaml',
ثم الديف الحاوي له
ثم المعرف الفريد الخاص بكائن السيلفر
id: 'SilverlightPlugIn

وبعدها الخصائص
الطول والعرض واللون والخلفية والإصدار وثم الشيء الجميل وهي الأحداث

events: {
onError: null,
عند حدوث خطأ

onLoad
عند بدء التحميل


بصفة عامة أمور جديدة ولا يجب حفظها لانها مكتوبة دائما

وايضا كل خاصية ساشرحها في الوقت الذي سنحتاجها عنده ان شاء الله



ولكن أليست مكونات السيلفر لايت بالنهاية كائن يظهر في الصفحة

وله خصائص أحيانا ما يلزمنا التعامل بها

كالفلاش مثلا

إذن هناك صيغة أخرى يجب أن تكون مشابهة للفلاش

ارجع للصفحة الرئيسية Default.HTML
امسح

		<script type="text/javascript">
			createSilverlight();
		</script>

واستبدلها ب

<object
type=”application/x-silverlight”
id=”silverlight1”
width=”350”
height=”350”>
<param name=”background” value=”#ffebcd” />
<param name=”enableFramerateCounter” value=”true” />

<param name=”enableHtmlAccess” value=”true” />
<param name=”initParams” value=”paramValue1, paramValue2” />
<param name=”maxFrameRate” value=”30” />
<param name=”onError” value=”myErrorHandler” />
<param name=”onLoad” value=”onLoad” />
<param name=”source” value=”HelloSilverlight.xaml” />
<param name=”windowless” value=”true” />


		<p>يرجى تحميل مشغل السيلفر من هذا الرابط <a> </a></p>

</object>

كائن معتاد وبالوسيطات المرسلة له ، هي نفس الوسيطات المرسلة في الجافا سكريبت بالاعلى

قم بالنظر للخصائص ستجد خصائص معتادة نفس الخصائص السابفة ولكن بصيغة أخرى


لاحظ انني وضعت وسوم معتادة مثل <p>يرجى تحميل مشغل السيلفر من هذا الرابط <a> الرابط من هنا </a>href=''</p>
هذه الوسوم تظهر للمستعرض الذي لا يحتوي على مشغل السيلفر لايت وكما ترى فهي مفيدة ولك حرية الكتابة .




إذا كانت صفحتك ستفتح على متصفخ مثل سفاري فيفضل استخدام الوسم embed لان المتصفح لا يدعم الوسم Object

<embed
type=”application/x-silverlight”
id=”silverlight1”
width=”350”
height=”350”
background=”#ffebcd”
enableFramerateCounter=”true”
enableHtmlAccess=”true”
initParams=”paramValue1, paramValue2”
maxFrameRate=”30”
OnError=”myErrorHandler”
OnLoad=”onLoad”
source=”HelloWorld.xaml”
windowless=”false”
/>

على العموم
استخدم دائما دالة الجافا سكريبت لتتفادى الكثير من الأخطاء بدلا من الكاائن

source هو اهم خاصية في كائن السيلفر حيث يرمز لملف الزامل الذي سنقوم بعرضه

نستطيع فصل ملف الزامل واستدعاء اسمه

أو نستطيع ان نكتبه مباشرة في الصفحة كالتالي

<body style=“background:blue“>

<script id=”xaml” type=”text/xaml”>
<Canvas xmlns=”http://schemas.microsoft.com/client/2007”>
<MediaElement Name=”video” Source=”Lake.wmv” Opacity=”0” IsMuted=”true”/>
<Ellipse Width=”100” Height=”100”>
<Ellipse.Fill>
<VideoBrush SourceName=”video”/>
</Ellipse.Fill>
</Ellipse>
<TextBlock FontFamily=”Georgia” Foreground=”Blue” FontStyle=”Italic”
FontSize=”40” Canvas.Left=”125” Canvas.Top=”20” Text=”Great Estates”/>
<TextBlock Foreground=”Blue” Canvas.Left=”110” Canvas.Top=”70”
Text=”Luxurious Living at an Affordable Price”/>
<Path Stroke=”Red” StrokeThickness=”4”>
<Path.Data>
<PathGeometry>
<PathFigure StartPoint=”0,65”>
<ArcSegment SweepDirection=”Clockwise” Size=”2,2” Point=”25,65”/>
<ArcSegment SweepDirection=”Clockwise” Size=”2,2” Point=”50,65”/>
<ArcSegment SweepDirection=”Clockwise” Size=”2,2” Point=”75,65”/>
<ArcSegment SweepDirection=”Clockwise” Size=”2,2” Point=”100,65”/>
<LineSegment Point=”390,65”/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
</script>
<div id=“placeholder“>
<script type=“text/javascript“>createSilverlight();</script>
</div>
<p style=“font-family:Tahoma; color:white“>
An idyllic new community located high on a hill and offering captivating
waterfront views. Tailored to meet both the needs of upsizing and
downsizing buyers, Great Estates offers custom quality architecture and
design at an affordable price point.
</p>
</body>

شيء رائع ويفوق الوصف يا مايكروسوفت

ما هذه المرونة

والتي لم نرها سابقا

ولكن الان كيف سنحدد المصدر في دالة الاستدعاء ؟؟!!!!

الحل بسيط وهو بارسال # مع المعرف الفريد للسكريبت

function createSilverlight()
{
Silverlight.createObjectEx(
{






source: “#xaml”,







parentElement: document.getElementById(“placeholder”),
id: “silverlightControl”,
properties:
{ width: “390”, height: “100”, version: “1.0”, background: “Yellow” },
events: {}
}
);
}

حاليا الاصدارات المتاحة من متصفح الفايرفوكس بها شائبة

حيث اذا كانت صفحتك بها تعريف DOCTYPE

فلن يعمل السيلفر لايت الذي بالاعلى ولذلك يتوجب حذف ال DOCTYPE من صفحاتك


الجميل هنا من مايكروسوفت هو دعمها الدائم لمنتجاتها حيث قامت عبر موقع http://streaming.live.com بتوفير استضافة خاصة مجانية للسيلفر لايت

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




ماذا عن الاصدار 1.1 لمن بدأ به


اذا كنت عزيزي القارئ تستخدم فيجوال ستوديو 2008 مع نسخة السيلفر 1.1 فدعني أخبرك بالفروقات والتي لن تأثر إطلاقا على عملك

1- دعم اضافي لمزايا WPF والموجودة أساسا في تطبيقات سطح المكتب كالاتصال بقواعد البيانات.
2- دعم إضافي لبعض أنظمة التشغيل وهذا يعني أيضا لبعض أنواع المتصفحات
3- دعم إضافي لبعض مكتبات الدوت نت السابقة .

وكما ترون دعم إضافي .. دعم إضافي

بمعنى أن كل شيء في الإصدار 1.0 سيكون ممكن في 1.1



يكفي للآن وسامحوني على التقصير وان شاء الله المرة القادمة تسعدون أكثر

[الثلج]

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

ولكن ما استوقفني قليلاً

<script id=”xaml” type=”text/xaml”>
<Canvas xmlns=”http://schemas.microsoft.com/client/2007”>
<MediaElement Name=”video” Source=”Lake.wmv” Opacity=”0” IsMuted=”true”/>
<Ellipse Width=”100” Height=”100”>
<Ellipse.Fill>
<VideoBrush SourceName=”video”/>
</Ellipse.Fill>
</Ellipse>
<TextBlock FontFamily=”Georgia” Foreground=”Blue” FontStyle=”Italic”
FontSize=”40” Canvas.Left=”125” Canvas.Top=”20” Text=”Great Estates”/>
<TextBlock Foreground=”Blue” Canvas.Left=”110” Canvas.Top=”70”
Text=”Luxurious Living at an Affordable Price”/>
<Path Stroke=”Red” StrokeThickness=”4”>
<Path.Data>
<PathGeometry>
<PathFigure StartPoint=”0,65”>
<ArcSegment SweepDirection=”Clockwise” Size=”2,2” Point=”25,65”/>
<ArcSegment SweepDirection=”Clockwise” Size=”2,2” Point=”50,65”/>
<ArcSegment SweepDirection=”Clockwise” Size=”2,2” Point=”75,65”/>
<ArcSegment SweepDirection=”Clockwise” Size=”2,2” Point=”100,65”/>
<LineSegment Point=”390,65”/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
</script>

لذا ارجوا منك التوضيح فهذه هي العقيه الكبرى في الـ silverlight اعتقد بالنسبة لي
هل كل ماكتبته جاهز وموجود ولا يمكن تغييره اما يمكنني انشاء ما اريد ولا اعتمد على مكتبات معينه وكيف سوف يفهمها المترجم

ملخص قولي من اين اتيت بهذه الruls التي كتبت بها وماهي وكيف لي ان اكتب لكي اعدل

شاكر لك ولتفننك في طرحك

[خليل سليم]

السلم عليكم

أخي الثلج مشكور لمتابعتك الدروس


هذا الكود الطويل هو كود زامل


لمعنى انك لو نسخت الكونفاس ورسمته سيظهر لك شكل

لا يجب ان تفهمه

فانت في غنى عنه قأنت ترسم والبليند يكتب هذا عنك

[الثلج]

أفهم من هذا اننا مازلنا في البدايه وسوف نفهم xaml فيما بعد عندما نبدأ في بناء مشاريع اكبر تضطر لكتابة هذا الكود بدلاً من رسمه مع توضيح أكبر للـ javascript و الـ xaml
فنحن لانحب الحقظ والمذكرات

اتمنى لو يكون الشرح مدعماً ولو ببعض الصور الصغيرة فهو مفيد جداً

وأرجوا الانتباه إلى " فهي تابعه لـ PDF
الشيء الآخر اعتقد انه مبهم بعض الشيء لذلك سوف ارفق المشروع لكي يكون اقرب للواقع للمستخدم

[الثلج]

كأني أرى ان سسة الدروس قد توقفت