(8-5) العمل مع الصور و مكونات الجرافيك

بإمكانك عرض الصور و مكونات الجرافيك الخاصة بمنتجاتك في صفحات الـ JSF . هناك بعض الصور التي سنستخدمها في الـ startup application .
لتمد صفحة الـ JSF بالصور قم بالآتي :

1- بالعودة إلى الـ JDeveloper وفي التبويب Product Details اضغط بزر الماوس الايمن على الحقل cost ثم اختر Convert .

t30101

في المربع الحواري Convert اختر Input Number Spinbox ثم اضغط Ok ثم Ok في مربع تأكيد التحويل .

2- لاحظ أن حقل الصورة كان قد تم إعداده كحقل نصي . لكي تكون قادر على أن تعرض الصورة تحتاج لتحويل نوع الحقل .
في التبويب
Product Details اضغط بزر الماوس الايمن على الحقل image واختر Convert .

t30102

في المربع الحواري Convert اختر Image ثم اضغط Ok ثم Ok في مربع تأكيد التحويل .

t30102b

3- مازلنا في حقل الـ image الذي أنشأناه ، وفي الـ Property Inspector اضغط على السهم المجاور للحقل source ثم اختر Expression Builder .

t30103

4- وفي المربع الحواري Expression Builder اختر :
ADF Bindings | bindings | image | inputValue ، ثم اضغط Ok .

t30104

5- في الـ Structure pane وتحت المكون image ، احذف المكون validator لإلغاء الخطأ الذي الظاهر في صفحة التصميم .

t30105

6- في التبويب Product Details اضغط بزر الماوس الأيمن على الحقل rating واختر Convert .

t30106

في المربع الحواري Convert اختر Input Number Slider ثم اضغط Ok ثم Ok في مربع تأكيد التحويل .

t30106b

7- في التبويب Product Details اضغط بزر الماوس الأيمن على الحقل description واختر Convert .

t30107

في المربع الحواري Convert اختر Rich Text Editor ثم اضغط Ok ثم Ok في مربع تأكيد التحويل .

t30107b

8- في الـ Structure pane وتحت المكون richTextEditor ، احذف المكون validator لإلغاء الخطأ الذي الظاهر في صفحة التصميم .

t30108

9- يجب أن يكون الـ Product Details كالتالي :

t30109

10- اضغط Save All .

11- عد إلى المتصفح و أعد تحميل الصفحة (reload) .

t30110

12- جرب تحريك الـ Rating slider .

t30111

13- جرب تغيير الـ cost بـ number spinbox .

t30112

14- جرب محاولة إدخال قيمة خاطئة في حقل التاريخ manufactured .

t30113

أعد المحاولة وأدخل قيمة صحيحة .

t30113b

15- جرب الـ Rich Text editor حدد أي كلمة في الحقل النصي description .

t30114

اضغط السهم بجوار الـ color box ثم اختر أي لون .

t30114b

كبّر حجم الخط .

t30114b2

16- اذهب إلى الـ Product table واضغط مرتين بزر الماوس الأيسر على أي صف .

ستلاحظ أن الـ Product Details لم يطرأ عليها أي تغيير ، لكي نحقق هذا التزامن نحتاج لإضافة خاصية الـ Partial Page Rendering .

عد إلى الـ JDeveloper .

ليست هناك تعليقات:

إرسال تعليق

---- أتشرف بتعليقاتكم ----