(4-6) إضافة Bar Chart إلى الصفحة

* إنشاء Basic Bar Chart .
* تحسين Basic Bar Chart .

إنشاء Basic Bar Chart

بناءاً على الـ WarehouseStockLevelsView سوف نضيف bar chart إلى التبويب MDOrders في صفحة الـ OrdersAndStocks .
الـ WarehouseStockLevelsView مربوط بـ OrderItemsView عن طريق المتغيرproductId .

1- بالعودة إلى الـ JDeveloper افرد الـ
Model | Application Sources | oracle.fod.model واضغط مرتين علىWarehouseStockLevelsView لكي يفتح في المحرر .

ta00101

2- في المحرر اضغط على التبويب Query لعرض جمل الـ SQL ، لاحظ ان الـ view يعيد لنا الأعمدة التالية :
warehouse id و warehouse name و product id و quantity on hand لأيwarehouseid بناءاً على US التي تمتلك الـ product .

SELECT Warehouses.Warehouse_id,
Warehouses.Warehouse_Name,
WarehouseStockLevels.Product_Id,
WarehouseStockLevels.Quantity_On_Hand,
Addresses.Address1, Addresses.City,
Addresses.State_Province,
Addresses.POSTAL_CODE,
Addresses.Country_Id
FROM
WAREHOUSES Warehouses,
Warehouse_Stock_Levels WarehouseStockLevels,
Addresses Addresses
WHERE
Warehouses.warehouse_id = WarehouseStockLevels.warehouse_id
and Addresses.address_id = Warehouses.address_id and Addresses.Country_id='US'

ta00102

3- من شاشة المحرر ، اضغط على التبويب OrdersAndStocks لعرض الصفحة .

ta00103

4- في الـ Data Controls افرد الـ OrdersView1 | OrderItemsView2 ، واختر WarehouseStockLevelsView1 واسحبها وضعها في الـ Structure pane أسفل جدول الـOrderItems .

ta00104

في قائمة Create اختر Graphs .

ta00104c

5- في المربع الحواري اختر Bar ومن الـ Graph Type اختر Bar ، لاحظ أن Quick Start Layout يقدم مجموعة متنوعة من الأشكال في كل Category ، ثم اضغط Ok .

ta00105a

6- في المربع الحواري Create Bar Graph أزل اختيار Include Child Accessors ثم حدد القيم التالية :

للـ Bars : اضغط Add واختر QuantityOnHand من القائمة .
للـ X Axis: اضغط Add واختر WarehouseId من القائمة .
للـ X Axis: اضغط Add واختر City من القائمة .

وفي الجزء Attribute Labels

Label

Attribute

Quantity (اكتب قيمة)

QuantityOnHand

WarehouseName (من القائمة)

WarehouseId

City (من القائمة)

City

ta00105

اضغط على الزر Swap Bars with X Axis ثم التبويب Preview

ta00106

بعد الاتصال بقاعدة البيانات نجد الـ Bar chart قد تم عرضه

ta00106b

اضغط Ok .

7- ومن الـ Property Inspector وللمكون dvt:barGraph وباستخدام المجموعة Appearance عدّل القيم التالية :

Style لتكون Comet

ta00107a

افرد التبويب Image وأدخل القيم التالية :

300

ImageHeight

400

ImageWidth

Flash

ImageFormat

true

3D Effect

 

 

 

ta00107

8- في التبويب Behavior وبجوار الحقل PartialTriggers اضغط على السهم واختر Edit .

ta00108a

ومن المربع الحواري Edit Property انقل table* – OrdItem لكي يكون الـ Graph متزامن مع اختيار صف order item .

ta00108

افرد panelFormLayout | facet | panelGroupLayout وانقل الأربعة commandButton لكي يكون أيضاً الـ Graph متزامن مع عملية التصفح .

ta00108c

اضغط Ok .

9- يجب أن تكون خاصية الـ Partial Triggers كالتالي :

ta00108b

10- احفظ عملك ثم اضغط بزر الماوس الأيمن على الصفحة واختر Run .

ta00110_bull

11- يتم تحميل الصفحة في المتصفح ، لاحظ ان لكل عمود في الهامش يتم عرض اسم الـ warehouse والـ city . كل عمود يحمل لون مختلف ، حرك الماوس على الأعمدة لترى الـ tooltip التي تظهر كل من
warehouse name و city و quantity .

ta00112

12- حدد صف آخر لترى التزامن بين الرسم البياني و اختيار الصفوف .

ta00113

13- اضغط الزر Next لترى التزامن بين الرسم البياني و الضغط على الزراير والانتقال بين الصفوف .

ta00113b

أغلق المتصفح .

تحسين Basic Bar Chart

1- نعود إلى الـ JDeveloper حدد المكون dvt:barGraph وفي جزء الـ Appearance عدّل الـ SeriesEffect إلى SE_GRADIENT و
SeriesRolloverBehavior إلىRB_HIGHLIGHT .

ta00200

2- في الجزء Appearance | Animation عدّل قيمة الحقل AnimationOnDataChange إلى ON و AnimationOnDisplay إلى Auto .

ta00201

لاحظ : لو أن الـ animateOnDisplay تحمل القيمة on ، الـ graph سوف يتحرك في أول عرض للصفحة ، ولو أن الـ AnimateOnDataChange تحمل القيمة on ، الـ graph سوف يتحرك في كل مرة تتغير فيها البيانات .

3- في الـ Structure pane افرد dvt:barGraph وفي الـ Legend Area عدّل الخاصية Rendered لتكون (Default (TRUE والـ AutomaticPlacement لتكون AP_NEVER .

ta00204a

4- احفظ عملك ثم اضغط على الزر Run icon_run_button .

5- يتم عرض الصفحة في المتصفح ، لاحظ حركة الأعمدة حتى تصل إلى قيمتها النهائية .

ta00207s

6- حرك الماوس على عامود ما ، تجد أن باقي الأعمده يتم تظليلها ويظهر العامود المتحرك عليه الماوس ، لاحظ أيضاً في الهامش تجد العامود المتحرك عليه الماوس هو الظاهر و الآخرين مظللين .

ta00208

7- اضغط الزر Next لتغيير الـ order ، لاحظ الحركة الحاصلة (وظهور السهم لأعلى للتعبير عن زيادة هذا العامود في الـ Order الجديد) .

ta00210

يمكنك اختبار باقي الخصائص .

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

إرسال تعليق

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