JavaFXطريقة عرض رسائل بداخل Pagination
المثال التالي يعلمك طريقة وضع كل عنصر في الـ VBox الموضوع في كل صفحة بداخل VBox خاص.
ملاحظة: هذا الأسلوب يستخدم عند توفير خاصية البحث في التطبيق أو عند عرض الرسائل بشكل مرتب على عدة صفحات.
مثال
import java.util.ArrayList;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Hyperlink;
import javafx.scene.control.Label;
import javafx.scene.control.Pagination;
import javafx.stage.Stage;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;
public class Main extends Application {
// خصصناه لتخزين عدد العناصر التي نريد إظهارها في كل صفحة itemsPerPage المتغير
int itemsPerPage = 3;
// getSearchResult() وضعنا فيه جميع عناوين الرسائل التي سنظهرها في الصفحات و التي حصلنا عليها من الدالة Arrayعبارة عن dataالكائن
ArrayList<String> data= getSearchResult();
// Arrayهنا قمنا بتعريف دالة ترجع عناوين الرسائل ككائن نوعه
public ArrayList<String> getSearchResult()
{
ArrayList<String> titles = new ArrayList();
titles.add("Title 1");
titles.add("Title 2");
titles.add("Title 3");
titles.add("Title 4");
titles.add("Title 5");
titles.add("Title 6");
titles.add("Title 7");
titles.add("Title 8");
return titles;
}
// بناءاً على عدد الرسائل التي سنظهرها فيه Pagination هنا قمنا بتعريف دالة ترجع عدد الصفحات التي يجب أن تكون موجودة في الكائن
public int getNumberOfPages()
{
// totalItems هنا قمنا بتخزين عدد عناوين الرسائل في المتغير
double totalItems = dataList.size();
// تساوي 0 totalItems ستكون قيمة dataإذا كان لا يوجد أي رسائل أصلاً في الكائن
// pagination لهذا السبب سنرجع القيمة 1 حتى يتم إنشاء صفحة واحدة فقط في الكائن
if(totalItems == 0)
return 1;
// الشرطين التاليين يرجعان عدد الصفحات التي يجب إنشائها نسبةً لعدد العناصر التي سيتم وضعها في كل صفحة
if(totalItems%itemsPerPage == 0)
return (int)(totalItems/itemsPerPage);
else
return (int)(totalItems/itemsPerPage) + 1;
}
// pagination هنا قمنا بإنشاء دالة خاصة لإنشاء و ترتيب محتوى كل صفحة سيتم إضافتها في الكائن
public VBox createPage(int pageIndex)
{
// VBox محتوى كل صفحة سنعرضه بداخل حاوية نوعها
VBox vBox = new VBox();
// dataالعنوان التالي الذي يجب أن يتم جلبه من الكائن index سنستخدمه لمعرفة nextItemIndex المتغير
int nextItemIndex = pageIndex * itemsPerPage;
// لا يساوي بعد عدد العناصر التي نريد وضعها في كل صفحة vBox طالما أن عدد العناصر الموضوعة في الكائن
while(vBox.getChildren().size() < itemsPerPage) {
try {
// من أجل عرض العنوان و النبذة عن كل رسالة فوق بعض مع تعديل تصميمه الإفتراضي VBox سيتم إنشاء كائن
// من أجل إظهار خط لونه رمادي فاتح في أسفله و وضع هامش بين الأشياء التي نضيفها فيها بمقدار 5 بيكسل
VBox elementBox = new VBox();
elementBox.setStyle(
"-fx-border-width: 0 0 1 0;"
+ "-fx-border-color: #f1f1f1;"
+ "-fx-padding: 5px;"
);
// Label و النبذة عن الرسالة سنضعها بداخل كائن Hyperlink عنوان الرسالة سنضعه بداخل كائن
// dataمن الكائن Label و Hyperlink و سيتم جلب النص الذي سيوضع على الكائنين
Hyperlink link = new Hyperlink(dataList.get(nextItemIndex));
Label text = new Label("Description for "+ link.getText());
// vBox في الكائن elementBox و من ثم وضعنا الكائن elementBox في الكائن text و link هنا قمنا بوضع الكائنين
elementBox.getChildren().addAll(link, text);
vBox.getChildren().add(elementBox);
// dataمن أجل جلب العنوان التالي من الكائن nextItemIndex هنا قمنا بإضافة 1 على قيمة المتغير
nextItemIndex++;
}
catch(Exception e) {
break;
}
}
// الذي أصبح يحتوي على كل العناصر التي يجب عرضها في الصفحة vBox في الأخير سيتم إرجاع الكائن
return vBox;
}
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ AnchorPane هنا قمنا بإنشاء كائن من الكلاس
AnchorPane root = new AnchorPane();
// root الذي نريد إضافته في الكائن Pagination يمثل الـ Pagination هنا قمنا بإنشاء كائن من الكلاس
Pagination pagination = new Pagination();
// التي سترجع عدد الصفحات التي يجب إنشاءها getNumberOfPages() و مررنا الدالة pagination هنا قمنا بتحديد عدد صفحات الكائن
pagination.setPageCount(getNumberOfPages());
// حتى تقوم بتوليد محتوى كل صفحة فيه createPage() و مررنا لها الدالة setPageFactory() هنا قمنا باستدعاء الدالة
pagination.setPageFactory((Integer pageIndex) -> createPage(pageIndex));
// أبيض و جعلنا لون حدوده رمادي فاتح pagination هنا جعلنا لون خلفية الكائن
pagination.setStyle("-fx-background-color:white; -fx-border-color: lightgray;");
// من كل الجهات بمقدار 20 بيكسل ( root الذي سيوضع بداخله ( أي الكائن AnchorPane عن كائن الـ pagination هنا قمنا بتحديد مكان بعد الكائن
AnchorPane.setTopAnchor(pagination, 20.0);
AnchorPane.setRightAnchor(pagination, 20.0);
AnchorPane.setLeftAnchor(pagination, 20.0);
AnchorPane.setBottomAnchor(pagination, 20.0);
// root في الكائن pagination هنا قمنا بإضافة الكائن
root.getChildren().add(pagination);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 350, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Pagination");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
import java.util.ArrayList;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Hyperlink;
import javafx.scene.control.Label;
import javafx.scene.control.Pagination;
import javafx.stage.Stage;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;
public class Main extends Application {
// خصصناه لتخزين عدد العناصر التي نريد إظهارها في كل صفحة itemsPerPage المتغير
int itemsPerPage = 3;
// getSearchResult() وضعنا فيه جميع عناوين الرسائل التي سنظهرها في الصفحات و التي حصلنا عليها من الدالة Arrayعبارة عن dataالكائن
ArrayList<String> data= getSearchResult();
// Arrayهنا قمنا بتعريف دالة ترجع عناوين الرسائل ككائن نوعه
public ArrayList<String> getSearchResult()
{
ArrayList<String> titles = new ArrayList();
titles.add("Title 1");
titles.add("Title 2");
titles.add("Title 3");
titles.add("Title 4");
titles.add("Title 5");
titles.add("Title 6");
titles.add("Title 7");
titles.add("Title 8");
return titles;
}
// بناءاً على عدد الرسائل التي سنظهرها فيه Pagination هنا قمنا بتعريف دالة ترجع عدد الصفحات التي يجب أن تكون موجودة في الكائن
public int getNumberOfPages()
{
// totalItems هنا قمنا بتخزين عدد عناوين الرسائل في المتغير
double totalItems = dataList.size();
// تساوي 0 totalItems ستكون قيمة dataإذا كان لا يوجد أي رسائل أصلاً في الكائن
// pagination لهذا السبب سنرجع القيمة 1 حتى يتم إنشاء صفحة واحدة فقط في الكائن
if(totalItems == 0)
return 1;
// الشرطين التاليين يرجعان عدد الصفحات التي يجب إنشائها نسبةً لعدد العناصر التي سيتم وضعها في كل صفحة
if(totalItems%itemsPerPage == 0)
return (int)(totalItems/itemsPerPage);
else
return (int)(totalItems/itemsPerPage) + 1;
}
// pagination هنا قمنا بإنشاء دالة خاصة لإنشاء و ترتيب محتوى كل صفحة سيتم إضافتها في الكائن
public VBox createPage(int pageIndex)
{
// VBox محتوى كل صفحة سنعرضه بداخل حاوية نوعها
VBox vBox = new VBox();
// dataالعنوان التالي الذي يجب أن يتم جلبه من الكائن index سنستخدمه لمعرفة nextItemIndex المتغير
int nextItemIndex = pageIndex * itemsPerPage;
// لا يساوي بعد عدد العناصر التي نريد وضعها في كل صفحة vBox طالما أن عدد العناصر الموضوعة في الكائن
while(vBox.getChildren().size() < itemsPerPage) {
try {
// من أجل عرض العنوان و النبذة عن كل رسالة فوق بعض مع تعديل تصميمه الإفتراضي VBox سيتم إنشاء كائن
// من أجل إظهار خط لونه رمادي فاتح في أسفله و وضع هامش بين الأشياء التي نضيفها فيها بمقدار 5 بيكسل
VBox elementBox = new VBox();
elementBox.setStyle(
"-fx-border-width: 0 0 1 0;"
+ "-fx-border-color: #f1f1f1;"
+ "-fx-padding: 5px;"
);
// Label و النبذة عن الرسالة سنضعها بداخل كائن Hyperlink عنوان الرسالة سنضعه بداخل كائن
// dataمن الكائن Label و Hyperlink و سيتم جلب النص الذي سيوضع على الكائنين
Hyperlink link = new Hyperlink(dataList.get(nextItemIndex));
Label text = new Label("Description for "+ link.getText());
// vBox في الكائن elementBox و من ثم وضعنا الكائن elementBox في الكائن text و link هنا قمنا بوضع الكائنين
elementBox.getChildren().addAll(link, text);
vBox.getChildren().add(elementBox);
// dataمن أجل جلب العنوان التالي من الكائن nextItemIndex هنا قمنا بإضافة 1 على قيمة المتغير
nextItemIndex++;
}
catch(Exception e) {
break;
}
}
// الذي أصبح يحتوي على كل العناصر التي يجب عرضها في الصفحة vBox في الأخير سيتم إرجاع الكائن
return vBox;
}
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ AnchorPane هنا قمنا بإنشاء كائن من الكلاس
AnchorPane root = new AnchorPane();
// root الذي نريد إضافته في الكائن Pagination يمثل الـ Pagination هنا قمنا بإنشاء كائن من الكلاس
Pagination pagination = new Pagination();
// التي سترجع عدد الصفحات التي يجب إنشاءها getNumberOfPages() و مررنا الدالة pagination هنا قمنا بتحديد عدد صفحات الكائن
pagination.setPageCount(getNumberOfPages());
// حتى تقوم بتوليد محتوى كل صفحة فيه createPage() و مررنا لها الدالة setPageFactory() هنا قمنا باستدعاء الدالة
pagination.setPageFactory((Integer pageIndex) -> createPage(pageIndex));
// أبيض و جعلنا لون حدوده رمادي فاتح pagination هنا جعلنا لون خلفية الكائن
pagination.setStyle("-fx-background-color:white; -fx-border-color: lightgray;");
// من كل الجهات بمقدار 20 بيكسل ( root الذي سيوضع بداخله ( أي الكائن AnchorPane عن كائن الـ pagination هنا قمنا بتحديد مكان بعد الكائن
AnchorPane.setTopAnchor(pagination, 20.0);
AnchorPane.setRightAnchor(pagination, 20.0);
AnchorPane.setLeftAnchor(pagination, 20.0);
AnchorPane.setBottomAnchor(pagination, 20.0);
// root في الكائن pagination هنا قمنا بإضافة الكائن
root.getChildren().add(pagination);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 350, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Pagination");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
ستظهر لك النافذة التالية عند التشغيل.