البحث في الموقع

هذا أول درس من سلسلة "مدخل إلى ASP.net"، والتي سنحاول من خلالها تقريب منصة العمل ASP.net الخاصة بشركة Microsoft إلى المبتدئين، وهي مفصلّة إلى دروس، كل درس يتكلم عن موضوع معين، في هذا الدرس (الأول) سنتعلم كيف نستخدم عناصر التحكم الأساسية المضمنة في منصة العمل ASP.NET والتي لابد منها لإنشاء تطبيقات الانترنت، حيث سنتعلم كيف نعرض المعلومات باستخدام الأداتين Label ،Literal، وكيف نقبل ونتعامل مع دخل المستخدم من خلال الأدوات TextBox ،CheckBox ،RadioButton. عرض المعلومات منصة عمل ASP.NET تدعم أداتين لعرض البيانات النصية Label ،Literal ففي حين أن الأداة Literal تعرض البيانات بأسلوب بسيط، فإن الأداة Label تقدم العديد من المزايا والتنسيقات الإضافية. استخدام أداة التحكم Label نستخدم أدوات عرض المعلومات حتى نتمكن من تعديل النص المعروض على الصفحة وقت التنفيذ حيث نستطيع ببساطة أن نحدد النص المراد عرضه من خلال إسناده للخاصية Text لأداة Label، كما يمكن أن نستخدم تنسيقات html لتقوم هذه الأداة بتفسيرهم وتوليد الخرج المطلوب، وبشكل افتراضي تقوم هذه الأداة بإحاطة النص بالوسم <span>، في الكود التالي نعرض أساليب مختلفة لإسناد المعلومات لأدوات Label: كود ASP.net <div> <asp:Label ID="Label1" runat="server" Text="Hi i'm Label1" ></asp:Label> <br /> <asp:Label ID="Label2" runat="server" Text="Label"> Hi i'm Label2 </asp:Label> <br /> <asp:Label ID="Label3" runat="server" Text="<b><i>Hi i'm Label3</i></b>"> </asp:Label> </div> الأداة Label تدعم العديد من الخصائص لتنسيق النصوص، نستعرض منها: BackColor: تغيير لون الخلفية للأداة. BorderColor: تتعين لون لإطار يحيط بأداة Label. BorderStyle: تحديد نمط الإطار الذي سيتم عرضه، يمكن أن تأخذ هذه الخاصية أحد القيم التالية: NotSet، None، Dotted، Dashed، Solid، Double، Groove، Ridge، Inset،، Outset. BorderWidth: تحديد ثخانة الإطار. CssClass: تحديد صف CSS يتم تطبيقه على هذه الأداة. Font: تحديد نوع الخط المستخدم. ForeColor: تحديد لون الخط. Style: لتطبيق تصميم معين على أداة Label. ToolTip: نص يتم عرضه كتلميح عند مرور الماوس على أداة Label. عادة ما يتم استخدام الأداة Label لعرض عناوين لأدوات أخرى لمساعدة المستخدم على القيام بعمله، وبالتالي فإن هذه الأداة تملك الخاصية AssociatedControlID لتحديد الأداة المرتبطة بها وينصح باتسخدام هذه الخاصية بشكل عام. استخدام أداة التحكم Literal تعمل هذه الأداة بشكل مشابه جدا لعمل الأداة Label إلا أنها لاتقوم بإحاطة النص بالوسم <span> وهذا ماقد نحتاجه في بعض المواقع التي لايمكن فيها ترجمة أكود html ( كتحديد عنوان الصفحة على المتصفح مثلا )، وبما أن هذه الأداة لاتدعم الوسم <span> فهي أيضا لاتدعم الخصائص التابعة له CssClass ،BackColor، الأداة Literal تدعم خاصية هامة وغير مدعومة بالأداة Label وهي الخاصية Mode حيث يمكنها أن تأخذ أحد القيم الثلاث التالية: PassThrough: تفسير رموز html الموجدوة في النص وعرض ماتعنيه. Encode: عرض النص بدون ترجمة رموز html حيث تظهر كما هي. Transform: يتم تفسير فقط الرموز المدعومة من قبل الجهاز الطالب للصفحة. كود ASP.net <div> <asp:Literal ID="L1" runat="server" Mode="PassThrough" Text="<hr />"/> <asp:Literal ID="L2" runat="server" Mode="Encode" Text="<hr />"/> <asp:Literal ID="L3" runat="server" Mode="Transform" Text="<hr />"/> </div> عند تنفيذ الصفحة السابقة تقوم Literal1 بعرض خط أفقي، Literal2 تعرض النص </hr> في حين أن Literal3 تفحص الجهاز الطالب للصفحة فإن كان يدعم هذا الوسم فإنه يعرض خط أفقي وإلا فسيتم عرض النص كما هو </ hr>. قبول دخل المستخدم تتضمن منصة عمل ASP.NET أدوات تسمح للمستخدم بإدخال وتحديد اختياراته في الموقع، حيث تقدم ثلاث أدوات أساسية هي TextBox ،CheckBox ،RadioButton و سنتعرف عليهم في الفقرات التالية بالتفصيل. استخدام أداة التحكم TextBox تسمح هذه الأداة للمستخدم بإدخال نص وفقا ً لثلاثة أنماط تحددها قيمة الخاصية TextMode وهم: SingleLine: قبول الدخل كسطر واحد فقط. MultiLine: قبول الدخول بأسطر عديدة. Password: حيث يظهر دخل المستخدم كرموز ( نجوم *** أو غيره ). كود ASP.net <div> <asp:TextBox ID="TextBox1" runat="server" TextMode="SingleLine"/> <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" /> <asp:TextBox ID="TextBox3" runat="server" TextMode="Password" /> </div> خصائص الأداة TextBox: AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة. AutoCompleteType: تحديد نمط الإكمال التلقائي حيث يكفي أن يدخل المستخدم بضعة حروف حتى يتم إظهار كلمات مطابقة تم إدخالها مسبقاً، يمكن إلغاء تفعيل هذه الخاصية بإسناد القيمة Disabled لها. AutoPostBack: إرسال المحتويات إلى السيرفر بشكل فوري عند أي تغير بالنص المدخل. Columns: تحديد عدد الأعمدة التي ستظهر. Enabled: تفعيل أو إلغاء تفعيل هذه الأداة. MaxLength: تحديد العدد الأعظمي من المحارف التي يمكن إدخالها ( لاتعمل مع MulitLine). ReadOnly: لمنع المستخدم من تغيير القيمة الموجودة بـ TextBox. Rows: تحديد عدد الأسطر التي ستظهر. TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab. Warp: لتحديد إمكانية الالتفاف التلقائي للنص مع النمط MultiLine. أداة التحكم TextBox تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تدعم الحدث TextChanged والذي يُطلق عندما تتغير محتويات هذه الأداة. لتوضيح آلية عمل الخاصية AutoPostBack أنشئ صفحة جديدة أضف لها TextBox1 وأعطي الخاصية السابقة القيمة True ثم أضف Lable1 ماسنقوم به هو أنه عند كتابة نص ما فإنه سيعرض في الأداة Label1 بمجرد نقل التركيز خارج TextBox1 وهو دليل على عمل postBack آلي للصفحة، أي إرسالها للسيرفر وإعادة النتائج: كود ASP.net <div> <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" ontextchanged="TextBox1_TextChanged"></asp:TextBox> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> في الحدث TextChanged الخاص بالأداة TextBox1 اكتب الكود التالي: كود #C protected void TextBox1_TextChanged(object sender, EventArgs e) { Label1.Text = TextBox1.Text; } كود VB Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TextBox1.TextChanged Label1.Text = TextBox1.Text End Sub نفذ الصفحة واكتب ماتريد في TextBox1 ثم اضغط على المفتاح Tab من لوحة المفاتيح وشاهد النتيجة، أغلق المستعرض ثم أعد التنفيذ مرة أخرى وقم بكتابة أول حرف من القيمة التي أدخلتها بالتنفيذ الأول لترى كيف تتم عملية الإكمال التلقائي، ألغي تفعيل خاصية الإكمال التلقائي كما هو موضح بالأعلى ثم أعد التنفيذ وأعد كتابة نفس الكلمة لتلاحظ توقف عمل الإكمال التلقائي. استخدام أداة التحكم CheckBox تسمح هذه الأداة للمستخدم أن يحدد قبوله أو رفضه لأمر ما، أي أنها تعتبر كسؤال يطرح على المستخدم والإجابة حتما ً إما نعم أو لا، مثلا موقع فيسبوك يسألنا إن كنا نريد استقبال رسائل على بريدنا الإلكتروني أم لا، حيث إن الخاصية Checked هي التي تمكننا من معرفة خيار المستخدم كما سنرى بعد قليل. خصائص أداة التحكم CheckBox: AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة. AutoPostBack: إرسال خيار التحديد إلى السيرفر بشكل فوري عند أي تغير بحالته. Checked: تعود بـ True أو False بحسب قبول المستخدم أو رفضه. Enabled: تفعيل أو إلغاء تفعيل هذه الأداة. TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab. Text: تحديد النص الذي يظهر بجانب هذه الأداة ( السؤال المطروح ). TextAlign: موضع النص بالنسبة للأداة، على يمينها أم يسارها تأخذ إحدى القيمتين Left ،Right. أداة التحكم CheckBox تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تُطلق الحدث CheckedChanged عند تغيير المستخدم لخياره سواءاً بالرفض أو القبول. مثال بسيط: أنشئ صفحة جديدة أضف لها الأدوات CheckBox1 ،Button1 ،Label1 أنقر على الزر Button1 مرتين واكتب الكود التالي: كود #C protected void Button1_Click(object sender, EventArgs e) { Label1.Text = CheckBox1.Checked.ToString(); } كود VB Protected Sub Button1_Click1(ByVal sender As Object، ByVal e As System.EventArgs) Handles Button1.Click Label1.Text = CheckBox1.Checked.ToString() End Sub نفذ وقم تحديد خيار CheckBox ثم اضغط على الزر، سترى أن الخاصية Checked أعادت True، ألغي تفعيل الخيار واضغط على الزر مرة أخرى. ماهي النتيجة الآن ؟ كود الصفحة بعد إجراء تعديلات بسيطة بالخصائص كالتالي: كود ASP.net <div> <asp:CheckBox ID="CheckBox1" runat="server" Text="استقبال رسائل على الجوال ؟ " TextAlign="Left"/><br /> <asp:Button ID="Button1" runat="server" Text=" ok " onclick="Button1_Click" /><br /> <asp:Label ID="Label1" runat="server" Text="" /> </div> ملاحظة: منصة عمل ASP.Net تدعم الأداة CheckBoxList والتي تتيح إماكانية عمل قائمة عناصرها عبارة عن أدوات CheckBox كما سنرى في درس لاحق. استخدام أداة التحكم RadioButton لا تظهر هذه الأداة منفردة لوحدها إنما تكون دائما ً ضمن مجموعة حيث بإمكان المستخدم تحديد خيار واحد فقط من ضمن أدوات مجموعة ما. خصائص أداة التحكم RadioButton: AccessKey: لتحديد مفتاح من لوحة المفاتيح عند الضغط عليه يتم نقل التركيز لهذه الأداة. AutoPostBack: إرسال خيار التحديد إلى السيرفر بشكل فوري عند أي تغير بحالته. Checked: تعود بـ True أو False بحسب قبول المستخدم أو رفضه. Enabled: تفعيل أو إلغاء تفعيل هذه الأداة. GroupName: لضم أداة RadioButton إلى مجموعة، من كل مجموعة لايمكن تحديد سوى خيار واحد فقط من أدوات RadionButton الموجودة فيها. TabIndex: تحديد رقم يدل على ترتيب الوصول لهذه الأداة عبر مفتاح Tab. Text: تحديد النص الذي يظهر بجانب هذه الأداة ( الخيار المطروح ). TextAlign: موضع النص بالنسبة للأداة، على يمينها أم يسارها تأخذ إحدى القيمتين Left ،Right. أداة التحكم RadioButton تدعم الطريقة Focus التي تسمح بوضع التركيز عليها عند التنفيذ، كما أنها تُطلق الحدث CheckedChanged عند تغيير المستخدم لخياره. سنقوم بالمثال التالي بعرض بسيط لكيفية عمل هذه الأداة، أنشئ صفحة جديدة أضف عليها الأدوات التالية: RadioButton عدد 3، button ،Label، نعدل الخاصية Text لأدوات RadioButton بحيث تعرض كل أداة لون معين، كما يجب ( وهذا هام جدا) أن تأخذ الأدوات الثلاث السابقة نفس قيمة الـ GroupName، نضغط على الزر مرتين ونكتب الكود التالي: كود #C protected void Button1_Click(object sender, EventArgs e) { string color = ""; if (RadioButton1.Checked) color = RadioButton1.Text; if (RadioButton2.Checked) color = RadioButton2.Text; if (RadioButton3.Checked) color = RadioButton3.Text; Label1.Text = "Your Favorite color is: " + color; } كود VB Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click Dim color As String = "" If RadioButton1.Checked Then color = RadioButton1.Text End If If RadioButton2.Checked Then color = RadioButton2.Text End If If RadioButton3.Checked Then color = RadioButton3.Text End If Label1.Text = "Your Favorite color is: " + color End Sub أما كود الصفحة فهو كالتالي: كود ASP.net <div> Favorite color ?<br /> <asp:RadioButton ID="RadioButton1" runat="server" Text="Red" GroupName="colors"/><br /> <asp:RadioButton ID="RadioButton2" runat="server" Text="Green" GroupName="colors"/><br /> <asp:RadioButton ID="RadioButton3" runat="server" Text="Blue" GroupName="colors"/><br /> <asp:Button ID="Button1" runat="server" Text=" ok " onclick="Button1_Click" /> <br /> <asp:Label ID="Label1" runat="server" Text=""/> </div> قم بحذف الخاصية GroupName من الكود السابق ونفذ وجرب أن تختار أكثر من لون. ملاحظة: منصة عمل ASP.Net تدعم الأداة RadioButtonList والتي تتيح إماكانية عمل قائمة عناصرها عبارة عن أدوات RadioButton كما سنرى في درس لاحق. بهذا نكون قد وصلنا إلى نهاية الدرس الأول. سنتطرق في الدرس القادم إلى كيفية إرسال بيانات النماذج إلى الخادوم بواسطة أدوات الأزرار المتنوعة.

يُسهل وورد إنشاء أنواع عديدة من الملصقات وطباعتها بشكل مفرد أو مجاميع. يمكنك مثلا إنشاء ملصقات التسعير، الملصقات البريدية، ملصقات أقراص CD/DVD أو غيرها. وباستخدام القوالب الجاهزة template ستصبح هذه العملية أسهل بكثير وتختصر الكثير من الوقت. في هذا الدرس سنقوم بإنشاء ملصقات بريدية كمثال، تنسيقها، وطباعتها. كما سنتعرف على كيفية إنشاء قوالب ملصقات بإبعاد مخصصة. لإنشاء ملصق اذهب إلى تبويب مراسلات Mailings، ومن خانة إنشاء Create اختر تسميات (ملصقات) Labels: في مربع الحوار Envelopes and Labels انقر خيارات Options: من مربع خيارات التسمية يمكنك التحكم بالعديد من الخيارات كنوع الطابعة، ومعلومات الملصق: من معلومات الطابعة Printer information اختر نوع الطابعة التي ستستخدمها لطباعة الملصقات.من معلومات التسمية Label information ومن مربع مورد التسميات Label vendor اختر اسم الشركة المصنعة للملصقات التي تستخدمها. توجد العديد من الشركات في القائمة، وسنقوم باختيار Microsoft كمثال.بعد اختيار اسم الشركة اختر رقم المنتج Product number المدرج على حافظة أوراق الملصقات التي تستخدمها. إن رقم المنتج هو عبارة عن قالب جاهز يمكنك استخدامه دون الحاجة إلى إدخال قياسات محددة. وإن لم تجد القالب الذي يتطابق مع قياسات الملصقات التي تستخدمها يمكنك إنشاء قالب مخصص كما سنوضح لاحقا في هذا المقال. سنقوم باختيار 30 per page.بعد تحديد الخيارات والقالب المناسب لأوراق الملصقات التي تستخدمها انقر موافق OK. الخطوة التالية هي كتابة العنوان أو أي محتوى آخر في مربع Address: عند الانتهاء من كتابة العنوان (أو أي محتوى آخر) يمكنك طباعة ورقة كاملة من نفس الملصق من خيار Full page of the same label، أو طباعة ملصق واحد Single label. كما يمكنك طباعة الملصقات مباشرة من أمر Print أو تصديرها إلى مستند من أمر New Document. والخيار الأخير يستخدم في حالة تنسيق الملصقات قبل الطباعة. سنقوم بطباعة ورقة كاملة من نفس الملصق وتصديرها إلى مستند جديد أولا: بعد فتح المستند الجديد الذي يحتوي على جدول الملصقات اذهب إلى: ملف File > طباعة Print إذا لم تكن ترغب في إجراء تنسيقات معينة. من نافذة الطباعة اختر نوع الطابعة، وشاهد المعاينة لمعرفة كيف ستبدو الملصقات عند طباعتها، ثم انقر Print. إما إذا لم تكن لديك ورقة كاملة من الملصقات، وتبقى لديك ملصق واحد فيها، حدّد الخيار Single label، ثم أدخل رقم الصف ورقم العمود الذي يوجد في الملصق على الورقة وانقر طباعة Print: استخدام دمج المراسلات لإنشاء ملصقات متعددةفي المثال السابق قمنا بإنشاء ملصقات بريدية لنفس المستلم، أي قائمة من الملصقات المتشابهة. أما إذا أردت إنشاء قائمة من الملصقات لعدة مستلمين يمكنك إدخال أسماء المستلمين وعناوينهم يدويا، أو استخدام دمج المراسلات Mail Merge. لإنشاء ملصقات مختلفة اتبع الخطوات التالية: من تبويب مراسلات Mailing انقر بدء دمج المراسلات Start mail Merge ثم اختر تسميات Labels: في مربع خيارات التسميات قم بتحديد خيارات الطابعة ونوع القالب كما فعلنا في المثال السابق، ثم انقر موافق: سيقوم وورد بإدراج جدول ملصقات فارغ. لعرض الجدول اذهب إلى التبويب السياقي تخطيط Layout وانقر عرض خطوط الشبكة View Gridlines: الخطوة التالية ستكون إدخال أسماء المستلمين وعناوينهم. من تبويب مراسلات Mailings انقر تحديد المستلمين Select Recipients واختر كتابة قائمة جديدة Type a New List: في مربع قائمة عناوين جديدة ابدأ بإضافة تفاصيل العناوين. يمكنك إدخال العدد الذي تريده من المستلمين. وللاختصار استخدم المفتاح Tab للانتقال إلى اليمين، أو المفتاحين Tab+Shift للرجوع إلى اليسار. بعد أن تنتهي من إدخال تفاصيل عنوان المستلم الأول انقر إدخال جديد New Entry للانتقال إلى المستلم التالي: عندما تنتهي من إضافة المستلمين انقر موافق OK، اكتب اسم القائمة واحفظها. ملاحظة: الأسماء والعناوين في هذه القائمة وهمية استخدمت للتوضيح فقط. بعد إنشاء جدول الملصقات الفارغ وقائمة المستلمين، استخدم كتلة العنوان لتنسيق طريقة عرض العنوان. من تبويب مراسلات انقر كتلة العنوان Address Block: من مربع إدراج كتلة العنوان يمكنك تغيير تنسيق عرض الأسماء، إدراج اسم الشركة أو عدم إدراجه Insert Company Name، إدراج اسم البلد حسب شرط معين أو عدم إدراجه Insert postal address، أو تنسيق العنوان حسب البلد. يمكنك مشاهدة معاينة للتنسيق من خانة المعاينة واستخدام الأسهم للتنقل بين العناوين المختلفة: بعد الانتهاء من تنسيق طريقة عرض العناوين تأكد من العودة إلى أول عنوان (أي إلى الرقم 1في خانة المعاينة كما موضح في الصورة أدناه) بعدها انقر موافق OK. ستتم إضافة كتلة العنوان الأولى في الحقل الأول. لإضافة باقي عناوين القائمة انقر تحديث الملصقات Update Labels، ثم معاينة النتائج Preview Results لمشاهدة العناوين في الحقول: إذا كانت العناوين جاهزة ولا تحتاج إلى تنسيق قم بطباعتها من: ملف File > طباعة Print قد تتساءل لماذا قمنا بإضافة قائمة بالرغم من أنّ كتابتها يدويا في الحقول تستغرق نفس الوقت؟ والسبب هو أنّك عندما تقوم بإنشاء قائمة عناوين المستلمين بهذه الطريقة ستتمكن من الرجوع إليها كلما احتجتها. كل ما عليك فعله هو اختيار Use an Existing List من أمر تحديد المستلمين Select Recipients واستخدامها مجددا دون أن تضطر لإعادة الكتابة. تنسيق الملصقات وإضافة صورةهناك العديد من الخيارات لتنسيق الملصقات قبل طباعتها، كتعديل قائمة المستلمين، تنسيق النصوص، أو إضافة صورة. إذا كان العنوان لا يظهر كاملا كما في المثال أدناه: قم بتحديد محتويات الحقل الأول بالكامل، اذهب إلى تبويب الصفحة الرئيسية Home واختر Line Spacing Option من أمر تباعد الأسطر: في خانة التباعد قم بتغيير قيمة At إلى 0.5، ثم انقر موافق: سيتم تقليل التباعد بين الأسطر، وبذلك سيظهر العنوان كاملا. انقر تحديث التسميات Update Labels لتطبيق هذا التغيير على كافة الحقول: من نفس التبويب يمكنك استخدام تنسيقات النصوص الأخرى كاللون، الحجم، والسُمك. قد ترغب في إزالة بعض المستلمين من قائمة الملصقات (دون حذفها من القائمة الأصلية)، بإمكانك فعل ذلك عن طريق أمر تحرير قائمة المستلمين Edit Recipients List. قم بإلغاء تحديد المستلمين الذين لا ترغب في طباعة عناوينهم. كما يمكنك استخدام أوامر الفرز والتصفية: أما إذا رغبت في التعديل على القائمة الأصلية بتغيير عناوين المستلمين، حذف عناوين محددة، أو إضافة مستلمين آخرين، حدد اسم القائمة في خانة مصدر البيانات Data Source وانقر تحرير Edit: يمكنك أيضا تعديل كتلة العناوين إذا رغبت في تغيير طريقة عرض العناوين. انقر على كتلة العنوان Address Block واجر التعديلات المرغوبة. تأكد فقط العودة إلى أول عنوان في خانة المعاينة قبل أن تنقر موافق. وبما أن البرنامج يقوم بترتيب الملصقات بصيغة جدول، يمكنك استخدام خيارات الجدول من التبويبين السياقيين تخطيط Layout، وتصميم Design. يمكنك مثلا توسيط النصوص داخل الحقول من تبويب تخطيط: بعد إجراء تعديل على أحد الحقول، انقر تحديث التسميات Update Labels لتطبيقها على الحقول الأخرى. لكن تجنب أن تغير أبعاد هوامش الحقول أو الخيارات المحاذاة، لأن ذلك سيؤثر على محاذاة النصوص مع الملصقات عند طباعتها. لإدراج صورة أو شعار مع العناوين، ضع المؤشر في بداية النص في الحقل الأول، ومن تبويب إدراج Insert انقر صورة Picture. اختر الصورة من جهازك، وانقر إدراج: بعد إدراج الصورة انقر على أيقونة التخطيط التي تظهر بجانبها، واختر مربع Square لتتمكن من تحجيم الصورة وتغيير موضعها: قم بتغيير حجم الصورة إلى حجم مناسب، وغير موضعها بتحريكها بجانب النص. بعد الانتهاء من إدراج الصورة في الحقل الأول، انقر تحديث المسميات Update Labels لإضافتها إلى جميع الحقول الأخرى: بعد إجراء جميع التنسيقات المرغوبة قم بطباعة الملصقات من: ملف File > طباعة Print خيارات الملصقات الأخرىليست الملصقات البريدية هي الوحيدة التي يمكنك إنشاءها في وورد. يمكنك إنشاء مختلف الملصقات كملصقات الشحن، ملصقات التسعير، البطاقات التعريفية اللاصقة وغيرها. سنقوم مثلا بإنشاء بطاقات تعريفية لاصقة من أحد القوالب الموجودة في خيارات التسميات. من تبويب مراسلات Mailings ننقر بدء دمج المراسلات Start Mail Merge ونختار تسميات Labels. من خيارات التسمية نحدد الخيارات المرغوبة ونختار القالب من خانة رقم المنتج Product Number: الخطوة التالية بعد إدراج الحقول هي إضافة المعلومات على البطاقات. سنستخدم قائمة المستلمين التي قمنا بإنشائها سابقا لاستيراد الأسماء منها، إذ أنها عبارة عن قاعدة بيانات يمكن استخدمها لأكثر من غرض وليس إنشاء ملصقات بريدية فقط. من أمر تحديد المستلمين سنختار Use Existing List: سنحدد القائمة وننقر فتح Open: الخطوة التالية هي إضافة معلومات البطاقة. لن نقوم بعمل كتلة عناوين، فهي تستخدم للملصقات البريدية والظروف. سنقوم بإدراج حقول يدويا لتحديد المعلومات التي نرغب في إضافتها إلى البطاقة. سنقوم أولا بإظهار علامة الفقرات من تبويب الصفحة الرئيسية Home لكي يكون تحديد النصوص سهلا: في الحقل الأول سننزل بضع سطور لإضافة الاسم في الوسط. ومن أمر إدراج حقل دمج Insert Merge Field سنقوم بإدراج الاسم الأول First_Name، ثم مسافة ثم الاسم الأخير Last_Name: وسننزل سطر آخر لإدراج اسم المدينة مثلا: سننقر تحديث التسميات Update Labels ثم معاينة النتائج Preview Results: وأخيرا سنقوم بعمل تنسيقات على البطاقة كتكبير حجم النص وتوسيطه، وإضافة خلفية للبطاقة. لإضافة الخلفية سنضع المؤشر قبل السطر الأول في الحقل الأول، ومن تبويب إدراج Insert سنحدد صورة Picture: من خيارات تخطيط الصورة سنقوم باختيار خلف النص Behind Text: ومن خيارات تصحيحات الصورة Corrections، اللون Color، والتأثيرات الفنية Artistic Effects سنحدد خيارات تجعل لون الصورة باهتا لكيلا تؤثر على تباين النصوص: بعد الانتهاء من جميع التنسيقات سننقر تحديث التسميات Update Labels لتطبيق التغييرات على جميع الحقول: بعد الانتهاء من إنشاء الملصقات قم بطباعتها من: ملف File > طباعة Print (أو استخدم الاختصار Ctrl+P). القوالب المخصصةفي بعض الأحيان لا تعثر على القالب المناسب لنوع الملصقات التي تستخدمها ضمن قائمة خيارات التسميات. ولحل هذه المشكلة ابحث في خانة رقم المنتج Product Number عن قالب بأبعاد مقاربة لأبعاد الملصقات التي تستخدمها. استفد من خانة معلومات التسمية لمعرفة أبعاد القالب: بعد العثور على قالب بأبعاد مقاربة انقر تسمية جديدة New Label: يحتوي مربع الحوار تفاصيل التسمية Label details على جميع أبعاد الملصق، ويوضح من خلال المخطط في خانة معاينة Preview ما يعنيه كل قياس. يمكنك تغيير القيم لمعرفة ما تعنيه القياسات من خلال المعاينة. قم بقياس أبعاد منتج الملصقات الذي تستخدمه بدقة، وقم بإدخال هذه الأبعاد في حقولها المخصصة. بعدها قم بتسمية القالب الجديد وانقر موافق OK. ستتم إضافة القالب إلى قائمة مخصصة other/custom في خيار مورد التسمية Label vendor وهو جاهز للتعديل والطباعة:

سوف نتطرق في هذا الدرس إلى كيفية تنسيق وتخصيص عناصر <"input type="file> بالطريقة الصحيحة والسليمة وباستعمال العنصر <label> وبعض الجافاسكربت. معاينة النتيجة النهائية. يمكنك تحميل الشيفرة المصدرية للأمثلة من هنا. هناك العديد من الطرق لتخصيص العنصر <"input type="file> وقد جربت العديد منها ولكنها لم تعجبني ولم تُلبّي متطلباتي. لذلك حاولت البحث في Google ولكني لم أجد مبتغاي. وبعد أن فقدت الأمل وظننت أنني لن أجد ما أبحث عنه وقعت عيني بالصدفة على أحد التعليقات الموجودة في موقع StackOverflow، وكان ذلك التعليق يحتوي على كلمة "<label>" وكان ذلك بداية الخيط وأعتقد أنّه ما كنت أبحث عنه. وكما تعلمون فالنقر على عنصر label يؤدي إلى تفعيل أحد عناصر <input> مرتبطة به، ومما يثير الاهتمام أنّه إذا كان ذلك العنصر عبارة عن <"input type="file> فإنّ النقر على الـlabel المرتبطة به يؤدي إلى فتح متصفح الملفات وهذا هو الحل المثالي الذي كنت أبحث عنه. <input type="file" name="file" id="file" class="inputfile" /> <label for="file">Choose a file</label>أي أنّ النقر على أي واحد من هذين العنصرين (<label> أو <"input type="file>) سوف يعطي نفس النتيجة وهي فتح متصفح الملفات، وهذا يعني أنّ أصعب جزء قد تم حلُّه. لن نحتاج إلى جافاسكربت أو حلول معقدة، كل ما نحتاجه هو السطرين البرمجيين الموجودين في الأعلى. أنظر إلى الصورة في الأسفل. دعونا الآن نقوم بتنسيق العناصر حتى تبدو وكأنّنا نملك زرا عاديا. إخفاء عنصر <input>في البداية يجب علينا إخفاء العنصر <input>، وسوف تتكفل الخاصيتين display: none أو visibility: hidden بذلك. لماذا نريد إخفاءه؟ لأنّ قيمة المُدخل (input) لن يتم ارسالها إلى الخادوم عندما نقوم بعمل تسليم (submit) للنموذج. والسبب الثاني هو أننا لا نريد أن يتم تحديد ذلك العنصر عندما يقوم الزائر بتصفح الموقع باستعمال الزر tab الموجود على لوحة المفاتيح (لأننا نريد لموقعنا أن يكون قابل للوصول accessible). وبناءً على ذلك قمت باستعمال تنسيقات CSS التي تراها في الأسفل التي سوف تعمل على إخفاء العنصر عن أنظارنا ولكنه سيبقى مرئي بالنسبة للمتصفح نفسه: .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }قد تتسائل لماذا وضعنا القيمة 0.1px لكل من العرض والارتفاع وليس 0px. يعود السبب في ذلك إلى أنّه إذا أعطينا عنصر ما عرض وارتفاع بقيمة 0px فإنّنا لن نتمكن من استخدام زر tab على تلك العناصر في بعض المتصفحات. وأمّا بالنسبة للخاصية position: absolute فقد استخدمناها حتى نمنع أن يتداخل العنصر مع العناصر الأخرى. تنسيق العنصر <label>بما أنّ العنصر <label> هو الزر افتراضيًا فإننا نستطيع تنسيق هذا العنصر كما نريد. سنقوم بشيء بسيط هنا ولن نجعل التنسيقات معقدة: .inputfile + label { font-size: 1.25em; font-weight: 700; color: white; background-color: black; display: inline-block; } .inputfile:focus + label, .inputfile + label:hover { background-color: red; }الوصولية (accessibility)كيف يمكنك أن تعرف بأنّ أحد عناصر الصفحة قابل للنقر عليه؟ هناك شيئان يدلان على ذلك، الأول هو أنّ العنصر يجب أن يظهر عليه ذلك، بحيث يعطيك شعورًا بأنّه يمكنك النقر عليه أو استعمال زر tab، والثاني هو أنّه يجب أن يتغير مؤشر الفأرة إلى شيء مناسب عندما تقوم بوضع مؤشر الفأرة عليه. وبما أننا قمنا بفعل الشيء الأول سابقًا (من خلال التنسيقات الموجودة في الأعلى) فسوف نهتم بالشيء الثاني (تغير مؤشر الفأرة عند وضعه عليه) باستعمال بعض الأكواد البسيطة: .inputfile + label { cursor: pointer; /* "hand" cursor */ }أنظر إلى الصورتين التاليتين ولاحظ أنّ في الصورة الأولى لا يتغير مؤشر الفأرة على عكس الصورة الثانية التي يتغير فيها مؤشر الفأرة عند وضعه على العنصر ليعطي انطباعًا بأنّ هذا العنصر قابل للنقر. التصفح/التنقل باستخدام لوحة المفاتيحإن كان زوار موقعك لا يستطيعون تصفح موقعك باستخدام لوحة مفاتيح فقط فتأكد حينها أنّك تقوم بشيء خاطئ ويجب عليك اصلاحه. وقد كان إخفاء عنصر <input> بطريقة صحيحة هو أحد الأشياء الجيدة لتحسين تجربة المستخدم، وأمّا الشيء الآخر هو أن تُعطي للمستخدم انطباعًا ما بأنّ العنصر قد أصبح في حالة focus (يُصبح العنصر في حالة focus عند التصفح باستخدام زر tab في لوحة المفاتيح، وبالتالي نستطيع استخدام الفئة الزائفة focus: على ذلك العنصر): .inputfile:focus + label { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; }تُستخدم القيمة webkit-focus-ring-color auto 5px من أجل الحصول على المظهر الإفتراضي للخط الخارجي (outline) في متصفحات Chrome، Opera وSafari. وبالنسبة للقيمة 1px dotted #00 فهي موجودة فقط للمتصفحات التي لا تفهم -webkit-. مشاكل متعلقة باللمس (touch)إذا كنت تستخدم FastClick (وهي مكتبة للتخلص من الإيقاف المؤقت للنقر والذي مُدته 300ms في الأجهزة التي تعمل باللمس) وكنت تنوي إضافة عناصر إضافية داخل العنصر <label>، فإنّ الزر لن يعمل كما يجب إلا إذا استخدمت الخاصية pointer-events: none: <label for="file"><strong>Choose a file</strong></label>.inputfile + label * { pointer-events: none; } تحسين بعض الأمور باستخدام الجافاسكربتبقي علينا شيء واحد يجب فعله وهو إظهار إذا ما كان هناك ملفات تم اختيارها أم لا. ومع أنّ العنصر <"input type="file> يُظهر ذلك عادةً إلا أننا قمنا بإخفائه إن كنت تذكر، ولكن لحسن حظنا فهناك طريقة لفعل ذلك باستخدام الجافاسكربت بحيث نجعل نص الـlabel هو اسم الملف المُختار، وإذا كان هناك عدة ملفات فإنّ نص الـlabel يصبح عدد تلك الملفات: <input type="file" name="file" id="file" class="inputfile" data-multiple-caption="{count} files selected" multiple />var inputs = document.querySelectorAll( '.inputfile' ); Array.prototype.forEach.call( inputs, function( input ) { var label = input.nextElementSibling; labelVal = label.innerHTML; input.addEventListener( 'change', function( e ) { var fileName = ''; if( this.files && this.files.length > 1 ) fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length ); else fileName = e.target.value.split( '\\' ).pop(); if( fileName ) label.querySelector( 'span' ).innerHTML = fileName; else label.innerHTML = labelVal; }); });قمت أيضًا بكتابة أكواد jQuery تقوم بنفس العمل، لذلك تأكد من أن تتصفح الملف المصدري إن كنت تفضل استخدام jQuery. توضيح بسيط للأكواد الموجودة في الأعلى:وجود الصفة multiple في عنصر <input> يسمح للمستخدم بأن يختار أكثر من ملف مرة واحدة. أمّا الصفة data-multiple-caption فهي تستخدم للتعبير عن الرسالة التي تريد أن تظهر للمستخدم عندما يقوم باختيار عدة ملفات. وبالنسبة للعبارة { count } فهي اختيارية وسوف يتم استبدالها برقم يُعبّر عن عدد الملفات المُختارة.الصفة multiple غير مدعومة في متصفح Internet Explorer 9 أو أقل ولا حتى الخاصية files الخاصة بالجافاسكربت، ولذلك سوف نعتمد على value. وبما أنّها عادةً تحتوي على قيمة بالصيغة C:\fakepath\filename.jpg فإنّ ()split( '\\' ).pop تقوم باستخراج اسم الملف.من المثير للاهتمام أنّه يمكنك إلغاء قيمة من المدخلات عن طريق الضغط على زر ESC عندما تكون نافذة تصفح الملفات مفتوحة، وهذا متاح فقط في متصفحي Chrome وOpera. ولهاذ استخدمنا المتغير labelVal لتخزين القيمة الافتراضية للـlabel وإرجاعها عند الحاجة لذلك.سوف تكون النتيجة النهائية كما في الصورة: ولكن ماذا لو كانت الجافاسكربت غير مفعلة؟بما أنّه لا يوجد طريقة أخرى غير الجافاسكربت لمعرفة إذا ما قام المستخدم باختيار ملف أم لا، فإنّه من الأفضل الاعتماد على المظهر الافتراضي لمُدخِل الملفات من أجل سهولة الاستخدام. لذلك كل ما علينا فعله هو إضافة class باسم "no-js" للعنصر <html> ومن ثم نستخدم الجافاسكربت لاستبداله بالاسم "js" وبهذه الطريقة نعرف إذا كان الجافاسكربت مفعلًا أم لا. <html class="no-js"> <head> <!-- remove this if you use Modernizr --> <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script> </head> </html>وهذه تنسيقات CSS: .js .inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } .no-js .inputfile + label { display: none; } خطأ في متصفح Firefoxإنّه لمن المفاجئ معرفة أنّ متصفح Firefox يتجاهل input[type="file"]:focus بينما تعمل :hover و:active بشكل جيد. ولكن لحسن الحظ فإنّ هذا المتصفح يسمح لنا بالتعرف على حالة focus باستخدام الجافاسكربت، لذلك فإنّ الحل هو إضافة class للعنصر <input> ليسمح لنا بالتحكم بحالة الـfocus: input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); }); input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });.inputfile:focus + label, .inputfile.has-focus + label { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px; } خاتمةإلى هنا نكون قد وصلنا إلى نهاية هذا الدرس. لذلك تأكد بأن تطلع على الشفرة المصدرية وعلى المعاينات وأن تقوم بالتعديل عليها لتتناسب مع احتياجاتك وذوقك. كما أنّ لديك الحرية الكاملة في استخدام الشفرات الموجودة في هذا الدرس في مشاريعك القادمة. ترجمة -وبتصرّف- للمقال Styling & Customizing File Inputs the Smart Way لصاحبته Osvaldas Valutis.