(5-6) إضافة Gauge لـ Stock Levels

1- بالعودة إلى الـ JDeveloper ، وفي الصفحة OrdersAndStocks.jspx في محرر التصميم ، اضغط بزر الماوس الأيمن على التبويب MDOrders ومن القائمة اختر
Insert after Show Detail Item | Show Detail Item .

tu00101

2- في الـ Property Inspector وفي التبويب Common عدّل الـ Text ليكون StockLevels .

tu00102

3- اضغط التبويب StockLevels ، ثم افتح التبويب Data Controls ثم حدد FODModuleDataControl | OrdersView1 | OrderItemsView2 | WarehouseStockLevelsView1 واسحبها وضعها في التبويب StockLevels .

tu00103b

4- من قائمة Create اختر Tables | ADF Read-only Table .

tu00104

5- في المربع الحواري Edit Table Column حدد الخيارين Row Selection و Sorting ، ثم حدد كل من الحقول WarehouseId, Address1, PostalCode واضغط على الزر Delete .

tu00105

ثم اضغط Ok .

6- في الـ Property Inspector ولمكونات الـ table وباستخدام التبويب Box في الـ Style ، عدّل القيم width لتكون100 percent و الـ Height لتكون 600 pixels .

tu00106

7- باستخدام التبويب Behavior اجعل الخاصية Partial Triggers تحمل القيمة OrdItem:: .

tu00107

8- في الـ Component Palette اختر ADF Data Visualization ثم حدد الـ Gauge واسحبها وضعها في العامود Quantity .

tu00108

وفي المربع الحواري Create Gauge اختر الـ Status Meter  من الـ Categories ثم اختر Horizontal Status Meter with Thresholds من الأنواع ، ثم اضغط Ok .

tu00108b

9- في الـ Structure pane اضغط بزر الماوس الأيمن على
{outputText #{row.Quantity ثم اختر delete .

tu00109

10- في الـ Structure pane حدد المكون dvt:gauge وفي الـ Property Inspector عدّل القيم التالية :
في التبويب Common وفي خاصية نوع الـ Gauge  اجعلها STATUSMETER ، وبجوار الحقل Value بالضغط على السهم ثم اختر Expression Builder .

tu00110

وفي المربع الحواري Expression Builder افرد JSP Objects | Row واضغط مرتين على QuantityOnHand لينتقل إلى جزء الـ Expression ، ثم اضغط Ok .

tu00110b

11- اختر Gauge Data وضع القيمة 0 للحقل MinValue والقيمة 1000 للحقل MaxValue على افتراض أن تلك هي أقصى قيمة يمكن أن يصلها الـ stock level .

tu00111

12- اختر Style وضع 100 Percent للـ Width و 80 Pixel للـ Height .

tu00112

13- اختر af:column فوق المكون Gauge داخل الـ Structure pane وفي الـ Property Inspector في التبويب Appearance ضع القيمة 200 في الحقل Width .

tu00113b

14- في الـ Structure pane افرد المكون gauge | ThresholdSet .

tu00114

15- لاحظ أن هناك 3 thresholds موجودين داخل الـ Threshold Set .

16- اختر الـ Threshold الأول في الـ Structure pane وفي الـ Property inspector ضع القيمةt00 في الحقل id و 30 في الحقل ThresholdMaxValue وهو منبّه الحد الأدني من الـ stock level  و mini للـ Text .

tu00116

17- اختر الـ Threshold الثاني في الـ Structure pane وفي الـ Property inspector ضع القيمة t01 في الحقل id و 700 في الحقل ThresholdMaxValue و maxi للـ Text .

tu00117

18- اختر الـ Threshold الثالث في الـ Structure pane وفي الـ Property inspector اترك ThresholdMaxValue فارغة وفي id ضع t02 .

tu00118_bull

19- في الـ Structure pane اضغط بزر الماوس الأيمن على المكون tickLabel ثم اختر
Insert inside dvt:tickLabel | Number Format من القائمة .

du00119

20- في الـ Property Inspector للـ Number Format وباستخدام التبويب Scale اجعل الخاصية ScaleFactor لتكون SCALEFACTOR_NONE .

du00120

21- في الـ Structure pane اختر المكون Metric Label وفي التبويب Common عدّل الخاصية Position لتكون LP_INSIDE_GAUGE_RIGHT .

du00121

22- في الـ Structure pane اضغط بزر الماوس الأيمن على metricLabel ثم اختر
Insert inside dvt:metricLabel | Number Format من القائمة .

du00122b

23- في الـ Property Inspector وباستخدام التبويب Scale عدّل الخاصية ScaleFactor لتكون SCALEFACTOR_NONE .

du00123

24- يجب أن تكون الصفحة كالتالي :

du00124

25- اضغط الزر Run icon_run_button لتشغيل الصفحة .

du00126

26- اضغط على التبويب StockLevels لعرض الـ stock levels بالـ Gauge .

tu00120

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

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

إرسال تعليق

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