diff --git a/html/arabic/java/creating-managing-html-documents/_index.md b/html/arabic/java/creating-managing-html-documents/_index.md index a6682da0d..46b6bc548 100644 --- a/html/arabic/java/creating-managing-html-documents/_index.md +++ b/html/arabic/java/creating-managing-html-documents/_index.md @@ -56,6 +56,8 @@ url: /ar/java/creating-managing-html-documents/ تعرف على كيفية تحميل مستندات HTML من التدفقات باستخدام Aspose.HTML for Java. يوفر هذا الدليل برنامجًا تعليميًا خطوة بخطوة للتعامل بسلاسة مع HTML. ### [إنشاء مستندات HTML من سلسلة نصية في Aspose.HTML لـ Java](./create-html-documents-from-string/) تعرف على كيفية إنشاء مستندات HTML من السلاسل في Aspose.HTML لـ Java باستخدام هذا الدليل خطوة بخطوة. +### [كيفية تحويل القالب إلى HTML باستخدام محرك قوالب Java](./how-to-convert-template-to-html-with-a-java-template-engine/) +تعلم كيفية تحويل القوالب إلى مستندات HTML باستخدام محرك قوالب Java. ### [تحميل مستندات HTML من URL في Aspose.HTML لـ Java](./load-html-documents-from-url/) اكتشف كيفية تحميل مستندات HTML بسهولة من عنوان URL في Java باستخدام Aspose.HTML. يتضمن البرنامج التعليمي خطوة بخطوة. ### [إنشاء مستندات HTML جديدة باستخدام Aspose.HTML لـ Java](./generate-new-html-documents/) @@ -64,14 +66,7 @@ url: /ar/java/creating-managing-html-documents/ تعلم كيفية التعامل مع أحداث تحميل المستندات في Aspose.HTML for Java باستخدام هذا الدليل خطوة بخطوة. قم بتحسين تطبيقات الويب الخاصة بك. ### [إنشاء وإدارة مستندات SVG في Aspose.HTML لـ Java](./create-manage-svg-documents/) تعلم كيفية إنشاء مستندات SVG وإدارتها باستخدام Aspose.HTML لـ Java! يغطي هذا الدليل الشامل كل شيء بدءًا من الإنشاء الأساسي وحتى المعالجة المتقدمة. -### [إنشاء بيئة تجريبية لـ HTML في Java – دليل خطوة بخطوة](./create-sandbox-for-html-in-java-step-by-step-guide/) -تعلم كيفية إنشاء بيئة تجريبية لمعالجة HTML في Java باستخدام Aspose.HTML من خلال دليل خطوة بخطوة. -### [كيفية الاستعلام عن HTML في Java – دليل كامل](./how-to-query-html-in-java-complete-tutorial/) -تعلم كيفية استعلام ومعالجة مستندات HTML في Java باستخدام Aspose.HTML من خلال دليل شامل خطوة بخطوة. -### [كيفية تحليل HTML في Java – التحميل، الاستعلام وعدّ العناصر](./how-to-parse-html-java-load-query-count-elements/) -تعلم كيفية تحميل مستندات HTML، استعلامها وعدّ العناصر باستخدام Aspose.HTML for Java في دليل خطوة بخطوة. -### [تنفيذ JavaScript غير متزامن في Java – دليل شامل خطوة بخطوة](./execute-async-javascript-in-java-complete-step-by-step-guide/) -تعلم كيفية تنفيذ جافا سكريبت غير متزامن في Java باستخدام Aspose.HTML من خلال دليل خطوة بخطوة شامل. +### [كيفية ربط البيانات بجدول HTML ديناميكي بأعمدة الاسم الأول والاسم الأخير](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) {{< /blocks/products/pf/tutorial-page-section >}} @@ -106,4 +101,4 @@ url: /ar/java/creating-managing-html-documents/ {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/arabic/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/arabic/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..93ea66a4f --- /dev/null +++ b/html/arabic/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,323 @@ +--- +category: general +date: 2026-09-07 +description: كيفية ربط البيانات في جدول HTML ديناميكي – تعلم كيفية إنشاء صفوف الجدول + وتعبئة حقول الاسم الأول والاسم الأخير بكفاءة +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: ar +lastmod: 2026-09-07 +og_description: كيفية ربط البيانات في جدول HTML ديناميكي. يوضح هذا الدرس كيفية إنشاء + صفوف الجدول، وعرض الاسم الأول والاسم الأخير، وتعبئة صفوف الجدول باستخدام JavaScript. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: كيفية ربط البيانات بجدول HTML ديناميكي – دليل خطوة بخطوة +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: كيفية ربط البيانات بجدول HTML ديناميكي يحتوي على أعمدة الاسم الأول والاسم الأخير +url: /ar/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# كيفية ربط البيانات بجدول HTML ديناميكي يحتوي على عمودي الاسم الأول والاسم الأخير + +إذا كنت بحاجة إلى **how to bind data** داخل جدول يتوسع مع كل سجل، يوضح هذا الدليل حلاً كاملاً. ستتعرف على كيفية إنشاء جدول HTML ديناميكي، تعبئة صفوف الجدول، وعرض الاسم الأول والاسم الأخير لكل شخص دون كتابة علامات مكررة. + +المثال يستخدم صيغة قوالب خفيفة تعمل في أي متصفح حديث، لكن المفاهيم تنطبق على Handlebars أو Mustache أو محركات الخادم. بنهاية الدرس يمكنك نسخ الشيفرة إلى مشروعك والبدء في ربط البيانات فورًا. + +## ما يغطيه هذا الدرس + +* كيفية هيكلة مصدر بيانات يحتوي على عدة أشخاص +* كيفية إنشاء قالب جدول قابل لإعادة الاستخدام يتكرر لكل إدخال +* كيفية ربط البيانات وتوليد العلامات النهائية للـ HTML +* الأخطاء الشائعة عند تعبئة صفوف الجدول وكيفية تجنبها + +لا توجد مكتبات خارجية مطلوبة، رغم أن النمط نفسه يعمل مع أطر القوالب الشهيرة. المتطلب الوحيد هو معرفة أساسية بـ HTML وJavaScript. + +## المتطلبات المسبقة + +* متصفح حديث (Chrome أو Edge أو Firefox أو Safari) +* محرر لملفات HTML/JavaScript +* اختياري: ملف JSON أو كائن JavaScript يمثل مجموعة الأشخاص + +## الخطوة 1: تعريف مصدر البيانات + +أولاً، أنشئ كائن JavaScript يعكس البنية المستخدمة في القالب. كل شخص يمتلك اسمًا أولًا، اسمًا آخر، وكائن عنوان. + +```html + +``` + +**لماذا هذا مهم:** تسلسل الكائن (`Persons.Person`) يتطابق مع حلقة `{{#foreach Persons.Person}}` في القالب، مما يسمح للمحرك بالتكرار عبر كل إدخال تلقائيًا. + +## الخطوة 2: كتابة قالب الجدول مع كتلة التكرار + +القالب أدناه يستخدم صيغة بسيطة على نمط Mustache (`{{#foreach}}`) لتكرار `` لكل شخص. ضع القالب داخل وسم ` +``` + +**لماذا هذا مهم:** توجيه `{{#foreach Persons.Person}}` يخبر المحرك بتكرار كل ما بين وسم الفتح والإغلاق لكل كائن شخص. داخل الصف يمكنك الإشارة إلى أي خاصية (`{{FirstName}}`، `{{LastName}}`، إلخ) لـ **populate table rows** بشكل ديناميكي. + +## الخطوة 3: تنفيذ دالة تصيير صغيرة + +نظرًا لأن الدرس يجب أن يكون ذاتيًا، سنكتب مصممًا بسيطًا يستبدل العناصر النائبة على نمط Mustache بالقيم الفعلية. تقوم الدالة بزيارة كائن البيانات، توسيع كتلة التكرار، وإدخال الـ HTML النهائي في الصفحة. + +```html + +``` + +**لماذا هذا مهم:** يوضح المصمم **how to generate table** برمجيًا دون الحاجة إلى مكتبة كاملة. كما يوضح التحول من القالب إلى الـ HTML النهائي، مما يساعدك على تعديل الشيفرة لتتناسب مع محركات قوالب أخرى لاحقًا. + +## الخطوة 4: إضافة عنصر نائب حيث سيظهر الجدول المُولد + +أنشئ `
` فارغًا سيملأه السكربت بعد عملية التصيير. + +```html +
+``` + +عند تحميل الصفحة، يستبدل السكربت محتويات هذا `
` بالجدول المكتمل. + +## الخطوة 5: التحقق من النتيجة + +افتح ملف HTML في المتصفح. يجب أن ترى جدولًا يسرد الاسم الكامل لكل شخص وعنوانه: + +| الشخص | العنوان | +|-------|----------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +إذا أضفت المزيد من الكائنات إلى مصفوفة `data.Persons.Person`، سينمو الجدول تلقائيًا—محققًا متطلب **populate table rows**. + +## نصيحة احترافية: التعامل مع المجموعات الفارغة + +عندما تكون مصفوفة البيانات فارغة، ينتج المصمم حاليًا رأس جدول فارغ. لتوفير تجربة مستخدم أوضح، أضف شرطًا وقائيًا: + +```javascript +if (items.length === 0) { + return '

No records found.

'; +} +``` + +هذا التغيير الصغير يمنع ظهور جدول فارغ ويعطي المستخدمين ملاحظات فورية. + +## الاختلافات الشائعة وحالات الحافة + +| الحالة | التعديل | +|--------------------------------------|--------------------------------------------------------------------------| +| استخدام محرك من جانب الخادم (مثل Handlebars) | استبدل الدالة المخصصة `renderTemplate` بـ `Handlebars.compile` ومرّر نفس كائن البيانات. | +| الحاجة إلى فرز الصفوف أبجديًا | قم بفرز `data.Persons.Person` قبل استدعاء `renderTemplate`. | +| إضافة عمود لرقم الهاتف | قم بتمديد `` بإضافة `{{Phone}}` وتضمين `Phone` في كل كائن شخص. | +| مجموعات بيانات كبيرة (مئات الصفوف) | قم بتجسيد الصفوف على دفعات أو استخدم التمرير الافتراضي للحفاظ على استجابة واجهة المستخدم. | + +## مثال كامل يعمل + +فيما يلي ملف HTML كامل يمكنك نسخه ولصقه في `index.html`. يحتوي على جميع الأجزاء التي نوقشت أعلاه. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

Dynamic HTML table bound to JavaScript data

+ + + + + + + + +
+ + + + + + +``` + +**الناتج المتوقع** + +الصفحة تعرض جدولًا بصفين، كل منهما يُظهر الاسم الكامل والعنوان المنسق لشخص. إضافة المزيد من الكائنات إلى مصفوفة `Person` يضيف صفوفًا جديدة تلقائيًا—مظهرًا **how to generate table** من البيانات. + +## الخلاصة + +أنت الآن تعرف **how to bind data** إلى **جدول HTML ديناميكي**، توليد صفوف لكل سجل، وعرض قيم الاسم الأول والاسم الأخير جنبًا إلى جنب مع العنوان. + +## ما الذي يجب أن تتعلمه بعد ذلك؟ + +الدروس التالية تغطي مواضيع ذات صلة وثيقة تبني على التقنيات التي تم توضيحها في هذا الدليل. كل مصدر يتضمن أمثلة شيفرة كاملة مع شروحات خطوة بخطوة لمساعدتك على إتقان ميزات API إضافية واستكشاف أساليب تنفيذ بديلة في مشاريعك الخاصة. + +- [كيفية إضافة CSS – CSS مضمّن إلى مستندات HTML في Aspose.HTML للـ Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [كيفية تحرير شجرة مستند HTML في Aspose.HTML للـ Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [كيفية تمكين JavaScript في Aspose HTML – تحميل HTML والحصول على النص](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/arabic/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/arabic/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..e0ad60f50 --- /dev/null +++ b/html/arabic/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,231 @@ +--- +category: general +date: 2026-09-07 +description: كيفية تحويل القالب إلى HTML باستخدام Java. تعلم كيفية إنشاء HTML من قالب، + وتمكين حلقات foreach، وشاهد مثالًا كاملاً لمحرك القوالب في Java. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: ar +lastmod: 2026-09-07 +og_description: كيفية تحويل القالب إلى HTML باستخدام Java. يوضح هذا الدرس مثالًا كاملاً + لمحرك قوالب Java، وكيفية توليد HTML من قالب، وكيفية استخدام foreach. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: كيفية تحويل القالب إلى HTML باستخدام Java – دليل خطوة بخطوة +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: كيفية تحويل القالب إلى HTML باستخدام محرك قوالب جافا +url: /ar/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# كيفية تحويل القالب إلى HTML باستخدام محرك قوالب جافا + +إذا كنت بحاجة إلى **how to convert template** إلى صفحة HTML جاهزة للتقديم، فإن هذا الدليل يقدم حلاً كاملاً. ستتعرف على كيفية **generate HTML from template** للملفات، وتمكين التكرار باستخدام **how to use foreach**، وستستعرض مثالاً على **java template engine example** يعمل مع مصادر بيانات XML أو JSON. + +يغطي الدليل كل ما يلزم **convert html template** في برنامج جافا واحد. في النهاية ستحصل على مشروع قابل للتنفيذ يقرأ القالب، يدمج البيانات، ويكتب ملف HTML النهائي إلى القرص. + +## المتطلبات المسبقة + +* JDK 17 أو أحدث مثبت +* أداة بناء مثل Maven أو Gradle (الكود يستخدم فقط فئات جافا القياسية) +* إلمام أساسي بـ Java I/O وتنسيقات XML/JSON + +لا توجد مكتبات خارجية مطلوبة للخطوات الأساسية، ولكن يمكنك استبدال فئات `Template` البسيطة بمحرك من طرف ثالث إذا رغبت. + +## الخطوة 1: إعداد مسارات الملفات وعلامات القالب + +الخطوة الأولى تحدد أين سيقع القالب، مصدر البيانات، والملف الناتج. يحتوي القالب على نائبات `{{...}}` التي سيستبدلها المحرك. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*لماذا هذا مهم*: كتابة المسارات بشكل ثابت يتيح لك تشغيل البرنامج من أي بيئة تطوير متكاملة دون إعدادات إضافية. يمكنك أيضًا تمرير هذه القيم كوسائط سطر الأوامر لمزيد من المرونة. + +## الخطوة 2: تحميل مصدر البيانات (XML أو JSON) + +المحرك يحتاج إلى كائن بيانات يربط أسماء النائبات بالقيم. فئة `TemplateData` تجريدية لمعالجة XML و JSON. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +إذا كان `dataPath` يشير إلى ملف JSON، فإن `TemplateData` يكتشف الصيغة تلقائيًا ويُنشئ خريطة المفتاح/القيمة نفسها. هذه المرونة مفيدة عندما تقوم **generate html from template** في بيئات مختلفة. + +## الخطوة 3: تمكين توجيه foreach للتكرار + +العديد من القوالب تحتاج إلى تكرار كتلة لكل عنصر في مجموعة. تمكين توجيه foreach يخبر المحرك بمعالجة كتل `{{#foreach items}} … {{/foreach}}`. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**كيفية استخدام foreach**: داخل `template.html` يمكنك كتابة: + +```html + +``` + +عندما يصادف المحرك هذه الكتلة، يكرر عنصر `
  • ` لكل إدخال في مجموعة `products` التي يوفرها `TemplateData`. + +## الخطوة 4: تحويل القالب وكتابة النتيجة + +الآن يقوم المحرك باستبدال جميع العلامات بالقيم الفعلية ويكتب ملف HTML النهائي. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +طريقة `convertTemplate` تنفّذ ثلاث عمليات: + +1. يقرأ `template.html` إلى الذاكرة. +2. يستبدل كل `{{key}}` بالقيمة المقابلة من `data`. +3. يعالج أي كتل foreach مفعلة. +4. يكتب المحتوى المُحوّل إلى `resultPath`. + +## الخطوة 5: تشغيل البرنامج والتحقق من المخرجات + +أخيرًا، أخبر المستخدم بأن التحويل نجح. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +عند تنفيذ طريقة `main`، يجب أن ترى سطرًا في وحدة التحكم مشابهًا لـ: + +``` +Template conversion completed: src/main/resources/result.html +``` + +افتح `result.html` في المتصفح. سيتم استبدال جميع النائبات، وستكون أي حلقات foreach قد أنشأت القطع المناسبة من HTML. + +### مثال على النتيجة المتوقعة + +مع ملف `template.html` بسيط: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +ومع ملف XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +سيكون `result.html` الناتج: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## الحالات الخاصة ونصائح أفضل الممارسات + +* **Missing placeholders** – يترك المحرك علامات `{{key}}` غير المعروفة دون تغيير. يمكنك إضافة خطوة تحقق تفحص القالب للعثور على الأقواس المتبقية وتسجيل تحذير. +* **Large data sets** – بالنسبة لآلاف العناصر، فكر في تدفق القالب بدلاً من تحميل الملف بالكامل في الذاكرة. التنفيذ الحالي مناسب للصفحات الويب العادية. +* **JSON vs. XML** – إذا قمت بالتحويل إلى JSON، احتفظ بنفس البنية: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` سيقوم بتحليلها تلقائيًا، وبالتالي يبقى باقي الكود دون تغيير. +* **Encoding** – تأكد من أن ملفات القالب والبيانات تستخدم UTF‑8 لتجنب فساد الأحرف، خاصة عند إنشاء HTML متعدد اللغات. +* **Security** – لا تثق بالبيانات المقدمة من المستخدم لإدخالها مباشرةً في HTML دون تنقية. قم بتهريب (Escape) الأحرف الخاصة بـ HTML إذا كان من المحتمل أن تحتوي البيانات على علامات. + +## مثال كامل قابل للتنفيذ + +فيما يلي فئة جافا مستقلة تجمع جميع الخطوات معًا. احفظها باسم `TemplateConverter.java` وشغّلها من بيئة التطوير المتكاملة أو سطر الأوامر. + + + +## ما الذي يجب أن تتعلمه بعد ذلك؟ + +الدروس التالية تغطي مواضيع ذات صلة وثيقة تبني على التقنيات الموضحة في هذا الدليل. كل مورد يتضمن أمثلة شاملة من الشيفرة مع شروحات خطوة بخطوة لمساعدتك على إتقان ميزات API إضافية واستكشاف أساليب تنفيذ بديلة في مشاريعك. + +- [How to Convert HTML to PDF Java – Using Aspose.HTML for Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [How to Edit HTML Using Aspose.HTML for Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Convert HTML to String using Aspose.HTML for Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/chinese/java/creating-managing-html-documents/_index.md b/html/chinese/java/creating-managing-html-documents/_index.md index f8a0a30d8..150884e4b 100644 --- a/html/chinese/java/creating-managing-html-documents/_index.md +++ b/html/chinese/java/creating-managing-html-documents/_index.md @@ -62,6 +62,8 @@ Aspose.HTML for Java 为开发人员提供了功能强大的工具包,旨在 了解如何使用 Aspose.HTML 轻松地从 Java 中的 URL 加载 HTML 文档。内含分步教程。 ### [使用 Aspose.HTML for Java 生成新的 HTML 文档](./generate-new-html-documents/) 通过本简单的分步指南学习如何使用 Aspose.HTML for Java 创建新的 HTML 文档。开始生成动态 HTML 内容。 +### [如何将数据绑定到包含名和姓列的动态 HTML 表格](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) +简要说明如何使用 Aspose.HTML for Java 将数据绑定到具有名和姓列的动态 HTML 表格。 ### [在 Aspose.HTML for Java 中处理文档加载事件](./handle-document-load-events/) 通过本分步指南学习如何在 Aspose.HTML for Java 中处理文档加载事件。增强您的 Web 应用程序。 ### [在 Aspose.HTML for Java 中创建和管理 SVG 文档](./create-manage-svg-documents/) @@ -71,6 +73,10 @@ Aspose.HTML for Java 为开发人员提供了功能强大的工具包,旨在 ### [如何在 Java 中解析 HTML – 加载、查询与计数元素](./how-to-parse-html-java-load-query-count-elements/) 本教程详细讲解如何使用 Aspose.HTML for Java 加载 HTML、执行查询并统计元素数量,帮助您高效解析网页。 ### [在 Aspose.HTML for Java 中创建 HTML 沙盒 – 步骤指南](./create-sandbox-for-html-in-java-step-by-step-guide/) +### [如何使用 Java 模板引擎将模板转换为 HTML](./how-to-convert-template-to-html-with-a-java-template-engine/) +学习如何使用 Java 模板引擎将模板渲染为 HTML,结合 Aspose.HTML 实现高效转换。 +### [在 Java 中从 HTML 提取文本 – 完整分步指南](./extract-text-from-html-with-java-complete-step-by-step-guide/) +本完整分步指南教您使用 Aspose.HTML for Java 提取 HTML 文本,包括示例代码和最佳实践。 {{< /blocks/products/pf/tutorial-page-section >}} @@ -106,4 +112,4 @@ Aspose.HTML for Java 为开发人员提供了功能强大的工具包,旨在 {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/chinese/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/chinese/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..20f291026 --- /dev/null +++ b/html/chinese/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,321 @@ +--- +category: general +date: 2026-09-07 +description: 如何在动态HTML表格中绑定数据——学习如何高效生成表格行并填充名和姓字段 +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: zh +lastmod: 2026-09-07 +og_description: 如何在动态HTML表格中绑定数据。本教程展示了如何生成表格行、显示名和姓,并使用JavaScript填充表格行。 +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: 如何将数据绑定到动态HTML表格——分步指南 +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: 如何将数据绑定到包含名和姓列的动态HTML表格 +url: /zh/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 如何将数据绑定到具有名字和姓氏列的动态 HTML 表格 + +如果您需要 **如何将数据绑定** 到一个随记录增长的表格,本指南提供完整的解决方案。您将看到如何生成动态 HTML 表格、填充表格行,并在不编写重复标记的情况下显示每个人的名字和姓氏。 + +示例使用一种轻量级的模板语法,可在任何现代浏览器中工作,但其概念同样适用于 Handlebars、Mustache 或服务器端模板引擎。教程结束后,您可以将代码复制到项目中并立即开始绑定数据。 + +## 本教程涵盖的内容 + +* 如何构建包含多个人员的 数据源 +* 如何创建可复用的表格模板,以便对每条记录进行重复 +* 如何绑定数据并生成最终的 HTML 标记 +* 填充表格行时的常见陷阱以及如何避免 + +不需要外部库,尽管相同的模式也适用于流行的模板框架。唯一的前提是具备基本的 HTML 和 JavaScript 知识。 + +## 前置条件 + +* 现代浏览器(Chrome、Edge、Firefox 或 Safari) +* 用于编辑 HTML/JavaScript 文件的编辑器 +* 可选:一个 JSON 文件或 JavaScript 对象,表示人员集合 + +## 步骤 1:定义数据源 + +首先,创建一个与模板结构相匹配的 JavaScript 对象。每个人都有名字、姓氏以及一个地址对象。 + +```html + +``` + +**为什么重要:** 对象层级 (`Persons.Person`) 与模板中的 `{{#foreach Persons.Person}}` 循环相匹配,使引擎能够自动遍历每个条目。 + +## 步骤 2:编写带有重复块的表格模板 + +下面的模板使用简单的 Mustache‑style 语法(`{{#foreach}}`)来为每个人重复 ``。将模板放在 ` +``` + +**为什么重要:** `{{#foreach Persons.Person}}` 指令告诉引擎对每个 person 对象重复开闭标签之间的所有内容。行内可以引用任意属性(`{{FirstName}}`、`{{LastName}}` 等)来 **动态填充表格行**。 + +## 步骤 3:实现一个小型渲染函数 + +因为本教程必须自包含,我们将编写一个最小的渲染器,用真实值替换 Mustache‑style 占位符。该函数遍历数据对象,展开重复块,并将最终的 HTML 注入页面。 + +```html + +``` + +**为什么重要:** 渲染器演示了 **如何生成表格** 标记而无需引入完整库。它还阐明了从模板到最终 HTML 的转换过程,帮助您以后将代码迁移到其他模板引擎。 + +## 步骤 4:添加占位符以放置生成的表格 + +创建一个空的 `
    `,脚本将在渲染后填充它。 + +```html +
    +``` + +页面加载时,脚本会用完整填充的表格替换该 `
    ` 的内容。 + +## 步骤 5:验证结果 + +在浏览器中打开 HTML 文件。您应该看到一个列出每个人全名和地址的表格: + +| 人员 | 地址 | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +如果向 `data.Persons.Person` 数组中添加更多对象,表格会自动增长——满足 **填充表格行** 的需求。 + +## 小技巧:处理空集合 + +当数据数组为空时,渲染器目前会输出一个空的表头。为了提供更清晰的用户体验,可加入防护代码: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +此小改动可防止出现空表格,并向用户提供即时反馈。 + +## 常见变体和边缘情况 + +| 情形 | 调整说明 | +|----------------------------------------|--------------------------------------------------------------------------| +| 使用服务器端引擎(如 Handlebars) | 将自定义的 `renderTemplate` 替换为 `Handlebars.compile` 并传入相同的数据对象。 | +| 需要按字母顺序对行进行排序 | 在调用 `renderTemplate` 前对 `data.Persons.Person` 进行排序。 | +| 添加电话号码列 | 在 `` 中扩展为 `{{Phone}}`,并在每个 person 对象中加入 `Phone`。 | +| 大数据集(数百行) | 将行分块渲染或使用虚拟滚动,以保持 UI 响应。 | + +## 完整工作示例 + +下面是可以直接复制到 `index.html` 的完整 HTML 文件,包含上述所有部分。 + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**预期输出** + +页面渲染出一个包含两行的表格,每行显示人员的全名和格式化地址。向 `Person` 数组中添加更多对象会自动新增行——演示了 **如何生成表格** 元素的过程。 + +## 结论 + +现在您已经掌握了 **如何将数据绑定** 到 **动态 HTML 表格**,为每条记录生成行,并在地址旁显示名字和姓氏。 + +## 接下来您应该学习什么? + +以下教程涵盖与本指南技术紧密相关的主题,帮助您进一步掌握 API 功能并在项目中探索替代实现方式。 + +- [How to Add CSS – Inline CSS to HTML Documents in Aspose.HTML for Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [How to Edit HTML Document Tree in Aspose.HTML for Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [How to Enable JavaScript in Aspose HTML – Load HTML & Get Text](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/chinese/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/chinese/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..b7a4e0e76 --- /dev/null +++ b/html/chinese/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,347 @@ +--- +category: general +date: 2026-09-07 +description: 如何使用 Java 将模板转换为 HTML。学习从模板生成 HTML,启用 foreach 循环,并查看完整的 Java 模板引擎示例。 +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: zh +lastmod: 2026-09-07 +og_description: 如何使用 Java 将模板转换为 HTML。本教程展示了完整的 Java 模板引擎示例,如何从模板生成 HTML,以及如何使用 foreach。 +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: 使用 Java 将模板转换为 HTML 的逐步指南 +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: 如何使用 Java 模板引擎将模板转换为 HTML +url: /zh/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 如何使用 Java 模板引擎将模板转换为 HTML + +如果您需要 **将模板转换为** 可直接提供的 HTML 页面,本指南提供完整的解决方案。您将看到如何 **从模板生成 HTML**,以及如何使用 **foreach 循环**,并通过一个 **Java 模板引擎示例** 来处理 XML 或 JSON 数据源。 + +本教程涵盖了在单个 Java 程序中 **转换 html 模板** 文件所需的全部内容。完成后,您将拥有一个可运行的项目,能够读取模板、注入数据并将最终的 HTML 文件写入磁盘。 + +## 前置条件 + +在开始之前,请确保您拥有: + +* 已安装 JDK 17 或更高版本 +* Maven 或 Gradle 等构建工具(代码仅使用标准 Java 类) +* 对 Java I/O 以及 XML/JSON 格式有基本了解 + +核心步骤不需要外部库,但如果您愿意,也可以将简单的 `Template` 类替换为第三方引擎。 + +## 第一步:设置文件路径和模板标记 + +第一步定义模板、数据源和输出文件所在的位置。模板中包含 `{{...}}` 占位符,引擎将在运行时替换它们。 + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*为什么重要*:硬编码路径可以让您在任何 IDE 中运行程序而无需额外配置。您也可以将这些值作为命令行参数传入,以获得更大的灵活性。 + +## 第二步:加载数据源(XML 或 JSON) + +引擎需要一个数据对象,将占位符名称映射到对应的值。`TemplateData` 类抽象了 XML 和 JSON 的解析过程。 + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +如果 `dataPath` 指向 JSON 文件,`TemplateData` 会自动检测格式并构建相同的键/值映射。这种灵活性在不同环境下 **从模板生成 html** 时非常有用。 + +## 第三步:启用 foreach 指令以实现循环 + +许多模板需要对集合中的每个项目重复一段块。启用 foreach 指令后,引擎会处理 `{{#foreach items}} … {{/foreach}}` 块。 + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**如何使用 foreach**:在 `template.html` 中可以这样写: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +当引擎遇到该块时,会为 `TemplateData` 提供的 `products` 集合中的每个条目重复 `
  • ` 元素。 + +## 第四步:转换模板并写入结果 + +现在,引擎会用实际值替换所有标记,并将最终的 HTML 文件写入磁盘。 + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +`convertTemplate` 方法执行以下三项操作: + +1. 将 `template.html` 读取到内存中。 +2. 用 `data` 中对应的值替换每个 `{{key}}`。 +3. 处理所有已启用的 foreach 块。 +4. 将转换后的内容写入 `resultPath`。 + +## 第五步:运行程序并验证输出 + +最后,向用户提示转换已成功完成。 + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +执行 `main` 方法后,您应该在控制台看到类似如下的行: + +``` +Template conversion completed: src/main/resources/result.html +``` + +在浏览器中打开 `result.html`。所有占位符都会被替换,foreach 循环也会生成相应的 HTML 片段。 + +### 预期输出示例 + +给定一个简单的 `template.html`: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +以及一个 XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +生成的 `result.html` 将会是: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## 边缘情况与最佳实践提示 + +* **缺失占位符** – 引擎会保留未知的 `{{key}}` 标记不变。您可以添加一个验证步骤,扫描模板中剩余的花括号并记录警告。 +* **大数据集** – 对于成千上万的条目,考虑流式读取模板,而不是一次性加载整个文件到内存。当前实现对普通网页已足够。 +* **JSON 与 XML** – 如果切换为 JSON,保持相同的结构: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` 会自动解析,代码其余部分保持不变。 + +* **编码** – 确保模板和数据文件均使用 UTF‑8 编码,以避免字符损坏,尤其是在生成多语言 HTML 时。 + +* **安全性** – 不要直接将用户提供的数据注入 HTML 而不进行清理。若数据可能包含标记,请对 HTML 特殊字符进行转义。 + +## 完整可运行示例 + +下面是一个自包含的 Java 类,演示了所有步骤的组合。将其保存为 `TemplateConverter.java`,然后在 IDE 或命令行中运行。 + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## 接下来应该学习什么? + +以下教程涵盖了与本指南技术紧密相关的主题,帮助您在项目中进一步掌握 API 功能并探索替代实现方式。每个资源均提供完整的可运行代码示例和逐步说明。 + +- [How to Convert HTML to PDF Java – Using Aspose.HTML for Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [How to Edit HTML Using Aspose.HTML for Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Convert HTML to String using Aspose.HTML for Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/czech/java/creating-managing-html-documents/_index.md b/html/czech/java/creating-managing-html-documents/_index.md index 7d60b234d..a812bc55e 100644 --- a/html/czech/java/creating-managing-html-documents/_index.md +++ b/html/czech/java/creating-managing-html-documents/_index.md @@ -74,6 +74,8 @@ Naučte se vytvářet a spravovat dokumenty SVG pomocí Aspose.HTML pro Javu! Te Kompletní průvodce, jak v Javě dotazovat a získávat data z HTML pomocí Aspose.HTML, včetně příkladů a tipů. ### [Jak parsovat HTML v Javě – načíst, dotazovat a počítat prvky](./how-to-parse-html-java-load-query-count-elements/) Naučte se načíst HTML, dotazovat jej a počítat elementy v Javě pomocí Aspose.HTML v tomto podrobném průvodci. +### [Jak převést šablonu na HTML pomocí Java šablonového enginu](./how-to-convert-template-to-html-with-a-java-template-engine/) +### [Jak svázat data s dynamickou HTML tabulkou se sloupci jména a příjmení](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) {{< /blocks/products/pf/tutorial-page-section >}} @@ -93,4 +95,4 @@ Kompletní návod, jak pomocí Aspose.HTML pro Java extrahovat text z HTML dokum {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/czech/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/czech/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..e9a20bb56 --- /dev/null +++ b/html/czech/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,324 @@ +--- +category: general +date: 2026-09-07 +description: jak svázat data v dynamické HTML tabulce – naučte se efektivně generovat + řádky tabulky a vyplňovat pole jména a příjmení +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: cs +lastmod: 2026-09-07 +og_description: jak svázat data v dynamické HTML tabulce. Tento tutoriál ukazuje, + jak generovat řádky tabulky, zobrazit jméno a příjmení a naplnit řádky tabulky pomocí + JavaScriptu. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Jak svázat data s dynamickou HTML tabulkou – krok za krokem průvodce +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: Jak svázat data s dynamickou HTML tabulkou se sloupci jméno a příjmení +url: /cs/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Jak svázat data s dynamickou HTML tabulkou se sloupci křestní a příjmení + +Pokud potřebujete **svázat data** do tabulky, která roste s každým záznamem, tento návod ukazuje kompletní řešení. Uvidíte, jak vygenerovat dynamickou HTML tabulku, naplnit řádky tabulky a zobrazit křestní i příjmení každé osoby, aniž byste museli psát opakující se značky. + +Příklad používá lehkou šablonovací syntaxi, která funguje v jakémkoli moderním prohlížeči, ale koncepty platí i pro Handlebars, Mustache nebo server‑side enginy. Na konci tutoriálu můžete kód zkopírovat do svého projektu a okamžitě začít svazovat data. + +## Co tento tutoriál pokrývá + +* Jak strukturovat zdroj dat obsahující více osob +* Jak vytvořit znovupoužitelnou šablonu tabulky, která se opakuje pro každý záznam +* Jak svázat data a vygenerovat finální HTML značky +* Běžné úskalí při naplňování řádků tabulky a jak se jim vyhnout + +Externí knihovny nejsou vyžadovány, i když stejný vzor funguje s populárními šablonovacími frameworky. Jedinou podmínkou jsou základní znalosti HTML a JavaScriptu. + +## Předpoklady + +* Moderní prohlížeč (Chrome, Edge, Firefox nebo Safari) +* Editor pro soubory HTML/JavaScript +* Volitelně: JSON soubor nebo JavaScript objekt představující kolekci osob + +## Krok 1: Definujte zdroj dat + +Nejprve vytvořte JavaScript objekt, který odráží strukturu použité v šabloně. Každá osoba má křestní jméno, příjmení a objekt adresy. + +```html + +``` + +**Proč je to důležité:** Hierarchie objektu (`Persons.Person`) odpovídá smyčce `{{#foreach Persons.Person}}` v šabloně, což umožňuje enginu automaticky iterovat přes každý záznam. + +## Krok 2: Napište šablonu tabulky s blokem opakování + +Níže uvedená šablona používá jednoduchou Mustache‑stylovou syntaxi (`{{#foreach}}`) k opakování `` pro každou osobu. Umístěte šablonu do značky ` +``` + +**Proč je to důležité:** Direktiva `{{#foreach Persons.Person}}` říká enginu, aby opakoval vše mezi otevírací a uzavírací značkou pro každý objekt osoby. Uvnitř řádku můžete odkazovat na libovolnou vlastnost (`{{FirstName}}`, `{{LastName}}` atd.) a **dynamicky naplňovat řádky tabulky**. + +## Krok 3: Implementujte malou funkci pro vykreslení + +Protože tutoriál musí být samostatný, napíšeme minimální vykreslovač, který nahradí Mustache‑stylové zástupné symboly skutečnými hodnotami. Funkce prochází datový objekt, rozšiřuje blok opakování a vloží finální HTML do stránky. + +```html + +``` + +**Proč je to důležité:** Vykreslovač ukazuje **jak generovat tabulku** programově bez nutnosti načítat kompletní knihovnu. Také objasňuje transformaci ze šablony na finální HTML, což vám pomůže později přizpůsobit kód jiným šablonovacím enginům. + +## Krok 4: Přidejte zástupný prvek, kam se vygenerovaná tabulka zobrazí + +Vytvořte prázdný `
    `, který skript po vykreslení naplní. + +```html +
    +``` + +Když se stránka načte, skript nahradí obsah tohoto `
    ` plně vyplněnou tabulkou. + +## Krok 5: Ověřte výsledek + +Otevřete HTML soubor v prohlížeči. Měli byste vidět tabulku, která vypisuje celé jméno a adresu každé osoby: + +| Osoba | Adresa | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Pokud přidáte další objekty do pole `data.Persons.Person`, tabulka se automaticky rozroste — splní tak požadavek **naplnit řádky tabulky**. + +## Tip: zpracování prázdných kolekcí + +Když je datové pole prázdné, vykreslovač nyní vytváří prázdnou hlavičku tabulky. Pro lepší uživatelský zážitek přidejte podmínku: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Tato malá úprava zabrání zobrazení prázdné tabulky a poskytne uživatelům okamžitou zpětnou vazbu. + +## Běžné varianty a okrajové případy + +| Situace | Úprava | +|----------------------------------------|------------------------------------------------------------------------| +| Použití server‑side enginu (např. Handlebars) | Nahraďte vlastní `renderTemplate` voláním `Handlebars.compile` a předáním stejného datového objektu. | +| Potřeba seřadit řádky abecedně | Seřaďte `data.Persons.Person` před voláním `renderTemplate`. | +| Přidání sloupce pro telefonní číslo | Rozšiřte `` o `{{Phone}}` a zahrňte `Phone` do každého objektu osoby. | +| Velké datové sady (stovky řádků) | Vykreslujte řádky po částech nebo použijte virtuální posouvání, aby UI zůstalo responzivní. | + +## Kompletní funkční příklad + +Níže je celý HTML soubor, který můžete zkopírovat do `index.html`. Obsahuje všechny části probírané výše. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Očekávaný výstup** + +Stránka vykreslí tabulku se dvěma řádky, přičemž každý zobrazuje celé jméno a formátovanou adresu osoby. Přidáním dalších objektů do pole `Person` se automaticky přidají nové řádky — ukazuje **jak generovat tabulkové elementy** z dat. + +## Závěr + +Nyní už víte **jak svázat data** s **dynamickou HTML tabulkou**, generovat řádky pro každý záznam a zobrazovat hodnoty křestního a příjmení vedle adresy. + +## Co byste se měli naučit dál? + +Následující tutoriály pokrývají úzce související témata, která staví na technikách předvedených v tomto průvodci. Každý zdroj obsahuje kompletní funkční kódové příklady s podrobným krok‑za‑krokem vysvětlením, aby vám pomohl zvládnout další funkce API a prozkoumat alternativní přístupy ve vlastních projektech. + +- [Jak přidat CSS – Inline CSS do HTML dokumentů v Aspose.HTML pro Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [Jak upravit HTML Document Tree v Aspose.HTML pro Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [Jak povolit JavaScript v Aspose HTML – Načíst HTML a získat text](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/czech/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/czech/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..db891466e --- /dev/null +++ b/html/czech/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,231 @@ +--- +category: general +date: 2026-09-07 +description: Jak převést šablonu na HTML pomocí Javy. Naučte se generovat HTML ze + šablony, povolit smyčky foreach a zobrazit kompletní příklad Java šablonového enginu. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: cs +lastmod: 2026-09-07 +og_description: Jak převést šablonu na HTML pomocí Javy. Tento tutoriál ukazuje kompletní + příklad šablonového enginu v Javě, jak generovat HTML ze šablony a jak použít foreach. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Jak převést šablonu na HTML pomocí Javy – krok za krokem +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Jak převést šablonu na HTML pomocí Java šablonového enginu +url: /cs/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Jak převést šablonu na HTML pomocí Java šablonového enginu + +Pokud potřebujete **how to convert template** na připravenou HTML stránku, tento průvodce poskytuje kompletní řešení. Uvidíte, jak **generate HTML from template** soubory, povolit smyčkování pomocí **how to use foreach**, a projdete **java template engine example**, který funguje s XML nebo JSON zdroji dat. + +Tutoriál pokrývá vše potřebné k **convert html template** souborům v jediném Java programu. Na konci budete mít spustitelný projekt, který načte šablonu, vloží data a zapíše výsledný HTML soubor na disk. + +## Požadavky + +* JDK 17 nebo novější nainstalovaný +* Nástroj pro sestavení jako Maven nebo Gradle (kód používá pouze standardní třídy Java) +* Základní znalost Java I/O a formátů XML/JSON + +Pro základní kroky nejsou vyžadovány žádné externí knihovny, ale můžete nahradit jednoduché třídy `Template` třetí stranou, pokud chcete. + +## Krok 1: Nastavení cest k souborům a značek šablony + +První krok určuje, kde budou umístěny šablona, zdroj dat a výstup. Šablona obsahuje zástupné znaky `{{...}}`, které engine nahradí. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Proč je to důležité*: Hard‑coding cest vám umožní spustit program z libovolného IDE bez další konfigurace. Tyto hodnoty můžete také předat jako argumenty příkazové řádky pro větší flexibilitu. + +## Krok 2: Načtení zdroje dat (XML nebo JSON) + +Engine potřebuje datový objekt, který mapuje názvy zástupných znaků na hodnoty. Třída `TemplateData` abstrahuje parsování XML a JSON. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +Pokud `dataPath` ukazuje na JSON soubor, `TemplateData` automaticky detekuje formát a vytvoří stejnou mapu klíč/hodnota. Tato flexibilita je užitečná, když **generate html from template** v různých prostředích. + +## Krok 3: Povolení smyčkového direktivu foreach + +Mnoho šablon potřebuje opakovat blok pro každou položku ve sbírce. Povolení direktivy foreach říká engine, aby zpracoval bloky `{{#foreach items}} … {{/foreach}}`. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**Jak použít foreach**: V souboru `template.html` můžete napsat: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +Když engine narazí na tento blok, opakuje element `
  • ` pro každou položku ve sbírce `products` poskytnuté `TemplateData`. + +## Krok 4: Převod šablony a zápis výsledku + +Nyní engine nahradí všechny značky skutečnými hodnotami a zapíše finální HTML soubor. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +Metoda `convertTemplate` provádí tři akce: + +1. Načte `template.html` do paměti. +2. Nahradí každý `{{key}}` odpovídající hodnotou z `data`. +3. Zpracuje všechny povolené foreach bloky. +4. Zapíše transformovaný obsah do `resultPath`. + +## Krok 5: Spuštění programu a ověření výstupu + +Nakonec informujte uživatele, že konverze byla úspěšná. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +Když spustíte metodu `main`, měli byste vidět řádek v konzoli podobný: + +``` +Template conversion completed: src/main/resources/result.html +``` + +Otevřete `result.html` v prohlížeči. Všechny zástupné znaky budou nahrazeny a smyčky foreach vygenerují odpovídající HTML fragmenty. + +### Příklad očekávaného výstupu + +Pro jednoduchý `template.html`: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +A XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +Vygenerovaný `result.html` bude: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Okrajové případy a tipy na osvědčené postupy + +* **Chybějící zástupné znaky** – Engine ponechá neznámé značky `{{key}}` nezměněné. Můžete přidat validační krok, který prohledá šablonu po zbývajících závorkách a zaznamená varování. +* **Velké datové sady** – Pro tisíce položek zvažte streamování šablony místo načítání celého souboru do paměti. Současná implementace je v pořádku pro typické webové stránky. +* **JSON vs. XML** – Pokud přejdete na JSON, zachovejte stejnou strukturu: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` ji automaticky parsuje, takže zbytek kódu zůstane beze změny. +* **Kódování** – Ujistěte se, že jak šablona, tak datové soubory používají UTF‑8, aby nedošlo k poškození znaků, zejména při generování vícejazyčného HTML. +* **Bezpečnost** – Nespoléhejte na data poskytnutá uživatelem pro přímé vložení do HTML bez sanitizace. Escapujte speciální HTML znaky, pokud data mohou obsahovat značky. + +## Kompletní spustitelný příklad + +Níže je samostatná Java třída, která spojuje všechny kroky. Uložte ji jako `TemplateConverter.java` a spusťte z vašeho IDE nebo z příkazové řádky. + + + +## Co byste se měli naučit dál? + +Následující tutoriály pokrývají úzce související témata, která staví na technikách předvedených v tomto průvodci. Každý zdroj obsahuje kompletní funkční příklady kódu s podrobnými vysvětleními, které vám pomohou zvládnout další funkce API a prozkoumat alternativní přístupy k implementaci ve vašich projektech. + +- [How to Convert HTML to PDF Java – Using Aspose.HTML for Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [How to Edit HTML Using Aspose.HTML for Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Convert HTML to String using Aspose.HTML for Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/dutch/java/creating-managing-html-documents/_index.md b/html/dutch/java/creating-managing-html-documents/_index.md index 3a01e4c88..11736aa89 100644 --- a/html/dutch/java/creating-managing-html-documents/_index.md +++ b/html/dutch/java/creating-managing-html-documents/_index.md @@ -60,6 +60,8 @@ Leer hoe u HTML-documenten van strings maakt in Aspose.HTML voor Java met deze s Ontdek hoe u eenvoudig HTML-documenten kunt laden vanaf een URL in Java met Aspose.HTML. Inclusief stapsgewijze tutorial. ### [Genereer nieuwe HTML-documenten met Aspose.HTML voor Java](./generate-new-html-documents/) Leer hoe u nieuwe HTML-documenten maakt met Aspose.HTML voor Java met deze eenvoudige stapsgewijze handleiding. Begin met het genereren van dynamische HTML-inhoud. +### [Hoe een sjabloon omzetten naar HTML met een Java‑template‑engine](./how-to-convert-template-to-html-with-a-java-template-engine/) +Leer stap‑voor‑stap hoe u met een Java‑template‑engine sjablonen omzet naar HTML met Aspose.HTML voor Java. ### [HTML genereren vanuit JavaScript in Java – Complete stapsgewijze handleiding](./generate-html-from-javascript-in-java-complete-step-by-step/) Leer hoe u HTML genereert vanuit JavaScript-code in Java met een volledige stap‑voor‑stap handleiding. ### [Documentlaadgebeurtenissen afhandelen in Aspose.HTML voor Java](./handle-document-load-events/) @@ -74,6 +76,8 @@ Leer hoe u HTML kunt query'en in Java met deze volledige stap‑voor‑stap hand Leer hoe u HTML laadt, query't en elementen telt in Java met Aspose.HTML – stap‑voor‑stap handleiding. ### [Asynchroon JavaScript uitvoeren in Java – Complete stapsgewijze handleiding](./execute-async-javascript-in-java-complete-step-by-step-guide/) Leer hoe u asynchrone JavaScript-code in Java kunt uitvoeren met Aspose.HTML, inclusief stap‑voor‑stap instructies. +### [Hoe gegevens binden aan een dynamische HTML-tabel met kolommen voor voor- en achternaam](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) +Leer hoe u dynamisch een HTML-tabel vult met voor- en achternamen met Aspose.HTML voor Java. {{< /blocks/products/pf/tutorial-page-section >}} @@ -100,4 +104,4 @@ Leer hoe u door een NodeList in Java kunt itereren met een stapsgewijze handleid {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/dutch/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/dutch/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..36241e02f --- /dev/null +++ b/html/dutch/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,325 @@ +--- +category: general +date: 2026-09-07 +description: hoe data te binden in een dynamische HTML‑tabel – leer hoe je tabelrijen + genereert en de velden voor voor‑ en achternaam efficiënt vult +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: nl +lastmod: 2026-09-07 +og_description: hoe data te binden in een dynamische HTML‑tabel. Deze tutorial laat + zien hoe je tabelrijen genereert, voor‑ en achternaam weergeeft en tabelrijen vult + met JavaScript. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Hoe je data bindt aan een dynamische HTML‑tabel – stapsgewijze handleiding +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: Hoe gegevens binden aan een dynamische HTML‑tabel met kolommen voor voor‑ en + achternaam +url: /nl/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Hoe data te binden aan een dynamische HTML-tabel met kolommen voor voor- en achternaam + +Als je **hoe data te binden** in een tabel die groeit met elk record, laat deze gids een volledige oplossing zien. Je zult zien hoe je een dynamische HTML-tabel genereert, tabelrijen vult en de voor‑ en achternaam van elke persoon weergeeft zonder repetitieve markup te schrijven. + +Het voorbeeld gebruikt een lichtgewicht templating‑syntaxis die werkt in elke moderne browser, maar de concepten zijn toepasbaar op Handlebars, Mustache of server‑side engines. Aan het einde van de tutorial kun je de code naar je project kopiëren en direct data binden. + +## Wat deze tutorial behandelt + +* Hoe een gegevensbron te structureren die meerdere personen bevat +* Hoe een herbruikbare tabeltemplate te maken die voor elke invoer wordt herhaald +* Hoe de data te binden en de uiteindelijke HTML‑markup te genereren +* Veelvoorkomende valkuilen bij het vullen van tabelrijen en hoe deze te vermijden + +Er zijn geen externe bibliotheken nodig, hoewel hetzelfde patroon werkt met populaire templating‑frameworks. De enige voorwaarde is basiskennis van HTML en JavaScript. + +## Voorvereisten + +* Een moderne browser (Chrome, Edge, Firefox of Safari) +* Een editor voor HTML/JavaScript‑bestanden +* Optioneel: een JSON‑bestand of JavaScript‑object dat de personen‑collectie vertegenwoordigt + +## Stap 1: Definieer de gegevensbron + +Eerst maak je een JavaScript‑object dat de structuur van de template weerspiegelt. Elke persoon heeft een voornaam, achternaam en een adresobject. + +```html + +``` + +**Waarom dit belangrijk is:** De objecthiërarchie (`Persons.Person`) komt overeen met de `{{#foreach Persons.Person}}`‑lus in de template, waardoor de engine automatisch over elk item kan itereren. + +## Stap 2: Schrijf de tabeltemplate met een herhaalblok + +De onderstaande template gebruikt een eenvoudige Mustache‑style syntaxis (`{{#foreach}}`) om de `` voor elke persoon te herhalen. Plaats de template binnen een ` +``` + +**Waarom dit belangrijk is:** De `{{#foreach Persons.Person}}`‑directive vertelt de engine om alles tussen de opening‑ en sluit‑tags te herhalen voor elk persoon‑object. Binnen de rij kun je elke eigenschap refereren (`{{FirstName}}`, `{{LastName}}`, enz.) om **tabelrijen dynamisch te vullen**. + +## Stap 3: Implementeer een kleine renderfunctie + +Omdat de tutorial zelf‑voorzienend moet zijn, schrijven we een minimale renderer die de Mustache‑style placeholders vervangt door echte waarden. De functie doorloopt het data‑object, breidt het herhaalblok uit en injecteert de uiteindelijke HTML in de pagina. + +```html + +``` + +**Waarom dit belangrijk is:** De renderer toont **hoe een tabel**‑markup programmatisch te genereren zonder een volledige bibliotheek te gebruiken. Het verduidelijkt ook de transformatie van template naar uiteindelijke HTML, wat je later helpt de code aan te passen voor andere templating‑engines. + +## Stap 4: Voeg een placeholder toe waar de gegenereerde tabel zal verschijnen + +Maak een lege `
    ` die het script na het renderen zal vullen. + +```html +
    +``` + +Wanneer de pagina laadt, vervangt het script de inhoud van dit `
    `‑element door de volledig ingevulde tabel. + +## Stap 5: Verifieer het resultaat + +Open het HTML‑bestand in een browser. Je zou een tabel moeten zien die de volledige naam en het adres van elke persoon opsomt: + +| Person | Address | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Als je meer objecten toevoegt aan de `data.Persons.Person`‑array, groeit de tabel automatisch — wat voldoet aan de **populate table rows**‑vereiste. + +## Pro tip: omgaan met lege collecties + +Wanneer de data‑array leeg is, geeft de renderer momenteel een lege tabelkop weer. Voeg een guard toe om een duidelijkere gebruikerservaring te bieden: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Deze kleine wijziging voorkomt dat een lege tabel verschijnt en geeft gebruikers directe feedback. + +## Veelvoorkomende variaties en randgevallen + +| Situatie | Aanpassing | +|----------------------------------------|----------------------------------------------------------------------------| +| Een server‑side engine gebruiken (bijv. Handlebars) | Vervang de aangepaste `renderTemplate` door `Handlebars.compile` en geef hetzelfde data‑object door. | +| Rijen alfabetisch sorteren | Sorteer `data.Persons.Person` vóór het aanroepen van `renderTemplate`. | +| Een kolom voor telefoonnummer toevoegen | Breid de `` uit met `{{Phone}}` en voeg `Phone` toe aan elk persoon‑object. | +| Grote datasets (honderden rijen) | Render rijen in delen of gebruik virtueel scrollen om de UI responsief te houden. | + +## Volledig werkend voorbeeld + +Hieronder vind je het complete HTML‑bestand dat je kunt kopiëren‑plakken in `index.html`. Het bevat alle besproken onderdelen. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Verwachte output** + +De pagina rendert een tabel met twee rijen, waarbij elke rij de volledige naam en het geformatteerde adres van een persoon toont. Het toevoegen van meer objecten aan de `Person`‑array voegt automatisch nieuwe rijen toe — wat **hoe een tabel**‑elementen uit data te genereren demonstreert. + +## Conclusie + +Je weet nu **hoe data te binden** aan een **dynamische HTML‑tabel**, rijen voor elk record te genereren en voor‑ en achternaamwaarden naast het adres weer te geven. + +## Wat moet je hierna leren? + +De volgende tutorials behandelen nauw verwante onderwerpen die voortbouwen op de technieken die in deze gids worden gedemonstreerd. Elke bron bevat volledige werkende code‑voorbeelden met stap‑voor‑stap uitleg om je te helpen extra API‑functies onder de knie te krijgen en alternatieve implementatie‑benaderingen in je eigen projecten te verkennen. + +- [Hoe CSS toe te voegen – Inline CSS aan HTML‑documenten in Aspose.HTML voor Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [Hoe de HTML‑documentboom te bewerken in Aspose.HTML voor Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [Hoe JavaScript in te schakelen in Aspose HTML – HTML laden & tekst ophalen](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/dutch/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/dutch/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..ba5832837 --- /dev/null +++ b/html/dutch/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,347 @@ +--- +category: general +date: 2026-09-07 +description: Hoe je een template naar HTML converteert met Java. Leer HTML te genereren + vanuit een template, foreach‑loops in te schakelen, en zie een volledig voorbeeld + van een Java‑template‑engine. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: nl +lastmod: 2026-09-07 +og_description: Hoe een template naar HTML te converteren met Java. Deze tutorial + toont een compleet voorbeeld van een Java‑template‑engine, hoe je HTML genereert + vanuit een template, en hoe je foreach gebruikt. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Hoe je een template naar HTML converteert met Java – stapsgewijze handleiding +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Hoe een sjabloon naar HTML converteren met een Java-sjabloonengine +url: /nl/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Hoe een template om te zetten naar HTML met een Java template engine + +Als je een **how to convert template** wilt omzetten naar een kant‑klaar HTML‑pagina, biedt deze gids een complete oplossing. Je zult zien hoe je **generate HTML from template** bestanden genereert, looping inschakelt met **how to use foreach**, en een **java template engine example** doorloopt die werkt met XML‑ of JSON‑gegevensbronnen. + +De tutorial behandelt alles wat nodig is om **convert html template** bestanden in één Java‑programma te verwerken. Aan het einde heb je een uitvoerbaar project dat een template leest, gegevens injecteert en het uiteindelijke HTML‑bestand naar schijf schrijft. + +## Vereisten + +* JDK 17 of later geïnstalleerd +* Een build‑tool zoals Maven of Gradle (de code gebruikt alleen standaard Java‑klassen) +* Basiskennis van Java I/O en XML/JSON‑formaten + +Voor de kernstappen zijn geen externe bibliotheken vereist, maar je kunt de eenvoudige `Template`‑klassen vervangen door een third‑party engine als je dat wilt. + +## Stap 1: Stel bestands‑paden en template‑markeringen in + +De eerste stap bepaalt waar de template, gegevensbron en uitvoer zich bevinden. De template bevat `{{...}}`‑plaatsaanduidingen die de engine zal vervangen. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Waarom dit belangrijk is*: Het hard‑coderen van paden stelt je in staat het programma vanuit elke IDE uit te voeren zonder extra configuratie. Je kunt deze waarden ook als command‑line‑argumenten doorgeven voor meer flexibiliteit. + +## Stap 2: Laad de gegevensbron (XML of JSON) + +De engine heeft een gegevensobject nodig dat plaatsaanduidingsnamen naar waarden mappt. De `TemplateData`‑klasse abstraheert XML‑ en JSON‑parsing. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +Als `dataPath` naar een JSON‑bestand wijst, detecteert `TemplateData` automatisch het formaat en bouwt dezelfde sleutel/waarde‑map. Deze flexibiliteit is handig wanneer je **generate html from template** in verschillende omgevingen. + +## Stap 3: Schakel de foreach‑directive in voor looping + +Veel templates moeten een blok herhalen voor elk item in een collectie. Het inschakelen van de foreach‑directive vertelt de engine om `{{#foreach items}} … {{/foreach}}`‑blokken te verwerken. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**How to use foreach**: In `template.html` kun je schrijven: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +Wanneer de engine dit blok tegenkomt, herhaalt hij het `
  • `‑element voor elke invoer in de `products`‑collectie die door `TemplateData` wordt geleverd. + +## Stap 4: Converteer de template en schrijf het resultaat + +Nu vervangt de engine alle markeringen door werkelijke waarden en schrijft het uiteindelijke HTML‑bestand. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +De `convertTemplate`‑methode voert drie acties uit: + +1. Leest `template.html` in het geheugen. +2. Vervangt elke `{{key}}` door de overeenkomstige waarde uit `data`. +3. Verwerkt alle ingeschakelde foreach‑blokken. +4. Schrijft de getransformeerde inhoud naar `resultPath`. + +## Stap 5: Voer het programma uit en controleer de output + +Tot slot informeer je de gebruiker dat de conversie geslaagd is. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +Wanneer je de `main`‑methode uitvoert, zou je een console‑regel moeten zien die lijkt op: + +``` +Template conversion completed: src/main/resources/result.html +``` + +Open `result.html` in een browser. Alle plaatsaanduidingen worden vervangen, en eventuele foreach‑lussen hebben de juiste HTML‑fragmenten gegenereerd. + +### Voorbeeld van verwachte output + +Gegeven een eenvoudige `template.html`: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +En een XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +Het gegenereerde `result.html` zal zijn: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Randgevallen en best‑practice tips + +* **Missing placeholders** – De engine laat onbekende `{{key}}`‑markeringen ongewijzigd. Je kunt een validatiestap toevoegen die de template scant op resterende accolades en een waarschuwing logt. +* **Large data sets** – Voor duizenden items, overweeg de template te streamen in plaats van het hele bestand in het geheugen te laden. De huidige implementatie is geschikt voor typische webpagina's. +* **JSON vs. XML** – Als je overschakelt naar JSON, behoud dan dezelfde structuur: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` zal het automatisch parseren, zodat de rest van de code ongewijzigd blijft. +* **Encoding** – Zorg ervoor dat zowel template‑ als gegevensbestanden UTF‑8 gebruiken om tekencorruptie te voorkomen, vooral bij het genereren van meertalige HTML. +* **Security** – Vertrouw gebruikers‑gegenereerde data niet voor directe injectie in HTML zonder sanitatie. Escape HTML‑speciale tekens als de data markup kan bevatten. + +## Volledig uitvoerbaar voorbeeld + +Hieronder staat een zelfstandige Java‑klasse die alle stappen combineert. Sla deze op als `TemplateConverter.java` en voer hem uit vanuit je IDE of de command‑line. + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## Wat moet je hierna leren? + +De volgende tutorials behandelen nauw verwante onderwerpen die voortbouwen op de technieken die in deze gids worden gedemonstreerd. Elke bron bevat volledige werkende code‑voorbeelden met stap‑voor‑stap uitleg om je te helpen extra API‑functies onder de knie te krijgen en alternatieve implementatie‑benaderingen in je eigen projecten te verkennen. + +- [Hoe HTML naar PDF converteren in Java – Met Aspose.HTML voor Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [Hoe HTML bewerken met Aspose.HTML voor Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [HTML naar String converteren met Aspose.HTML voor Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/english/java/creating-managing-html-documents/_index.md b/html/english/java/creating-managing-html-documents/_index.md index 8789ecf58..598b6a2e6 100644 --- a/html/english/java/creating-managing-html-documents/_index.md +++ b/html/english/java/creating-managing-html-documents/_index.md @@ -58,6 +58,8 @@ Learn how to load HTML documents from streams using Aspose.HTML for Java. This g Learn how to create HTML documents from strings in Aspose.HTML for Java with this step-by-step guide. ### [How to Query HTML in Java – Complete Tutorial](./how-to-query-html-in-java-complete-tutorial/) Learn how to query HTML in Java using Aspose.HTML with this comprehensive step-by-step guide. +### [How to bind data to a dynamic HTML table with first and last name columns](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) +Learn how to bind data to a dynamic HTML table with first and last name columns using Aspose.HTML for Java. ### [Create sandbox for HTML in Java – Step‑by‑Step Guide](./create-sandbox-for-html-in-java-step-by-step-guide/) Learn how to set up a secure HTML sandbox in Java using Aspose.HTML with this detailed step-by-step guide. ### [Load HTML Documents from URL in Aspose.HTML for Java](./load-html-documents-from-url/) @@ -74,6 +76,8 @@ Learn how to execute asynchronous JavaScript in Java using Aspose.HTML with this Learn to create and manage SVG documents using Aspose.HTML for Java! This comprehensive guide covers everything from basic creation to advanced manipulation. ### [How to Parse HTML Java – Load, Query & Count Elements](./how-to-parse-html-java-load-query-count-elements/) Learn to load HTML, query elements, and count them using Aspose.HTML for Java in this comprehensive step-by-step guide. +### [How to convert template to HTML with a Java template engine](./how-to-convert-template-to-html-with-a-java-template-engine/) +Learn how to convert templates into HTML using a Java template engine with Aspose.HTML for Java. Detailed step-by-step guide. {{< /blocks/products/pf/tutorial-page-section >}} @@ -100,4 +104,4 @@ Learn how to extract text from HTML using Aspose.HTML for Java with this compreh {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/english/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/english/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..5f3c231bf --- /dev/null +++ b/html/english/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,326 @@ +--- +category: general +date: 2026-09-07 +description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: en +lastmod: 2026-09-07 +og_description: how to bind data in a dynamic HTML table. This tutorial shows how + to generate table rows, display first and last name, and populate table rows with + JavaScript. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: How to bind data to a dynamic HTML table – step‑by‑step guide +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: How to bind data to a dynamic HTML table with first and last name columns +url: /java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# How to bind data to a dynamic HTML table with first and last name columns + +If you need to **how to bind data** into a table that grows with each record, this guide shows a complete solution. You’ll see how to generate a dynamic HTML table, populate table rows, and display each person’s first and last name without writing repetitive markup. + +The example uses a lightweight templating syntax that works in any modern browser, but the concepts apply to Handlebars, Mustache, or server‑side engines alike. By the end of the tutorial you can copy the code into your project and start binding data instantly. + +## What this tutorial covers + +* How to structure a data source that contains multiple persons +* How to create a reusable table template that repeats for each entry +* How to bind the data and generate the final HTML markup +* Common pitfalls when populating table rows and how to avoid them + +No external libraries are required, although the same pattern works with popular templating frameworks. The only prerequisite is basic HTML and JavaScript knowledge. + +## Prerequisites + +* A modern browser (Chrome, Edge, Firefox, or Safari) +* An editor for HTML/JavaScript files +* Optional: a JSON file or JavaScript object that represents the persons collection + +## Step 1: Define the data source + +First, create a JavaScript object that mirrors the structure used in the template. Each person has a first name, last name, and an address object. + +```html + +``` + +**Why this matters:** The object hierarchy (`Persons.Person`) matches the `{{#foreach Persons.Person}}` loop in the template, allowing the engine to iterate over every entry automatically. + +## Step 2: Write the table template with a repeat block + +The template below uses a simple Mustache‑style syntax (`{{#foreach}}`) to repeat the `` for each person. Place the template inside a ` +``` + +**Why this matters:** The `{{#foreach Persons.Person}}` directive tells the engine to repeat everything between the opening and closing tags for each person object. Inside the row you can reference any property (`{{FirstName}}`, `{{LastName}}`, etc.) to **populate table rows** dynamically. + +## Step 3: Implement a tiny rendering function + +Because the tutorial must be self‑contained, we’ll write a minimal renderer that replaces the Mustache‑style placeholders with real values. The function walks the data object, expands the repeat block, and injects the final HTML into the page. + +```html + +``` + +**Why this matters:** The renderer demonstrates **how to generate table** markup programmatically without pulling in a full library. It also clarifies the transformation from template to final HTML, which helps you adapt the code to other templating engines later. + +## Step 4: Add a placeholder where the generated table will appear + +Create an empty `
    ` that the script will fill after rendering. + +```html +
    +``` + +When the page loads, the script replaces this `
    `’s contents with the fully populated table. + +## Step 5: Verify the result + +Open the HTML file in a browser. You should see a table that lists each person’s full name and address: + +| Person | Address | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +If you add more objects to the `data.Persons.Person` array, the table automatically grows—fulfilling the **populate table rows** requirement. + +## Pro tip: handling empty collections + +When the data array is empty, the renderer currently outputs an empty table header. To provide a clearer user experience, add a guard: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +This small change prevents an empty table from appearing and gives users immediate feedback. + +## Common variations and edge cases + +| Situation | Adjustment | +|----------------------------------------|----------------------------------------------------------------------------| +| Using a server‑side engine (e.g., Handlebars) | Replace the custom `renderTemplate` with `Handlebars.compile` and pass the same data object. | +| Need to sort rows alphabetically | Sort `data.Persons.Person` before calling `renderTemplate`. | +| Adding a column for phone number | Extend the `` with `{{Phone}}` and include `Phone` in each person object. | +| Large data sets (hundreds of rows) | Render rows in chunks or use virtual scrolling to keep the UI responsive. | + +## Full working example + +Below is the complete HTML file you can copy‑paste into `index.html`. It contains all the pieces discussed above. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Expected output** + +The page renders a table with two rows, each showing the full name and formatted address of a person. Adding more objects to the `Person` array automatically adds new rows—demonstrating **how to generate table** elements from data. + +## Conclusion + +You now know **how to bind data** to a **dynamic HTML table**, generate rows for each record, and display first and last name values alongside address + + +## What Should You Learn Next? + + +The following tutorials cover closely related topics that build on the techniques demonstrated in this guide. Each resource includes complete working code examples with step-by-step explanations to help you master additional API features and explore alternative implementation approaches in your own projects. + +- [How to Add CSS – Inline CSS to HTML Documents in Aspose.HTML for Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [How to Edit HTML Document Tree in Aspose.HTML for Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [How to Enable JavaScript in Aspose HTML – Load HTML & Get Text](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/english/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/og-image.png b/html/english/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/og-image.png new file mode 100644 index 000000000..7e274158d Binary files /dev/null and b/html/english/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/og-image.png differ diff --git a/html/english/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/english/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..64b5adb74 --- /dev/null +++ b/html/english/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,351 @@ +--- +category: general +date: 2026-09-07 +description: How to convert template to HTML using Java. Learn to generate HTML from + a template, enable foreach loops, and see a full java template engine example. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: en +lastmod: 2026-09-07 +og_description: How to convert template to HTML using Java. This tutorial shows a + complete java template engine example, how to generate HTML from a template, and + how to use foreach. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: How to convert template to HTML with Java – step‑by‑step guide +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: How to convert template to HTML with a Java template engine +url: /java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# How to convert template to HTML with a Java template engine + +If you need to **how to convert template** into a ready‑to‑serve HTML page, this guide provides a complete solution. You will see how to **generate HTML from template** files, enable looping with **how to use foreach**, and walk through a **java template engine example** that works with XML or JSON data sources. + +The tutorial covers everything required to **convert html template** files in a single Java program. By the end you will have a runnable project that reads a template, injects data, and writes the final HTML file to disk. + +## Prerequisites + +Before you start, make sure you have: + +* JDK 17 or later installed +* A build tool such as Maven or Gradle (the code uses only standard Java classes) +* Basic familiarity with Java I/O and XML/JSON formats + +No external libraries are required for the core steps, but you can replace the simple `Template` classes with a third‑party engine if you prefer. + +## Step 1: Set up file paths and template markers + +The first step defines where the template, data source, and output will live. The template contains `{{...}}` placeholders that the engine will replace. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Why this matters*: Hard‑coding paths lets you run the program from any IDE without extra configuration. You can also pass these values as command‑line arguments for more flexibility. + +## Step 2: Load the data source (XML or JSON) + +The engine needs a data object that maps placeholder names to values. The `TemplateData` class abstracts XML and JSON parsing. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +If `dataPath` points to a JSON file, `TemplateData` automatically detects the format and builds the same key/value map. This flexibility is useful when you **generate html from template** in different environments. + +## Step 3: Enable the foreach directive for looping + +Many templates need to repeat a block for each item in a collection. Enabling the foreach directive tells the engine to process `{{#foreach items}} … {{/foreach}}` blocks. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**How to use foreach**: Inside `template.html` you can write: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +When the engine encounters this block, it repeats the `
  • ` element for each entry in the `products` collection supplied by `TemplateData`. + +## Step 4: Convert the template and write the result + +Now the engine replaces all markers with actual values and writes the final HTML file. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +The `convertTemplate` method performs three actions: + +1. Reads `template.html` into memory. +2. Substitutes each `{{key}}` with the corresponding value from `data`. +3. Processes any enabled foreach blocks. +4. Writes the transformed content to `resultPath`. + +## Step 5: Run the program and verify output + +Finally, inform the user that the conversion succeeded. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +When you execute the `main` method, you should see a console line similar to: + +``` +Template conversion completed: src/main/resources/result.html +``` + +Open `result.html` in a browser. All placeholders will be replaced, and any foreach loops will have generated the appropriate HTML fragments. + +### Expected output example + +Given a simple `template.html`: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +And an XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +The generated `result.html` will be: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Edge cases and best‑practice tips + +* **Missing placeholders** – The engine leaves unknown `{{key}}` markers unchanged. You can add a validation step that scans the template for remaining braces and logs a warning. +* **Large data sets** – For thousands of items, consider streaming the template instead of loading the whole file into memory. The current implementation is fine for typical web pages. +* **JSON vs. XML** – If you switch to JSON, keep the same structure: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` will parse it automatically, so the rest of the code stays unchanged. + +* **Encoding** – Ensure both template and data files use UTF‑8 to avoid character corruption, especially when generating multilingual HTML. + +* **Security** – Do not trust user‑provided data for direct injection into HTML without sanitization. Escape HTML special characters if the data may contain markup. + +## Full runnable example + +Below is a self‑contained Java class that puts all steps together. Save it as `TemplateConverter.java` and run it from your IDE or command line. + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## What Should You Learn Next? + + +The following tutorials cover closely related topics that build on the techniques demonstrated in this guide. Each resource includes complete working code examples with step-by-step explanations to help you master additional API features and explore alternative implementation approaches in your own projects. + +- [How to Convert HTML to PDF Java – Using Aspose.HTML for Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [How to Edit HTML Using Aspose.HTML for Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Convert HTML to String using Aspose.HTML for Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/english/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/og-image.png b/html/english/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/og-image.png new file mode 100644 index 000000000..9c8136f44 Binary files /dev/null and b/html/english/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/og-image.png differ diff --git a/html/french/java/creating-managing-html-documents/_index.md b/html/french/java/creating-managing-html-documents/_index.md index 444dd0f6d..1393213f0 100644 --- a/html/french/java/creating-managing-html-documents/_index.md +++ b/html/french/java/creating-managing-html-documents/_index.md @@ -68,12 +68,10 @@ Apprenez à générer du HTML à partir de code JavaScript en Java avec ce guide Apprenez à créer et à gérer des documents SVG à l'aide d'Aspose.HTML pour Java ! Ce guide complet couvre tout, de la création de base à la manipulation avancée. ### [Créer un bac à sable pour HTML en Java – Guide étape par étape](./create-sandbox-for-html-in-java-step-by-step-guide/) Apprenez à créer un environnement sécurisé pour manipuler du HTML en Java avec Aspose.HTML, guide complet pas à pas. -### [Comment interroger le HTML en Java – Tutoriel complet](./how-to-query-html-in-java-complete-tutorial/) -Apprenez à interroger et extraire des données HTML en Java avec Aspose.HTML grâce à ce guide complet étape par étape. -### [Comment analyser le HTML en Java – Charger, interroger et compter les éléments](./how-to-parse-html-java-load-query-count-elements/) -Apprenez à charger, interroger et compter les éléments HTML en Java avec Aspose.HTML grâce à ce guide complet. -### [Exécuter du JavaScript asynchrone en Java – Guide complet étape par étape](./execute-async-javascript-in-java-complete-step-by-step-guide/) -Apprenez à exécuter du JavaScript de façon asynchrone dans vos applications Java avec Aspose.HTML, guide complet pas à pas. +### [Comment convertir un modèle en HTML avec un moteur de modèles Java](./how-to-convert-template-to-html-with-a-java-template-engine/) +Apprenez à transformer un template en HTML en Java avec un moteur de templates, guide étape par étape. +### [Lier des données à un tableau HTML dynamique avec colonnes prénom et nom de famille](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) +Apprenez à lier des données à un tableau HTML dynamique contenant des colonnes prénom et nom en Java avec Aspose.HTML. {{< /blocks/products/pf/tutorial-page-section >}} @@ -99,4 +97,4 @@ Apprenez à extraire du texte d'un document HTML en Java avec Aspose.HTML grâce {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/french/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/french/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..90f0fab2f --- /dev/null +++ b/html/french/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,326 @@ +--- +category: general +date: 2026-09-07 +description: Comment lier des données dans un tableau HTML dynamique – apprenez à + générer des lignes de tableau et à remplir efficacement les champs prénom et nom. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: fr +lastmod: 2026-09-07 +og_description: Comment lier des données dans un tableau HTML dynamique. Ce tutoriel + montre comment générer des lignes de tableau, afficher le prénom et le nom, et remplir + les lignes du tableau avec JavaScript. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Comment lier des données à un tableau HTML dynamique – guide étape par étape +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: Comment lier des données à un tableau HTML dynamique avec les colonnes prénom + et nom +url: /fr/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Comment lier des données à un tableau HTML dynamique avec des colonnes prénom et nom de famille + +Si vous avez besoin de **comment lier des données** dans un tableau qui s’agrandit à chaque enregistrement, ce guide propose une solution complète. Vous verrez comment générer un tableau HTML dynamique, remplir les lignes du tableau et afficher le prénom et le nom de chaque personne sans écrire de balisage répétitif. + +L’exemple utilise une syntaxe de templating légère qui fonctionne dans n’importe quel navigateur moderne, mais les concepts s’appliquent également à Handlebars, Mustache ou aux moteurs côté serveur. À la fin du tutoriel, vous pourrez copier le code dans votre projet et commencer à lier les données immédiatement. + +## Ce que couvre ce tutoriel + +* Comment structurer une source de données contenant plusieurs personnes +* Comment créer un modèle de tableau réutilisable qui se répète pour chaque entrée +* Comment lier les données et générer le balisage HTML final +* Pièges courants lors du remplissage des lignes du tableau et comment les éviter + +Aucune bibliothèque externe n’est requise, bien que le même schéma fonctionne avec les frameworks de templating populaires. La seule condition préalable est une connaissance de base en HTML et JavaScript. + +## Prérequis + +* Un navigateur moderne (Chrome, Edge, Firefox ou Safari) +* Un éditeur pour les fichiers HTML/JavaScript +* Facultatif : un fichier JSON ou un objet JavaScript représentant la collection de personnes + +## Étape 1 : Définir la source de données + +Tout d’abord, créez un objet JavaScript qui reflète la structure utilisée dans le modèle. Chaque personne possède un prénom, un nom de famille et un objet adresse. + +```html + +``` + +**Pourquoi c’est important :** La hiérarchie d’objets (`Persons.Person`) correspond à la boucle `{{#foreach Persons.Person}}` du modèle, ce qui permet au moteur d’itérer automatiquement sur chaque entrée. + +## Étape 2 : Écrire le modèle de tableau avec un bloc de répétition + +Le modèle ci‑dessous utilise une syntaxe de type Mustache (`{{#foreach}}`) pour répéter le `` pour chaque personne. Placez le modèle à l’intérieur d’une balise ` +``` + +**Pourquoi c’est important :** La directive `{{#foreach Persons.Person}}` indique au moteur de répéter tout ce qui se trouve entre les balises d’ouverture et de fermeture pour chaque objet personne. À l’intérieur de la ligne, vous pouvez référencer n’importe quelle propriété (`{{FirstName}}`, `{{LastName}}`, etc.) pour **remplir les lignes du tableau** dynamiquement. + +## Étape 3 : Implémenter une petite fonction de rendu + +Comme le tutoriel doit être autonome, nous allons écrire un rendu minimal qui remplace les espaces réservés de type Mustache par les vraies valeurs. La fonction parcourt l’objet de données, développe le bloc de répétition et injecte le HTML final dans la page. + +```html + +``` + +**Pourquoi c’est important :** Le rendu montre **comment générer le tableau** de façon programmatique sans faire appel à une bibliothèque complète. Il clarifie également la transformation du modèle vers le HTML final, ce qui vous aide à adapter le code à d’autres moteurs de templating ultérieurement. + +## Étape 4 : Ajouter un espace réservé où le tableau généré apparaîtra + +Créez un `
    ` vide que le script remplira après le rendu. + +```html +
    +``` + +Lorsque la page se charge, le script remplace le contenu de ce `
    ` par le tableau entièrement rempli. + +## Étape 5 : Vérifier le résultat + +Ouvrez le fichier HTML dans un navigateur. Vous devriez voir un tableau listant le nom complet et l’adresse de chaque personne : + +| Personne | Adresse | +|------------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Si vous ajoutez d’autres objets au tableau `data.Persons.Person`, le tableau s’agrandit automatiquement — satisfaisant ainsi l’exigence de **remplir les lignes du tableau**. + +## Astuce : gérer les collections vides + +Lorsque le tableau de données est vide, le rendu produit actuellement un en‑tête de tableau vide. Pour offrir une meilleure expérience utilisateur, ajoutez une protection : + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Ce petit changement empêche l’affichage d’un tableau vide et fournit un retour immédiat à l’utilisateur. + +## Variations courantes et cas limites + +| Situation | Ajustement | +|----------------------------------------|----------------------------------------------------------------------------| +| Utilisation d’un moteur côté serveur (p. ex. Handlebars) | Remplacez le `renderTemplate` personnalisé par `Handlebars.compile` et passez le même objet de données. | +| Besoin de trier les lignes alphabétiquement | Triez `data.Persons.Person` avant d’appeler `renderTemplate`. | +| Ajout d’une colonne pour le numéro de téléphone | Étendez le `` avec `{{Phone}}` et incluez `Phone` dans chaque objet personne. | +| Jeux de données volumineux (des centaines de lignes) | Rendre les lignes par blocs ou utiliser le défilement virtuel pour garder l’interface réactive. | + +## Exemple complet fonctionnel + +Voici le fichier HTML complet que vous pouvez copier‑coller dans `index.html`. Il contient toutes les pièces abordées ci‑dessus. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Résultat attendu** + +La page rend un tableau avec deux lignes, chacune affichant le nom complet et l’adresse formatée d’une personne. Ajouter davantage d’objets au tableau `Person` ajoute automatiquement de nouvelles lignes — démontrant **comment générer des éléments de tableau** à partir de données. + +## Conclusion + +Vous savez maintenant **comment lier des données** à un **tableau HTML dynamique**, générer des lignes pour chaque enregistrement et afficher les valeurs de prénom et de nom de famille aux côtés de l’adresse. + +## Que devriez‑vous apprendre ensuite ? + + +Les tutoriels suivants couvrent des sujets étroitement liés qui s’appuient sur les techniques présentées dans ce guide. Chaque ressource inclut des exemples de code complets avec des explications pas à pas pour vous aider à maîtriser d’autres fonctionnalités d’API et explorer des approches d’implémentation alternatives dans vos propres projets. + +- [Comment ajouter du CSS – CSS en ligne aux documents HTML dans Aspose.HTML pour Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [Comment modifier l’arbre du document HTML dans Aspose.HTML pour Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [Comment activer JavaScript dans Aspose HTML – Charger le HTML & obtenir le texte](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/french/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/french/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..058188c9b --- /dev/null +++ b/html/french/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,347 @@ +--- +category: general +date: 2026-09-07 +description: Comment convertir un modèle en HTML avec Java. Apprenez à générer du + HTML à partir d’un modèle, à activer les boucles foreach et à voir un exemple complet + de moteur de templates Java. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: fr +lastmod: 2026-09-07 +og_description: Comment convertir un modèle en HTML avec Java. Ce tutoriel montre + un exemple complet de moteur de templates Java, comment générer du HTML à partir + d’un modèle, et comment utiliser la boucle foreach. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Comment convertir un modèle en HTML avec Java – guide étape par étape +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Comment convertir un modèle en HTML avec un moteur de templates Java +url: /fr/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Comment convertir un modèle en HTML avec un moteur de templates Java + +Si vous avez besoin de **how to convert template** en une page HTML prête à être servie, ce guide fournit une solution complète. Vous verrez comment **generate HTML from template** des fichiers, activer les boucles avec **how to use foreach**, et parcourir un **java template engine example** qui fonctionne avec des sources de données XML ou JSON. + +Le tutoriel couvre tout ce qui est nécessaire pour **convert html template** des fichiers dans un seul programme Java. À la fin, vous disposerez d'un projet exécutable qui lit un modèle, injecte des données et écrit le fichier HTML final sur le disque. + +## Prérequis + +* JDK 17 ou version ultérieure installé +* Un outil de construction tel que Maven ou Gradle (le code utilise uniquement les classes Java standard) +* Familiarité de base avec Java I/O et les formats XML/JSON + +Aucune bibliothèque externe n'est requise pour les étapes principales, mais vous pouvez remplacer les classes simples `Template` par un moteur tiers si vous le souhaitez. + +## Étape 1 : Configurer les chemins de fichiers et les marqueurs de modèle + +La première étape définit où le modèle, la source de données et la sortie seront situés. Le modèle contient des espaces réservés `{{...}}` que le moteur remplacera. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Pourquoi c'est important* : Le codage en dur des chemins vous permet d'exécuter le programme depuis n'importe quel IDE sans configuration supplémentaire. Vous pouvez également passer ces valeurs en tant qu'arguments de ligne de commande pour plus de flexibilité. + +## Étape 2 : Charger la source de données (XML ou JSON) + +Le moteur a besoin d'un objet de données qui associe les noms des espaces réservés aux valeurs. La classe `TemplateData` abstrait l'analyse XML et JSON. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +Si `dataPath` pointe vers un fichier JSON, `TemplateData` détecte automatiquement le format et construit la même carte clé/valeur. Cette flexibilité est utile lorsque vous **generate html from template** dans différents environnements. + +## Étape 3 : Activer la directive foreach pour les boucles + +De nombreux modèles doivent répéter un bloc pour chaque élément d'une collection. Activer la directive foreach indique au moteur de traiter les blocs `{{#foreach items}} … {{/foreach}}`. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**Comment utiliser foreach** : Dans `template.html` vous pouvez écrire : + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +Lorsque le moteur rencontre ce bloc, il répète l'élément `
  • ` pour chaque entrée de la collection `products` fournie par `TemplateData`. + +## Étape 4 : Convertir le modèle et écrire le résultat + +Le moteur remplace maintenant tous les marqueurs par les valeurs réelles et écrit le fichier HTML final. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +La méthode `convertTemplate` effectue trois actions : + +1. Lit `template.html` en mémoire. +2. Remplace chaque `{{key}}` par la valeur correspondante provenant de `data`. +3. Traite les blocs foreach activés. +4. Écrit le contenu transformé dans `resultPath`. + +## Étape 5 : Exécuter le programme et vérifier la sortie + +Enfin, informez l'utilisateur que la conversion a réussi. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +Lorsque vous exécutez la méthode `main`, vous devriez voir une ligne de console similaire à : + +``` +Template conversion completed: src/main/resources/result.html +``` + +Ouvrez `result.html` dans un navigateur. Tous les espaces réservés seront remplacés, et toutes les boucles foreach auront généré les fragments HTML appropriés. + +### Exemple de sortie attendue + +Étant donné un `template.html` simple : + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +Et un `data.xml` XML : + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +Le `result.html` généré sera : + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Cas limites et conseils de bonnes pratiques + +* **Placeholders manquants** – Le moteur laisse les marqueurs `{{key}}` inconnus inchangés. Vous pouvez ajouter une étape de validation qui parcourt le modèle à la recherche d'accolades restantes et consigne un avertissement. +* **Grandes ensembles de données** – Pour des milliers d'éléments, envisagez de diffuser le modèle au lieu de charger le fichier entier en mémoire. L'implémentation actuelle convient aux pages Web typiques. +* **JSON vs. XML** – Si vous passez à JSON, conservez la même structure : + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` le analysera automatiquement, de sorte que le reste du code reste inchangé. +* **Encodage** – Assurez-vous que les fichiers de modèle et de données utilisent UTF‑8 pour éviter la corruption des caractères, surtout lors de la génération de HTML multilingue. +* **Sécurité** – Ne faites pas confiance aux données fournies par l'utilisateur pour une injection directe dans le HTML sans désinfection. Échappez les caractères spéciaux HTML si les données peuvent contenir du balisage. + +## Exemple complet exécutable + +Ci-dessous se trouve une classe Java autonome qui regroupe toutes les étapes. Enregistrez‑la sous le nom `TemplateConverter.java` et exécutez‑la depuis votre IDE ou la ligne de commande. + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## Que devriez‑vous apprendre ensuite ? + +Les tutoriels suivants couvrent des sujets étroitement liés qui s'appuient sur les techniques démontrées dans ce guide. Chaque ressource comprend des exemples de code complets et fonctionnels avec des explications étape par étape pour vous aider à maîtriser des fonctionnalités d'API supplémentaires et explorer des approches d'implémentation alternatives dans vos propres projets. + +- [Comment convertir HTML en PDF Java – Utilisation d'Aspose.HTML pour Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [Comment modifier HTML avec Aspose.HTML pour Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Convertir HTML en chaîne avec Aspose.HTML pour Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/german/java/creating-managing-html-documents/_index.md b/html/german/java/creating-managing-html-documents/_index.md index 77ffe885c..26ee4686d 100644 --- a/html/german/java/creating-managing-html-documents/_index.md +++ b/html/german/java/creating-managing-html-documents/_index.md @@ -58,6 +58,8 @@ Erfahren Sie in dieser Schritt‑für‑Schritt‑Anleitung, wie Sie HTML-Dokume Erfahren Sie, wie Sie mit Aspose.HTML für Java HTML-Dokumente aus Streams laden. Diese Anleitung bietet eine Schritt‑für‑Schritt‑Anleitung zur nahtlosen HTML-Bearbeitung. ### [Erstellen Sie HTML-Dokumente aus Zeichenfolgen in Aspose.HTML für Java](./create-html-documents-from-string/) Erfahren Sie in dieser Schritt‑für‑Schritt‑Anleitung, wie Sie in Aspose.HTML für Java HTML-Dokumente aus Zeichenfolgen erstellen. +### [Wie man Vorlagen mit einer Java-Template-Engine in HTML konvertiert](./how-to-convert-template-to-html-with-a-java-template-engine/) +Erfahren Sie, wie Sie Vorlagen mithilfe einer Java-Template-Engine in HTML umwandeln und dynamische Inhalte erzeugen. ### [Laden Sie HTML-Dokumente von einer URL in Aspose.HTML für Java](./load-html-documents-from-url/) Entdecken Sie, wie Sie mit Aspose.HTML ganz einfach HTML-Dokumente von einer URL in Java laden. Schritt‑für‑Schritt‑Anleitung inklusive. ### [Generieren Sie neue HTML-Dokumente mit Aspose.HTML für Java](./generate-new-html-documents/) @@ -72,6 +74,7 @@ Erfahren Sie, wie Sie in Aspose.HTML für Java eine sichere Sandbox für HTML er Erfahren Sie, wie Sie HTML-Inhalte in Java abfragen und verarbeiten – Schritt‑für‑Schritt‑Anleitung für vollständiges Verständnis. ### [HTML in Java parsen – Laden, Abfragen & Elemente zählen](./how-to-parse-html-java-load-query-count-elements/) Erfahren Sie, wie Sie HTML in Java laden, Elemente abfragen und deren Anzahl bestimmen – Schritt‑für‑Schritt‑Anleitung. +### [Daten an eine dynamische HTML‑Tabelle mit Vor‑ und Nachnamen‑Spalten binden](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) {{< /blocks/products/pf/tutorial-page-section >}} @@ -99,4 +102,4 @@ Erfahren Sie in dieser Schritt‑für‑Schritt‑Anleitung, wie Sie Text aus HT {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/german/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/german/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..1b53bbb93 --- /dev/null +++ b/html/german/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,325 @@ +--- +category: general +date: 2026-09-07 +description: Wie man Daten in einer dynamischen HTML‑Tabelle bindet – lerne, wie man + Tabellenzeilen generiert und die Felder für Vor‑ und Nachname effizient füllt. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: de +lastmod: 2026-09-07 +og_description: Wie man Daten in einer dynamischen HTML‑Tabelle bindet. Dieses Tutorial + zeigt, wie man Tabellenzeilen erzeugt, Vor‑ und Nachnamen anzeigt und Tabellenzeilen + mit JavaScript füllt. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Wie man Daten an eine dynamische HTML‑Tabelle bindet – Schritt‑für‑Schritt‑Anleitung +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: Wie man Daten an eine dynamische HTML‑Tabelle mit Vor‑ und Nachnamen‑Spalten + bindet +url: /de/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Wie man Daten an eine dynamische HTML‑Tabelle mit Vor‑ und Nachnamen‑Spalten bindet + +Wenn Sie **Daten binden** in eine Tabelle, die mit jedem Datensatz wächst, zeigt Ihnen dieser Leitfaden eine vollständige Lösung. Sie sehen, wie man eine dynamische HTML‑Tabelle erzeugt, Tabellenzeilen füllt und den Vor‑ und Nachnamen jeder Person anzeigt, ohne wiederholtes Markup zu schreiben. + +Das Beispiel verwendet eine leichtgewichtige Templating‑Syntax, die in jedem modernen Browser funktioniert, aber die Konzepte gelten gleichermaßen für Handlebars, Mustache oder serverseitige Engines. Am Ende des Tutorials können Sie den Code in Ihr Projekt kopieren und sofort Daten binden. + +## Was dieses Tutorial behandelt + +* Wie man eine Datenquelle strukturiert, die mehrere Personen enthält +* Wie man ein wiederverwendbares Tabellenvorlage erstellt, das für jeden Eintrag wiederholt wird +* Wie man die Daten bindet und das endgültige HTML‑Markup generiert +* Häufige Fallstricke beim Befüllen von Tabellenzeilen und wie man sie vermeidet + +Keine externen Bibliotheken sind erforderlich, obwohl dasselbe Muster mit beliebten Templating‑Frameworks funktioniert. Die einzige Voraussetzung ist Grundkenntnis in HTML und JavaScript. + +## Voraussetzungen + +* Ein moderner Browser (Chrome, Edge, Firefox oder Safari) +* Ein Editor für HTML/JavaScript‑Dateien +* Optional: eine JSON‑Datei oder ein JavaScript‑Objekt, das die Personensammlung repräsentiert + +## Schritt 1: Datenquelle definieren + +Zuerst erstellen Sie ein JavaScript‑Objekt, das die im Template verwendete Struktur widerspiegelt. Jede Person hat einen Vornamen, Nachnamen und ein Adress‑Objekt. + +```html + +``` + +**Warum das wichtig ist:** Die Objekt‑Hierarchie (`Persons.Person`) entspricht der `{{#foreach Persons.Person}}`‑Schleife im Template und ermöglicht es der Engine, automatisch über jeden Eintrag zu iterieren. + +## Schritt 2: Tabellenvorlage mit Wiederholungsblock schreiben + +Das nachstehende Template verwendet eine einfache Mustache‑ähnliche Syntax (`{{#foreach}}`), um das `` für jede Person zu wiederholen. Platzieren Sie das Template innerhalb eines ` +``` + +**Warum das wichtig ist:** Die Anweisung `{{#foreach Persons.Person}}` weist die Engine an, alles zwischen den öffnenden und schließenden Tags für jedes Personen‑Objekt zu wiederholen. Innerhalb der Zeile können Sie jede Eigenschaft (`{{FirstName}}`, `{{LastName}}` usw.) referenzieren, um **Tabellenzeilen** dynamisch zu füllen. + +## Schritt 3: Kleine Rendering‑Funktion implementieren + +Da das Tutorial eigenständig sein muss, schreiben wir einen minimalen Renderer, der die Mustache‑ähnlichen Platzhalter durch echte Werte ersetzt. Die Funktion durchläuft das Datenobjekt, erweitert den Wiederholungsblock und fügt das endgültige HTML in die Seite ein. + +```html + +``` + +**Warum das wichtig ist:** Der Renderer zeigt **wie man Tabellen‑Markup** programmgesteuert erzeugt, ohne eine komplette Bibliothek einzubinden. Er verdeutlicht zudem die Transformation vom Template zum finalen HTML, was Ihnen später hilft, den Code an andere Templating‑Engines anzupassen. + +## Schritt 4: Platzhalter hinzufügen, an dem die generierte Tabelle erscheint + +Erstellen Sie ein leeres `
    `, das das Skript nach dem Rendern füllt. + +```html +
    +``` + +Wenn die Seite geladen wird, ersetzt das Skript den Inhalt dieses `
    ` durch die vollständig gefüllte Tabelle. + +## Schritt 5: Ergebnis überprüfen + +Öffnen Sie die HTML‑Datei in einem Browser. Sie sollten eine Tabelle sehen, die den vollständigen Namen und die Adresse jeder Person auflistet: + +| Person | Adresse | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Wenn Sie weitere Objekte zum Array `data.Persons.Person` hinzufügen, wächst die Tabelle automatisch – was die Anforderung **Tabellenzeilen füllen** erfüllt. + +## Profi‑Tipp: Umgang mit leeren Sammlungen + +Wenn das Daten‑Array leer ist, gibt der Renderer derzeit einen leeren Tabellenkopf aus. Um ein klareres Benutzererlebnis zu bieten, fügen Sie eine Prüfung hinzu: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Diese kleine Änderung verhindert, dass eine leere Tabelle angezeigt wird, und gibt den Benutzern sofortiges Feedback. + +## Häufige Variationen und Sonderfälle + +| Situation | Anpassung | +|----------------------------------------|----------------------------------------------------------------------------| +| Verwendung einer server‑seitigen Engine (z. B. Handlebars) | Ersetzen Sie das benutzerdefinierte `renderTemplate` durch `Handlebars.compile` und übergeben Sie dasselbe Datenobjekt. | +| Notwendigkeit, Zeilen alphabetisch zu sortieren | Sortieren Sie `data.Persons.Person` bevor Sie `renderTemplate` aufrufen. | +| Hinzufügen einer Spalte für Telefonnummer | Erweitern Sie das `` um `{{Phone}}` und fügen Sie `Phone` in jedes Personen‑Objekt ein. | +| Große Datensätze (Hunderte von Zeilen) | Rendern Sie Zeilen in Portionen oder verwenden Sie virtuelles Scrollen, um die UI reaktionsfähig zu halten. | + +## Vollständiges funktionierendes Beispiel + +Unten finden Sie die vollständige HTML‑Datei, die Sie in `index.html` kopieren‑und‑einfügen können. Sie enthält alle oben besprochenen Bestandteile. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Erwartete Ausgabe** + +Die Seite rendert eine Tabelle mit zwei Zeilen, die jeweils den vollständigen Namen und die formatierte Adresse einer Person anzeigen. Das Hinzufügen weiterer Objekte zum `Person`‑Array fügt automatisch neue Zeilen hinzu – was **wie man Tabellen‑Elemente** aus Daten generiert, demonstriert. + +## Fazit + +Sie wissen jetzt **wie man Daten** an eine **dynamische HTML‑Tabelle** bindet, Zeilen für jeden Datensatz erzeugt und Vor‑ und Nachnamenwerte zusammen mit der Adresse anzeigt. + +## Was sollten Sie als Nächstes lernen? + +Die folgenden Tutorials behandeln eng verwandte Themen, die auf den in diesem Leitfaden gezeigten Techniken aufbauen. Jede Ressource enthält vollständige funktionierende Code‑Beispiele mit Schritt‑für‑Schritt‑Erklärungen, um Ihnen zu helfen, weitere API‑Funktionen zu meistern und alternative Implementierungsansätze in Ihren eigenen Projekten zu erkunden. + +- [Wie man CSS hinzufügt – Inline‑CSS zu HTML‑Dokumenten in Aspose.HTML für Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [Wie man den HTML‑Dokumentbaum in Aspose.HTML für Java bearbeitet](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [Wie man JavaScript in Aspose HTML aktiviert – HTML laden & Text extrahieren](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/german/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/german/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..6ac900669 --- /dev/null +++ b/html/german/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,347 @@ +--- +category: general +date: 2026-09-07 +description: Wie man ein Template mit Java in HTML konvertiert. Lernen Sie, HTML aus + einem Template zu erzeugen, foreach‑Schleifen zu aktivieren und ein vollständiges + Java‑Template‑Engine‑Beispiel zu sehen. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: de +lastmod: 2026-09-07 +og_description: Wie man Vorlagen mit Java in HTML konvertiert. Dieses Tutorial zeigt + ein vollständiges Beispiel einer Java-Template-Engine, wie man HTML aus einer Vorlage + generiert und wie man foreach verwendet. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Wie man eine Vorlage in HTML mit Java konvertiert – Schritt‑für‑Schritt‑Anleitung +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Wie man ein Template mit einer Java-Template-Engine in HTML konvertiert +url: /de/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Wie man Vorlagen mit einer Java-Template-Engine in HTML konvertiert + +Wenn Sie **how to convert template** in eine sofort einsatzbereite HTML-Seite umwandeln müssen, bietet dieser Leitfaden eine vollständige Lösung. Sie werden sehen, wie man **generate HTML from template** Dateien erzeugt, Schleifen mit **how to use foreach** aktiviert und ein **java template engine example** durchgeht, das mit XML- oder JSON-Datenquellen funktioniert. + +Das Tutorial deckt alles ab, was nötig ist, um **convert html template** Dateien in einem einzigen Java‑Programm zu verarbeiten. Am Ende haben Sie ein ausführbares Projekt, das eine Vorlage liest, Daten einfügt und die endgültige HTML‑Datei auf die Festplatte schreibt. + +## Voraussetzungen + +* JDK 17 oder neuer installiert +* Ein Build‑Tool wie Maven oder Gradle (der Code verwendet nur Standard‑Java‑Klassen) +* Grundlegende Kenntnisse in Java‑I/O und XML/JSON‑Formaten + +Für die Kernschritte sind keine externen Bibliotheken erforderlich, aber Sie können die einfachen `Template`‑Klassen durch eine Drittanbieter‑Engine ersetzen, wenn Sie möchten. + +## Schritt 1: Dateipfade und Vorlagenmarker einrichten + +Der erste Schritt definiert, wo die Vorlage, die Datenquelle und die Ausgabe gespeichert werden. Die Vorlage enthält `{{...}}`‑Platzhalter, die die Engine ersetzen wird. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Warum das wichtig ist*: Das Hard‑Coding von Pfaden ermöglicht es Ihnen, das Programm aus jeder IDE ohne zusätzliche Konfiguration auszuführen. Sie können diese Werte auch als Befehlszeilenargumente übergeben, um mehr Flexibilität zu erhalten. + +## Schritt 2: Datenquelle laden (XML oder JSON) + +Die Engine benötigt ein Datenobjekt, das Platzhalternamen zu Werten zuordnet. Die Klasse `TemplateData` abstrahiert das Parsen von XML und JSON. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +Wenn `dataPath` auf eine JSON‑Datei zeigt, erkennt `TemplateData` das Format automatisch und erstellt dieselbe Schlüssel/Wert‑Map. Diese Flexibilität ist nützlich, wenn Sie **generate html from template** in verschiedenen Umgebungen ausführen. + +## Schritt 3: Die foreach‑Direktive für Schleifen aktivieren + +Viele Vorlagen müssen einen Block für jedes Element einer Sammlung wiederholen. Das Aktivieren der foreach‑Direktive weist die Engine an, `{{#foreach items}} … {{/foreach}}`‑Blöcke zu verarbeiten. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**Wie man foreach verwendet**: In `template.html` können Sie schreiben: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +Wenn die Engine diesen Block findet, wiederholt sie das `
  • `‑Element für jeden Eintrag in der von `TemplateData` bereitgestellten `products`‑Sammlung. + +## Schritt 4: Vorlage konvertieren und Ergebnis schreiben + +Jetzt ersetzt die Engine alle Marker durch tatsächliche Werte und schreibt die endgültige HTML‑Datei. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +Die Methode `convertTemplate` führt drei Aktionen aus: + +1. Liest `template.html` in den Speicher. +2. Ersetzt jedes `{{key}}` durch den entsprechenden Wert aus `data`. +3. Verarbeitet alle aktivierten foreach‑Blöcke. +4. Schreibt den transformierten Inhalt nach `resultPath`. + +## Schritt 5: Programm ausführen und Ausgabe überprüfen + +Abschließend informieren Sie den Benutzer, dass die Konvertierung erfolgreich war. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +Wenn Sie die `main`‑Methode ausführen, sollten Sie eine Konsolenzeile ähnlich der folgenden sehen: + +``` +Template conversion completed: src/main/resources/result.html +``` + +Öffnen Sie `result.html` in einem Browser. Alle Platzhalter werden ersetzt, und alle foreach‑Schleifen haben die entsprechenden HTML‑Fragmente erzeugt. + +### Erwartetes Ausgabe‑Beispiel + +Gegeben eine einfache `template.html`: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +Und ein XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +Die erzeugte `result.html` wird sein: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Randfälle und Best‑Practice‑Tipps + +* **Fehlende Platzhalter** – Die Engine lässt unbekannte `{{key}}`‑Marker unverändert. Sie können einen Validierungsschritt hinzufügen, der die Vorlage nach verbleibenden geschweiften Klammern durchsucht und eine Warnung protokolliert. +* **Große Datensätze** – Bei tausenden Elementen sollten Sie in Betracht ziehen, die Vorlage zu streamen, anstatt die gesamte Datei in den Speicher zu laden. Die aktuelle Implementierung ist für typische Webseiten ausreichend. +* **JSON vs. XML** – Wenn Sie zu JSON wechseln, behalten Sie dieselbe Struktur bei: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` wird sie automatisch parsen, sodass der Rest des Codes unverändert bleibt. +* **Kodierung** – Stellen Sie sicher, dass sowohl Vorlagen‑ als auch Datendateien UTF‑8 verwenden, um Zeichenkorruption zu vermeiden, insbesondere beim Erzeugen mehrsprachiger HTML. +* **Sicherheit** – Vertrauen Sie benutzerbereitgestellten Daten nicht für direkte Injektion in HTML ohne Bereinigung. Escapen Sie HTML‑Sonderzeichen, falls die Daten Markup enthalten könnten. + +## Vollständiges ausführbares Beispiel + +Unten finden Sie eine eigenständige Java‑Klasse, die alle Schritte zusammenführt. Speichern Sie sie als `TemplateConverter.java` und führen Sie sie aus Ihrer IDE oder über die Befehlszeile aus. + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## Was sollten Sie als Nächstes lernen? + +Die folgenden Tutorials behandeln eng verwandte Themen, die auf den in diesem Leitfaden gezeigten Techniken aufbauen. Jede Ressource enthält vollständige funktionsfähige Code‑Beispiele mit Schritt‑für‑Schritt‑Erklärungen, um Ihnen zu helfen, zusätzliche API‑Funktionen zu beherrschen und alternative Implementierungsansätze in Ihren eigenen Projekten zu erkunden. + +- [Wie man HTML zu PDF in Java konvertiert – Verwendung von Aspose.HTML für Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [Wie man HTML mit Aspose.HTML für Java bearbeitet](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [HTML in String konvertieren mit Aspose.HTML für Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/greek/java/creating-managing-html-documents/_index.md b/html/greek/java/creating-managing-html-documents/_index.md index 6e913fc93..cded48b24 100644 --- a/html/greek/java/creating-managing-html-documents/_index.md +++ b/html/greek/java/creating-managing-html-documents/_index.md @@ -75,6 +75,10 @@ url: /el/java/creating-managing-html-documents/ Μάθετε πώς να φορτώνετε, ερωτάτε και μετράτε στοιχεία HTML σε Java με το Aspose.HTML, βήμα‑βήμα οδηγός. ### [Εκτέλεση ασύγχρονης JavaScript σε Java – Πλήρης οδηγός βήμα‑βήμα](./execute-async-javascript-in-java-complete-step-by-step-guide/) Μάθετε πώς να εκτελείτε κώδικα JavaScript ασύγχρονα σε εφαρμογές Java με το Aspose.HTML, βήμα‑βήμα οδηγίες. +### [Πώς να μετατρέψετε πρότυπο σε HTML με μηχανή προτύπων Java](./how-to-convert-template-to-html-with-a-java-template-engine/) +Μάθετε πώς να μετατρέπετε πρότυπα σε HTML χρησιμοποιώντας μια μηχανή προτύπων Java με το Aspose.HTML. +### [Πώς να δεσμεύσετε δεδομένα σε έναν δυναμικό πίνακα HTML με στήλες ονόματος και επωνύμου](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) +Μάθετε πώς να δεσμεύσετε δεδομένα σε έναν δυναμικό πίνακα HTML με στήλες πρώτου ονόματος και επωνύμου. {{< /blocks/products/pf/tutorial-page-section >}} @@ -92,4 +96,4 @@ url: /el/java/creating-managing-html-documents/ {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/greek/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/greek/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..a28804519 --- /dev/null +++ b/html/greek/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,325 @@ +--- +category: general +date: 2026-09-07 +description: πώς να δεσμεύσετε δεδομένα σε έναν δυναμικό πίνακα HTML – μάθετε πώς + να δημιουργείτε σειρές πίνακα και να γεμίζετε τα πεδία όνομα και επώνυμο αποδοτικά +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: el +lastmod: 2026-09-07 +og_description: πώς να δεσμεύσετε δεδομένα σε έναν δυναμικό πίνακα HTML. Αυτό το σεμινάριο + δείχνει πώς να δημιουργήσετε γραμμές πίνακα, να εμφανίσετε το όνομα και το επώνυμο, + και να γεμίσετε τις γραμμές του πίνακα με JavaScript. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Πώς να δεσμεύσετε δεδομένα σε έναν δυναμικό πίνακα HTML – βήμα‑βήμα οδηγός +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: Πώς να δεσμεύσετε δεδομένα σε έναν δυναμικό πίνακα HTML με στήλες Όνομα και + Επώνυμο +url: /el/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Πώς να δεσμεύσετε δεδομένα σε έναν δυναμικό πίνακα HTML με στήλες όνομα και επώνυμο + +Αν χρειάζεστε **πώς να δεσμεύσετε δεδομένα** σε έναν πίνακα που μεγαλώνει με κάθε εγγραφή, αυτός ο οδηγός παρουσιάζει μια πλήρη λύση. Θα δείτε πώς να δημιουργήσετε έναν δυναμικό πίνακα HTML, να γεμίσετε τις γραμμές του πίνακα και να εμφανίσετε το όνομα και το επώνυμο κάθε ατόμου χωρίς να γράψετε επαναλαμβανόμενο markup. + +Το παράδειγμα χρησιμοποιεί μια ελαφριά σύνταξη templating που λειτουργεί σε οποιονδήποτε σύγχρονο περιηγητή, αλλά οι έννοιες ισχύουν και για Handlebars, Mustache ή server‑side μηχανές. Στο τέλος του tutorial μπορείτε να αντιγράψετε τον κώδικα στο έργο σας και να αρχίσετε να δεσμεύετε δεδομένα αμέσως. + +## Τι καλύπτει αυτό το tutorial + +* Πώς να δομήσετε μια πηγή δεδομένων που περιέχει πολλούς ανθρώπους +* Πώς να δημιουργήσετε ένα επαναχρησιμοποιήσιμο πρότυπο πίνακα που επαναλαμβάνεται για κάθε καταχώρηση +* Πώς να δεσμεύσετε τα δεδομένα και να δημιουργήσετε το τελικό markup HTML +* Συνηθισμένα προβλήματα κατά τη γεμίσματος των γραμμών του πίνακα και πώς να τα αποφύγετε + +Δεν απαιτούνται εξωτερικές βιβλιοθήκες, αν και το ίδιο μοτίβο λειτουργεί με δημοφιλή frameworks templating. Η μόνη προαπαιτούμενη γνώση είναι βασικά HTML και JavaScript. + +## Προαπαιτούμενα + +* Ένας σύγχρονος περιηγητής (Chrome, Edge, Firefox ή Safari) +* Ένας επεξεργαστής για αρχεία HTML/JavaScript +* Προαιρετικά: ένα αρχείο JSON ή αντικείμενο JavaScript που αντιπροσωπεύει τη συλλογή των ατόμων + +## Βήμα 1: Ορίστε την πηγή δεδομένων + +Πρώτα, δημιουργήστε ένα αντικείμενο JavaScript που αντικατοπτρίζει τη δομή που χρησιμοποιείται στο πρότυπο. Κάθε άτομο έχει όνομα, επώνυμο και ένα αντικείμενο διεύθυνσης. + +```html + +``` + +**Γιατί είναι σημαντικό:** Η ιεραρχία του αντικειμένου (`Persons.Person`) ταιριάζει με το βρόχο `{{#foreach Persons.Person}}` στο πρότυπο, επιτρέποντας στη μηχανή να επαναλάβει αυτόματα κάθε καταχώρηση. + +## Βήμα 2: Γράψτε το πρότυπο πίνακα με μπλοκ επανάληψης + +Το παρακάτω πρότυπο χρησιμοποιεί μια απλή σύνταξη τύπου Mustache (`{{#foreach}}`) για να επαναλάβει το `` για κάθε άτομο. Τοποθετήστε το πρότυπο μέσα σε μια ετικέτα ` +``` + +**Γιατί είναι σημαντικό:** Η οδηγία `{{#foreach Persons.Person}}` λέει στη μηχανή να επαναλάβει όλα μεταξύ των εναρκτήριων και κλειστικών ετικετών για κάθε αντικείμενο ατόμου. Μέσα στη γραμμή μπορείτε να αναφερθείτε σε οποιαδήποτε ιδιότητα (`{{FirstName}}`, `{{LastName}}` κ.λπ.) για **να γεμίσετε δυναμικά τις γραμμές του πίνακα**. + +## Βήμα 3: Υλοποιήστε μια μικρή συνάρτηση απόδοσης + +Επειδή το tutorial πρέπει να είναι αυτόνομο, θα γράψουμε έναν ελάχιστο renderer που αντικαθιστά τα placeholders τύπου Mustache με πραγματικές τιμές. Η συνάρτηση διασχίζει το αντικείμενο δεδομένων, επεκτείνει το μπλοκ επανάληψης και ενθέτει το τελικό HTML στη σελίδα. + +```html + +``` + +**Γιατί είναι σημαντικό:** Ο renderer δείχνει **πώς να δημιουργήσετε markup πίνακα** προγραμματιστικά χωρίς να ενσωματώσετε μια πλήρη βιβλιοθήκη. Επίσης διευκρινίζει τη μετατροπή από το πρότυπο στο τελικό HTML, κάτι που σας βοηθά να προσαρμόσετε τον κώδικα σε άλλες μηχανές templating αργότερα. + +## Βήμα 4: Προσθέστε ένα placeholder όπου θα εμφανιστεί ο παραγόμενος πίνακας + +Δημιουργήστε ένα κενό `
    ` που το script θα γεμίσει μετά την απόδοση. + +```html +
    +``` + +Όταν η σελίδα φορτωθεί, το script αντικαθιστά το περιεχόμενο αυτού του `
    ` με τον πλήρως γεμισμένο πίνακα. + +## Βήμα 5: Επαληθεύστε το αποτέλεσμα + +Ανοίξτε το αρχείο HTML σε έναν περιηγητή. Θα πρέπει να δείτε έναν πίνακα που καταγράφει το πλήρες όνομα και τη διεύθυνση κάθε ατόμου: + +| Person | Address | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Αν προσθέσετε περισσότερα αντικείμενα στον πίνακα `data.Persons.Person`, ο πίνακας μεγαλώνει αυτόματα—ικανοποιώντας την απαίτηση **γέμισης γραμμών πίνακα**. + +## Pro tip: διαχείριση κενών συλλογών + +Όταν ο πίνακας δεδομένων είναι κενός, ο renderer αυτή τη στιγμή παράγει μόνο την κεφαλίδα του πίνακα. Για καλύτερη εμπειρία χρήστη, προσθέστε έναν έλεγχο: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Αυτή η μικρή αλλαγή αποτρέπει την εμφάνιση ενός κενού πίνακα και παρέχει άμεση ανατροφοδότηση στον χρήστη. + +## Συνηθισμένες παραλλαγές και edge cases + +| Situation | Adjustment | +|----------------------------------------|----------------------------------------------------------------------------| +| Using a server‑side engine (e.g., Handlebars) | Replace the custom `renderTemplate` with `Handlebars.compile` and pass the same data object. | +| Need to sort rows alphabetically | Sort `data.Persons.Person` before calling `renderTemplate`. | +| Adding a column for phone number | Extend the `` with `{{Phone}}` and include `Phone` in each person object. | +| Large data sets (hundreds of rows) | Render rows in chunks or use virtual scrolling to keep the UI responsive. | + +## Πλήρες λειτουργικό παράδειγμα + +Παρακάτω βρίσκεται το πλήρες αρχείο HTML που μπορείτε να αντιγράψετε‑επικολλήσετε στο `index.html`. Περιέχει όλα τα στοιχεία που συζητήθηκαν παραπάνω. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Αναμενόμενο αποτέλεσμα** + +Η σελίδα εμφανίζει έναν πίνακα με δύο γραμμές, η καθεμία δείχνοντας το πλήρες όνομα και τη μορφοποιημένη διεύθυνση ενός ατόμου. Η προσθήκη περισσότερων αντικειμένων στον πίνακα `Person` προσθέτει αυτόματα νέες γραμμές—δείχνοντας **πώς να δημιουργήσετε στοιχεία πίνακα** από δεδομένα. + +## Συμπέρασμα + +Τώρα ξέρετε **πώς να δεσμεύσετε δεδομένα** σε έναν **δυναμικό πίνακα HTML**, να δημιουργήσετε γραμμές για κάθε εγγραφή και να εμφανίσετε τις τιμές του ονόματος και του επωνύμου μαζί με τη διεύθυνση. + +## Τι πρέπει να μάθετε στη συνέχεια; + +Τα παρακάτω tutorials καλύπτουν στενά σχετιζόμενα θέματα που επεκτείνουν τις τεχνικές που παρουσιάστηκαν σε αυτόν τον οδηγό. Κάθε πόρος περιλαμβάνει πλήρη λειτουργικό κώδικα με βήμα‑βήμα εξηγήσεις για να σας βοηθήσει να κυριαρχήσετε πρόσθετα χαρακτηριστικά API και να εξερευνήσετε εναλλακτικές προσεγγίσεις υλοποίησης στα δικά σας έργα. + +- [How to Add CSS – Inline CSS to HTML Documents in Aspose.HTML for Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [How to Edit HTML Document Tree in Aspose.HTML for Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [How to Enable JavaScript in Aspose HTML – Load HTML & Get Text](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/greek/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/greek/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..ba6249c35 --- /dev/null +++ b/html/greek/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,233 @@ +--- +category: general +date: 2026-09-07 +description: Πώς να μετατρέψετε ένα πρότυπο σε HTML χρησιμοποιώντας Java. Μάθετε να + δημιουργείτε HTML από ένα πρότυπο, να ενεργοποιείτε βρόχους foreach και δείτε ένα + πλήρες παράδειγμα μηχανής προτύπων Java. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: el +lastmod: 2026-09-07 +og_description: Πώς να μετατρέψετε ένα πρότυπο σε HTML χρησιμοποιώντας Java. Αυτό + το σεμινάριο παρουσιάζει ένα πλήρες παράδειγμα μηχανής προτύπων Java, πώς να δημιουργήσετε + HTML από ένα πρότυπο και πώς να χρησιμοποιήσετε το foreach. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Πώς να μετατρέψετε το πρότυπο σε HTML με τη Java – οδηγός βήμα‑προς‑βήμα +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Πώς να μετατρέψετε το πρότυπο σε HTML με μια Java μηχανή προτύπων +url: /el/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Πώς να μετατρέψετε ένα πρότυπο σε HTML με μια μηχανή προτύπων Java + +Αν χρειάζεστε **how to convert template** σε μια έτοιμη για εξυπηρέτηση σελίδα HTML, αυτός ο οδηγός παρέχει μια πλήρη λύση. Θα δείτε πώς να **generate HTML from template** αρχεία, να ενεργοποιήσετε την επανάληψη με **how to use foreach**, και να περάσετε από ένα **java template engine example** που λειτουργεί με πηγές δεδομένων XML ή JSON. + +Το tutorial καλύπτει όλα όσα απαιτούνται για **convert html template** αρχεία σε ένα μόνο πρόγραμμα Java. Στο τέλος θα έχετε ένα εκτελέσιμο έργο που διαβάζει ένα πρότυπο, ενσωματώνει δεδομένα και γράφει το τελικό αρχείο HTML στο δίσκο. + +## Προαπαιτούμενα + +* JDK 17 ή νεότερο εγκατεστημένο +* Ένα εργαλείο κατασκευής όπως Maven ή Gradle (ο κώδικας χρησιμοποιεί μόνο τυπικές κλάσεις Java) +* Βασική εξοικείωση με Java I/O και μορφές XML/JSON + +Δεν απαιτούνται εξωτερικές βιβλιοθήκες για τα βασικά βήματα, αλλά μπορείτε να αντικαταστήσετε τις απλές κλάσεις `Template` με μια μηχανή τρίτου μέρους αν προτιμάτε. + +## Βήμα 1: Ρύθμιση διαδρομών αρχείων και δεικτών προτύπου + +Το πρώτο βήμα ορίζει πού θα βρίσκονται το πρότυπο, η πηγή δεδομένων και το αποτέλεσμα. Το πρότυπο περιέχει δείκτες `{{...}}` που η μηχανή θα αντικαταστήσει. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Γιατί είναι σημαντικό*: Η σκληρή κωδικοποίηση των διαδρομών σας επιτρέπει να εκτελείτε το πρόγραμμα από οποιοδήποτε IDE χωρίς πρόσθετη διαμόρφωση. Μπορείτε επίσης να περάσετε αυτές τις τιμές ως ορίσματα γραμμής εντολών για μεγαλύτερη ευελιξία. + +## Βήμα 2: Φόρτωση πηγής δεδομένων (XML ή JSON) + +Η μηχανή χρειάζεται ένα αντικείμενο δεδομένων που αντιστοιχεί τα ονόματα των δεικτών σε τιμές. Η κλάση `TemplateData` αφαιρεί την πολυπλοκότητα του XML και JSON parsing. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +Αν το `dataPath` δείχνει σε αρχείο JSON, το `TemplateData` ανιχνεύει αυτόματα τη μορφή και δημιουργεί τον ίδιο χάρτη κλειδιού/τιμής. Αυτή η ευελιξία είναι χρήσιμη όταν **generate html from template** σε διαφορετικά περιβάλλοντα. + +## Βήμα 3: Ενεργοποίηση της οδηγίας foreach για επανάληψη + +Πολλά πρότυπα χρειάζονται να επαναλαμβάνουν ένα τμήμα για κάθε στοιχείο σε μια συλλογή. Η ενεργοποίηση της οδηγίας foreach λέει στη μηχανή να επεξεργαστεί τα μπλοκ `{{#foreach items}} … {{/foreach}}`. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**Πώς να χρησιμοποιήσετε foreach**: Μέσα στο `template.html` μπορείτε να γράψετε: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +Όταν η μηχανή συναντήσει αυτό το μπλοκ, επαναλαμβάνει το στοιχείο `
  • ` για κάθε εγγραφή στη συλλογή `products` που παρέχεται από το `TemplateData`. + +## Βήμα 4: Μετατροπή του προτύπου και εγγραφή του αποτελέσματος + +Τώρα η μηχανή αντικαθιστά όλους τους δείκτες με πραγματικές τιμές και γράφει το τελικό αρχείο HTML. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +Η μέθοδος `convertTemplate` εκτελεί τρεις ενέργειες: + +1. Διαβάζει το `template.html` στη μνήμη. +2. Αντικαθιστά κάθε `{{key}}` με την αντίστοιχη τιμή από το `data`. +3. Επεξεργάζεται τυχόν ενεργοποιημένα μπλοκ foreach. +4. Γράφει το μετασχηματισμένο περιεχόμενο στο `resultPath`. + +## Βήμα 5: Εκτέλεση του προγράμματος και επαλήθευση του αποτελέσματος + +Τέλος, ενημερώστε τον χρήστη ότι η μετατροπή ολοκληρώθηκε με επιτυχία. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +Όταν εκτελέσετε τη μέθοδο `main`, θα πρέπει να δείτε μια γραμμή κονσόλας παρόμοια με: + +``` +Template conversion completed: src/main/resources/result.html +``` + +Ανοίξτε το `result.html` σε ένα πρόγραμμα περιήγησης. Όλοι οι δείκτες θα έχουν αντικατασταθεί και οποιοσδήποτε βρόχος foreach θα έχει δημιουργήσει τα κατάλληλα τμήματα HTML. + +### Παράδειγμα αναμενόμενου αποτελέσματος + +Δεδομένου ενός απλού `template.html`: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +Και ενός XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +Το παραγόμενο `result.html` θα είναι: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Περιπτώσεις άκρων και συμβουλές βέλτιστων πρακτικών + +* **Missing placeholders** – Η μηχανή αφήνει αμετάβλητους τους άγνωστους δείκτες `{{key}}`. Μπορείτε να προσθέσετε ένα βήμα επικύρωσης που ελέγχει το πρότυπο για εναπομείναντες αγκύλες και καταγράφει μια προειδοποίηση. +* **Large data sets** – Για χιλιάδες στοιχεία, σκεφτείτε τη ροή (streaming) του προτύπου αντί να φορτώνετε ολόκληρο το αρχείο στη μνήμη. Η τρέχουσα υλοποίηση είναι επαρκής για τυπικές ιστοσελίδες. +* **JSON vs. XML** – Αν μεταβείτε σε JSON, διατηρήστε την ίδια δομή: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + Το `TemplateData` θα το αναλύσει αυτόματα, έτσι ώστε το υπόλοιπο του κώδικα να παραμείνει αμετάβλητο. +* **Encoding** – Βεβαιωθείτε ότι τόσο το πρότυπο όσο και τα αρχεία δεδομένων χρησιμοποιούν UTF‑8 για να αποφύγετε τη διαφθορά χαρακτήρων, ειδικά όταν δημιουργείτε πολυγλωσσικό HTML. +* **Security** – Μην εμπιστεύεστε δεδομένα που παρέχονται από χρήστη για άμεση ενσωμάτωση σε HTML χωρίς εξουδετέρωση. Αποφύγετε ειδικούς χαρακτήρες HTML εάν τα δεδομένα μπορεί να περιέχουν σήμανση. + +## Πλήρες εκτελέσιμο παράδειγμα + +Παρακάτω υπάρχει μια αυτόνομη κλάση Java που συνδυάζει όλα τα βήματα. Αποθηκεύστε την ως `TemplateConverter.java` και εκτελέστε την από το IDE ή τη γραμμή εντολών. + + + +## Τι θα πρέπει να μάθετε στη συνέχεια; + +Τα παρακάτω tutorials καλύπτουν στενά σχετιζόμενα θέματα που βασίζονται στις τεχνικές που παρουσιάζονται σε αυτόν τον οδηγό. Κάθε πόρος περιλαμβάνει πλήρη λειτουργικά παραδείγματα κώδικα με βήμα‑βήμα εξηγήσεις για να σας βοηθήσουν να κατακτήσετε πρόσθετες δυνατότητες API και να εξερευνήσετε εναλλακτικές προσεγγίσεις υλοποίησης στα δικά σας έργα. + +- [How to Convert HTML to PDF Java – Using Aspose.HTML for Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [How to Edit HTML Using Aspose.HTML for Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Convert HTML to String using Aspose.HTML for Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hindi/java/creating-managing-html-documents/_index.md b/html/hindi/java/creating-managing-html-documents/_index.md index 9215dc72a..d5f4c6adf 100644 --- a/html/hindi/java/creating-managing-html-documents/_index.md +++ b/html/hindi/java/creating-managing-html-documents/_index.md @@ -69,9 +69,13 @@ SVG दस्तावेज़ बनाना और प्रबंधित ### [Java में HTML के लिए सैंडबॉक्स बनाएं – चरण‑दर‑चरण गाइड](./create-sandbox-for-html-in-java-step-by-step-guide/) Java में HTML सैंडबॉक्स बनाने की प्रक्रिया सीखें, सुरक्षित परीक्षण और विकास के लिए चरण‑दर‑चरण मार्गदर्शिका। ### [Java में HTML क्वेरी कैसे करें – पूर्ण ट्यूटोरियल](./how-to-query-html-in-java-complete-tutorial/) -Java में Aspose.HTML का उपयोग करके HTML क्वेरी करने के चरण‑दर‑चरण मार्गदर्शिका, टिप्स और सर्वोत्तम प्रथाएँ। +Java में Aspose.HTML का उपयोग करके HTML क्वेरी करने के चरण‑दर‑चरण मार्गदर्शन, टिप्स और सर्वोत्तम प्रथाएँ। ### [Java में HTML को पार्स करना – लोड, क्वेरी और तत्वों की गिनती](./how-to-parse-html-java-load-query-count-elements/) -Aspose.HTML for Java का उपयोग करके HTML को लोड, क्वेरी और तत्वों की गिनती करने की चरण‑दर‑चरण मार्गदर्शिका। +Aspose.HTML for Java का उपयोग करके HTML को लोड, क्वेरी और तत्वों की गिनती करने की चरण‑दर‑चरण मार्गदर्शन। + +### [डायनामिक HTML तालिका में प्रथम और अंतिम नाम कॉलम के साथ डेटा बाइंड करना कैसे करें](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) + +### [Java टेम्पलेट इंजन के साथ टेम्पलेट को HTML में कैसे बदलें](./how-to-convert-template-to-html-with-a-java-template-engine/) {{< /blocks/products/pf/tutorial-page-section >}} @@ -82,7 +86,7 @@ Aspose.HTML for Java का उपयोग करके HTML को लोड, ### [Java में JavaScript से HTML उत्पन्न करें – पूर्ण चरण‑दर‑चरण गाइड](./generate-html-from-javascript-in-java-complete-step-by-step/) Java में JavaScript को निष्पादित करके HTML उत्पन्न करने की पूरी चरण‑दर‑चरण गाइड। कोड उदाहरण और सर्वोत्तम प्रथाएँ शामिल हैं। ### [NodeList को इटररेट करें Java – HTML पढ़ें और इमेज src प्राप्त करें](./iterate-nodelist-java-read-html-get-image-src/) -Java में NodeList को इटररेट करके HTML से इमेज src निकालना सीखें। चरण-दर-चरण मार्गदर्शिका और कोड उदाहरण। +Java में NodeList को इटररेट करके HTML से इमेज src निकालना सीखें। चरण‑दर‑चरण मार्गदर्शिका और कोड उदाहरण। {{< /blocks/products/pf/tutorial-page-section >}} @@ -93,11 +97,11 @@ Java में NodeList को इटररेट करके HTML से इ ### [Java में NodeList पर इटरेट करना – पूर्ण गाइड](./iterate-over-nodelist-java-complete-guide/) Aspose.HTML for Java का उपयोग करके NodeList को इटरेट करने की पूरी प्रक्रिया सीखें, कोड उदाहरण और सर्वोत्तम प्रथाएँ। ### [Java के साथ HTML से टेक्स्ट निकालें – पूर्ण चरण‑दर‑चरण गाइड](./extract-text-from-html-with-java-complete-step-by-step-guide/) -Aspose.HTML for Java का उपयोग करके HTML दस्तावेज़ से टेक्स्ट निकालना सीखें। विस्तृत चरण‑दर‑चरण मार्गदर्शिका। +Aspose.HTML for Java का उपयोग करके HTML दस्तावेज़ से टेक्स्ट निकालना सीखें। विस्तृत चरण‑दर‑चरण मार्गदर्शन। {{< /blocks/products/pf/tutorial-page-section >}} {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hindi/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/hindi/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..ee31e6cdf --- /dev/null +++ b/html/hindi/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,325 @@ +--- +category: general +date: 2026-09-07 +description: डायनेमिक HTML टेबल में डेटा को बाइंड कैसे करें – टेबल की पंक्तियों को + जेनरेट करना और प्रथम एवं अंतिम नाम फ़ील्ड को कुशलतापूर्वक भरना सीखें. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: hi +lastmod: 2026-09-07 +og_description: डायनामिक HTML टेबल में डेटा को बाइंड करने का तरीका। यह ट्यूटोरियल + दिखाता है कि टेबल रो कैसे जनरेट करें, पहला और अंतिम नाम कैसे प्रदर्शित करें, और + जावास्क्रिप्ट के साथ टेबल रो को कैसे भरें। +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: डायनेमिक HTML टेबल में डेटा बाइंड करने का चरण-दर-चरण मार्गदर्शक +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: पहले और अंतिम नाम वाले कॉलम के साथ एक गतिशील HTML तालिका में डेटा बाइंड कैसे + करें +url: /hi/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# डेटा को डायनामिक HTML टेबल में बाइंड कैसे करें जिसमें प्रथम और अंतिम नाम के कॉलम हों + +यदि आपको प्रत्येक रिकॉर्ड के साथ बढ़ने वाली टेबल में **डेटा को बाइंड करने** की आवश्यकता है, तो यह गाइड एक पूर्ण समाधान दिखाता है। आप देखेंगे कि कैसे एक डायनामिक HTML टेबल जेनरेट करें, टेबल की पंक्तियों को भरें, और प्रत्येक व्यक्ति का प्रथम और अंतिम नाम बिना दोहरावदार मार्कअप लिखे प्रदर्शित करें। + +उदाहरण एक हल्के टेम्प्लेटिंग सिंटैक्स का उपयोग करता है जो किसी भी आधुनिक ब्राउज़र में काम करता है, लेकिन अवधारणाएँ Handlebars, Mustache, या सर्वर‑साइड इंजनों पर भी लागू होती हैं। ट्यूटोरियल के अंत तक आप कोड को अपने प्रोजेक्ट में कॉपी करके तुरंत डेटा बाइंड करना शुरू कर सकते हैं। + +## इस ट्यूटोरियल में क्या कवर किया गया है + +* कई व्यक्तियों को सम्मिलित करने वाले डेटा स्रोत को कैसे संरचित करें +* प्रत्येक प्रविष्टि के लिए दोहराने योग्य टेबल टेम्प्लेट कैसे बनाएं +* डेटा को बाइंड करें और अंतिम HTML मार्कअप जेनरेट करें +* टेबल पंक्तियों को भरते समय सामान्य समस्याएँ और उन्हें कैसे टालें + +कोई बाहरी लाइब्रेरी आवश्यक नहीं है, हालांकि वही पैटर्न लोकप्रिय टेम्प्लेटिंग फ्रेमवर्क के साथ भी काम करता है। एकमात्र पूर्वापेक्षा बुनियादी HTML और JavaScript ज्ञान है। + +## पूर्वापेक्षाएँ + +* एक आधुनिक ब्राउज़र (Chrome, Edge, Firefox, या Safari) +* HTML/JavaScript फ़ाइलों के लिए एक एडिटर +* वैकल्पिक: एक JSON फ़ाइल या JavaScript ऑब्जेक्ट जो व्यक्तियों के संग्रह को दर्शाता है + +## चरण 1: डेटा स्रोत को परिभाषित करें + +पहले, एक JavaScript ऑब्जेक्ट बनाएं जो टेम्प्लेट में उपयोग की गई संरचना को प्रतिबिंबित करता है। प्रत्येक व्यक्ति का प्रथम नाम, अंतिम नाम, और एक पता ऑब्जेक्ट होता है। + +```html + +``` + +**यह क्यों महत्वपूर्ण है:** ऑब्जेक्ट पदानुक्रम (`Persons.Person`) टेम्प्लेट में `{{#foreach Persons.Person}}` लूप से मेल खाता है, जिससे इंजन स्वचालित रूप से प्रत्येक प्रविष्टि पर इटररेट कर सकता है। + +## चरण 2: दोहराव ब्लॉक के साथ टेबल टेम्प्लेट लिखें + +नीचे दिया गया टेम्प्लेट एक सरल Mustache‑स्टाइल सिंटैक्स (`{{#foreach}}`) का उपयोग करता है ताकि प्रत्येक व्यक्ति के लिए `` दोहराया जा सके। टेम्प्लेट को ` +``` + +**यह क्यों महत्वपूर्ण है:** `{{#foreach Persons.Person}}` निर्देश इंजन को बताता है कि प्रत्येक व्यक्ति ऑब्जेक्ट के लिए ओपनिंग और क्लोज़िंग टैग के बीच की सभी सामग्री को दोहराए। पंक्ति के भीतर आप किसी भी प्रॉपर्टी (`{{FirstName}}`, `{{LastName}}`, आदि) को संदर्भित करके **टेबल पंक्तियों को भरें** गतिशील रूप से। + +## चरण 3: एक छोटा रेंडरिंग फ़ंक्शन लागू करें + +क्योंकि ट्यूटोरियल को स्वयं‑समाहित होना चाहिए, हम एक न्यूनतम रेंडरर लिखेंगे जो Mustache‑स्टाइल प्लेसहोल्डर्स को वास्तविक मानों से बदलता है। फ़ंक्शन डेटा ऑब्जेक्ट को ट्रैवर्स करता है, दोहराव ब्लॉक का विस्तार करता है, और अंतिम HTML को पेज में इंजेक्ट करता है। + +```html + +``` + +**यह क्यों महत्वपूर्ण है:** रेंडरर दर्शाता है कि **टेबल कैसे जेनरेट करें** मार्कअप को प्रोग्रामेटिक रूप से बिना पूरी लाइब्रेरी को शामिल किए। यह टेम्प्लेट से अंतिम HTML में परिवर्तन को स्पष्ट करता है, जिससे आप बाद में कोड को अन्य टेम्प्लेटिंग इंजनों में अनुकूलित कर सकते हैं। + +## चरण 4: एक प्लेसहोल्डर जोड़ें जहाँ जेनरेटेड टेबल दिखाई देगा + +एक खाली `
    ` बनाएं जिसे स्क्रिप्ट रेंडरिंग के बाद भर देगा। + +```html +
    +``` + +जब पेज लोड होता है, स्क्रिप्ट इस `
    ` की सामग्री को पूरी तरह से भरे हुए टेबल से बदल देती है। + +## चरण 5: परिणाम सत्यापित करें + +ब्राउज़र में HTML फ़ाइल खोलें। आपको एक टेबल दिखनी चाहिए जो प्रत्येक व्यक्ति का पूरा नाम और पता सूचीबद्ध करती है: + +| व्यक्ति | पता | +|--------|------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +यदि आप `data.Persons.Person` एरे में अधिक ऑब्जेक्ट जोड़ते हैं, तो टेबल स्वचालित रूप से बढ़ेगी—जिससे **टेबल पंक्तियों को भरें** की आवश्यकता पूरी होती है। + +## प्रो टिप: खाली संग्रह को संभालना + +जब डेटा एरे खाली हो, तो रेंडरर वर्तमान में एक खाली टेबल हेडर आउटपुट करता है। उपयोगकर्ता अनुभव को स्पष्ट बनाने के लिए एक गार्ड जोड़ें: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +यह छोटा परिवर्तन खाली टेबल के दिखने से रोकता है और उपयोगकर्ताओं को तुरंत फीडबैक देता है। + +## सामान्य विविधताएँ और किनारे के मामले + +| स्थिति | समायोजन | +|--------|----------| +| सर्वर‑साइड इंजन (जैसे Handlebars) का उपयोग करना | कस्टम `renderTemplate` को `Handlebars.compile` से बदलें और वही डेटा ऑब्जेक्ट पास करें। | +| पंक्तियों को वर्णक्रमानुसार क्रमबद्ध करने की आवश्यकता | `renderTemplate` कॉल करने से पहले `data.Persons.Person` को सॉर्ट करें। | +| फ़ोन नंबर के लिए एक कॉलम जोड़ना | `` को `{{Phone}}` से विस्तारित करें और प्रत्येक व्यक्ति ऑब्जेक्ट में `Phone` शामिल करें। | +| बड़े डेटा सेट (सैकड़ों पंक्तियाँ) | पंक्तियों को भागों में रेंडर करें या UI को रिस्पॉन्सिव रखने के लिए वर्चुअल स्क्रॉलिंग का उपयोग करें। | + +## पूर्ण कार्यशील उदाहरण + +नीचे वह संपूर्ण HTML फ़ाइल है जिसे आप `index.html` में कॉपी‑पेस्ट कर सकते हैं। इसमें ऊपर चर्चा किए गए सभी हिस्से शामिल हैं। + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**अपेक्षित आउटपुट** + +पेज दो पंक्तियों वाला टेबल रेंडर करता है, प्रत्येक में व्यक्ति का पूरा नाम और स्वरूपित पता दिखता है। `Person` एरे में अधिक ऑब्जेक्ट जोड़ने से नई पंक्तियाँ स्वतः जुड़ जाती हैं—जिससे डेटा से **टेबल कैसे जेनरेट करें** तत्व प्रदर्शित होते हैं। + +## निष्कर्ष + +आप अब जानते हैं **डेटा को बाइंड कैसे करें** एक **डायनामिक HTML टेबल** में, प्रत्येक रिकॉर्ड के लिए पंक्तियों को जेनरेट करें, और प्रथम तथा अंतिम नाम के मानों को पते के साथ प्रदर्शित करें। + +## अब आपको क्या सीखना चाहिए? + +निम्नलिखित ट्यूटोरियल्स निकट संबंधी विषयों को कवर करते हैं जो इस गाइड में प्रदर्शित तकनीकों पर आधारित हैं। प्रत्येक संसाधन में पूर्ण कार्यशील कोड उदाहरण और चरण‑दर‑चरण व्याख्याएँ शामिल हैं, जो आपको अतिरिक्त API फीचर्स में महारत हासिल करने और अपने प्रोजेक्ट्स में वैकल्पिक इम्प्लीमेंटेशन एप्रोच को एक्सप्लोर करने में मदद करेंगे। + +- [कैसे जोड़ें CSS – Aspose.HTML for Java में HTML दस्तावेज़ों में इनलाइन CSS](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [कैसे संपादित करें HTML दस्तावेज़ ट्री को Aspose.HTML for Java में](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [कैसे सक्षम करें JavaScript को Aspose HTML में – HTML लोड करें और टेक्स्ट प्राप्त करें](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hindi/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/hindi/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..6524b5720 --- /dev/null +++ b/html/hindi/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,351 @@ +--- +category: general +date: 2026-09-07 +description: जावा का उपयोग करके टेम्पलेट को HTML में कैसे बदलें। टेम्पलेट से HTML + उत्पन्न करना सीखें, foreach लूप सक्षम करें, और एक पूर्ण जावा टेम्पलेट इंजन उदाहरण + देखें। +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: hi +lastmod: 2026-09-07 +og_description: जावा का उपयोग करके टेम्प्लेट को HTML में कैसे बदलें। यह ट्यूटोरियल + एक पूर्ण जावा टेम्प्लेट इंजन उदाहरण दिखाता है, टेम्प्लेट से HTML कैसे जेनरेट करें, + और foreach का उपयोग कैसे करें। +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: जावा के साथ टेम्पलेट को HTML में कैसे बदलें – चरण-दर-चरण मार्गदर्शिका +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: जावा टेम्प्लेट इंजन के साथ टेम्प्लेट को HTML में कैसे बदलें +url: /hi/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# टेम्प्लेट को Java टेम्प्लेट इंजन के साथ HTML में कैसे बदलें + +यदि आपको **how to convert template** को तैयार‑से‑सेवा HTML पेज में बदलने की आवश्यकता है, तो यह गाइड एक पूर्ण समाधान प्रदान करता है। आप देखेंगे कि कैसे **generate HTML from template** फ़ाइलों से HTML उत्पन्न किया जाता है, **how to use foreach** के साथ लूपिंग सक्षम की जाती है, और एक **java template engine example** के माध्यम से चलते हैं जो XML या JSON डेटा स्रोतों के साथ काम करता है। + +यह ट्यूटोरियल एक ही Java प्रोग्राम में **convert html template** फ़ाइलों को बदलने के लिए आवश्यक सभी चीज़ें कवर करता है। अंत तक आपके पास एक चलाने योग्य प्रोजेक्ट होगा जो टेम्प्लेट पढ़ता है, डेटा इंजेक्ट करता है, और अंतिम HTML फ़ाइल को डिस्क पर लिखता है। + +## Prerequisites + +शुरू करने से पहले सुनिश्चित करें कि आपके पास है: + +* JDK 17 या बाद का संस्करण स्थापित +* Maven या Gradle जैसे बिल्ड टूल (कोड केवल मानक Java क्लासेज़ का उपयोग करता है) +* Java I/O और XML/JSON फ़ॉर्मेट्स की बुनियादी समझ + +कोर स्टेप्स के लिए कोई बाहरी लाइब्रेरी आवश्यक नहीं है, लेकिन यदि आप चाहें तो सरल `Template` क्लासेज़ को किसी थर्ड‑पार्टी इंजन से बदल सकते हैं। + +## Step 1: Set up file paths and template markers + +पहला स्टेप यह निर्धारित करता है कि टेम्प्लेट, डेटा स्रोत, और आउटपुट कहाँ स्थित होंगे। टेम्प्लेट में `{{...}}` प्लेसहोल्डर होते हैं जिन्हें इंजन बदल देगा। + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Why this matters*: पाथ्स को हार्ड‑कोड करने से आप प्रोग्राम को किसी भी IDE से अतिरिक्त कॉन्फ़िगरेशन के बिना चला सकते हैं। आप अधिक लचीलापन के लिए इन मूल्यों को कमांड‑लाइन आर्ग्यूमेंट्स के रूप में भी पास कर सकते हैं। + +## Step 2: Load the data source (XML or JSON) + +इंजन को एक डेटा ऑब्जेक्ट चाहिए जो प्लेसहोल्डर नामों को मानों से मैप करे। `TemplateData` क्लास XML और JSON पार्सिंग को एब्स्ट्रैक्ट करती है। + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +यदि `dataPath` एक JSON फ़ाइल की ओर इशारा करता है, तो `TemplateData` स्वचालित रूप से फ़ॉर्मेट का पता लगाता है और वही की/वैल्यू मैप बनाता है। यह लचीलापन तब उपयोगी होता है जब आप विभिन्न वातावरणों में **generate html from template** करते हैं। + +## Step 3: Enable the foreach directive for looping + +कई टेम्प्लेट्स को कलेक्शन के प्रत्येक आइटम के लिए एक ब्लॉक दोहराने की जरूरत होती है। foreach डायरेक्टिव को सक्षम करने से इंजन `{{#foreach items}} … {{/foreach}}` ब्लॉक्स को प्रोसेस करता है। + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**How to use foreach**: `template.html` के अंदर आप लिख सकते हैं: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +जब इंजन इस ब्लॉक को देखता है, तो यह `products` कलेक्शन में प्रत्येक एंट्री के लिए `
  • ` एलिमेंट को दोहराता है, जो `TemplateData` द्वारा प्रदान किया गया है। + +## Step 4: Convert the template and write the result + +अब इंजन सभी मार्कर्स को वास्तविक मानों से बदलता है और अंतिम HTML फ़ाइल लिखता है। + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +`convertTemplate` मेथड चार कार्य करता है: + +1. `template.html` को मेमोरी में पढ़ता है। +2. प्रत्येक `{{key}}` को `data` से संबंधित मान से बदलता है। +3. किसी भी सक्षम foreach ब्लॉक्स को प्रोसेस करता है। +4. ट्रांसफ़ॉर्म किया गया कंटेंट `resultPath` पर लिखता है। + +## Step 5: Run the program and verify output + +अंत में, उपयोगकर्ता को सूचित करें कि रूपांतरण सफल रहा। + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +जब आप `main` मेथड को चलाते हैं, तो आपको कंसोल में कुछ इस तरह की लाइन दिखनी चाहिए: + +``` +Template conversion completed: src/main/resources/result.html +``` + +`result.html` को ब्राउज़र में खोलें। सभी प्लेसहोल्डर बदल दिए जाएंगे, और कोई भी foreach लूप उपयुक्त HTML फ्रैगमेंट जेनरेट करेगा। + +### Expected output example + +एक साधारण `template.html` मानते हुए: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +और एक XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +जेनरेट किया गया `result.html` इस प्रकार होगा: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Edge cases and best‑practice tips + +* **Missing placeholders** – इंजन अज्ञात `{{key}}` मार्कर्स को जैसा है वैसा छोड़ देता है। आप एक वैलिडेशन स्टेप जोड़ सकते हैं जो टेम्प्लेट में बचे हुए ब्रेसेस को स्कैन करे और चेतावनी लॉग करे। +* **Large data sets** – हजारों आइटम्स के लिए, पूरे फ़ाइल को मेमोरी में लोड करने के बजाय टेम्प्लेट को स्ट्रीम करने पर विचार करें। वर्तमान इम्प्लीमेंटेशन सामान्य वेब पेजों के लिए ठीक है। +* **JSON vs. XML** – यदि आप JSON पर स्विच करते हैं, तो वही स्ट्रक्चर रखें: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` इसे स्वचालित रूप से पार्स करेगा, इसलिए बाकी कोड अपरिवर्तित रहता है। + +* **Encoding** – सुनिश्चित करें कि टेम्प्लेट और डेटा फ़ाइल दोनों UTF‑8 में हों ताकि कैरेक्टर करप्शन न हो, विशेषकर मल्टी‑लिंगुअल HTML जेनरेट करते समय। + +* **Security** – उपयोगकर्ता‑प्रदान डेटा को सीधे HTML में इंजेक्ट करने से पहले सैनीटाइज़ किए बिना भरोसा न करें। यदि डेटा में मार्कअप हो सकता है तो HTML स्पेशल कैरेक्टर्स को एस्केप करें। + +## Full runnable example + +नीचे एक स्व-निहित Java क्लास है जो सभी स्टेप्स को एक साथ जोड़ता है। इसे `TemplateConverter.java` के रूप में सेव करें और अपने IDE या कमांड लाइन से चलाएँ। + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## What Should You Learn Next? + +निम्नलिखित ट्यूटोरियल्स उन विषयों को कवर करते हैं जो इस गाइड में दिखाए गए तकनीकों पर आधारित हैं। प्रत्येक संसाधन में पूर्ण कार्यशील कोड उदाहरण और चरण‑दर‑चरण व्याख्याएँ शामिल हैं, जिससे आप अतिरिक्त API फीचर्स में महारत हासिल कर सकें और अपने प्रोजेक्ट्स में वैकल्पिक इम्प्लीमेंटेशन अप्रोच को एक्सप्लोर कर सकें। + +- [How to Convert HTML to PDF Java – Using Aspose.HTML for Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [How to Edit HTML Using Aspose.HTML for Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Convert HTML to String using Aspose.HTML for Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hongkong/java/creating-managing-html-documents/_index.md b/html/hongkong/java/creating-managing-html-documents/_index.md index cbb121861..9c8a23181 100644 --- a/html/hongkong/java/creating-managing-html-documents/_index.md +++ b/html/hongkong/java/creating-managing-html-documents/_index.md @@ -60,6 +60,10 @@ Aspose.HTML for Java 為旨在在 Java 應用程式中無縫處理 HTML 文件 了解如何使用 Aspose.HTML 從 Java 中的 URL 輕鬆載入 HTML 文件。包括逐步教程。 ### [使用 Aspose.HTML for Java 產生新的 HTML 文檔](./generate-new-html-documents/) 透過這個簡單的逐步指南,了解如何使用 Aspose.HTML for Java 建立新的 HTML 文件。開始產生動態 HTML 內容。 +### [如何將資料繫結至具有名與姓欄位的動態 HTML 表格](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) +學習如何在 Java 中使用 Aspose.HTML 將資料繫結至動態 HTML 表格的名與姓欄位。 +### [如何使用 Java 模板引擎將模板轉換為 HTML](./how-to-convert-template-to-html-with-a-java-template-engine/) +學習使用 Java 模板引擎將現有模板轉換為 HTML,結合 Aspose.HTML for Java 進行後續處理與優化。 ### [在 Java 中從 JavaScript 產生 HTML – 完整逐步指南](./generate-html-from-javascript-in-java-complete-step-by-step/) 使用 Aspose.HTML for Java,從 JavaScript 生成 HTML,提供完整的逐步說明與範例,幫助您快速上手。 ### [在 Aspose.HTML for Java 中處理文件載入事件](./handle-document-load-events/) @@ -100,4 +104,4 @@ Aspose.HTML for Java 為旨在在 Java 應用程式中無縫處理 HTML 文件 {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hongkong/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/hongkong/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..d15a776ef --- /dev/null +++ b/html/hongkong/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,321 @@ +--- +category: general +date: 2026-09-07 +description: 如何在動態 HTML 表格中綁定資料——學習如何有效產生表格列並填寫名與姓欄位 +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: zh-hant +lastmod: 2026-09-07 +og_description: 如何在動態 HTML 表格中綁定資料。本教學示範如何產生表格列、顯示名字與姓氏,並使用 JavaScript 填充表格列。 +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: 如何將資料綁定至動態 HTML 表格 – 步驟教學 +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: 如何將資料綁定至具有名與姓欄位的動態HTML表格 +url: /zh-hant/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 如何將資料繫結至具有名字與姓氏欄位的動態 HTML 表格 + +如果你需要 **how to bind data**(繫結資料)到會隨每筆記錄增長的表格,本指南提供完整解決方案。你將會看到如何產生動態 HTML 表格、填充表格列,並在不撰寫重複標記的情況下顯示每個人的名字與姓氏。 + +此範例使用輕量級的模板語法,能在任何現代瀏覽器中運作,但其概念同樣適用於 Handlebars、Mustache 或伺服器端引擎。完成本教學後,你可以直接將程式碼複製到專案中,即時開始繫結資料。 + +## 本教學涵蓋內容 + +* 如何構建包含多筆人物資料的資料來源 +* 如何建立可重複使用的表格模板,讓每筆資料都能產生對應的列 +* 如何繫結資料並產生最終的 HTML 標記 +* 在填充表格列時常見的陷阱與避免方式 + +不需要外部函式庫,雖然相同模式亦可套用於常見的模板框架。唯一的前置條件是具備基本的 HTML 與 JavaScript 知識。 + +## 前置條件 + +* 現代瀏覽器(Chrome、Edge、Firefox 或 Safari) +* 用於編輯 HTML/JavaScript 檔案的編輯器 +* 可選:一個 JSON 檔案或 JavaScript 物件,代表人物集合 + +## 步驟 1:定義資料來源 + +首先,建立一個與模板結構相符的 JavaScript 物件。每個人物都有名字、姓氏以及地址物件。 + +```html + +``` + +**為什麼這很重要:** 物件層級 (`Persons.Person`) 與模板中的 `{{#foreach Persons.Person}}` 迴圈相匹配,讓引擎能自動遍歷每一筆資料。 + +## 步驟 2:撰寫帶有重複區塊的表格模板 + +以下模板使用簡易的 Mustache 風格語法(`{{#foreach}}`)來為每位人物重複 ``。請將模板放在 ` +``` + +**為什麼這很重要:** `{{#foreach Persons.Person}}` 指令告訴引擎對每個人物物件重複開閉標籤之間的內容。於列內你可以引用任何屬性(`{{FirstName}}`、`{{LastName}}` 等)以 **populate table rows** 動態填充。 + +## 步驟 3:實作一個小型渲染函式 + +因為教學必須自給自足,我們將撰寫一個最小化的渲染器,將 Mustache 風格的佔位符替換為真實值。此函式會遍歷資料物件、展開重複區塊,並將最終的 HTML 注入頁面。 + +```html + +``` + +**為什麼這很重要:** 此渲染器示範了 **how to generate table** 標記的程式化方式,無需引入完整函式庫。它同時說明了從模板到最終 HTML 的轉換過程,方便你日後改寫為其他模板引擎。 + +## 步驟 4:加入佔位元素以放置產生的表格 + +建立一個空的 `
    `,腳本會在渲染完成後填入內容。 + +```html +
    +``` + +頁面載入時,腳本會將此 `
    ` 的內容取代為完整的表格。 + +## 步驟 5:驗證結果 + +在瀏覽器開啟 HTML 檔案。你應該會看到一個列出每位人物全名與地址的表格: + +| 人物 | 地址 | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +若你在 `data.Persons.Person` 陣列中加入更多物件,表格會自動增長,滿足 **populate table rows** 的需求。 + +## 小技巧:處理空集合 + +當資料陣列為空時,渲染器目前會輸出一個空的表頭。為提供更清晰的使用者體驗,可加入防護機制: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +此小變更可防止空表格出現,並即時給予使用者回饋。 + +## 常見變化與邊緣案例 + +| 情境 | 調整方式 | +|----------------------------------------|--------------------------------------------------------------------------| +| 使用伺服器端引擎(如 Handlebars) | 將自訂的 `renderTemplate` 換成 `Handlebars.compile`,並傳入相同的資料物件。 | +| 需要依字母順序排序列 | 在呼叫 `renderTemplate` 前先對 `data.Persons.Person` 進行排序。 | +| 新增電話號碼欄位 | 在 `` 中加入 `{{Phone}}`,並在每個人物物件內加入 `Phone`。 | +| 大量資料(數百列) | 分批渲染列或使用虛擬捲動,以維持 UI 響應速度。 | + +## 完整範例 + +以下是可直接貼到 `index.html` 的完整 HTML 檔案,包含上述所有部份。 + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**預期輸出** + +頁面會呈現一個兩列的表格,每列顯示人物的全名與格式化地址。將更多物件加入 `Person` 陣列即會自動新增列,示範 **how to generate table** 元素的資料驅動方式。 + +## 結論 + +現在你已掌握 **how to bind data** 到 **dynamic HTML table**,能為每筆記錄產生列,並在表格中同時顯示名字與姓氏。 + +## 接下來該學什麼? + +以下教學與本指南的技巧密切相關,提供完整的程式碼範例與逐步說明,協助你精通更多 API 功能,並在自己的專案中探索替代實作方式。 + +- [How to Add CSS – Inline CSS to HTML Documents in Aspose.HTML for Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [How to Edit HTML Document Tree in Aspose.HTML for Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [How to Enable JavaScript in Aspose HTML – Load HTML & Get Text](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hongkong/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/hongkong/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..26041c77f --- /dev/null +++ b/html/hongkong/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,229 @@ +--- +category: general +date: 2026-09-07 +description: 如何使用 Java 將範本轉換為 HTML。學習從範本產生 HTML、啟用 foreach 迴圈,並觀看完整的 Java 範本引擎範例。 +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: zh-hant +lastmod: 2026-09-07 +og_description: 如何使用 Java 將模板轉換為 HTML。本教學展示完整的 Java 模板引擎範例,說明如何從模板產生 HTML,以及如何使用 foreach。 +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: 如何使用 Java 將模板轉換為 HTML – 逐步指南 +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: 如何使用 Java 模板引擎將模板轉換為 HTML +url: /zh-hant/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 如何使用 Java 模板引擎將模板轉換為 HTML + +如果您需要 **how to convert template** 成為可直接提供的 HTML 頁面,本指南提供完整解決方案。您將會看到如何 **generate HTML from template** 檔案、使用 **how to use foreach** 來啟用迴圈,並逐步說明一個可處理 XML 或 JSON 資料來源的 **java template engine example**。 + +本教學涵蓋了在單一 Java 程式中 **convert html template** 檔案所需的全部內容。完成後,您將擁有一個可執行的專案,能讀取模板、注入資料,並將最終的 HTML 檔案寫入磁碟。 + +## 前置條件 + +* 安裝 JDK 17 或更新版本 +* 具備 Maven 或 Gradle 等建置工具(程式碼僅使用標準 Java 類別) +* 基本熟悉 Java I/O 以及 XML/JSON 格式 + +核心步驟不需要任何外部函式庫,但若您願意,也可以將簡易的 `Template` 類別替換為第三方引擎。 + +## 步驟 1:設定檔案路徑與模板標記 + +第一步會定義模板、資料來源與輸出檔案的所在位置。模板中包含 `{{...}}` 佔位符,將由引擎進行取代。 + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Why this matters*:硬編碼路徑可讓您在任何 IDE 中執行程式而無需額外設定。您亦可將這些值作為命令列參數傳入,以提升彈性。 + +## 步驟 2:載入資料來源(XML 或 JSON) + +引擎需要一個資料物件,用於將佔位符名稱對映至對應值。`TemplateData` 類別抽象化了 XML 與 JSON 的解析。 + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +如果 `dataPath` 指向 JSON 檔案,`TemplateData` 會自動偵測格式並建立相同的鍵/值映射。此彈性在不同環境下 **generate html from template** 時相當有用。 + +## 步驟 3:啟用 foreach 指令以進行迴圈 + +許多模板需要對集合中的每個項目重複區塊。啟用 foreach 指令會告訴引擎處理 `{{#foreach items}} … {{/foreach}}` 區塊。 + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**How to use foreach**:在 `template.html` 中您可以這樣寫: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +當引擎遇到此區塊時,會針對 `TemplateData` 所提供的 `products` 集合中的每個條目重複 `
  • ` 元素。 + +## 步驟 4:轉換模板並寫入結果 + +現在,引擎會將所有標記取代為實際值,並寫入最終的 HTML 檔案。 + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +`convertTemplate` 方法執行三項動作: + +1. 讀取 `template.html` 至記憶體。 +2. 用 `data` 中對應的值取代每個 `{{key}}`。 +3. 處理所有已啟用的 foreach 區塊。 +4. 將轉換後的內容寫入 `resultPath`。 + +## 步驟 5:執行程式並驗證輸出 + +最後,通知使用者轉換已成功。 + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +執行 `main` 方法時,您應該會在主控台看到類似以下的訊息: + +``` +Template conversion completed: src/main/resources/result.html +``` + +在瀏覽器中開啟 `result.html`。所有佔位符皆已被取代,且任何 foreach 迴圈都會產生相應的 HTML 片段。 + +### 預期輸出範例 + +以簡單的 `template.html` 為例: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +以及一個 XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +產生的 `result.html` 會是: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## 邊緣情況與最佳實踐提示 + +* **Missing placeholders** – 引擎會保留未知的 `{{key}}` 標記不變。您可以加入驗證步驟,掃描模板中剩餘的大括號並記錄警告。 +* **Large data sets** – 若資料項目達數千筆,建議以串流方式處理模板,而非一次載入整個檔案至記憶體。現有實作對一般網頁而言已足夠。 +* **JSON vs. XML** – 若改用 JSON,保持相同的結構: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` 會自動解析,因此其餘程式碼保持不變。 +* **Encoding** – 確保模板與資料檔案皆使用 UTF‑8 編碼,以避免字元損壞,特別是在產生多語言 HTML 時。 +* **Security** – 不要在未經消毒的情況下直接將使用者提供的資料注入 HTML。若資料可能包含標記,請對 HTML 特殊字元進行轉義。 + +## 完整可執行範例 + +以下是一個獨立的 Java 類別,將所有步驟整合在一起。將其儲存為 `TemplateConverter.java`,然後在 IDE 或命令列執行。 + + + +## 接下來您應該學習什麼? + +以下教學涵蓋與本指南技術密切相關的主題。每個資源皆提供完整可執行的程式碼範例與逐步說明,協助您精通更多 API 功能,並在自己的專案中探索替代實作方式。 + +- [如何使用 Java 將 HTML 轉換為 PDF – 使用 Aspose.HTML for Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [如何使用 Aspose.HTML for Java 編輯 HTML](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [使用 Aspose.HTML for Java 將 HTML 轉換為字串](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hungarian/java/creating-managing-html-documents/_index.md b/html/hungarian/java/creating-managing-html-documents/_index.md index 581486f6d..007ecbc25 100644 --- a/html/hungarian/java/creating-managing-html-documents/_index.md +++ b/html/hungarian/java/creating-managing-html-documents/_index.md @@ -72,6 +72,10 @@ Ezzel a lépésről lépésre útmutatóval ismerkedjen meg a dokumentumbetölt Ismerje meg az SVG dokumentumok létrehozását és kezelését az Aspose.HTML for Java segítségével! Ez az átfogó útmutató az alapvető alkotástól a haladó manipulációig mindent lefed. ### [HTML sandbox létrehozása Java-ban – Lépésről‑lépésre útmutató](./create-sandbox-for-html-in-java-step-by-step-guide/) Ismerje meg, hogyan hozhat létre biztonságos sandbox környezetet HTML feldolgozáshoz Java-ban, részletes lépésekkel. +### [Hogyan konvertáljon sablont HTML-re Java sablonmotorral](./how-to-convert-template-to-html-with-a-java-template-engine/) +Ismerje meg, hogyan alakíthatja át a sablonokat HTML-re Java sablonmotor segítségével, lépésről‑lépésre útmutató. +### [Hogyan kössön adatot egy dinamikus HTML táblázathoz, amely első- és utolsónév oszlopokat tartalmaz](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) +Tanulja meg, hogyan kössön adatot egy dinamikus HTML táblázathoz, amely első- és utolsónév oszlopokat tartalmaz. {{< /blocks/products/pf/tutorial-page-section >}} @@ -94,3 +98,4 @@ Tanulja meg, hogyan járhatja be a NodeList-et Java-ban, olvashat HTML-t és sze Fedezze fel, hogyan nyerhet ki szöveget HTML-ből Java használatával, részletes, lépésről‑lépésre útmutató. ### [NodeList bejárása Java-ban – Teljes útmutató](./iterate-over-nodelist-java-complete-guide/) Ismerje meg, hogyan iterálhat a NodeList elemein Java-ban az Aspose.HTML segítségével, részletes, lépésről‑lépésre útmutató. +{{< /blocks/products/pf/tutorial-page-section >}} \ No newline at end of file diff --git a/html/hungarian/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/hungarian/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..dc189ffb0 --- /dev/null +++ b/html/hungarian/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,326 @@ +--- +category: general +date: 2026-09-07 +description: Hogyan kössük össze az adatokat egy dinamikus HTML táblázatban – tanulja + meg, hogyan generáljon táblázatsorokat, és hogyan töltse fel hatékonyan a keresztnév + és vezetéknév mezőket. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: hu +lastmod: 2026-09-07 +og_description: Hogyan kössünk adatokat egy dinamikus HTML táblázatban. Ez az útmutató + bemutatja, hogyan generáljunk táblázatsorokat, jelenítsük meg a kereszt- és vezetéknevet, + és töltsük fel a táblázatsorokat JavaScript segítségével. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Hogyan kössünk adatot egy dinamikus HTML táblához – lépésről lépésre útmutató +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: Hogyan kössünk adatot egy dinamikus HTML táblázathoz, amelynek keresztnév és + vezetéknév oszlopai vannak +url: /hu/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Hogyan kössük össze az adatokat egy dinamikus HTML táblázattal, amely tartalmazza a keresztnév és vezetéknév oszlopokat + +Ha **hogyan kössük össze az adatokat** egy olyan táblázatba, amely minden rekord hozzáadásával nő, ez az útmutató egy teljes megoldást mutat be. Meg fogod látni, hogyan generálj egy dinamikus HTML táblázatot, töltsd fel a táblázatsorokat, és jelenítsd meg minden személy keresztnév és vezetéknév értékét anélkül, hogy ismétlődő markupot írnál. + +A példa egy könnyűsúlyú sablonnyelvet használ, amely bármely modern böngészőben működik, de a koncepciók alkalmazhatók a Handlebars, Mustache vagy szerver‑oldali motorokra is. A tutorial végére a kódot be tudod másolni a projektedbe, és azonnal elkezdhetsz adatokat kötni. + +## Amit ez a tutorial lefed + +* Hogyan strukturálj egy adatforrást, amely több személyt tartalmaz +* Hogyan hozz létre egy újrahasználható táblázatsablont, amely minden bejegyzésnél ismétlődik +* Hogyan kössük össze az adatokat és generáljuk a végleges HTML markupot +* Gyakori buktatók a táblázatsorok feltöltésekor és hogyan kerüld el őket + +Nem szükséges külső könyvtár, bár ugyanaz a minta népszerű sablonkeretekkel is működik. Az egyetlen előfeltétel az alap HTML és JavaScript ismeret. + +## Előfeltételek + +* Egy modern böngésző (Chrome, Edge, Firefox vagy Safari) +* Egy szerkesztő HTML/JavaScript fájlokhoz +* Opcionális: egy JSON fájl vagy JavaScript objektum, amely a személyek gyűjteményét reprezentálja + +## 1. lépés: Az adatforrás meghatározása + +Először hozz létre egy JavaScript objektumot, amely tükrözi a sablonban használt struktúrát. Minden személynek van keresztneve, vezetékneve és egy cím objektuma. + +```html + +``` + +**Miért fontos:** Az objektumhierarchia (`Persons.Person`) megegyezik a sablonban lévő `{{#foreach Persons.Person}}` ciklussal, lehetővé téve a motor számára, hogy automatikusan végigmenjen minden bejegyzésen. + +## 2. lépés: Írd meg a táblázatsablont egy ismétlődő blokkal + +Az alábbi sablon egy egyszerű Mustache‑stílusú szintaxist (`{{#foreach}}`) használ, hogy minden személyhez megismételje a `` elemet. Helyezd a sablont egy ` +``` + +**Miért fontos:** A `{{#foreach Persons.Person}}` utasítás azt mondja a motornak, hogy minden személyobjektusra ismételje meg a nyitó és záró címkék közötti tartalmat. A soron belül bármelyik tulajdonságra hivatkozhatsz (`{{FirstName}}`, `{{LastName}}`, stb.), hogy **dinamikusan töltsd fel a táblázatsorokat**. + +## 3. lépés: Implementálj egy kis renderelő függvényt + +Mivel a tutorial önálló kell legyen, egy minimális renderert írunk, amely a Mustache‑stílusú helyőrzőket valós értékekkel helyettesíti. A függvény bejárja az adatobjektumot, kibővíti az ismétlődő blokkot, és beilleszti a végleges HTML-t az oldalba. + +```html + +``` + +**Miért fontos:** A renderelő bemutatja, **hogyan generáljunk táblázat** markupot programozottan anélkül, hogy teljes könyvtárat beemelnénk. Emellett tisztázza a sablonról a végleges HTML-re való átalakulást, ami segít később a kód más sablonmotorokra való adaptálásában. + +## 4. lépés: Adj hozzá egy helyőrzőt, ahol a generált táblázat megjelenik + +Hozz létre egy üres `
    ` elemet, amelyet a szkript a renderelés után kitölt. + +```html +
    +``` + +Amikor az oldal betöltődik, a szkript lecseréli ennek a `
    `-nek a tartalmát a teljesen feltöltött táblázatra. + +## 5. lépés: Ellenőrizd az eredményt + +Nyisd meg a HTML fájlt egy böngészőben. Egy olyan táblázatot kell látnod, amely felsorolja minden személy teljes nevét és címét: + +| Személy | Cím | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Ha több objektumot adsz hozzá a `data.Persons.Person` tömbhöz, a táblázat automatikusan növekszik—teljesítve a **táblázatsorok feltöltése** követelményt. + +## Profi tipp: üres gyűjtemények kezelése + +Amikor az adat tömb üres, a renderelő jelenleg egy üres táblázatfejlécet ad ki. A felhasználói élmény javítása érdekében adj hozzá egy védelmet: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Ez a kis változtatás megakadályozza, hogy üres táblázat jelenjen meg, és azonnali visszajelzést ad a felhasználóknak. + +## Gyakori variációk és szélhelyzetek + +| Helyzet | Módosítás | +|----------------------------------------|----------------------------------------------------------------------------| +| Szerver‑oldali motor használata (pl. Handlebars) | Cseréld le a saját `renderTemplate`-et a `Handlebars.compile`-ra, és add át ugyanazt az adatobjektumot. | +| Sorok betűrend szerinti rendezésére van szükség | Rendezd a `data.Persons.Person` tömböt a `renderTemplate` hívása előtt. | +| Telefonszám oszlop hozzáadása | Bővítsd a ``-t `{{Phone}}`-vel, és szerepeltess `Phone`-t minden személyobjektumban. | +| Nagy adatállományok (száz sor) | Rendereld a sorokat darabokban vagy használj virtuális görgetést, hogy a UI reagálóképessége megmaradjon. | + +## Teljes működő példa + +Az alábbiakban a teljes HTML fájl látható, amelyet átmásolhatsz a `index.html`-be. Tartalmazza az összes fent tárgyalt elemet. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Várható kimenet** + +Az oldal egy két soros táblázatot jelenít meg, ahol minden sor egy személy teljes nevét és formázott címét mutatja. További objektumok hozzáadása a `Person` tömbhöz automatikusan új sorokat ad hozzá—bemutatva, **hogyan generáljunk táblázat** elemeket az adatokból. + +## Összegzés + +Most már tudod, **hogyan kössük össze az adatokat** egy **dinamikus HTML táblázattal**, hogyan generálj sorokat minden rekordhoz, és hogyan jelenítsd meg a keresztnév és vezetéknév értékeket a cím mellett + +## Mit érdemes még megtanulni? + +A következő tutorialok szorosan kapcsolódó témákat fednek le, amelyek a jelen útmutatóban bemutatott technikákra épülnek. Minden forrás tartalmaz teljesen működő kódrészleteket lépésről‑lépésre magyarázatokkal, hogy segítsenek elsajátítani további API funkciókat és alternatív megvalósítási megközelítéseket a saját projektjeidben. + +- [Hogyan adjunk hozzá CSS‑t – Inline CSS HTML dokumentumokhoz Aspose.HTML for Java-ban](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [Hogyan szerkesszük a HTML dokumentumfát Aspose.HTML for Java-ban](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [Hogyan engedélyezzük a JavaScriptet az Aspose HTML‑ben – HTML betöltése és szöveg kinyerése](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/hungarian/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/hungarian/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..4fc4c0fce --- /dev/null +++ b/html/hungarian/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,351 @@ +--- +category: general +date: 2026-09-07 +description: Hogyan konvertáljunk sablont HTML-re Java segítségével. Tanulja meg, + hogyan generáljon HTML-t egy sablonból, engedélyezze a foreach ciklusokat, és tekintse + meg a teljes Java sablonmotor példát. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: hu +lastmod: 2026-09-07 +og_description: Hogyan konvertáljunk sablont HTML-re Java használatával. Ez az útmutató + egy teljes Java sablonmotor példát mutat be, hogyan generáljunk HTML-t egy sablonból, + és hogyan használjuk a foreach-et. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Hogyan konvertáljunk sablont HTML-re Java-val – lépésről lépésre útmutató +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Hogyan konvertáljunk sablont HTML-re egy Java sablonmotorral +url: /hu/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Hogyan konvertáljuk a sablont HTML-re egy Java sablonmotorral + +Ha **hogyan konvertálja a sablont** egy kész‑kiszolgálható HTML oldalra, ez az útmutató teljes megoldást nyújt. Megmutatjuk, hogyan **generálhat HTML-t sablon** fájlokból, hogyan engedélyezhető a ciklus a **hogyan használja a foreach‑et** segítségével, és végigvezetünk egy **java template engine example**-en, amely XML vagy JSON adatforrásokkal működik. + +A tutorial mindent lefed, ami a **convert html template** fájlok egyetlen Java programban történő konvertálásához szükséges. A végére egy futtatható projektet kap, amely beolvassa a sablont, befűzi az adatokat, és a végleges HTML fájlt leírja a lemezre. + +## Előfeltételek + +Mielőtt elkezdené, győződjön meg róla, hogy rendelkezik: + +* JDK 17 vagy újabb telepítve +* Egy build eszközzel, például Maven vagy Gradle (a kód csak standard Java osztályokat használ) +* Alapvető ismeretekkel a Java I/O‑ról és az XML/JSON formátumokról + +Külső könyvtárak nem szükségesek a fő lépésekhez, de ha szeretné, a egyszerű `Template` osztályokat helyettesítheti egy harmadik fél motorjával. + +## 1. lépés: Fájlútvonalak és sablonjelölők beállítása + +Az első lépés meghatározza, hogy a sablon, az adatforrás és a kimenet hol lesz. A sablon `{{...}}` helyőrzőket tartalmaz, amelyeket a motor helyettesít. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Miért fontos*: Az útvonalak hard‑kódolása lehetővé teszi, hogy a programot bármely IDE‑ből futtassa extra konfiguráció nélkül. Ezeket az értékeket parancssori argumentumként is átadhatja a rugalmasság növelése érdekében. + +## 2. lépés: Az adatforrás betöltése (XML vagy JSON) + +A motor egy adatobjektumra van szüksége, amely a helyőrző neveket értékekhez rendeli. A `TemplateData` osztály elrejti az XML és JSON feldolgozást. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +Ha a `dataPath` egy JSON fájlra mutat, a `TemplateData` automatikusan felismeri a formátumot, és ugyanazt a kulcs/érték párot építi fel. Ez a rugalmasság hasznos, amikor **generate html from template** különböző környezetekben. + +## 3. lépés: A foreach direktíva engedélyezése ciklushoz + +Sok sablonnak ismételnie kell egy blokkot a gyűjtemény minden elemére. A foreach direktíva engedélyezése azt mondja a motornak, hogy dolgozza fel a `{{#foreach items}} … {{/foreach}}` blokkokat. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**Hogyan használja a foreach‑et**: A `template.html`‑ben írhatja: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +Amikor a motor erre a blokkra fut, megismétli a `
  • ` elemet a `products` gyűjtemény minden bejegyzésére, amelyet a `TemplateData` biztosít. + +## 4. lépés: A sablon konvertálása és az eredmény írása + +Most a motor minden jelölőt a tényleges értékekkel helyettesít, és leírja a végleges HTML fájlt. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +A `convertTemplate` metódus három műveletet hajt végre: + +1. Beolvassa a `template.html`‑t a memóriába. +2. Minden `{{key}}` helyére beilleszti a megfelelő értéket a `data`‑ból. +3. Feldolgozza az esetlegesen engedélyezett foreach blokkokat. +4. A transzformált tartalmat a `resultPath`‑ra írja. + +## 5. lépés: A program futtatása és a kimenet ellenőrzése + +Végül tájékoztatja a felhasználót, hogy a konvertálás sikeres volt. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +A `main` metódus futtatásakor egy hasonló konzolos sor jelenik meg: + +``` +Template conversion completed: src/main/resources/result.html +``` + +Nyissa meg a `result.html`‑t egy böngészőben. Minden helyőrző helyettesítve lesz, és a foreach ciklusok a megfelelő HTML fragmentumokat generálják. + +### Várt kimenet példája + +Egy egyszerű `template.html` esetén: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +És egy XML `data.xml` esetén: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +A generált `result.html` a következő lesz: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Szélsőséges esetek és legjobb gyakorlatok + +* **Hiányzó helyőrzők** – A motor az ismeretlen `{{key}}` jelölőket változatlanul hagyja. Hozzáadhat egy validációs lépést, amely átvizsgálja a sablont a maradék kapcsos zárójelek után, és figyelmeztetést logol. +* **Nagy adathalmazok** – Több ezer elem esetén fontolja meg a sablon streamelését a teljes fájl memóriába töltése helyett. A jelenlegi megvalósítás tipikusan weboldalakhoz megfelelő. +* **JSON vs. XML** – Ha JSON-ra vált, tartsa meg ugyanazt a struktúrát: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + A `TemplateData` automatikusan feldolgozza, így a kód többi része változatlan marad. + +* **Kódolás** – Győződjön meg róla, hogy a sablon és az adatfájlok UTF‑8‑at használnak, hogy elkerülje a karakterkorruptiót, különösen többnyelvű HTML generálásakor. + +* **Biztonság** – Ne bízzon meg felhasználó‑által biztosított adatot közvetlenül HTML‑be injektálva szűrés nélkül. HTML speciális karaktereket escape‑elje, ha az adat markup‑ot tartalmazhat. + +## Teljesen futtatható példa + +Az alábbi önálló Java osztály egyesíti az összes lépést. Mentse `TemplateConverter.java` néven, és futtassa az IDE‑jéből vagy a parancssorból. + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## Mit érdemes még megtanulni? + +Az alábbi tutorialok szorosan kapcsolódó témákat fednek le, amelyek a jelen útmutatóban bemutatott technikákra épülnek. Minden forrás teljesen működő kódrészleteket tartalmaz lépésről‑lépésre magyarázatokkal, hogy segítsen elsajátítani további API‑funkciókat és alternatív megvalósítási megközelítéseket saját projektjeiben. + +- [How to Convert HTML to PDF Java – Using Aspose.HTML for Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [How to Edit HTML Using Aspose.HTML for Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Convert HTML to String using Aspose.HTML for Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/indonesian/java/creating-managing-html-documents/_index.md b/html/indonesian/java/creating-managing-html-documents/_index.md index 5e4b7a5e1..fbbf4c7d8 100644 --- a/html/indonesian/java/creating-managing-html-documents/_index.md +++ b/html/indonesian/java/creating-managing-html-documents/_index.md @@ -56,6 +56,8 @@ Pelajari cara memuat, memanipulasi, dan menyimpan dokumen HTML menggunakan Aspos Pelajari cara memuat dokumen HTML dari aliran menggunakan Aspose.HTML untuk Java. Panduan ini menyediakan tutorial langkah demi langkah untuk manipulasi HTML yang lancar. ### [Membuat Dokumen HTML dari String di Aspose.HTML untuk Java](./create-html-documents-from-string/) Pelajari cara membuat dokumen HTML dari string di Aspose.HTML untuk Java dengan panduan langkah demi langkah ini. +### [Cara mengonversi template menjadi HTML dengan mesin template Java](./how-to-convert-template-to-html-with-a-java-template-engine/) +Pelajari cara mengonversi template menjadi HTML menggunakan mesin template Java dengan panduan langkah demi langkah. ### [Memuat Dokumen HTML dari URL di Aspose.HTML untuk Java](./load-html-documents-from-url/) Temukan cara mudah memuat dokumen HTML dari URL di Java dengan Aspose.HTML. Tutorial langkah demi langkah disertakan. ### [Hasilkan Dokumen HTML Baru menggunakan Aspose.HTML untuk Java](./generate-new-html-documents/) @@ -69,6 +71,7 @@ Pelajari cara membuat sandbox HTML di Java dengan panduan langkah demi langkah u ### [Cara Menanyakan HTML di Java – Tutorial Lengkap](./how-to-query-html-in-java-complete-tutorial/) ### [Cara Mengurai HTML di Java – Memuat, Menanyakan & Menghitung Elemen](./how-to-parse-html-java-load-query-count-elements/) ### [Jalankan JavaScript Asinkron di Java – Panduan Lengkap Langkah‑per‑Langkah](./execute-async-javascript-in-java-complete-step-by-step-guide/) +### [Cara mengikat data ke tabel HTML dinamis dengan kolom nama depan dan belakang](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) {{< /blocks/products/pf/tutorial-page-section >}} @@ -103,4 +106,4 @@ Pelajari cara mengekstrak teks dari dokumen HTML menggunakan Aspose.HTML untuk J {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/indonesian/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/indonesian/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..7c81fdf9d --- /dev/null +++ b/html/indonesian/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,324 @@ +--- +category: general +date: 2026-09-07 +description: cara mengikat data dalam tabel HTML dinamis – pelajari cara menghasilkan + baris tabel dan mengisi bidang nama depan serta nama belakang secara efisien +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: id +lastmod: 2026-09-07 +og_description: cara mengikat data dalam tabel HTML dinamis. tutorial ini menunjukkan + cara menghasilkan baris tabel, menampilkan nama depan dan nama belakang, serta mengisi + baris tabel dengan JavaScript. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Cara mengikat data ke tabel HTML dinamis – panduan langkah demi langkah +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: Cara mengikat data ke tabel HTML dinamis dengan kolom nama depan dan nama belakang +url: /id/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Cara mengikat data ke tabel HTML dinamis dengan kolom nama depan dan nama belakang + +Jika Anda perlu **mengikat data** ke dalam tabel yang bertambah dengan setiap catatan, panduan ini menunjukkan solusi lengkap. Anda akan melihat cara menghasilkan tabel HTML dinamis, mengisi baris tabel, dan menampilkan nama depan serta nama belakang setiap orang tanpa menulis markup berulang. + +Contoh ini menggunakan sintaks templating ringan yang bekerja di semua browser modern, tetapi konsepnya berlaku untuk Handlebars, Mustache, atau mesin sisi‑server lainnya. Pada akhir tutorial Anda dapat menyalin kode ke dalam proyek Anda dan mulai mengikat data secara instan. + +## Apa yang dibahas dalam tutorial ini + +* Cara menyusun sumber data yang berisi beberapa orang +* Cara membuat templat tabel yang dapat digunakan kembali dan diulang untuk setiap entri +* Cara mengikat data dan menghasilkan markup HTML akhir +* Kesulitan umum saat mengisi baris tabel dan cara menghindarinya + +Tidak ada pustaka eksternal yang diperlukan, meskipun pola yang sama dapat bekerja dengan kerangka kerja templating populer. Prasyarat satu‑satunya adalah pengetahuan dasar HTML dan JavaScript. + +## Prasyarat + +* Browser modern (Chrome, Edge, Firefox, atau Safari) +* Editor untuk file HTML/JavaScript +* Opsional: file JSON atau objek JavaScript yang mewakili koleksi orang + +## Langkah 1: Tentukan sumber data + +Pertama, buat objek JavaScript yang mencerminkan struktur yang digunakan dalam templat. Setiap orang memiliki nama depan, nama belakang, dan objek alamat. + +```html + +``` + +**Mengapa ini penting:** Hierarki objek (`Persons.Person`) cocok dengan loop `{{#foreach Persons.Person}}` dalam templat, memungkinkan mesin untuk mengulangi setiap entri secara otomatis. + +## Langkah 2: Tulis templat tabel dengan blok pengulangan + +Templat di bawah ini menggunakan sintaks gaya Mustache sederhana (`{{#foreach}}`) untuk mengulang `` bagi setiap orang. Letakkan templat di dalam tag ` +``` + +**Mengapa ini penting:** Direktif `{{#foreach Persons.Person}}` memberi tahu mesin untuk mengulangi semua di antara tag pembuka dan penutup untuk setiap objek orang. Di dalam baris Anda dapat merujuk ke properti apa pun (`{{FirstName}}`, `{{LastName}}`, dll.) untuk **mengisi baris tabel** secara dinamis. + +## Langkah 3: Implementasikan fungsi rendering kecil + +Karena tutorial harus berdiri sendiri, kami akan menulis renderer minimal yang menggantikan placeholder gaya Mustache dengan nilai sebenarnya. Fungsi ini menelusuri objek data, memperluas blok pengulangan, dan menyuntikkan HTML akhir ke halaman. + +```html + +``` + +**Mengapa ini penting:** Renderer menunjukkan **cara menghasilkan tabel** markup secara programatis tanpa harus memasukkan seluruh pustaka. Ini juga memperjelas transformasi dari templat ke HTML akhir, yang membantu Anda menyesuaikan kode ke mesin templating lain di kemudian hari. + +## Langkah 4: Tambahkan placeholder di mana tabel yang dihasilkan akan muncul + +Buat `
    ` kosong yang akan diisi skrip setelah rendering. + +```html +
    +``` + +Saat halaman dimuat, skrip menggantikan isi `
    ` ini dengan tabel yang sepenuhnya terisi. + +## Langkah 5: Verifikasi hasil + +Buka file HTML di browser. Anda harus melihat tabel yang menampilkan nama lengkap dan alamat setiap orang: + +| Person | Address | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Jika Anda menambahkan lebih banyak objek ke array `data.Persons.Person`, tabel akan otomatis bertambah—memenuhi kebutuhan **mengisi baris tabel**. + +## Tips pro: menangani koleksi kosong + +Ketika array data kosong, renderer saat ini menghasilkan header tabel kosong. Untuk memberikan pengalaman pengguna yang lebih jelas, tambahkan penjagaan: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Perubahan kecil ini mencegah tabel kosong muncul dan memberi pengguna umpan balik langsung. + +## Variasi umum dan kasus tepi + +| Situasi | Penyesuaian | +|----------------------------------------|----------------------------------------------------------------------------| +| Menggunakan mesin sisi‑server (mis., Handlebars) | Ganti `renderTemplate` khusus dengan `Handlebars.compile` dan berikan objek data yang sama. | +| Perlu mengurutkan baris secara alfabet | Urutkan `data.Persons.Person` sebelum memanggil `renderTemplate`. | +| Menambahkan kolom untuk nomor telepon | Perluas `` dengan `{{Phone}}` dan sertakan `Phone` di setiap objek orang. | +| Set data besar (ratusan baris) | Render baris dalam potongan atau gunakan scrolling virtual agar UI tetap responsif. | + +## Contoh lengkap yang berfungsi + +Berikut adalah file HTML lengkap yang dapat Anda salin‑tempel ke `index.html`. File ini berisi semua bagian yang dibahas di atas. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Output yang diharapkan** + +Halaman menampilkan tabel dengan dua baris, masing‑masing menampilkan nama lengkap dan alamat terformat seorang orang. Menambahkan lebih banyak objek ke array `Person` secara otomatis menambah baris baru—menunjukkan **cara menghasilkan tabel** elemen dari data. + +## Kesimpulan + +Anda kini tahu **cara mengikat data** ke **tabel HTML dinamis**, menghasilkan baris untuk setiap catatan, dan menampilkan nilai nama depan serta nama belakang bersama alamat. + +## Apa yang Harus Anda Pelajari Selanjutnya? + +Tutorial berikut mencakup topik terkait yang membangun teknik yang ditunjukkan dalam panduan ini. Setiap sumber menyertakan contoh kode lengkap yang berfungsi dengan penjelasan langkah‑demi‑langkah untuk membantu Anda menguasai fitur API tambahan dan mengeksplorasi pendekatan implementasi alternatif dalam proyek Anda sendiri. + +- [Cara Menambahkan CSS – CSS Inline ke Dokumen HTML di Aspose.HTML untuk Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [Cara Mengedit Pohon Dokumen HTML di Aspose.HTML untuk Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [Cara Mengaktifkan JavaScript di Aspose HTML – Memuat HTML & Mendapatkan Teks](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/indonesian/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/indonesian/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..25e58f3ff --- /dev/null +++ b/html/indonesian/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,233 @@ +--- +category: general +date: 2026-09-07 +description: Cara mengonversi template menjadi HTML menggunakan Java. Pelajari cara + menghasilkan HTML dari template, mengaktifkan loop foreach, dan lihat contoh lengkap + mesin template Java. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: id +lastmod: 2026-09-07 +og_description: Cara mengonversi templat menjadi HTML menggunakan Java. Tutorial ini + menunjukkan contoh lengkap mesin templat Java, cara menghasilkan HTML dari templat, + dan cara menggunakan foreach. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Cara mengonversi template ke HTML dengan Java – panduan langkah demi langkah +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Cara mengubah template menjadi HTML dengan mesin template Java +url: /id/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Cara mengonversi template menjadi HTML dengan mesin template Java + +Jika Anda perlu **how to convert template** menjadi halaman HTML yang siap disajikan, panduan ini menyediakan solusi lengkap. Anda akan melihat cara **generate HTML from template** file, mengaktifkan perulangan dengan **how to use foreach**, dan menelusuri **java template engine example** yang bekerja dengan sumber data XML atau JSON. + +Tutorial ini mencakup semua yang diperlukan untuk **convert html template** file dalam satu program Java. Pada akhir tutorial, Anda akan memiliki proyek yang dapat dijalankan yang membaca template, menyuntikkan data, dan menulis file HTML akhir ke disk. + +## Prasyarat + +* JDK 17 atau yang lebih baru terpasang +* Alat build seperti Maven atau Gradle (kode hanya menggunakan kelas Java standar) +* Familiaritas dasar dengan Java I/O dan format XML/JSON + +Tidak ada pustaka eksternal yang diperlukan untuk langkah inti, tetapi Anda dapat mengganti kelas `Template` sederhana dengan mesin pihak ketiga jika Anda lebih suka. + +## Langkah 1: Menyiapkan jalur file dan penanda template + +Langkah pertama menentukan di mana template, sumber data, dan output akan berada. Template berisi placeholder `{{...}}` yang akan digantikan oleh mesin. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Why this matters*: Hard‑coding paths memungkinkan Anda menjalankan program dari IDE mana pun tanpa konfigurasi tambahan. Anda juga dapat melewatkan nilai-nilai ini sebagai argumen baris perintah untuk fleksibilitas lebih. + +## Langkah 2: Memuat sumber data (XML atau JSON) + +Mesin memerlukan objek data yang memetakan nama placeholder ke nilai. Kelas `TemplateData` mengabstraksi parsing XML dan JSON. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +Jika `dataPath` mengarah ke file JSON, `TemplateData` secara otomatis mendeteksi formatnya dan membangun peta kunci/nilai yang sama. Fleksibilitas ini berguna ketika Anda **generate html from template** di lingkungan yang berbeda. + +## Langkah 3: Mengaktifkan direktif foreach untuk perulangan + +Banyak template perlu mengulang sebuah blok untuk setiap item dalam koleksi. Mengaktifkan direktif foreach memberi tahu mesin untuk memproses blok `{{#foreach items}} … {{/foreach}}`. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**How to use foreach**: Di dalam `template.html` Anda dapat menulis: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +Ketika mesin menemukan blok ini, ia mengulangi elemen `
  • ` untuk setiap entri dalam koleksi `products` yang disediakan oleh `TemplateData`. + +## Langkah 4: Mengonversi template dan menulis hasilnya + +Sekarang mesin menggantikan semua penanda dengan nilai sebenarnya dan menulis file HTML akhir. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +Metode `convertTemplate` melakukan tiga aksi: + +1. Membaca `template.html` ke memori. +2. Mengganti setiap `{{key}}` dengan nilai yang sesuai dari `data`. +3. Memproses semua blok foreach yang diaktifkan. +4. Menulis konten yang telah diubah ke `resultPath`. + +## Langkah 5: Menjalankan program dan memverifikasi output + +Akhirnya, beri tahu pengguna bahwa konversi berhasil. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +Saat Anda mengeksekusi metode `main`, Anda akan melihat baris konsol serupa dengan: + +``` +Template conversion completed: src/main/resources/result.html +``` + +Buka `result.html` di peramban. Semua placeholder akan diganti, dan setiap loop foreach akan menghasilkan fragmen HTML yang sesuai. + +### Contoh output yang diharapkan + +Dengan `template.html` sederhana: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +Dan file XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +File `result.html` yang dihasilkan akan menjadi: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Kasus tepi dan tips praktik terbaik + +* **Missing placeholders** – Mesin membiarkan marker `{{key}}` yang tidak dikenal tetap tidak berubah. Anda dapat menambahkan langkah validasi yang memindai template untuk tanda kurung yang tersisa dan mencatat peringatan. +* **Large data sets** – Untuk ribuan item, pertimbangkan streaming template alih-alih memuat seluruh file ke memori. Implementasi saat ini sudah cukup untuk halaman web tipikal. +* **JSON vs. XML** – Jika Anda beralih ke JSON, pertahankan struktur yang sama: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` akan memparsenya secara otomatis, sehingga sisa kode tetap tidak berubah. +* **Encoding** – Pastikan kedua file template dan data menggunakan UTF‑8 untuk menghindari korupsi karakter, terutama saat menghasilkan HTML multibahasa. +* **Security** – Jangan mempercayai data yang diberikan pengguna untuk disuntikkan langsung ke HTML tanpa sanitasi. Escape karakter khusus HTML jika data mungkin berisi markup. + +## Contoh lengkap yang dapat dijalankan + +Berikut adalah kelas Java mandiri yang menggabungkan semua langkah. Simpan sebagai `TemplateConverter.java` dan jalankan dari IDE atau baris perintah Anda. + + + +## Apa yang Harus Anda Pelajari Selanjutnya? + +Tutorial berikut mencakup topik terkait erat yang membangun pada teknik yang ditunjukkan dalam panduan ini. Setiap sumber daya menyertakan contoh kode lengkap yang berfungsi dengan penjelasan langkah demi langkah untuk membantu Anda menguasai fitur API tambahan dan mengeksplorasi pendekatan implementasi alternatif dalam proyek Anda. + +- [Cara Mengonversi HTML ke PDF dengan Java – Menggunakan Aspose.HTML untuk Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [Cara Mengedit HTML Menggunakan Aspose.HTML untuk Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Mengonversi HTML ke String menggunakan Aspose.HTML untuk Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/italian/java/creating-managing-html-documents/_index.md b/html/italian/java/creating-managing-html-documents/_index.md index 032b6e78a..0de1cca49 100644 --- a/html/italian/java/creating-managing-html-documents/_index.md +++ b/html/italian/java/creating-managing-html-documents/_index.md @@ -57,6 +57,8 @@ Scopri come caricare documenti HTML da flussi usando Aspose.HTML per Java. Quest Scopri come creare documenti HTML da stringhe in Aspose.HTML per Java con questa guida dettagliata. ### [Crea sandbox per HTML in Java – Guida passo‑a‑passo](./create-sandbox-for-html-in-java-step-by-step-guide/) Impara a creare un ambiente sandbox per HTML in Java, garantendo sicurezza e isolamento durante lo sviluppo. +### [Come convertire un modello in HTML con un motore di template Java](./how-to-convert-template-to-html-with-a-java-template-engine/) +Scopri come trasformare template in HTML usando un motore di template Java con Aspose.HTML per Java. ### [Carica documenti HTML dall'URL in Aspose.HTML per Java](./load-html-documents-from-url/) Scopri come caricare facilmente documenti HTML da un URL in Java con Aspose.HTML. Tutorial passo passo incluso. ### [Iterare NodeList in Java – Leggi HTML e ottieni src immagine](./iterate-nodelist-java-read-html-get-image-src/) @@ -73,6 +75,8 @@ Impara a eseguire query su documenti HTML in Java usando Aspose.HTML con questa Impara a caricare, interrogare e contare gli elementi HTML in Java usando Aspose.HTML con questa guida passo‑passo. ### [Esegui JavaScript asincrono in Java – Guida completa passo‑a‑passo](./execute-async-javascript-in-java-complete-step-by-step-guide/) Scopri come eseguire JavaScript asincrono in Java usando Aspose.HTML. Guida passo‑passo con esempi pratici e consigli utili. +### [Come collegare dati a una tabella HTML dinamica con colonne nome e cognome](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) +Scopri come popolare una tabella HTML dinamica con dati di nome e cognome usando Aspose.HTML per Java. {{< /blocks/products/pf/tutorial-page-section >}} @@ -99,4 +103,4 @@ Scopri come estrarre testo da documenti HTML in Java usando Aspose.HTML con ques {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/italian/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/italian/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..008c27e5c --- /dev/null +++ b/html/italian/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,324 @@ +--- +category: general +date: 2026-09-07 +description: come collegare i dati in una tabella HTML dinamica – impara a generare + le righe della tabella e a popolare i campi nome e cognome in modo efficiente +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: it +lastmod: 2026-09-07 +og_description: come collegare i dati in una tabella HTML dinamica. Questo tutorial + mostra come generare le righe della tabella, visualizzare nome e cognome e popolare + le righe della tabella con JavaScript. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Come associare i dati a una tabella HTML dinamica – guida passo passo +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: Come collegare i dati a una tabella HTML dinamica con colonne nome e cognome +url: /it/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Come associare dati a una tabella HTML dinamica con colonne nome e cognome + +Se hai bisogno di **come associare dati** a una tabella che cresce con ogni record, questa guida mostra una soluzione completa. Vedrai come generare una tabella HTML dinamica, popolare le righe della tabella e visualizzare il nome e il cognome di ogni persona senza scrivere markup ripetitivo. + +L'esempio utilizza una sintassi di templating leggera che funziona in qualsiasi browser moderno, ma i concetti si applicano anche a Handlebars, Mustache o motori lato server. Alla fine del tutorial potrai copiare il codice nel tuo progetto e iniziare a associare i dati immediatamente. + +## Cosa copre questo tutorial + +* Come strutturare una fonte dati che contiene più persone +* Come creare un modello di tabella riutilizzabile che si ripete per ogni voce +* Come associare i dati e generare il markup HTML finale +* Problemi comuni nella popolazione delle righe della tabella e come evitarli + +Non sono richieste librerie esterne, anche se lo stesso schema funziona con i framework di templating più popolari. L'unico prerequisito è una conoscenza di base di HTML e JavaScript. + +## Prerequisiti + +* Un browser moderno (Chrome, Edge, Firefox o Safari) +* Un editor per file HTML/JavaScript +* Facoltativo: un file JSON o un oggetto JavaScript che rappresenta la collezione di persone + +## Passo 1: Definire la fonte dati + +Per prima cosa, crea un oggetto JavaScript che rispecchi la struttura usata nel modello. Ogni persona ha un nome, un cognome e un oggetto indirizzo. + +```html + +``` + +**Perché è importante:** La gerarchia dell'oggetto (`Persons.Person`) corrisponde al ciclo `{{#foreach Persons.Person}}` nel modello, consentendo al motore di iterare automaticamente su ogni voce. + +## Passo 2: Scrivere il modello della tabella con un blocco di ripetizione + +Il modello qui sotto utilizza una sintassi in stile Mustache (`{{#foreach}}`) per ripetere il `` per ogni persona. Inserisci il modello all'interno di un tag ` +``` + +**Perché è importante:** La direttiva `{{#foreach Persons.Person}}` indica al motore di ripetere tutto ciò che si trova tra i tag di apertura e chiusura per ogni oggetto persona. All'interno della riga puoi fare riferimento a qualsiasi proprietà (`{{FirstName}}`, `{{LastName}}`, ecc.) per **popolare le righe della tabella** in modo dinamico. + +## Passo 3: Implementare una piccola funzione di rendering + +Poiché il tutorial deve essere autosufficiente, scriveremo un renderer minimale che sostituisce i segnaposto in stile Mustache con i valori reali. La funzione attraversa l'oggetto dati, espande il blocco di ripetizione e inietta l'HTML finale nella pagina. + +```html + +``` + +**Perché è importante:** Il renderer dimostra **come generare markup di una tabella** programmaticamente senza includere una libreria completa. Inoltre chiarisce la trasformazione dal modello all'HTML finale, aiutandoti a adattare il codice ad altri motori di templating in seguito. + +## Passo 4: Aggiungere un segnaposto dove apparirà la tabella generata + +Crea un `
    ` vuoto che lo script riempirà dopo il rendering. + +```html +
    +``` + +Quando la pagina si carica, lo script sostituisce il contenuto di questo `
    ` con la tabella completamente popolata. + +## Passo 5: Verificare il risultato + +Apri il file HTML in un browser. Dovresti vedere una tabella che elenca il nome completo e l'indirizzo di ogni persona: + +| Persona | Indirizzo | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Se aggiungi altri oggetti all'array `data.Persons.Person`, la tabella cresce automaticamente—soddisfacendo il requisito di **popolare le righe della tabella**. + +## Consiglio esperto: gestire collezioni vuote + +Quando l'array dei dati è vuoto, il renderer attualmente genera solo l'intestazione della tabella. Per offrire un'esperienza utente più chiara, aggiungi una guardia: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Questa piccola modifica impedisce la visualizzazione di una tabella vuota e fornisce un feedback immediato all'utente. + +## Variazioni comuni e casi limite + +| Situazione | Adeguamento | +|----------------------------------------|-----------------------------------------------------------------------------| +| Utilizzo di un motore lato server (es. Handlebars) | Sostituire il `renderTemplate` personalizzato con `Handlebars.compile` e passare lo stesso oggetto dati. | +| Necessità di ordinare le righe alfabeticamente | Ordinare `data.Persons.Person` prima di chiamare `renderTemplate`. | +| Aggiunta di una colonna per il numero di telefono | Estendere il `` con `{{Phone}}` e includere `Phone` in ogni oggetto persona. | +| Set di dati di grandi dimensioni (centinaia di righe) | Renderizzare le righe a blocchi o utilizzare lo scrolling virtuale per mantenere l'interfaccia reattiva. | + +## Esempio completo funzionante + +Di seguito trovi il file HTML completo che puoi copiare‑incollare in `index.html`. Contiene tutti gli elementi discussi sopra. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Output previsto** + +La pagina rende una tabella con due righe, ciascuna mostra il nome completo e l'indirizzo formattato di una persona. Aggiungendo altri oggetti all'array `Person` vengono aggiunte automaticamente nuove righe—dimostrando **come generare elementi di tabella** a partire dai dati. + +## Conclusione + +Ora sai **come associare dati** a una **tabella HTML dinamica**, generare righe per ogni record e visualizzare i valori di nome e cognome accanto all'indirizzo. + +## Cosa dovresti imparare dopo? + +I tutorial seguenti trattano argomenti strettamente correlati che si basano sulle tecniche dimostrate in questa guida. Ogni risorsa include esempi di codice completi con spiegazioni passo‑passo per aiutarti a padroneggiare ulteriori funzionalità dell'API ed esplorare approcci di implementazione alternativi nei tuoi progetti. + +- [Come aggiungere CSS – CSS inline ai documenti HTML in Aspose.HTML per Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [Come modificare l'albero del documento HTML in Aspose.HTML per Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [Come abilitare JavaScript in Aspose HTML – Caricare HTML e ottenere testo](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/italian/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/italian/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..44408a3fd --- /dev/null +++ b/html/italian/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,233 @@ +--- +category: general +date: 2026-09-07 +description: Come convertire un modello in HTML usando Java. Impara a generare HTML + da un modello, abilita i cicli foreach e vedi un esempio completo di motore di template + Java. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: it +lastmod: 2026-09-07 +og_description: Come convertire un modello in HTML usando Java. Questo tutorial mostra + un esempio completo di motore di template Java, come generare HTML da un modello + e come utilizzare foreach. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Come convertire un modello in HTML con Java – guida passo passo +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Come convertire un template in HTML con un motore di template Java +url: /it/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Come convertire un template in HTML con un motore di template Java + +Se hai bisogno di **how to convert template** in una pagina HTML pronta per la distribuzione, questa guida fornisce una soluzione completa. Vedrai come **generate HTML from template** file, abilitare i loop con **how to use foreach**, e percorrere un **java template engine example** che funziona con sorgenti dati XML o JSON. + +Il tutorial copre tutto il necessario per **convert html template** file in un unico programma Java. Alla fine avrai un progetto eseguibile che legge un template, inietta i dati e scrive il file HTML finale su disco. + +## Prerequisiti + +* JDK 17 o versioni successive installato +* Uno strumento di build come Maven o Gradle (il codice utilizza solo classi Java standard) +* Familiarità di base con Java I/O e i formati XML/JSON + +Non sono richieste librerie esterne per i passaggi principali, ma puoi sostituire le semplici classi `Template` con un motore di terze parti se lo preferisci. + +## Passo 1: Configurare percorsi dei file e marcatori del template + +Il primo passo definisce dove risiederanno il template, la sorgente dati e l'output. Il template contiene segnaposti `{{...}}` che il motore sostituirà. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Perché è importante*: Codificare i percorsi consente di eseguire il programma da qualsiasi IDE senza configurazioni aggiuntive. Puoi anche passare questi valori come argomenti da riga di comando per maggiore flessibilità. + +## Passo 2: Caricare la sorgente dati (XML o JSON) + +Il motore necessita di un oggetto dati che mappi i nomi dei segnaposti ai valori. La classe `TemplateData` astrae il parsing di XML e JSON. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +Se `dataPath` punta a un file JSON, `TemplateData` rileva automaticamente il formato e costruisce la stessa mappa chiave/valore. Questa flessibilità è utile quando **generate html from template** in ambienti diversi. + +## Passo 3: Abilitare la direttiva foreach per i loop + +Molti template devono ripetere un blocco per ogni elemento di una collezione. Abilitare la direttiva foreach indica al motore di elaborare i blocchi `{{#foreach items}} … {{/foreach}}`. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**How to use foreach**: All'interno di `template.html` puoi scrivere: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +Quando il motore incontra questo blocco, ripete l'elemento `
  • ` per ogni voce nella collezione `products` fornita da `TemplateData`. + +## Passo 4: Convertire il template e scrivere il risultato + +Ora il motore sostituisce tutti i marcatori con i valori reali e scrive il file HTML finale. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +Il metodo `convertTemplate` esegue tre azioni: + +1. Legge `template.html` in memoria. +2. Sostituisce ogni `{{key}}` con il valore corrispondente da `data`. +3. Elabora eventuali blocchi foreach abilitati. +4. Scrive il contenuto trasformato in `resultPath`. + +## Passo 5: Eseguire il programma e verificare l'output + +Infine, informa l'utente che la conversione è avvenuta con successo. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +Quando esegui il metodo `main`, dovresti vedere una riga della console simile a: + +``` +Template conversion completed: src/main/resources/result.html +``` + +Apri `result.html` in un browser. Tutti i segnaposti saranno sostituiti e i loop foreach avranno generato i frammenti HTML appropriati. + +### Esempio di output previsto + +Dato un semplice `template.html`: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +E un XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +Il `result.html` generato sarà: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Casi limite e consigli di best‑practice + +* **Missing placeholders** – Il motore lascia invariati i marcatori `{{key}}` sconosciuti. Puoi aggiungere un passaggio di validazione che scandisce il template alla ricerca di parentesi rimanenti e registra un avviso. +* **Large data sets** – Per migliaia di elementi, considera lo streaming del template invece di caricare l'intero file in memoria. L'implementazione attuale è adeguata per pagine web tipiche. +* **JSON vs. XML** – Se passi a JSON, mantieni la stessa struttura: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` lo parserà automaticamente, quindi il resto del codice rimane invariato. +* **Encoding** – Assicurati che sia i file template sia i file dati usino UTF‑8 per evitare corruzioni di caratteri, specialmente quando generi HTML multilingue. +* **Security** – Non fidarti dei dati forniti dall'utente per l'iniezione diretta in HTML senza sanitizzazione. Escapa i caratteri speciali HTML se i dati possono contenere markup. + +## Esempio completo eseguibile + +Di seguito è una classe Java autonoma che combina tutti i passaggi. Salvala come `TemplateConverter.java` ed eseguila dal tuo IDE o dalla riga di comando. + + + +## Cosa dovresti imparare dopo? + +I seguenti tutorial coprono argomenti strettamente correlati che si basano sulle tecniche dimostrate in questa guida. Ogni risorsa include esempi di codice completi e funzionanti con spiegazioni passo‑passo per aiutarti a padroneggiare funzionalità API aggiuntive ed esplorare approcci di implementazione alternativi nei tuoi progetti. + +- [Come convertire HTML in PDF Java – Utilizzando Aspose.HTML per Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [Come modificare HTML usando Aspose.HTML per Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Convertire HTML in Stringa usando Aspose.HTML per Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/japanese/java/creating-managing-html-documents/_index.md b/html/japanese/java/creating-managing-html-documents/_index.md index 2249ee176..82072afc5 100644 --- a/html/japanese/java/creating-managing-html-documents/_index.md +++ b/html/japanese/java/creating-managing-html-documents/_index.md @@ -72,7 +72,11 @@ Java アプリで HTML のサンドボックス環境を構築し、安全にテ Java で HTML を検索・抽出する方法をステップバイステップで解説します。XPath や CSS セレクタの活用例を含む完全ガイドです。 ### [Java で HTML を解析する方法 – ロード、クエリ、要素のカウント](./how-to-parse-html-java-load-query-count-elements/) ### [Java で非同期 JavaScript を実行する – 完全ステップバイステップガイド](./execute-async-javascript-in-java-complete-step-by-step-guide/) -Java アプリケーションで非同期 JavaScript を実行し、動的な Web コンテンツを操作する方法をステップバイステップで学びます。 +### [Java テンプレートエンジンでテンプレートを HTML に変換する方法](./how-to-convert-template-to-html-with-a-java-template-engine/) +Java のテンプレートエンジンを使用してテンプレートを HTML に変換する手順をステップバイステップで解説します。 + +### [動的HTMLテーブルにデータをバインドする方法(姓と名の列)](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) +このチュートリアルでは、Java で動的な HTML テーブルに姓と名の列を持つデータをバインドする手順をステップバイステップで解説します。 {{< /blocks/products/pf/tutorial-page-section >}} @@ -98,4 +102,4 @@ Aspose.HTML for Java を使用して、HTML からテキストを抽出する方 {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/japanese/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/japanese/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..55e70703e --- /dev/null +++ b/html/japanese/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,321 @@ +--- +category: general +date: 2026-09-07 +description: 動的HTMLテーブルでデータをバインドする方法 – テーブル行を生成し、姓と名のフィールドを効率的に埋める方法を学びましょう +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: ja +lastmod: 2026-09-07 +og_description: 動的HTMLテーブルでデータをバインドする方法。このチュートリアルでは、テーブル行の生成方法、姓と名の表示、そしてJavaScriptでテーブル行を埋め込む方法を示します。 +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: 動的HTMLテーブルにデータをバインドする方法 – ステップバイステップガイド +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: 姓と名の列がある動的HTMLテーブルへのデータバインド方法 +url: /ja/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 動的HTMLテーブルに名前(姓と名)列をバインドする方法 + +レコードが追加されるたびに拡張されるテーブルに **データをバインドする方法** が必要な場合、このガイドでは完全なソリューションを示します。動的HTMLテーブルの生成方法、テーブル行の埋め込み方法、そして繰り返しのマークアップを書かずに各人物の名と姓を表示する方法が分かります。 + +この例は、どのモダンブラウザでも動作する軽量テンプレート構文を使用していますが、概念は Handlebars、Mustache、またはサーバーサイドエンジンにも同様に適用できます。チュートリアルの最後までに、コードをプロジェクトにコピーしてすぐにデータバインドを開始できるようになります。 + +## このチュートリアルでカバーする内容 + +* 複数の人物を含むデータソースの構造化方法 +* 各エントリに対して繰り返される再利用可能なテーブルテンプレートの作成方法 +* データをバインドし、最終的なHTMLマークアップを生成する方法 +* テーブル行を埋め込む際の一般的な落とし穴と回避方法 + +外部ライブラリは不要ですが、同じパターンは一般的なテンプレートフレームワークでも機能します。前提条件は基本的な HTML と JavaScript の知識だけです。 + +## 前提条件 + +* 最新のブラウザ(Chrome、Edge、Firefox、Safari) +* HTML/JavaScript ファイル用エディタ +* オプション: 人物コレクションを表す JSON ファイルまたは JavaScript オブジェクト + +## ステップ 1: データソースの定義 + +まず、テンプレートで使用する構造と同じ形の JavaScript オブジェクトを作成します。各人物は名、姓、そして address オブジェクトを持ちます。 + +```html + +``` + +**なぜ重要か:** オブジェクト階層 (`Persons.Person`) はテンプレート内の `{{#foreach Persons.Person}}` ループと一致し、エンジンが自動的にすべてのエントリを反復処理できるようにします。 + +## ステップ 2: 繰り返しブロックを使用したテーブルテンプレートの作成 + +以下のテンプレートはシンプルな Mustache 風構文 (`{{#foreach}}`) を使って、各人物ごとに `` を繰り返します。テンプレートは ` +``` + +**なぜ重要か:** `{{#foreach Persons.Person}}` ディレクティブは、各人物オブジェクトに対して開始タグと終了タグの間の内容を繰り返すようエンジンに指示します。行の中では任意のプロパティ(`{{FirstName}}`、`{{LastName}}` など)を参照して **テーブル行を動的に埋め込む** ことができます。 + +## ステップ 3: 小さなレンダリング関数の実装 + +チュートリアルは自己完結である必要があるため、Mustache 風プレースホルダーを実際の値に置き換える最小限のレンダラを作成します。この関数はデータオブジェクトを走査し、繰り返しブロックを展開し、最終的な HTML をページに注入します。 + +```html + +``` + +**なぜ重要か:** このレンダラは **テーブルをプログラムで生成** する方法を示すもので、フルライブラリを導入せずに済みます。また、テンプレートから最終 HTML への変換プロセスを明確に示すため、後で他のテンプレートエンジンに置き換える際の参考になります。 + +## ステップ 4: 生成されたテーブルが表示されるプレースホルダーを追加 + +レンダリング後にスクリプトが埋め込む空の `
    ` を作成します。 + +```html +
    +``` + +ページが読み込まれると、スクリプトはこの `
    ` の内容を完全に埋め込まれたテーブルに置き換えます。 + +## ステップ 5: 結果の検証 + +HTML ファイルをブラウザで開きます。各人物のフルネームと住所が一覧表示されたテーブルが表示されるはずです。 + +| 人物 | 住所 | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +データ配列 `data.Persons.Person` にオブジェクトを追加すると、テーブルは自動的に拡張され、**テーブル行の埋め込み** 要件を満たします。 + +## プロのヒント: 空のコレクションの処理 + +データ配列が空の場合、現在のレンダラは空のテーブルヘッダーだけを出力します。ユーザー体験を向上させるために、ガードを追加します。 + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +この小さな変更により、空のテーブルが表示されるのを防ぎ、ユーザーに即座にフィードバックを提供できます。 + +## 一般的なバリエーションとエッジケース + +| 状況 | 調整 | +|----------------------------------------|----------------------------------------------------------------------------| +| サーバーサイドエンジン(例: Handlebars) | カスタム `renderTemplate` を `Handlebars.compile` に置き換え、同じデータオブジェクトを渡す。 | +| 行をアルファベット順にソートしたい | `renderTemplate` を呼び出す前に `data.Persons.Person` をソートする。 | +| 電話番号列を追加したい | `` に `{{Phone}}` を追加し、各人物オブジェクトに `Phone` を含める。 | +| 大規模データセット(数百行) | 行をチャンク単位でレンダリングするか、バーチャルスクロールを使用して UI の応答性を保つ。 | + +## 完全な動作例 + +以下は `index.html` にコピー&ペーストできる完全な HTML ファイルです。上記で説明したすべての要素が含まれています。 + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**期待される出力** + +ページは 2 行のテーブルをレンダリングし、各人物のフルネームとフォーマットされた住所を表示します。`Person` 配列にオブジェクトを追加すると自動的に新しい行が追加され、**テーブル生成方法** をデータから実演します。 + +## 結論 + +これで **データをバインドする方法** を **動的HTMLテーブル** に適用し、各レコード用の行を生成し、住所とともに名と姓の値を表示できるようになりました。 + +## 次に学ぶべきことは? + +以下のチュートリアルは、本ガイドで示した手法を基にした密接に関連するトピックを扱っています。各リソースには完全な動作コード例とステップバイステップの解説が含まれており、追加の API 機能を習得したり、プロジェクトで代替実装アプローチを探求したりするのに役立ちます。 + +- [Aspose.HTML for Java で CSS を追加する方法 – HTML ドキュメントへのインライン CSS](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [Aspose.HTML for Java で HTML ドキュメントツリーを編集する方法](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [Aspose HTML で JavaScript を有効化する方法 – HTML の読み込みとテキスト取得](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/japanese/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/japanese/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..2f45031e3 --- /dev/null +++ b/html/japanese/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,345 @@ +--- +category: general +date: 2026-09-07 +description: Java を使用してテンプレートを HTML に変換する方法。テンプレートから HTML を生成し、foreach ループを有効にし、完全な + Java テンプレートエンジンの例をご覧ください。 +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: ja +lastmod: 2026-09-07 +og_description: Java を使用してテンプレートを HTML に変換する方法。このチュートリアルでは、完全な Java テンプレートエンジンの例、テンプレートから + HTML を生成する方法、そして foreach の使い方を示します。 +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: JavaでテンプレートをHTMLに変換する方法 – ステップバイステップガイド +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: JavaテンプレートエンジンでテンプレートをHTMLに変換する方法 +url: /ja/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# テンプレートをJavaテンプレートエンジンでHTMLに変換する方法 + +テンプレートをすぐに配信できるHTMLページに**how to convert template**する必要がある場合、このガイドは完全なソリューションを提供します。**generate HTML from template**ファイルの生成方法、**how to use foreach**でのループ有効化、そしてXMLまたはJSONデータソースで動作する**java template engine example**を順に解説します。 + +このチュートリアルでは、単一のJavaプログラムで**convert html template**ファイルを処理するために必要なすべてをカバーします。最後には、テンプレートを読み込みデータを注入し、最終的なHTMLファイルをディスクに書き出す実行可能なプロジェクトが手に入ります。 + +## 前提条件 + +* JDK 17 以降がインストールされていること +* Maven や Gradle などのビルドツール(コードは標準のJavaクラスのみ使用) +* Java I/O と XML/JSON フォーマットの基本的な知識 + +コアステップでは外部ライブラリは不要ですが、必要に応じてシンプルな `Template` クラスをサードパーティ製エンジンに置き換えることも可能です。 + +## ステップ 1: ファイルパスとテンプレートマーカーの設定 + +最初のステップでは、テンプレート、データソース、出力先がどこにあるかを定義します。テンプレートにはエンジンが置換する `{{...}}` プレースホルダーが含まれています。 + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*この重要性*: パスをハードコーディングすることで、追加設定なしに任意のIDEからプログラムを実行できます。また、これらの値をコマンドライン引数として渡すことで柔軟性を高めることも可能です。 + +## ステップ 2: データソースのロード(XML または JSON) + +エンジンはプレースホルダー名と値をマッピングするデータオブジェクトを必要とします。`TemplateData` クラスは XML と JSON の解析を抽象化します。 + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +`dataPath` が JSON ファイルを指す場合、`TemplateData` は自動的にフォーマットを検出し、同じキー/バリューのマップを構築します。この柔軟性は、さまざまな環境で**generate html from template**する際に便利です。 + +## ステップ 3: ループ用 foreach ディレクティブの有効化 + +多くのテンプレートでは、コレクション内の各アイテムに対してブロックを繰り返す必要があります。foreach ディレクティブを有効にすると、エンジンは `{{#foreach items}} … {{/foreach}}` ブロックを処理します。 + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**How to use foreach**: `template.html` 内では次のように記述できます。 + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +エンジンがこのブロックに遭遇すると、`TemplateData` が提供する `products` コレクションの各エントリに対して `
  • ` 要素を繰り返し生成します。 + +## ステップ 4: テンプレートを変換し結果を書き込む + +これでエンジンはすべてのマーカーを実際の値に置換し、最終的なHTMLファイルを書き出します。 + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +`convertTemplate` メソッドは以下の3つの操作を行います: + +1. `template.html` をメモリに読み込む。 +2. 各 `{{key}}` を `data` から対応する値に置換する。 +3. 有効化された foreach ブロックを処理する。 +4. 変換されたコンテンツを `resultPath` に書き込む。 + +## ステップ 5: プログラムを実行し出力を確認する + +最後に、変換が成功したことをユーザーに通知します。 + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +`main` メソッドを実行すると、以下のようなコンソール出力が表示されます: + +``` +Template conversion completed: src/main/resources/result.html +``` + +`result.html` をブラウザで開きます。すべてのプレースホルダーが置換され、foreach ループにより適切なHTMLフラグメントが生成されます。 + +### 期待される出力例 + +シンプルな `template.html` が以下の場合: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +そして XML の `data.xml` が: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +生成された `result.html` は次のようになります: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## エッジケースとベストプラクティスのヒント + +* **Missing placeholders** – エンジンは未知の `{{key}}` マーカーをそのまま残します。テンプレート内の残りの波括弧をスキャンし、警告をログに記録する検証ステップを追加できます。 +* **Large data sets** – 数千件のアイテムの場合、テンプレート全体をメモリに読み込むのではなくストリーミング処理を検討してください。現在の実装は一般的なウェブページには問題ありません。 +* **JSON vs. XML** – JSON に切り替える場合も同じ構造を保ちます: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` は自動的に解析するため、残りのコードは変更不要です。 +* **Encoding** – テンプレートとデータファイルの両方が UTF‑8 であることを確認し、文字化けを防ぎます。特に多言語HTMLを生成する場合は重要です。 +* **Security** – ユーザー提供データをサニタイズせずに直接HTMLに注入しないでください。データにマークアップが含まれる可能性がある場合は、HTML の特殊文字をエスケープしてください。 + +## 完全な実行可能サンプル + +以下は、すべてのステップをまとめた単体の Java クラスです。`TemplateConverter.java` として保存し、IDE またはコマンドラインから実行してください。 + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## 次に学ぶべきことは? + +以下のチュートリアルは、本ガイドで示した手法を応用した密接に関連するトピックを扱っています。各リソースには、ステップバイステップの解説と完全な動作コード例が含まれており、追加の API 機能を習得し、独自プロジェクトで代替実装アプローチを検討するのに役立ちます。 + +- [HTML を PDF に変換する方法(Java) – Aspose.HTML for Java を使用](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [Aspose.HTML for Java を使用した HTML の編集方法](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Aspose.HTML for Java を使用して HTML を文字列に変換する](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/korean/java/creating-managing-html-documents/_index.md b/html/korean/java/creating-managing-html-documents/_index.md index c7c0a7639..c3d197858 100644 --- a/html/korean/java/creating-managing-html-documents/_index.md +++ b/html/korean/java/creating-managing-html-documents/_index.md @@ -73,6 +73,9 @@ Java용 Aspose.HTML을 사용하여 SVG 문서를 만들고 관리하는 방법 Aspose.HTML for Java를 사용하여 안전한 HTML 샌드박스를 설정하고 테스트하는 방법을 단계별로 안내합니다. ### [Java용 Aspose.HTML에서 비동기 JavaScript 실행 – 완전 단계별 가이드](./execute-async-javascript-in-java-complete-step-by-step-guide/) Aspose.HTML for Java를 활용해 Java에서 비동기 JavaScript를 실행하는 방법을 단계별로 배워보세요. +### [Java 템플릿 엔진으로 템플릿을 HTML로 변환하는 방법](./how-to-convert-template-to-html-with-a-java-template-engine/) +Aspose.HTML for Java를 사용하여 Java 템플릿 엔진을 활용해 템플릿을 HTML로 변환하는 방법을 단계별로 안내합니다. +### [동적 HTML 테이블에 이름 및 성 열 바인딩하기](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) {{< /blocks/products/pf/tutorial-page-section >}} @@ -99,4 +102,4 @@ Aspose.HTML for Java를 사용하여 HTML 문서에서 텍스트를 추출하는 {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/korean/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/korean/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..9a5a687f9 --- /dev/null +++ b/html/korean/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,323 @@ +--- +category: general +date: 2026-09-07 +description: 동적 HTML 테이블에서 데이터를 바인딩하는 방법 – 테이블 행을 생성하고 이름 및 성 필드를 효율적으로 채우는 방법을 배우세요 +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: ko +lastmod: 2026-09-07 +og_description: 동적 HTML 테이블에서 데이터를 바인딩하는 방법. 이 튜토리얼에서는 테이블 행을 생성하고, 이름과 성을 표시하며, JavaScript로 + 테이블 행을 채우는 방법을 보여줍니다. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: 동적 HTML 테이블에 데이터를 바인딩하는 방법 – 단계별 가이드 +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: 이름과 성 열이 있는 동적 HTML 테이블에 데이터를 바인딩하는 방법 +url: /ko/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# 동적 HTML 테이블에 이름(이름 및 성) 열을 바인딩하는 방법 + +레코드가 추가될 때마다 커지는 테이블에 **데이터를 바인딩하는 방법**이 필요하다면, 이 가이드는 완전한 솔루션을 제공합니다. 동적 HTML 테이블을 생성하고, 테이블 행을 채우며, 각 사람의 이름과 성을 반복적인 마크업 없이 표시하는 방법을 확인할 수 있습니다. + +예제는 모든 최신 브라우저에서 동작하는 가벼운 템플릿 구문을 사용하지만, 개념은 Handlebars, Mustache 또는 서버‑사이드 엔진에도 동일하게 적용됩니다. 튜토리얼이 끝날 때 코드를 프로젝트에 복사해 바로 데이터를 바인딩할 수 있습니다. + +## 이 튜토리얼에서 다루는 내용 + +* 여러 사람을 포함하는 데이터 소스를 구조화하는 방법 +* 각 항목마다 반복되는 재사용 가능한 테이블 템플릿을 만드는 방법 +* 데이터를 바인딩하고 최종 HTML 마크업을 생성하는 방법 +* 테이블 행을 채울 때 흔히 발생하는 함정과 회피 방법 + +외부 라이브러리는 필요하지 않으며, 동일한 패턴을 인기 있는 템플릿 프레임워크에서도 사용할 수 있습니다. 전제 조건은 기본 HTML 및 JavaScript 지식뿐입니다. + +## 사전 요구 사항 + +* 최신 브라우저 (Chrome, Edge, Firefox, Safari 중 하나) +* HTML/JavaScript 파일을 편집할 수 있는 에디터 +* 선택 사항: 사람 컬렉션을 나타내는 JSON 파일 또는 JavaScript 객체 + +## 1단계: 데이터 소스 정의하기 + +먼저 템플릿에서 사용되는 구조와 일치하는 JavaScript 객체를 생성합니다. 각 사람은 이름(first name), 성(last name), 그리고 주소 객체를 가집니다. + +```html + +``` + +**왜 중요한가:** 객체 계층 구조(`Persons.Person`)가 템플릿의 `{{#foreach Persons.Person}}` 루프와 일치하여 엔진이 각 항목을 자동으로 반복하도록 합니다. + +## 2단계: 반복 블록이 포함된 테이블 템플릿 작성하기 + +아래 템플릿은 간단한 Mustache‑스타일 구문(`{{#foreach}}`)을 사용해 각 사람마다 ``을 반복합니다. 템플릿을 ` +``` + +**왜 중요한가:** `{{#foreach Persons.Person}}` 지시어는 엔진에게 각 사람 객체마다 열고 닫는 태그 사이의 내용을 반복하도록 알려줍니다. 행 안에서는 `{{FirstName}}`, `{{LastName}}` 등 어떤 속성도 참조해 **테이블 행을 동적으로 채울** 수 있습니다. + +## 3단계: 작은 렌더링 함수 구현하기 + +튜토리얼이 독립적으로 동작하도록, Mustache‑스타일 자리표시자를 실제 값으로 교체하는 최소 렌더러를 작성합니다. 이 함수는 데이터 객체를 순회하고, 반복 블록을 확장한 뒤 최종 HTML을 페이지에 삽입합니다. + +```html + +``` + +**왜 중요한가:** 렌더러는 **테이블을 프로그래밍 방식으로 생성**하는 방법을 보여주며 전체 라이브러리를 도입하지 않아도 됩니다. 또한 템플릿에서 최종 HTML로 변환되는 과정을 명확히 하여 나중에 다른 템플릿 엔진으로 코드를 옮길 때 도움이 됩니다. + +## 4단계: 생성된 테이블이 삽입될 자리 표시자 추가하기 + +스크립트가 렌더링 후 채울 빈 `
    `를 만듭니다. + +```html +
    +``` + +페이지가 로드되면 스크립트가 이 `
    `의 내용을 완전히 채워진 테이블로 교체합니다. + +## 5단계: 결과 확인하기 + +HTML 파일을 브라우저에서 열어보세요. 각 사람의 전체 이름과 주소가 표시된 테이블이 나타납니다: + +| 사람 | 주소 | +|-----------------|-----------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +`data.Persons.Person` 배열에 객체를 더 추가하면 테이블이 자동으로 확장되어 **테이블 행을 채우는** 요구 사항을 만족합니다. + +## 팁: 빈 컬렉션 처리하기 + +데이터 배열이 비어 있을 경우 현재 렌더러는 빈 테이블 헤더만 출력합니다. 사용자 경험을 개선하려면 다음과 같이 방어 코드를 추가하세요: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +이 작은 변경으로 빈 테이블이 나타나는 것을 방지하고 사용자에게 즉시 피드백을 제공할 수 있습니다. + +## 일반적인 변형 및 엣지 케이스 + +| 상황 | 조정 내용 | +|----------------------------------------|--------------------------------------------------------------------------| +| 서버‑사이드 엔진 사용 (예: Handlebars) | 커스텀 `renderTemplate`을 `Handlebars.compile`으로 교체하고 동일한 데이터 객체를 전달합니다. | +| 행을 알파벳 순으로 정렬해야 할 때 | `renderTemplate` 호출 전에 `data.Persons.Person`을 정렬합니다. | +| 전화번호 열 추가하기 | ``에 `{{Phone}}`를 추가하고 각 사람 객체에 `Phone`을 포함시킵니다. | +| 대량 데이터(수백 행) | UI 응답성을 유지하기 위해 행을 청크 단위로 렌더링하거나 가상 스크롤링을 사용합니다. | + +## 전체 작동 예제 + +아래는 `index.html`에 복사‑붙여넣기 할 수 있는 완전한 HTML 파일입니다. 앞서 논의한 모든 요소가 포함되어 있습니다. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**예상 출력** + +페이지는 두 개의 행을 가진 테이블을 렌더링하며, 각 행은 사람의 전체 이름과 포맷된 주소를 보여줍니다. `Person` 배열에 객체를 추가하면 새로운 행이 자동으로 추가되어 **데이터로부터 테이블을 생성하는** 과정을 시연합니다. + +## 결론 + +이제 **데이터를 바인딩하는 방법**을 익혀 **동적 HTML 테이블**에 각 레코드마다 행을 생성하고, 이름과 성 값을 주소와 함께 표시할 수 있게 되었습니다. + +## 다음에 배워야 할 내용은? + + +다음 튜토리얼들은 이 가이드에서 시연한 기술을 기반으로 하며, 관련 주제를 깊이 있게 다룹니다. 각 자료는 완전한 코드 예제와 단계별 설명을 포함해 추가 API 기능을 마스터하고 프로젝트에 다양한 구현 방식을 적용하도록 돕습니다. + +- [Aspose.HTML for Java에서 CSS 추가 – HTML 문서에 인라인 CSS 적용 방법](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [Aspose.HTML for Java에서 HTML 문서 트리 편집 방법](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [Aspose HTML에서 JavaScript 활성화 – HTML 로드 및 텍스트 가져오기](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/korean/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/korean/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..71163af52 --- /dev/null +++ b/html/korean/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,345 @@ +--- +category: general +date: 2026-09-07 +description: Java를 사용하여 템플릿을 HTML로 변환하는 방법. 템플릿에서 HTML을 생성하고, foreach 루프를 활성화하며, 전체 + Java 템플릿 엔진 예제를 확인하세요. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: ko +lastmod: 2026-09-07 +og_description: Java를 사용하여 템플릿을 HTML로 변환하는 방법. 이 튜토리얼은 완전한 Java 템플릿 엔진 예제와 템플릿에서 HTML을 + 생성하는 방법, 그리고 foreach 사용 방법을 보여줍니다. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Java로 템플릿을 HTML로 변환하는 방법 – 단계별 가이드 +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Java 템플릿 엔진으로 템플릿을 HTML로 변환하는 방법 +url: /ko/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Java 템플릿 엔진을 사용하여 템플릿을 HTML로 변환하는 방법 + +템플릿을 **템플릿 변환 방법**을 사용해 준비된 HTML 페이지로 변환해야 한다면, 이 가이드는 완전한 솔루션을 제공합니다. **템플릿에서 HTML 생성** 파일을 어떻게 생성하는지, **foreach 사용 방법** 로 루프를 활성화하는 방법, 그리고 XML 또는 JSON 데이터 소스와 함께 작동하는 **Java 템플릿 엔진 예제** 를 살펴볼 것입니다. + +이 튜토리얼은 단일 Java 프로그램에서 **HTML 템플릿 변환** 파일을 처리하는 데 필요한 모든 것을 다룹니다. 끝까지 진행하면 템플릿을 읽고 데이터를 주입하며 최종 HTML 파일을 디스크에 쓰는 실행 가능한 프로젝트를 얻게 됩니다. + +## 사전 요구 사항 + +* JDK 17 이상이 설치되어 있음 +* Maven 또는 Gradle과 같은 빌드 도구 (코드는 표준 Java 클래스만 사용) +* Java I/O 및 XML/JSON 형식에 대한 기본 지식 + +핵심 단계에서는 외부 라이브러리가 필요하지 않지만, 원한다면 간단한 `Template` 클래스를 서드파티 엔진으로 교체할 수 있습니다. + +## 1단계: 파일 경로 및 템플릿 마커 설정 + +첫 번째 단계에서는 템플릿, 데이터 소스 및 출력 파일이 위치할 경로를 정의합니다. 템플릿에는 엔진이 교체할 `{{...}}` 플레이스홀더가 포함됩니다. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*왜 중요한가*: 경로를 하드코딩하면 추가 설정 없이도 어떤 IDE에서든 프로그램을 실행할 수 있습니다. 또한 이러한 값을 명령줄 인수로 전달하여 유연성을 높일 수 있습니다. + +## 2단계: 데이터 소스 로드 (XML 또는 JSON) + +엔진은 플레이스홀더 이름을 값에 매핑하는 데이터 객체가 필요합니다. `TemplateData` 클래스는 XML 및 JSON 파싱을 추상화합니다. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +`dataPath`가 JSON 파일을 가리키면, `TemplateData`는 자동으로 형식을 감지하고 동일한 키/값 맵을 구축합니다. 이러한 유연성은 다양한 환경에서 **템플릿에서 HTML 생성** 할 때 유용합니다. + +## 3단계: 루프를 위한 foreach 지시문 활성화 + +많은 템플릿은 컬렉션의 각 항목에 대해 블록을 반복해야 합니다. foreach 지시문을 활성화하면 엔진이 `{{#foreach items}} … {{/foreach}}` 블록을 처리하도록 합니다. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**How to use foreach**: `template.html` 내부에 다음과 같이 작성할 수 있습니다: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +엔진이 이 블록을 만나면 `TemplateData`가 제공하는 `products` 컬렉션의 각 항목에 대해 `
  • ` 요소를 반복합니다. + +## 4단계: 템플릿 변환 및 결과 작성 + +이제 엔진은 모든 마커를 실제 값으로 교체하고 최종 HTML 파일을 작성합니다. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +`convertTemplate` 메서드는 다음 작업을 수행합니다: + +1. `template.html`을 메모리로 읽어들입니다. +2. 각 `{{key}}`를 `data`에서 해당 값으로 대체합니다. +3. 활성화된 foreach 블록을 처리합니다. +4. 변환된 내용을 `resultPath`에 씁니다. + +## 5단계: 프로그램 실행 및 출력 확인 + +마지막으로, 변환이 성공했음을 사용자에게 알립니다. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +`main` 메서드를 실행하면 다음과 유사한 콘솔 라인이 표시됩니다: + +``` +Template conversion completed: src/main/resources/result.html +``` + +`result.html`을 브라우저에서 열어보세요. 모든 플레이스홀더가 교체되고 foreach 루프가 적절한 HTML 조각을 생성했을 것입니다. + +### 예상 출력 예시 + +간단한 `template.html`이 주어졌을 때: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +그리고 XML `data.xml`이: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +생성된 `result.html`은 다음과 같습니다: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## 엣지 케이스 및 모범 사례 팁 + +* **Missing placeholders** – 엔진은 알 수 없는 `{{key}}` 마커를 그대로 둡니다. 템플릿을 스캔하여 남은 중괄호를 확인하고 경고를 기록하는 검증 단계를 추가할 수 있습니다. +* **Large data sets** – 수천 개의 항목이 있을 경우 전체 파일을 메모리에 로드하는 대신 템플릿을 스트리밍하는 것을 고려하세요. 현재 구현은 일반 웹 페이지에 충분합니다. +* **JSON vs. XML** – JSON으로 전환할 경우 동일한 구조를 유지합니다: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData`는 자동으로 파싱하므로 나머지 코드는 변경되지 않습니다. +* **Encoding** – 템플릿 및 데이터 파일 모두 UTF‑8을 사용하도록 하여 문자 손상을 방지하세요, 특히 다국어 HTML을 생성할 때 중요합니다. +* **Security** – 사용자 제공 데이터를 직접 HTML에 삽입하기 전에 반드시 정화하지 않으면 안 됩니다. 데이터에 마크업이 포함될 수 있다면 HTML 특수 문자를 이스케이프하세요. + +## 전체 실행 가능한 예제 + +아래는 모든 단계를 하나로 모은 독립형 Java 클래스입니다. `TemplateConverter.java`로 저장하고 IDE 또는 명령줄에서 실행하세요. + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## 다음에 배울 내용은? + +다음 튜토리얼은 이 가이드에서 시연한 기술을 기반으로 하며, 밀접하게 관련된 주제를 다룹니다. 각 리소스에는 단계별 설명과 함께 완전한 작동 코드 예제가 포함되어 있어 추가 API 기능을 마스터하고 자체 프로젝트에서 대체 구현 방식을 탐색하는 데 도움이 됩니다. + +- [Java에서 HTML을 PDF로 변환하는 방법 – Aspose.HTML for Java 사용](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [Aspose.HTML for Java를 사용하여 HTML 편집하기](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Aspose.HTML for Java를 사용하여 HTML을 문자열로 변환하기](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/polish/java/creating-managing-html-documents/_index.md b/html/polish/java/creating-managing-html-documents/_index.md index 9ef88def4..850dcf5ea 100644 --- a/html/polish/java/creating-managing-html-documents/_index.md +++ b/html/polish/java/creating-managing-html-documents/_index.md @@ -72,6 +72,10 @@ Dowiedz się, jak skonfigurować bezpieczną piaskownicę HTML w Javie, aby test Dowiedz się, jak efektywnie zapytać i przetwarzać dokumenty HTML w Javie przy użyciu Aspose.HTML. ### [Jak parsować HTML w Javie – ładowanie, zapytania i liczenie elementów](./how-to-parse-html-java-load-query-count-elements/) Dowiedz się, jak ładować dokumenty HTML, wykonywać zapytania i liczyć elementy przy użyciu Aspose.HTML dla Java. +### [Jak przekonwertować szablon na HTML przy użyciu silnika szablonów Java](./how-to-convert-template-to-html-with-a-java-template-engine/) +Dowiedz się, jak przy użyciu silnika szablonów Java przekształcić szablon w gotowy dokument HTML. +### [Jak powiązać dane z dynamiczną tabelą HTML z kolumnami imienia i nazwiska](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) +Dowiedz się, jak dynamicznie wypełnić tabelę HTML danymi, tworząc kolumny imienia i nazwiska. {{< /blocks/products/pf/tutorial-page-section >}} @@ -106,4 +110,4 @@ Dowiedz się, jak wyodrębnić tekst z dokumentów HTML w Javie przy użyciu Asp {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/polish/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/polish/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..c62034395 --- /dev/null +++ b/html/polish/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,324 @@ +--- +category: general +date: 2026-09-07 +description: jak powiązać dane w dynamicznej tabeli HTML – dowiedz się, jak generować + wiersze tabeli i efektywnie wypełniać pola imienia i nazwiska +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: pl +lastmod: 2026-09-07 +og_description: jak powiązać dane w dynamicznej tabeli HTML. Ten poradnik pokazuje, + jak generować wiersze tabeli, wyświetlać imię i nazwisko oraz wypełniać wiersze + tabeli przy użyciu JavaScriptu. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Jak powiązać dane z dynamiczną tabelą HTML – przewodnik krok po kroku +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: Jak powiązać dane z dynamiczną tabelą HTML z kolumnami imienia i nazwiska +url: /pl/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Jak powiązać dane z dynamiczną tabelą HTML z kolumnami imienia i nazwiska + +Jeśli potrzebujesz **jak powiązać dane** w tabeli, która rośnie wraz z każdym rekordem, ten przewodnik przedstawia pełne rozwiązanie. Zobaczysz, jak wygenerować dynamiczną tabelę HTML, wypełnić wiersze tabeli i wyświetlić imię oraz nazwisko każdej osoby bez pisania powtarzalnego kodu. + +Przykład używa lekkiej składni szablonów, która działa w każdej nowoczesnej przeglądarce, ale koncepcje mają zastosowanie do Handlebars, Mustache lub silników po stronie serwera. Po zakończeniu samouczka możesz skopiować kod do swojego projektu i od razu rozpocząć powiązywanie danych. + +## Co obejmuje ten samouczek + +* Jak zbudować źródło danych zawierające wiele osób +* Jak stworzyć wielokrotnego użytku szablon tabeli, który powtarza się dla każdego wpisu +* Jak powiązać dane i wygenerować ostateczny znacznik HTML +* Typowe pułapki przy wypełnianiu wierszy tabeli i jak ich unikać + +Nie są wymagane zewnętrzne biblioteki, choć ten sam wzorzec działa z popularnymi frameworkami szablonów. Jedynym wymogiem wstępnym jest podstawowa znajomość HTML i JavaScript. + +## Wymagania wstępne + +* Nowoczesna przeglądarka (Chrome, Edge, Firefox lub Safari) +* Edytor plików HTML/JavaScript +* Opcjonalnie: plik JSON lub obiekt JavaScript reprezentujący kolekcję osób + +## Krok 1: Zdefiniuj źródło danych + +Najpierw utwórz obiekt JavaScript, który odzwierciedla strukturę używaną w szablonie. Każda osoba ma imię, nazwisko oraz obiekt adresu. + +```html + +``` + +**Dlaczego to ważne:** Hierarchia obiektów (`Persons.Person`) pasuje do pętli `{{#foreach Persons.Person}}` w szablonie, umożliwiając silnikowi automatyczne iterowanie po każdym wpisie. + +## Krok 2: Napisz szablon tabeli z blokiem powtarzania + +Poniższy szablon używa prostej składni w stylu Mustache (`{{#foreach}}`), aby powtórzyć element `` dla każdej osoby. Umieść szablon wewnątrz znacznika ` +``` + +**Dlaczego to ważne:** Dyrektywa `{{#foreach Persons.Person}}` instruuje silnik, aby powtórzył wszystko pomiędzy otwierającym i zamykającym tagiem dla każdego obiektu osoby. Wewnątrz wiersza możesz odwołać się do dowolnej właściwości (`{{FirstName}}`, `{{LastName}}` itp.), aby **dynamicznie wypełniać wiersze tabeli**. + +## Krok 3: Zaimplementuj małą funkcję renderującą + +Ponieważ samouczek musi być samodzielny, napiszemy minimalny renderer, który zastępuje znaczniki w stylu Mustache rzeczywistymi wartościami. Funkcja przegląda obiekt danych, rozwija blok powtarzania i wstawia ostateczny HTML na stronę. + +```html + +``` + +**Dlaczego to ważne:** Renderer pokazuje **jak generować tabelę** w znacznikach programowo, bez użycia pełnej biblioteki. Wyjaśnia także transformację od szablonu do ostatecznego HTML, co ułatwia późniejsze dostosowanie kodu do innych silników szablonów. + +## Krok 4: Dodaj miejsce, w którym pojawi się wygenerowana tabela + +Utwórz pusty `
    `, który skrypt wypełni po renderowaniu. + +```html +
    +``` + +Gdy strona się załaduje, skrypt zastąpi zawartość tego `
    ` w pełni wypełnioną tabelą. + +## Krok 5: Zweryfikuj wynik + +Otwórz plik HTML w przeglądarce. Powinieneś zobaczyć tabelę, która wymienia pełne imię i nazwisko oraz adres każdej osoby: + +| Osoba | Adres | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Jeśli dodasz więcej obiektów do tablicy `data.Persons.Person`, tabela automatycznie się rozrośnie — spełniając wymóg **wypełniania wierszy tabeli**. + +## Porada: obsługa pustych kolekcji + +Gdy tablica danych jest pusta, renderer obecnie generuje pusty nagłówek tabeli. Aby zapewnić lepsze doświadczenie użytkownika, dodaj zabezpieczenie: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Ta mała zmiana zapobiega wyświetleniu pustej tabeli i daje użytkownikom natychmiastową informację zwrotną. + +## Typowe warianty i przypadki brzegowe + +| Sytuacja | Dostosowanie | +|----------------------------------------|----------------------------------------------------------------------------| +| Używanie silnika po stronie serwera (np. Handlebars) | Zastąp niestandardową funkcję `renderTemplate` wywołaniem `Handlebars.compile` i przekaż ten sam obiekt danych. | +| Potrzeba sortowania wierszy alfabetycznie | Posortuj `data.Persons.Person` przed wywołaniem `renderTemplate`. | +| Dodanie kolumny dla numeru telefonu | Rozszerz `` o `{{Phone}}` i uwzględnij `Phone` w każdym obiekcie osoby. | +| Duże zestawy danych (setki wierszy) | Renderuj wiersze w partiach lub użyj wirtualnego przewijania, aby UI pozostało responsywne. | + +## Pełny działający przykład + +Poniżej znajduje się kompletny plik HTML, który możesz skopiować i wkleić do `index.html`. Zawiera wszystkie elementy omówione powyżej. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Oczekiwany wynik** + +Strona wyświetla tabelę z dwoma wierszami, każdy pokazujący pełne imię i nazwisko oraz sformatowany adres osoby. Dodanie większej liczby obiektów do tablicy `Person` automatycznie dodaje nowe wiersze — demonstrując **jak generować elementy tabeli** z danych. + +## Podsumowanie + +Teraz wiesz **jak powiązać dane** z **dynamiczną tabelą HTML**, generować wiersze dla każdego rekordu i wyświetlać wartości imienia i nazwiska obok adresu + +## Co powinieneś nauczyć się dalej? + +Poniższe samouczki obejmują ściśle powiązane tematy, które rozwijają techniki przedstawione w tym przewodniku. Każdy zasób zawiera kompletne działające przykłady kodu z wyjaśnieniami krok po kroku, aby pomóc Ci opanować dodatkowe funkcje API i odkrywać alternatywne podejścia implementacyjne w własnych projektach. + +- [Jak dodać CSS – Inline CSS do dokumentów HTML w Aspose.HTML dla Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [Jak edytować drzewo dokumentu HTML w Aspose.HTML dla Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [Jak włączyć JavaScript w Aspose HTML – Ładowanie HTML i pobieranie tekstu](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/polish/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/polish/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..594674553 --- /dev/null +++ b/html/polish/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,347 @@ +--- +category: general +date: 2026-09-07 +description: Jak przekonwertować szablon na HTML przy użyciu Javy. Dowiedz się, jak + generować HTML z szablonu, włącz pętle foreach i zobacz pełny przykład silnika szablonów + w Javie. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: pl +lastmod: 2026-09-07 +og_description: Jak przekonwertować szablon na HTML przy użyciu Javy. Ten tutorial + pokazuje kompletny przykład silnika szablonów w Javie, jak generować HTML z szablonu + oraz jak używać pętli foreach. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Jak zamienić szablon na HTML w Javie – przewodnik krok po kroku +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Jak przekonwertować szablon na HTML przy użyciu silnika szablonów Java +url: /pl/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Jak przekonwertować szablon na HTML przy użyciu silnika szablonów Java + +Jeśli potrzebujesz **how to convert template** do gotowej do serwowania strony HTML, ten przewodnik zapewnia pełne rozwiązanie. Zobaczysz, jak **generate HTML from template** plików, włączysz pętle przy użyciu **how to use foreach**, oraz przejdziesz przez **java template engine example**, które działa z źródłami danych XML lub JSON. + +Samouczek obejmuje wszystko, co potrzebne do **convert html template** plików w jednym programie Java. Po zakończeniu będziesz mieć uruchamialny projekt, który odczytuje szablon, wstrzykuje dane i zapisuje końcowy plik HTML na dysku. + +## Wymagania wstępne + +* JDK 17 lub nowszy zainstalowany +* Narzędzie budujące, takie jak Maven lub Gradle (kod używa tylko standardowych klas Java) +* Podstawowa znajomość Java I/O oraz formatów XML/JSON + +Do podstawowych kroków nie są wymagane żadne zewnętrzne biblioteki, ale możesz zastąpić proste klasy `Template` silnikiem zewnętrznym, jeśli wolisz. + +## Krok 1: Ustaw ścieżki plików i znaczniki szablonu + +Pierwszy krok określa, gdzie będą znajdować się szablon, źródło danych i wynik. Szablon zawiera znaczniki `{{...}}`, które silnik zastąpi. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Dlaczego to ważne*: Ustalanie ścieżek na stałe pozwala uruchomić program z dowolnego IDE bez dodatkowej konfiguracji. Możesz także przekazać te wartości jako argumenty wiersza poleceń, aby uzyskać większą elastyczność. + +## Krok 2: Załaduj źródło danych (XML lub JSON) + +Silnik potrzebuje obiektu danych, który mapuje nazwy znaczników na wartości. Klasa `TemplateData` abstrahuje parsowanie XML i JSON. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +Jeśli `dataPath` wskazuje na plik JSON, `TemplateData` automatycznie wykrywa format i tworzy tę samą mapę klucz/wartość. Ta elastyczność jest przydatna, gdy **generate html from template** w różnych środowiskach. + +## Krok 3: Włącz dyrektywę foreach dla pętli + +Wiele szablonów wymaga powtórzenia bloku dla każdego elementu w kolekcji. Włączenie dyrektywy foreach informuje silnik, aby przetwarzał bloki `{{#foreach items}} … {{/foreach}}`. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**Jak używać foreach**: Wewnątrz `template.html` możesz napisać: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +Gdy silnik napotka ten blok, powtarza element `
  • ` dla każdego wpisu w kolekcji `products` dostarczonej przez `TemplateData`. + +## Krok 4: Konwertuj szablon i zapisz wynik + +Teraz silnik zastępuje wszystkie znaczniki rzeczywistymi wartościami i zapisuje końcowy plik HTML. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +Metoda `convertTemplate` wykonuje trzy czynności: + +1. Wczytuje `template.html` do pamięci. +2. Zastępuje każdy `{{key}}` odpowiadającą wartością z `data`. +3. Przetwarza wszystkie włączone bloki foreach. +4. Zapisuje przekształconą zawartość do `resultPath`. + +## Krok 5: Uruchom program i zweryfikuj wynik + +Na koniec poinformuj użytkownika, że konwersja zakończyła się sukcesem. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +Gdy uruchomisz metodę `main`, powinieneś zobaczyć w konsoli linię podobną do: + +``` +Template conversion completed: src/main/resources/result.html +``` + +Otwórz `result.html` w przeglądarce. Wszystkie znaczniki zostaną zastąpione, a wszelkie pętle foreach wygenerują odpowiednie fragmenty HTML. + +### Przykładowy oczekiwany wynik + +Given a simple `template.html`: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +And an XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +The generated `result.html` will be: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Przypadki brzegowe i wskazówki najlepszych praktyk + +* **Missing placeholders** – Silnik pozostawia nieznane znaczniki `{{key}}` niezmienione. Możesz dodać krok walidacji, który przeszukuje szablon pod kątem pozostałych nawiasów i zapisuje ostrzeżenie. +* **Large data sets** – Przy tysiącach elementów rozważ strumieniowe przetwarzanie szablonu zamiast wczytywania całego pliku do pamięci. Aktualna implementacja jest wystarczająca dla typowych stron internetowych. +* **JSON vs. XML** – Jeśli przełączysz się na JSON, zachowaj tę samą strukturę: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` automatycznie ją sparsuje, więc reszta kodu pozostaje niezmieniona. +* **Encoding** – Upewnij się, że zarówno szablon, jak i pliki danych używają UTF‑8, aby uniknąć uszkodzenia znaków, szczególnie przy generowaniu wielojęzycznego HTML. +* **Security** – Nie ufaj danym dostarczonym przez użytkownika w celu bezpośredniego wstrzykiwania do HTML bez sanitacji. Escapuj specjalne znaki HTML, jeśli dane mogą zawierać znaczniki. + +## Pełny przykład do uruchomienia + +Poniżej znajduje się samodzielna klasa Java, która łączy wszystkie kroki. Zapisz ją jako `TemplateConverter.java` i uruchom z IDE lub wiersza poleceń. + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## Co powinieneś nauczyć się dalej? + +Poniższe samouczki obejmują ściśle powiązane tematy, które rozwijają techniki przedstawione w tym przewodniku. Każdy zasób zawiera kompletne działające przykłady kodu z wyjaśnieniami krok po kroku, aby pomóc Ci opanować dodatkowe funkcje API i odkrywać alternatywne podejścia implementacyjne w własnych projektach. + +- [Jak przekonwertować HTML na PDF w Javie – przy użyciu Aspose.HTML dla Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [Jak edytować HTML przy użyciu Aspose.HTML dla Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Konwertuj HTML na String przy użyciu Aspose.HTML dla Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/portuguese/java/creating-managing-html-documents/_index.md b/html/portuguese/java/creating-managing-html-documents/_index.md index 5f0fc75a3..3951f8c51 100644 --- a/html/portuguese/java/creating-managing-html-documents/_index.md +++ b/html/portuguese/java/creating-managing-html-documents/_index.md @@ -77,6 +77,9 @@ Aprenda a criar um sandbox para HTML em Java usando Aspose.HTML com este guia pa Aprenda a analisar, consultar e contar elementos em documentos HTML usando Aspose.HTML para Java com este guia passo a passo. ### [Executar JavaScript assíncrono em Java – Guia completo passo a passo](./execute-async-javascript-in-java-complete-step-by-step-guide/) Aprenda a executar JavaScript assíncrono em Java usando Aspose.HTML com este guia passo a passo. +### [Como converter modelo para HTML com um mecanismo de template Java](./how-to-convert-template-to-html-with-a-java-template-engine/) +### [Como vincular dados a uma tabela HTML dinâmica com colunas de nome e sobrenome](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) +Aprenda a vincular dados a uma tabela HTML dinâmica com colunas de nome e sobrenome usando Aspose.HTML para Java. {{< /blocks/products/pf/tutorial-page-section >}} @@ -92,4 +95,4 @@ Aprenda a percorrer um NodeList em Java para ler HTML e extrair o atributo src d {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/portuguese/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/portuguese/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..210c11632 --- /dev/null +++ b/html/portuguese/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,324 @@ +--- +category: general +date: 2026-09-07 +description: como vincular dados em uma tabela HTML dinâmica – aprenda a gerar linhas + de tabela e preencher os campos de nome e sobrenome de forma eficiente +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: pt +lastmod: 2026-09-07 +og_description: como vincular dados em uma tabela HTML dinâmica. este tutorial mostra + como gerar linhas de tabela, exibir nome e sobrenome e preencher linhas de tabela + com JavaScript. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Como vincular dados a uma tabela HTML dinâmica – guia passo a passo +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: Como vincular dados a uma tabela HTML dinâmica com colunas de nome e sobrenome +url: /pt/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Como vincular dados a uma tabela HTML dinâmica com colunas de nome e sobrenome + +Se você precisa **how to bind data** em uma tabela que cresce a cada registro, este guia mostra uma solução completa. Você verá como gerar uma tabela HTML dinâmica, preencher linhas da tabela e exibir o nome e sobrenome de cada pessoa sem escrever marcação repetitiva. + +O exemplo usa uma sintaxe de template leve que funciona em qualquer navegador moderno, mas os conceitos se aplicam ao Handlebars, Mustache ou a mecanismos server‑side semelhantes. Ao final do tutorial você pode copiar o código para o seu projeto e começar a vincular dados instantaneamente. + +## O que este tutorial cobre + +* Como estruturar uma fonte de dados que contém várias pessoas +* Como criar um template de tabela reutilizável que se repete para cada entrada +* Como vincular os dados e gerar o markup HTML final +* Armadilhas comuns ao preencher linhas de tabela e como evitá‑las + +Nenhuma biblioteca externa é necessária, embora o mesmo padrão funcione com frameworks de templating populares. O único pré‑requisito é conhecimento básico de HTML e JavaScript. + +## Pré‑requisitos + +* Um navegador moderno (Chrome, Edge, Firefox ou Safari) +* Um editor para arquivos HTML/JavaScript +* Opcional: um arquivo JSON ou objeto JavaScript que represente a coleção de pessoas + +## Etapa 1: Definir a fonte de dados + +Primeiro, crie um objeto JavaScript que espelhe a estrutura usada no template. Cada pessoa tem um nome, sobrenome e um objeto de endereço. + +```html + +``` + +**Por que isso importa:** A hierarquia do objeto (`Persons.Person`) corresponde ao loop `{{#foreach Persons.Person}}` no template, permitindo que o motor itere sobre cada entrada automaticamente. + +## Etapa 2: Escrever o template da tabela com um bloco de repetição + +O template abaixo usa uma sintaxe simples no estilo Mustache (`{{#foreach}}`) para repetir o `` para cada pessoa. Coloque o template dentro de uma tag ` +``` + +**Por que isso importa:** A diretiva `{{#foreach Persons.Person}}` indica ao motor que repita tudo entre as tags de abertura e fechamento para cada objeto pessoa. Dentro da linha você pode referenciar qualquer propriedade (`{{FirstName}}`, `{{LastName}}`, etc.) para **populate table rows** dinamicamente. + +## Etapa 3: Implementar uma pequena função de renderização + +Como o tutorial deve ser autocontido, escreveremos um renderizador mínimo que substitui os placeholders no estilo Mustache por valores reais. A função percorre o objeto de dados, expande o bloco de repetição e injeta o HTML final na página. + +```html + +``` + +**Por que isso importa:** O renderizador demonstra **how to generate table** markup programaticamente sem precisar de uma biblioteca completa. Ele também esclarece a transformação do template para o HTML final, o que ajuda a adaptar o código a outros motores de templating no futuro. + +## Etapa 4: Adicionar um placeholder onde a tabela gerada aparecerá + +Crie um `
    ` vazio que o script preencherá após a renderização. + +```html +
    +``` + +Quando a página carregar, o script substitui o conteúdo desse `
    ` pela tabela totalmente preenchida. + +## Etapa 5: Verificar o resultado + +Abra o arquivo HTML em um navegador. Você deverá ver uma tabela que lista o nome completo e o endereço de cada pessoa: + +| Pessoa | Endereço | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Se você adicionar mais objetos ao array `data.Persons.Person`, a tabela crescerá automaticamente — atendendo ao requisito de **populate table rows**. + +## Dica profissional: lidando com coleções vazias + +Quando o array de dados está vazio, o renderizador atualmente gera apenas o cabeçalho da tabela. Para oferecer uma experiência de usuário mais clara, adicione uma proteção: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Essa pequena alteração impede que uma tabela vazia apareça e fornece feedback imediato ao usuário. + +## Variações comuns e casos de borda + +| Situação | Ajuste | +|----------------------------------------|------------------------------------------------------------------------| +| Usando um motor server‑side (ex.: Handlebars) | Substitua o `renderTemplate` customizado por `Handlebars.compile` e passe o mesmo objeto de dados. | +| Necessidade de ordenar linhas alfabeticamente | Ordene `data.Persons.Person` antes de chamar `renderTemplate`. | +| Adicionando uma coluna para número de telefone | Expanda o `` com `{{Phone}}` e inclua `Phone` em cada objeto pessoa. | +| Conjuntos de dados grandes (centenas de linhas) | Renderize linhas em blocos ou use rolagem virtual para manter a UI responsiva. | + +## Exemplo completo em funcionamento + +Abaixo está o arquivo HTML completo que você pode copiar‑colar em `index.html`. Ele contém todas as peças discutidas acima. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Saída esperada** + +A página renderiza uma tabela com duas linhas, cada uma mostrando o nome completo e o endereço formatado de uma pessoa. Adicionar mais objetos ao array `Person` adiciona automaticamente novas linhas — demonstrando **how to generate table** elements a partir dos dados. + +## Conclusão + +Agora você sabe **how to bind data** a uma **dynamic HTML table**, gerar linhas para cada registro e exibir os valores de nome e sobrenome ao lado do endereço. + +## O que você deve aprender a seguir? + +Os tutoriais a seguir abordam tópicos intimamente relacionados que ampliam as técnicas demonstradas neste guia. Cada recurso inclui exemplos de código completos e explicações passo a passo para ajudá‑lo a dominar recursos adicionais da API e explorar abordagens de implementação alternativas em seus próprios projetos. + +- [How to Add CSS – Inline CSS to HTML Documents in Aspose.HTML for Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [How to Edit HTML Document Tree in Aspose.HTML for Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [How to Enable JavaScript in Aspose HTML – Load HTML & Get Text](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/portuguese/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/portuguese/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..bc708f212 --- /dev/null +++ b/html/portuguese/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,233 @@ +--- +category: general +date: 2026-09-07 +description: Como converter um template em HTML usando Java. Aprenda a gerar HTML + a partir de um template, habilitar loops foreach e veja um exemplo completo de engine + de templates Java. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: pt +lastmod: 2026-09-07 +og_description: Como converter um template em HTML usando Java. Este tutorial mostra + um exemplo completo de motor de templates Java, como gerar HTML a partir de um template + e como usar foreach. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Como converter um modelo para HTML com Java – guia passo a passo +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Como converter um template para HTML com um motor de templates Java +url: /pt/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Como converter template para HTML com um motor de template Java + +Se você precisa **how to convert template** em uma página HTML pronta para servir, este guia fornece uma solução completa. Você verá como **generate HTML from template** arquivos, habilitar iteração com **how to use foreach**, e percorrer um **java template engine example** que funciona com fontes de dados XML ou JSON. + +O tutorial cobre tudo o que é necessário para **convert html template** arquivos em um único programa Java. Ao final, você terá um projeto executável que lê um template, injeta dados e grava o arquivo HTML final no disco. + +## Pré-requisitos + +* JDK 17 ou posterior instalado +* Uma ferramenta de build como Maven ou Gradle (o código usa apenas classes Java padrão) +* Familiaridade básica com Java I/O e formatos XML/JSON + +Nenhuma biblioteca externa é necessária para as etapas principais, mas você pode substituir as classes simples `Template` por um motor de terceiros, se preferir. + +## Etapa 1: Configurar caminhos de arquivos e marcadores de template + +A primeira etapa define onde o template, a fonte de dados e a saída ficarão. O template contém marcadores `{{...}}` que o motor substituirá. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Por que isso importa*: Definir caminhos de forma fixa permite que você execute o programa em qualquer IDE sem configuração extra. Você também pode passar esses valores como argumentos de linha de comando para mais flexibilidade. + +## Etapa 2: Carregar a fonte de dados (XML ou JSON) + +O motor precisa de um objeto de dados que mapeie nomes de marcadores para valores. A classe `TemplateData` abstrai o parsing de XML e JSON. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +Se `dataPath` apontar para um arquivo JSON, `TemplateData` detecta automaticamente o formato e cria o mesmo mapa de chave/valor. Essa flexibilidade é útil quando você **generate html from template** em diferentes ambientes. + +## Etapa 3: Habilitar a diretiva foreach para iteração + +Muitos templates precisam repetir um bloco para cada item em uma coleção. Habilitar a diretiva foreach indica ao motor para processar blocos `{{#foreach items}} … {{/foreach}}`. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**Como usar foreach**: Dentro de `template.html` você pode escrever: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +Quando o motor encontra esse bloco, ele repete o elemento `
  • ` para cada entrada na coleção `products` fornecida por `TemplateData`. + +## Etapa 4: Converter o template e gravar o resultado + +Agora o motor substitui todos os marcadores por valores reais e grava o arquivo HTML final. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +O método `convertTemplate` realiza três ações: + +1. Lê `template.html` para a memória. +2. Substitui cada `{{key}}` pelo valor correspondente de `data`. +3. Processa quaisquer blocos foreach habilitados. +4. Grava o conteúdo transformado em `resultPath`. + +## Etapa 5: Executar o programa e verificar a saída + +Por fim, informe ao usuário que a conversão foi bem-sucedida. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +Ao executar o método `main`, você deverá ver uma linha no console semelhante a: + +``` +Template conversion completed: src/main/resources/result.html +``` + +Abra `result.html` em um navegador. Todos os marcadores serão substituídos e quaisquer loops foreach terão gerado os fragmentos HTML apropriados. + +### Exemplo de saída esperada + +Dado um `template.html` simples: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +E um XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +O `result.html` gerado será: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Casos de borda e dicas de boas práticas + +* **Marcadores ausentes** – O motor deixa marcadores `{{key}}` desconhecidos inalterados. Você pode adicionar uma etapa de validação que escaneia o template em busca de chaves restantes e registra um aviso. +* **Conjuntos de dados grandes** – Para milhares de itens, considere fazer streaming do template ao invés de carregar o arquivo inteiro na memória. A implementação atual é adequada para páginas web típicas. +* **JSON vs. XML** – Se você mudar para JSON, mantenha a mesma estrutura: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` o analisará automaticamente, então o restante do código permanece inalterado. +* **Codificação** – Garanta que tanto o template quanto os arquivos de dados usem UTF‑8 para evitar corrupção de caracteres, especialmente ao gerar HTML multilíngue. +* **Segurança** – Não confie em dados fornecidos pelo usuário para injeção direta em HTML sem sanitização. Escape os caracteres especiais de HTML se os dados puderem conter marcação. + +## Exemplo completo executável + +Abaixo está uma classe Java autônoma que reúne todas as etapas. Salve-a como `TemplateConverter.java` e execute-a a partir da sua IDE ou linha de comando. + + + +## O que você deve aprender a seguir? + +Os tutoriais a seguir abordam tópicos intimamente relacionados que se baseiam nas técnicas demonstradas neste guia. Cada recurso inclui exemplos de código completos e funcionais com explicações passo a passo para ajudá-lo a dominar recursos adicionais da API e explorar abordagens de implementação alternativas em seus próprios projetos. + +- [Como converter HTML para PDF Java – Usando Aspose.HTML para Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [Como editar HTML usando Aspose.HTML para Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Converter HTML para String usando Aspose.HTML para Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/russian/java/creating-managing-html-documents/_index.md b/html/russian/java/creating-managing-html-documents/_index.md index b8c8f7f3a..81cd1d41e 100644 --- a/html/russian/java/creating-managing-html-documents/_index.md +++ b/html/russian/java/creating-managing-html-documents/_index.md @@ -70,7 +70,8 @@ Aspose.HTML для Java предлагает мощный набор инстр ### [Создание песочницы для HTML в Aspose.HTML для Java – пошаговое руководство](./create-sandbox-for-html-in-java-step-by-step-guide/) ### [Как выполнять запросы к HTML в Java – полное руководство](./how-to-query-html-in-java-complete-tutorial/) ### [Выполнение асинхронного JavaScript в Java – Полное пошаговое руководство](./execute-async-javascript-in-java-complete-step-by-step-guide/) -Узнайте, как выполнять асинхронный JavaScript в Java с помощью Aspose.HTML, следуя подробному пошаговому руководству. +### [Как преобразовать шаблон в HTML с помощью Java‑шаблонизатора](./how-to-convert-template-to-html-with-a-java-template-engine/) +### [Как привязать данные к динамической HTML-таблице с колонками имени и фамилии](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) {{< /blocks/products/pf/tutorial-page-section >}} @@ -90,4 +91,4 @@ Aspose.HTML для Java предлагает мощный набор инстр ### [Итерация по NodeList в Java – Полное руководство](./iterate-over-nodelist-java-complete-guide/) Узнайте, как эффективно перебрать элементы NodeList в Java с помощью Aspose.HTML, шаг за шагом. ### [Извлечение текста из HTML с помощью Java – Полное пошаговое руководство](./extract-text-from-html-with-java-complete-step-by-step-guide/) -Узнайте, как извлекать текст из HTML‑документов в Java с помощью Aspose.HTML, следуя подробному пошаговому руководству. +Узнайте, как извлекать текст из HTML‑документов в Java с помощью Aspose.HTML, следуя подробному пошаговому руководству. \ No newline at end of file diff --git a/html/russian/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/russian/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..66d918360 --- /dev/null +++ b/html/russian/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,324 @@ +--- +category: general +date: 2026-09-07 +description: как привязывать данные в динамической HTML‑таблице — узнайте, как эффективно + генерировать строки таблицы и заполнять поля имени и фамилии +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: ru +lastmod: 2026-09-07 +og_description: как привязать данные в динамической HTML‑таблице. Этот учебник показывает, + как генерировать строки таблицы, отображать имя и фамилию и заполнять строки таблицы + с помощью JavaScript. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Как привязать данные к динамической HTML‑таблице — пошаговое руководство +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: Как привязать данные к динамической HTML‑таблице с колонками имени и фамилии +url: /ru/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Как привязать данные к динамической HTML‑таблице с колонками имени и фамилии + +Если вам нужно **привязать данные** к таблице, которая растёт с каждой записью, это руководство предлагает полное решение. Вы увидите, как создать динамическую HTML‑таблицу, заполнять строки таблицы и отображать имя и фамилию каждого человека без написания повторяющегося разметки. + +Пример использует лёгкий синтаксис шаблонов, который работает в любом современном браузере, но концепции применимы к Handlebars, Mustache или серверным движкам. К концу урока вы сможете скопировать код в свой проект и сразу начать привязывать данные. + +## Что покрывает это руководство + +* Как структурировать источник данных, содержащий несколько человек +* Как создать переиспользуемый шаблон таблицы, который повторяется для каждой записи +* Как привязать данные и сгенерировать окончательную HTML‑разметку +* Распространённые подводные камни при заполнении строк таблицы и как их избежать + +Внешние библиотеки не требуются, хотя тот же шаблон работает с популярными фреймворками шаблонизации. Единственное требование — базовые знания HTML и JavaScript. + +## Предварительные требования + +* Современный браузер (Chrome, Edge, Firefox или Safari) +* Редактор для файлов HTML/JavaScript +* Необязательно: JSON‑файл или объект JavaScript, представляющий коллекцию людей + +## Шаг 1: Определите источник данных + +Сначала создайте объект JavaScript, который отражает структуру, используемую в шаблоне. Каждый человек имеет имя, фамилию и объект адреса. + +```html + +``` + +**Почему это важно:** Иерархия объекта (`Persons.Person`) соответствует циклу `{{#foreach Persons.Person}}` в шаблоне, позволяя движку автоматически проходить по каждой записи. + +## Шаг 2: Напишите шаблон таблицы с блоком повторения + +Шаблон ниже использует простой синтаксис в стиле Mustache (`{{#foreach}}`) для повторения `` для каждого человека. Поместите шаблон внутрь тега ` +``` + +**Почему это важно:** Директива `{{#foreach Persons.Person}}` сообщает движку повторять всё между открывающим и закрывающим тегами для каждого объекта человека. Внутри строки вы можете ссылаться на любое свойство (`{{FirstName}}`, `{{LastName}}` и т.д.), чтобы **заполнять строки таблицы** динамически. + +## Шаг 3: Реализуйте небольшую функцию рендеринга + +Поскольку руководство должно быть автономным, мы напишем минимальный рендерер, который заменяет заполнители в стиле Mustache реальными значениями. Функция проходит по объекту данных, разворачивает блок повторения и вставляет окончательный HTML на страницу. + +```html + +``` + +**Почему это важно:** Рендерер демонстрирует **как генерировать таблицу** программно без подключения полной библиотеки. Он также проясняет трансформацию от шаблона к финальному HTML, что поможет адаптировать код под другие движки шаблонизации в дальнейшем. + +## Шаг 4: Добавьте место‑заполнитель, где появится сгенерированная таблица + +Создайте пустой `
    `, который скрипт заполнит после рендеринга. + +```html +
    +``` + +При загрузке страницы скрипт заменит содержимое этого `
    ` полностью заполненной таблицей. + +## Шаг 5: Проверьте результат + +Откройте HTML‑файл в браузере. Вы должны увидеть таблицу, в которой перечислены полные имена и адреса каждого человека: + +| Person | Address | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Если добавить больше объектов в массив `data.Persons.Person`, таблица автоматически расширится — удовлетворяя требование **заполнять строки таблицы**. + +## Совет профессионала: обработка пустых коллекций + +Когда массив данных пуст, текущий рендерер выводит только заголовок таблицы. Чтобы улучшить пользовательский опыт, добавьте проверку: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Это небольшое изменение предотвращает появление пустой таблицы и сразу даёт пользователю обратную связь. + +## Распространённые варианты и граничные случаи + +| Ситуация | Корректировка | +|----------------------------------------|----------------------------------------------------------------------------| +| Использование серверного движка (например, Handlebars) | Замените пользовательскую `renderTemplate` на `Handlebars.compile` и передайте тот же объект данных. | +| Необходимо сортировать строки по алфавиту | Отсортируйте `data.Persons.Person` перед вызовом `renderTemplate`. | +| Добавление колонки с номером телефона | Расширьте `` добавив `{{Phone}}` и включите `Phone` в каждый объект человека. | +| Большие наборы данных (сотни строк) | Рендерите строки порциями или используйте виртуальную прокрутку для поддержания отзывчивости UI. | + +## Полный рабочий пример + +Ниже представлен полный HTML‑файл, который можно скопировать‑вставить в `index.html`. Он содержит все обсуждаемые выше части. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Ожидаемый вывод** + +Страница отображает таблицу с двумя строками, каждая из которых показывает полное имя и отформатированный адрес человека. Добавление новых объектов в массив `Person` автоматически добавит новые строки — демонстрируя **как генерировать элементы таблицы** из данных. + +## Заключение + +Теперь вы знаете **как привязать данные** к **динамической HTML‑таблице**, генерировать строки для каждой записи и отображать значения имени и фамилии рядом с адресом. + +## Что изучать дальше? + +Следующие руководства охватывают тесно связанные темы, которые развивают техники, продемонстрированные в этом руководстве. Каждый ресурс включает полностью работающие примеры кода с пошаговыми объяснениями, помогая вам освоить дополнительные возможности API и исследовать альтернативные подходы в собственных проектах. + +- [How to Add CSS – Inline CSS to HTML Documents in Aspose.HTML for Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [How to Edit HTML Document Tree in Aspose.HTML for Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [How to Enable JavaScript in Aspose HTML – Load HTML & Get Text](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/russian/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/russian/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..62f1aa4f8 --- /dev/null +++ b/html/russian/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,351 @@ +--- +category: general +date: 2026-09-07 +description: Как преобразовать шаблон в HTML с помощью Java. Узнайте, как генерировать + HTML из шаблона, использовать циклы foreach и увидеть полный пример шаблонизатора + на Java. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: ru +lastmod: 2026-09-07 +og_description: Как преобразовать шаблон в HTML с помощью Java. Этот учебник демонстрирует + полный пример Java‑шаблонизатора, как генерировать HTML из шаблона и как использовать + foreach. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Как преобразовать шаблон в HTML с помощью Java – пошаговое руководство +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Как преобразовать шаблон в HTML с помощью Java‑шаблонного движка +url: /ru/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Как преобразовать шаблон в HTML с помощью Java‑шаблонизатора + +Если вам нужно **how to convert template** в готовую к обслуживанию HTML‑страницу, это руководство предоставляет полное решение. Вы увидите, как **generate HTML from template** файлы, включить цикл с помощью **how to use foreach**, и пройдёте через **java template engine example**, который работает с XML или JSON источниками данных. + +В этом учебнике рассматривается всё, что требуется для **convert html template** файлов в одной Java‑программе. К концу вы получите исполняемый проект, который читает шаблон, внедряет данные и записывает итоговый HTML‑файл на диск. + +## Предварительные требования + +Прежде чем начать, убедитесь, что у вас есть: + +* JDK 17 или новее +* Инструмент сборки, такой как Maven или Gradle (код использует только стандартные классы Java) +* Базовое знакомство с Java I/O и форматами XML/JSON + +Для основных шагов внешние библиотеки не требуются, но при желании вы можете заменить простые классы `Template` на сторонний движок. + +## Шаг 1: Настройка путей к файлам и маркеров шаблона + +Первый шаг определяет, где будут находиться шаблон, источник данных и результат. Шаблон содержит заполнители `{{...}}`, которые движок заменит. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Почему это важно*: Жёстко заданные пути позволяют запускать программу из любой IDE без дополнительной конфигурации. При желании эти значения можно передать как аргументы командной строки для большей гибкости. + +## Шаг 2: Загрузка источника данных (XML или JSON) + +Движку нужен объект данных, сопоставляющий имена заполнителей со значениями. Класс `TemplateData` абстрагирует парсинг XML и JSON. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +Если `dataPath` указывает на JSON‑файл, `TemplateData` автоматически определит формат и построит ту же карту ключ‑значение. Такая гибкость полезна, когда вы **generate html from template** в разных окружениях. + +## Шаг 3: Включение директивы foreach для циклов + +Во многих шаблонах требуется повторять блок для каждого элемента коллекции. Включение директивы foreach заставляет движок обрабатывать блоки `{{#foreach items}} … {{/foreach}}`. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**Как использовать foreach**: Внутри `template.html` можно написать: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +Когда движок встречает этот блок, он повторяет элемент `
  • ` для каждой записи в коллекции `products`, предоставленной `TemplateData`. + +## Шаг 4: Преобразование шаблона и запись результата + +Теперь движок заменяет все маркеры реальными значениями и записывает окончательный HTML‑файл. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +Метод `convertTemplate` выполняет четыре действия: + +1. Считывает `template.html` в память. +2. Заменяет каждый `{{key}}` соответствующим значением из `data`. +3. Обрабатывает все включённые блоки foreach. +4. Записывает преобразованное содержимое в `resultPath`. + +## Шаг 5: Запуск программы и проверка вывода + +Наконец, информируем пользователя о том, что конверсия завершилась успешно. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +При выполнении метода `main` вы должны увидеть в консоли строку, похожую на: + +``` +Template conversion completed: src/main/resources/result.html +``` + +Откройте `result.html` в браузере. Все заполнители будут заменены, а любые циклы foreach сгенерируют соответствующие HTML‑фрагменты. + +### Пример ожидаемого вывода + +Для простого `template.html`: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +И XML‑файла `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +Сгенерированный `result.html` будет выглядеть так: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Особые случаи и рекомендации по лучшим практикам + +* **Отсутствующие заполнители** – Движок оставляет неизвестные маркеры `{{key}}` без изменений. Можно добавить шаг валидации, который просканирует шаблон на оставшиеся фигурные скобки и выведет предупреждение. +* **Большие наборы данных** – Для тысяч элементов рассмотрите потоковую обработку шаблона вместо загрузки всего файла в память. Текущая реализация подходит для типичных веб‑страниц. +* **JSON vs. XML** – При переходе на JSON сохраняйте ту же структуру: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` автоматически её распарсит, так что остальной код останется без изменений. + +* **Кодировка** – Убедитесь, что и шаблон, и файлы данных используют UTF‑8, чтобы избежать искажения символов, особенно при генерации многоязычного HTML. + +* **Безопасность** – Не доверяйте пользовательским данным для прямой вставки в HTML без санитизации. Экранируйте специальные HTML‑символы, если данные могут содержать разметку. + +## Полный рабочий пример + +Ниже приведён автономный Java‑класс, объединяющий все шаги. Сохраните его как `TemplateConverter.java` и запустите из IDE или командной строки. + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## Что следует изучить дальше? + +Следующие учебники охватывают тесно связанные темы, которые развивают техники, продемонстрированные в этом руководстве. Каждый ресурс включает полностью работающие примеры кода с пошаговыми объяснениями, помогая вам освоить дополнительные возможности API и исследовать альтернативные подходы реализации в собственных проектах. + +- [How to Convert HTML to PDF Java – Using Aspose.HTML for Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [How to Edit HTML Using Aspose.HTML for Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Convert HTML to String using Aspose.HTML for Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/spanish/java/creating-managing-html-documents/_index.md b/html/spanish/java/creating-managing-html-documents/_index.md index bf1e2fa9a..5d1e2b21e 100644 --- a/html/spanish/java/creating-managing-html-documents/_index.md +++ b/html/spanish/java/creating-managing-html-documents/_index.md @@ -70,8 +70,12 @@ Aprenda a crear nuevos documentos HTML con Aspose.HTML para Java con esta sencil Aprenda a gestionar eventos de carga de documentos en Aspose.HTML para Java con esta guía paso a paso. Mejore sus aplicaciones web. ### [Crear y administrar documentos SVG en Aspose.HTML para Java](./create-manage-svg-documents/) Aprenda a crear y gestionar documentos SVG con Aspose.HTML para Java. Esta guía completa cubre todo, desde la creación básica hasta la manipulación avanzada. +### [Cómo enlazar datos a una tabla HTML dinámica con columnas de nombre y apellido](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) +Aprenda a enlazar datos a una tabla HTML dinámica con columnas de nombre y apellido usando Aspose.HTML para Java. ### [Ejecutar JavaScript asíncrono en Java – Guía completa paso a paso](./execute-async-javascript-in-java-complete-step-by-step-guide/) Aprenda a ejecutar JavaScript asíncrono en Java con Aspose.HTML mediante una guía paso a paso completa. +### [Cómo convertir una plantilla a HTML con un motor de plantillas Java](./how-to-convert-template-to-html-with-a-java-template-engine/) +Aprenda a convertir plantillas a HTML usando un motor de plantillas Java con Aspose.HTML, guía paso a paso. {{< /blocks/products/pf/tutorial-page-section >}} @@ -93,4 +97,4 @@ Aprenda a iterar un NodeList en Java para leer HTML y extraer la ruta src de las ### [Extraer texto de HTML con Java – Guía completa paso a paso](./extract-text-from-html-with-java-complete-step-by-step-guide/) Aprenda a extraer texto de documentos HTML en Java con Aspose.HTML mediante esta guía paso a paso completa. ### [Iterar sobre NodeList Java – Guía completa](./iterate-over-nodelist-java-complete-guide/) -Aprenda a iterar sobre NodeList en Java con Aspose.HTML mediante esta guía paso a paso completa. +Aprenda a iterar sobre NodeList en Java con Aspose.HTML mediante esta guía paso a paso completa. \ No newline at end of file diff --git a/html/spanish/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/spanish/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..b9057ea7b --- /dev/null +++ b/html/spanish/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,325 @@ +--- +category: general +date: 2026-09-07 +description: cómo enlazar datos en una tabla HTML dinámica – aprende a generar filas + de tabla y a rellenar los campos de nombre y apellido de manera eficiente +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: es +lastmod: 2026-09-07 +og_description: cómo vincular datos en una tabla HTML dinámica. Este tutorial muestra + cómo generar filas de tabla, mostrar el nombre y el apellido, y rellenar las filas + de la tabla con JavaScript. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Cómo enlazar datos a una tabla HTML dinámica – guía paso a paso +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: Cómo enlazar datos a una tabla HTML dinámica con columnas de nombre y apellido +url: /es/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Cómo enlazar datos a una tabla HTML dinámica con columnas de nombre y apellido + +Si necesitas **cómo enlazar datos** en una tabla que crece con cada registro, esta guía muestra una solución completa. Verás cómo generar una tabla HTML dinámica, rellenar filas de tabla y mostrar el nombre y apellido de cada persona sin escribir marcado repetitivo. + +El ejemplo usa una sintaxis de plantillas ligera que funciona en cualquier navegador moderno, pero los conceptos se aplican igualmente a Handlebars, Mustache o motores del lado del servidor. Al final del tutorial podrás copiar el código a tu proyecto y comenzar a enlazar datos al instante. + +## Qué cubre este tutorial + +* Cómo estructurar una fuente de datos que contiene múltiples personas +* Cómo crear una plantilla de tabla reutilizable que se repite para cada entrada +* Cómo enlazar los datos y generar el marcado HTML final +* Trampas comunes al poblar filas de tabla y cómo evitarlas + +No se requieren bibliotecas externas, aunque el mismo patrón funciona con los frameworks de plantillas más populares. El único requisito previo es conocimientos básicos de HTML y JavaScript. + +## Requisitos previos + +* Un navegador moderno (Chrome, Edge, Firefox o Safari) +* Un editor para archivos HTML/JavaScript +* Opcional: un archivo JSON o un objeto JavaScript que represente la colección de personas + +## Paso 1: Definir la fuente de datos + +Primero, crea un objeto JavaScript que refleje la estructura usada en la plantilla. Cada persona tiene un nombre, un apellido y un objeto de dirección. + +```html + +``` + +**Por qué es importante:** La jerarquía del objeto (`Persons.Person`) coincide con el bucle `{{#foreach Persons.Person}}` en la plantilla, lo que permite al motor iterar automáticamente sobre cada entrada. + +## Paso 2: Escribir la plantilla de tabla con un bloque de repetición + +La plantilla a continuación usa una sintaxis estilo Mustache (`{{#foreach}}`) para repetir el `` por cada persona. Coloca la plantilla dentro de una etiqueta ` +``` + +**Por qué es importante:** La directiva `{{#foreach Persons.Person}}` indica al motor que repita todo lo que está entre las etiquetas de apertura y cierre para cada objeto persona. Dentro de la fila puedes referenciar cualquier propiedad (`{{FirstName}}`, `{{LastName}}`, etc.) para **poblar filas de tabla** dinámicamente. + +## Paso 3: Implementar una pequeña función de renderizado + +Como el tutorial debe ser autosuficiente, escribiremos un renderizador mínimo que sustituya los marcadores estilo Mustache por valores reales. La función recorre el objeto de datos, expande el bloque de repetición e inyecta el HTML final en la página. + +```html + +``` + +**Por qué es importante:** El renderizador demuestra **cómo generar la tabla** programáticamente sin cargar una biblioteca completa. También aclara la transformación de la plantilla al HTML final, lo que te ayuda a adaptar el código a otros motores de plantillas más adelante. + +## Paso 4: Añadir un marcador donde aparecerá la tabla generada + +Crea un `
    ` vacío que el script rellenará después del renderizado. + +```html +
    +``` + +Cuando la página se cargue, el script reemplazará el contenido de este `
    ` con la tabla completamente poblada. + +## Paso 5: Verificar el resultado + +Abre el archivo HTML en un navegador. Deberías ver una tabla que lista el nombre completo y la dirección de cada persona: + +| Persona | Dirección | +|------------------|-----------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Si añades más objetos al arreglo `data.Persons.Person`, la tabla crecerá automáticamente, cumpliendo con el requisito de **poblar filas de tabla**. + +## Consejo profesional: manejo de colecciones vacías + +Cuando el arreglo de datos está vacío, el renderizador actualmente genera solo el encabezado de la tabla. Para ofrecer una experiencia de usuario más clara, añade una protección: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Este pequeño cambio evita que aparezca una tabla vacía y brinda retroalimentación inmediata al usuario. + +## Variaciones comunes y casos límite + +| Situación | Ajuste | +|-------------------------------------------|------------------------------------------------------------------------| +| Usar un motor del lado del servidor (p. ej., Handlebars) | Reemplazar `renderTemplate` personalizado por `Handlebars.compile` y pasar el mismo objeto de datos. | +| Necesidad de ordenar filas alfabéticamente | Ordenar `data.Persons.Person` antes de llamar a `renderTemplate`. | +| Añadir una columna para número de teléfono | Extender el `` con `{{Phone}}` e incluir `Phone` en cada objeto persona. | +| Conjuntos de datos grandes (cientos de filas) | Renderizar filas en bloques o usar desplazamiento virtual para mantener la UI responsiva. | + +## Ejemplo completo funcionando + +A continuación tienes el archivo HTML completo que puedes copiar‑pegar en `index.html`. Contiene todas las piezas discutidas anteriormente. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Salida esperada** + +La página muestra una tabla con dos filas, cada una exhibiendo el nombre completo y la dirección formateada de una persona. Añadir más objetos al arreglo `Person` agrega automáticamente nuevas filas, demostrando **cómo generar elementos de tabla** a partir de datos. + +## Conclusión + +Ahora sabes **cómo enlazar datos** a una **tabla HTML dinámica**, generar filas para cada registro y mostrar los valores de nombre y apellido junto a la dirección. + +## ¿Qué deberías aprender a continuación? + + +Los siguientes tutoriales cubren temas estrechamente relacionados que amplían las técnicas demostradas en esta guía. Cada recurso incluye ejemplos de código completos con explicaciones paso a paso para ayudarte a dominar funcionalidades adicionales de la API y explorar enfoques de implementación alternativos en tus propios proyectos. + +- [How to Add CSS – Inline CSS to HTML Documents in Aspose.HTML for Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [How to Edit HTML Document Tree in Aspose.HTML for Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [How to Enable JavaScript in Aspose HTML – Load HTML & Get Text](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/spanish/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/spanish/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..1f5a61b7d --- /dev/null +++ b/html/spanish/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,352 @@ +--- +category: general +date: 2026-09-07 +description: Cómo convertir una plantilla a HTML usando Java. Aprende a generar HTML + a partir de una plantilla, habilitar bucles foreach y ver un ejemplo completo de + motor de plantillas Java. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: es +lastmod: 2026-09-07 +og_description: Cómo convertir una plantilla a HTML usando Java. Este tutorial muestra + un ejemplo completo de motor de plantillas Java, cómo generar HTML a partir de una + plantilla y cómo usar foreach. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: 'Cómo convertir una plantilla a HTML con Java: guía paso a paso' +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Cómo convertir una plantilla a HTML con un motor de plantillas Java +url: /es/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Cómo convertir una plantilla a HTML con un motor de plantillas Java + +Si necesitas **how to convert template** a una página HTML lista para servir, esta guía ofrece una solución completa. Verás cómo **generate HTML from template** archivos, habilitar bucles con **how to use foreach**, y recorrer un **java template engine example** que funciona con fuentes de datos XML o JSON. + +El tutorial cubre todo lo necesario para **convert html template** archivos en un solo programa Java. Al final tendrás un proyecto ejecutable que lee una plantilla, inyecta datos y escribe el archivo HTML final en disco. + +## Requisitos previos + +Antes de comenzar, asegúrate de tener: + +* JDK 17 o posterior instalado +* Una herramienta de compilación como Maven o Gradle (el código usa solo clases estándar de Java) +* Familiaridad básica con Java I/O y formatos XML/JSON + +No se requieren bibliotecas externas para los pasos principales, pero puedes reemplazar las clases simples `Template` por un motor de terceros si lo prefieres. + +## Paso 1: Configurar rutas de archivos y marcadores de plantilla + +El primer paso define dónde vivirán la plantilla, la fuente de datos y la salida. La plantilla contiene marcadores `{{...}}` que el motor reemplazará. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Why this matters*: Hard‑coding paths lets you run the program from any IDE without extra configuration. You can also pass these values as command‑line arguments for more flexibility. + +## Paso 2: Cargar la fuente de datos (XML o JSON) + +El motor necesita un objeto de datos que asocie nombres de marcadores con valores. La clase `TemplateData` abstrae el análisis de XML y JSON. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +Si `dataPath` apunta a un archivo JSON, `TemplateData` detecta automáticamente el formato y construye el mismo mapa clave/valor. Esta flexibilidad es útil cuando **generate html from template** en diferentes entornos. + +## Paso 3: Habilitar la directiva foreach para bucles + +Muchas plantillas necesitan repetir un bloque para cada elemento de una colección. Habilitar la directiva foreach indica al motor que procese bloques `{{#foreach items}} … {{/foreach}}`. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**How to use foreach**: Inside `template.html` you can write: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +Cuando el motor encuentra este bloque, repite el elemento `
  • ` para cada entrada en la colección `products` suministrada por `TemplateData`. + +## Paso 4: Convertir la plantilla y escribir el resultado + +Ahora el motor reemplaza todos los marcadores con valores reales y escribe el archivo HTML final. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +El método `convertTemplate` realiza tres acciones: + +1. Lee `template.html` en memoria. +2. Sustituye cada `{{key}}` con el valor correspondiente de `data`. +3. Procesa cualquier bloque foreach habilitado. +4. Escribe el contenido transformado en `resultPath`. + +## Paso 5: Ejecutar el programa y verificar la salida + +Finalmente, informa al usuario que la conversión se completó con éxito. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +Al ejecutar el método `main`, deberías ver una línea en la consola similar a: + +``` +Template conversion completed: src/main/resources/result.html +``` + +Abre `result.html` en un navegador. Todos los marcadores serán reemplazados, y cualquier bucle foreach habrá generado los fragmentos HTML apropiados. + +### Ejemplo de salida esperada + +Dada una `template.html` sencilla: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +Y un `data.xml` XML: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +El `result.html` generado será: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Casos límite y consejos de mejores prácticas + +* **Missing placeholders** – The engine leaves unknown `{{key}}` markers unchanged. You can add a validation step that scans the template for remaining braces and logs a warning. +* **Large data sets** – For thousands of items, consider streaming the template instead of loading the whole file into memory. The current implementation is fine for typical web pages. +* **JSON vs. XML** – If you switch to JSON, keep the same structure: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` will parse it automatically, so the rest of the code stays unchanged. + +* **Encoding** – Ensure both template and data files use UTF‑8 to avoid character corruption, especially when generating multilingual HTML. + +* **Security** – Do not trust user‑provided data for direct injection into HTML without sanitization. Escape HTML special characters if the data may contain markup. + +## Ejemplo completo ejecutable + +A continuación se muestra una clase Java autocontenida que reúne todos los pasos. Guárdala como `TemplateConverter.java` y ejecútala desde tu IDE o línea de comandos. + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## ¿Qué deberías aprender a continuación? + + +Los siguientes tutoriales cubren temas estrechamente relacionados que amplían las técnicas demostradas en esta guía. Cada recurso incluye ejemplos de código completos y funcionales con explicaciones paso a paso para ayudarte a dominar características adicionales de la API y explorar enfoques de implementación alternativos en tus propios proyectos. + +- [How to Convert HTML to PDF Java – Using Aspose.HTML for Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [How to Edit HTML Using Aspose.HTML for Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Convert HTML to String using Aspose.HTML for Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/swedish/java/creating-managing-html-documents/_index.md b/html/swedish/java/creating-managing-html-documents/_index.md index 3ad338e7b..3a1c37640 100644 --- a/html/swedish/java/creating-managing-html-documents/_index.md +++ b/html/swedish/java/creating-managing-html-documents/_index.md @@ -55,12 +55,14 @@ Lär dig hur du laddar, manipulerar och sparar HTML-dokument med Aspose.HTML fö Lär dig hur du laddar HTML-dokument från strömmar med Aspose.HTML för Java. Den här guiden ger en steg-för-steg handledning för sömlös HTML-manipulation. ### [Skapa HTML-dokument från String i Aspose.HTML för Java](./create-html-documents-from-string/) Lär dig hur du skapar HTML-dokument från strängar i Aspose.HTML för Java med denna steg-för-steg-guide. +### [Konvertera mall till HTML med en Java‑mallmotor i Aspose.HTML för Java](./how-to-convert-template-to-html-with-a-java-template-engine/) +Lär dig att omvandla en mall till HTML med hjälp av en Java‑mallmotor i en steg‑för‑steg‑guide. ### [Ladda HTML-dokument från URL i Aspose.HTML för Java](./load-html-documents-from-url/) Upptäck hur du enkelt laddar HTML-dokument från en URL i Java med Aspose.HTML. Steg-för-steg handledning ingår. ### [Extrahera text från HTML med Java – Komplett steg‑för‑steg‑guide](./extract-text-from-html-with-java-complete-step-by-step-guide/) Lär dig hur du extraherar text från HTML-dokument i Java med en detaljerad steg‑för‑steg‑guide. ### [Hur du frågar HTML i Java – Komplett handledning](./how-to-query-html-in-java-complete-tutorial/) -Lär dig hur du söker och extraherar data från HTML-dokument i Java med en komplett steg-för-steg-guide. +Lär dig hur du söker och extraherar data från HTML-dokument i Java med en komplett steg‑för‑steg‑guide. ### [Hur man parsar HTML i Java – Ladda, fråga & räkna element](./how-to-parse-html-java-load-query-count-elements/) Lär dig hur du laddar, frågar och räknar HTML-element i Java med Aspose.HTML i denna steg-för-steg-guide. ### [Generera nya HTML-dokument med Aspose.HTML för Java](./generate-new-html-documents/) @@ -75,6 +77,8 @@ Lär dig hur du kör asynkron JavaScript i Java med Aspose.HTML, komplett steg Lär dig hur du skapar en säker sandlåda för HTML i Java med vår detaljerade steg‑för‑steg‑guide. ### [Iterera över NodeList i Java – Komplett guide](./iterate-over-nodelist-java-complete-guide/) Lär dig hur du itererar över NodeList i Java med en komplett steg‑för‑steg‑guide. +### [Hur du binder data till en dynamisk HTML-tabell med kolumner för för- och efternamn](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) +Lär dig att dynamiskt fylla en HTML-tabell med för- och efternamn från data i Java med Aspose.HTML. {{< /blocks/products/pf/tutorial-page-section >}} @@ -92,4 +96,4 @@ Lär dig hur du kör JavaScript för att generera HTML i Java med vår detaljera {{< blocks/products/products-backtop-button >}} ### [Iterera NodeList i Java – Läs HTML och hämta bild‑src](./iterate-nodelist-java-read-html-get-image-src/) -Lär dig hur du itererar en NodeList i Java för att läsa HTML och extrahera bild‑src‑attributen. +Lär dig hur du itererar en NodeList i Java för att läsa HTML och extrahera bild‑src‑attributen. \ No newline at end of file diff --git a/html/swedish/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/swedish/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..23b8bea2e --- /dev/null +++ b/html/swedish/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,325 @@ +--- +category: general +date: 2026-09-07 +description: hur man binder data i en dynamisk HTML‑tabell – lär dig hur du genererar + tabellrader och fyller i fält för för- och efternamn effektivt +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: sv +lastmod: 2026-09-07 +og_description: hur man binder data i en dynamisk HTML‑tabell. Denna handledning visar + hur man genererar tabellrader, visar för‑ och efternamn samt fyller tabellrader + med JavaScript. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Hur man binder data till en dynamisk HTML‑tabell – steg‑för‑steg‑guide +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: Hur man binder data till en dynamisk HTML‑tabell med kolumner för förnamn och + efternamn +url: /sv/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Så binder du data till en dynamisk HTML‑tabell med kolumner för för- och efternamn + +Om du behöver **binda data** till en tabell som växer med varje post, visar den här guiden en komplett lösning. Du får se hur du genererar en dynamisk HTML‑tabell, fyller på tabellrader och visar varje persons för‑ och efternamn utan att skriva repetitiv markup. + +Exemplet använder en lättviktig mallsyntaks som fungerar i alla moderna webbläsare, men koncepten gäller även för Handlebars, Mustache eller server‑side‑motorer. När du är klar med tutorialen kan du kopiera koden till ditt projekt och börja binda data omedelbart. + +## Vad den här tutorialen täcker + +* Hur du strukturerar en datakälla som innehåller flera personer +* Hur du skapar en återanvändbar tabellmall som upprepas för varje post +* Hur du binder data och genererar den slutgiltiga HTML‑markuppen +* Vanliga fallgropar när du fyller på tabellrader och hur du undviker dem + +Inga externa bibliotek krävs, även om samma mönster fungerar med populära mallramverk. Det enda förutsättningen är grundläggande kunskaper i HTML och JavaScript. + +## Förutsättningar + +* En modern webbläsare (Chrome, Edge, Firefox eller Safari) +* En editor för HTML/JavaScript‑filer +* Valfritt: en JSON‑fil eller ett JavaScript‑objekt som representerar personsamlingen + +## Steg 1: Definiera datakällan + +Börja med att skapa ett JavaScript‑objekt som speglar strukturen som används i mallen. Varje person har ett förnamn, efternamn och ett adress‑objekt. + +```html + +``` + +**Varför detta är viktigt:** Objekt‑hierarkin (`Persons.Person`) matchar `{{#foreach Persons.Person}}`‑loopen i mallen, vilket låter motorn iterera över varje post automatiskt. + +## Steg 2: Skriv tabellmallen med ett upprepningsblock + +Mallen nedan använder en enkel Mustache‑liknande syntax (`{{#foreach}}`) för att upprepa `` för varje person. Placera mallen inuti ett ` +``` + +**Varför detta är viktigt:** Direktivet `{{#foreach Persons.Person}}` talar om för motorn att upprepa allt mellan öppnings‑ och stängningstaggarna för varje person‑objekt. Inuti raden kan du referera till vilken egenskap som helst (`{{FirstName}}`, `{{LastName}}` osv.) för att **fylla på tabellrader** dynamiskt. + +## Steg 3: Implementera en liten renderingsfunktion + +Eftersom tutorialen måste vara självständig skriver vi en minimal renderare som ersätter de Mustache‑liknande platshållarna med riktiga värden. Funktionen går igenom data‑objektet, expanderar upprepningsblocket och injicerar den färdiga HTML‑koden i sidan. + +```html + +``` + +**Varför detta är viktigt:** Renderaren visar **hur man genererar tabell**‑markup programatiskt utan att behöva ett fullständigt bibliotek. Den klargör också transformationen från mall till slutlig HTML, vilket underlättar anpassning till andra mallmotorer senare. + +## Steg 4: Lägg till en platshållare där den genererade tabellen ska visas + +Skapa en tom `
    ` som skriptet fyller i efter rendering. + +```html +
    +``` + +När sidan laddas ersätter skriptet innehållet i denna `
    ` med den fullständigt ifyllda tabellen. + +## Steg 5: Verifiera resultatet + +Öppna HTML‑filen i en webbläsare. Du bör se en tabell som listar varje persons fullständiga namn och adress: + +| Person | Adress | +|-----------------|--------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Om du lägger till fler objekt i `data.Persons.Person`‑arrayen växer tabellen automatiskt – vilket uppfyller kravet på **fylla på tabellrader**. + +## Proffstips: hantera tomma samlingar + +När data‑arrayen är tom skriver renderaren för närvarande ut ett tomt tabellhuvud. För att ge en tydligare användarupplevelse, lägg till ett skydd: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Denna lilla förändring förhindrar att en tom tabell visas och ger användaren omedelbar återkoppling. + +## Vanliga variationer och specialfall + +| Situation | Justering | +|----------------------------------------|---------------------------------------------------------------------------| +| Använda en server‑side‑motor (t.ex. Handlebars) | Ersätt den anpassade `renderTemplate` med `Handlebars.compile` och skicka in samma dataobjekt. | +| Behöva sortera rader alfabetiskt | Sortera `data.Persons.Person` innan du anropar `renderTemplate`. | +| Lägga till en kolumn för telefonnummer | Utöka `` med `{{Phone}}` och inkludera `Phone` i varje person‑objekt. | +| Stora datamängder (hundratals rader) | Rendera rader i portioner eller använd virtuell scrollning för att hålla UI‑responsivt. | + +## Fullt fungerande exempel + +Nedan är den kompletta HTML‑filen som du kan kopiera‑klistra in i `index.html`. Den innehåller alla delar som diskuterats ovan. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Förväntat resultat** + +Sidan renderar en tabell med två rader, där varje rad visar personens fullständiga namn och formaterade adress. Att lägga till fler objekt i `Person`‑arrayen lägger automatiskt till nya rader – vilket demonstrerar **hur man genererar tabell**‑element från data. + +## Slutsats + +Du vet nu **hur man binder data** till en **dynamisk HTML‑tabell**, genererar rader för varje post och visar för‑ och efternamn tillsammans med adress. + +## Vad bör du lära dig härnäst? + +De följande tutorialerna behandlar närliggande ämnen som bygger vidare på teknikerna som demonstrerats i den här guiden. Varje resurs innehåller kompletta fungerande kodexempel med steg‑för‑steg‑förklaringar för att hjälpa dig bemästra ytterligare API‑funktioner och utforska alternativa implementationsmetoder i dina egna projekt. + +- [How to Add CSS – Inline CSS to HTML Documents in Aspose.HTML for Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [How to Edit HTML Document Tree in Aspose.HTML for Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [How to Enable JavaScript in Aspose HTML – Load HTML & Get Text](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/swedish/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/swedish/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..d4c22c76b --- /dev/null +++ b/html/swedish/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,346 @@ +--- +category: general +date: 2026-09-07 +description: Hur man konverterar en mall till HTML med Java. Lär dig att generera + HTML från en mall, aktivera foreach-loopar och se ett komplett exempel på en Java-mallmotor. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: sv +lastmod: 2026-09-07 +og_description: Hur man konverterar en mall till HTML med Java. Denna handledning + visar ett komplett exempel på en Java‑mallmotor, hur man genererar HTML från en + mall och hur man använder foreach. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Hur man konverterar mall till HTML med Java – steg‑för‑steg guide +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Hur man konverterar en mall till HTML med en Java‑mallmotor +url: /sv/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Hur man konverterar mall till HTML med en Java-mallmotor + +Om du behöver **how to convert template** till en färdig‑att‑servas HTML‑sida, ger den här guiden en komplett lösning. Du kommer att se hur du **generate HTML from template** filer, aktiverar loopning med **how to use foreach**, och går igenom ett **java template engine example** som fungerar med XML‑ eller JSON‑datakällor. + +Handledningen täcker allt som krävs för att **convert html template** filer i ett enda Java‑program. I slutet kommer du att ha ett körbart projekt som läser en mall, injicerar data och skriver den slutgiltiga HTML‑filen till disk. + +## Förutsättningar + +* JDK 17 eller senare installerat +* Ett byggverktyg som Maven eller Gradle (koden använder endast standard‑Java‑klasser) +* Grundläggande kunskap om Java I/O och XML/JSON‑format + +Inga externa bibliotek krävs för kärnstegen, men du kan ersätta de enkla `Template`‑klasserna med en tredjeparts‑motor om du föredrar. + +## Steg 1: Ställ in filsökvägar och mallmarkörer + +Det första steget definierar var mallen, datakällan och utdata ska ligga. Mallen innehåller `{{...}}`‑platshållare som motorn kommer att ersätta. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Varför detta är viktigt*: Att hårdkoda sökvägar låter dig köra programmet från vilken IDE som helst utan extra konfiguration. Du kan också skicka dessa värden som kommandoradsargument för större flexibilitet. + +## Steg 2: Ladda datakällan (XML eller JSON) + +Motorn behöver ett dataobjekt som mappar platshållarnamn till värden. Klassen `TemplateData` abstraherar XML‑ och JSON‑parsing. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +Om `dataPath` pekar på en JSON‑fil, upptäcker `TemplateData` automatiskt formatet och bygger samma nyckel/värde‑karta. Denna flexibilitet är användbar när du **generate html from template** i olika miljöer. + +## Steg 3: Aktivera foreach‑direktivet för loopning + +Många mallar behöver upprepa ett block för varje objekt i en samling. Att aktivera foreach‑direktivet instruerar motorn att bearbeta `{{#foreach items}} … {{/foreach}}`‑block. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**Hur man använder foreach**: Inuti `template.html` kan du skriva: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +När motorn stöter på detta block, upprepar den `
  • `‑elementet för varje post i `products`‑samlingen som levereras av `TemplateData`. + +## Steg 4: Konvertera mallen och skriv resultatet + +Nu ersätter motorn alla markörer med faktiska värden och skriver den slutgiltiga HTML‑filen. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +`convertTemplate`‑metoden utför tre åtgärder: + +1. Läser `template.html` till minnet. +2. Ersätter varje `{{key}}` med motsvarande värde från `data`. +3. Bearbetar eventuella aktiverade foreach‑block. +4. Skriver det transformerade innehållet till `resultPath`. + +## Steg 5: Kör programmet och verifiera resultatet + +Till sist, informera användaren om att konverteringen lyckades. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +När du kör `main`‑metoden bör du se en konsollrad liknande: + +``` +Template conversion completed: src/main/resources/result.html +``` + +Öppna `result.html` i en webbläsare. Alla platshållare kommer att ersättas, och eventuella foreach‑loopar kommer ha genererat de lämpliga HTML‑fragmenten. + +### Exempel på förväntat resultat + +Givet en enkel `template.html`: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +Och en XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +Den genererade `result.html` kommer att vara: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Kantfall och bästa praxis‑tips + +* **Saknade platshållare** – Motorn lämnar okända `{{key}}`‑markörer oförändrade. Du kan lägga till ett valideringssteg som skannar mallen efter återstående klamrar och loggar en varning. +* **Stora datamängder** – För tusentals objekt, överväg att strömma mallen istället för att läsa in hela filen i minnet. Den nuvarande implementeringen är tillräcklig för vanliga webbsidor. +* **JSON vs. XML** – Om du byter till JSON, behåll samma struktur: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` kommer att parsas automatiskt, så resten av koden förblir oförändrad. +* **Kodning** – Säkerställ att både mall‑ och datafiler använder UTF‑8 för att undvika teckenkorruption, särskilt när du genererar flerspråkig HTML. +* **Säkerhet** – Lita inte på användar‑tillhandahållen data för direkt injicering i HTML utan sanering. Escape HTML‑specialtecken om data kan innehålla markup. + +## Fullt körbart exempel + +Nedan är en fristående Java‑klass som samlar alla steg. Spara den som `TemplateConverter.java` och kör den från din IDE eller kommandorad. + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## Vad bör du lära dig härnäst? + +Följande handledningar täcker närbesläktade ämnen som bygger på teknikerna som demonstreras i den här guiden. Varje resurs innehåller kompletta fungerande kodexempel med steg‑för‑steg‑förklaringar för att hjälpa dig bemästra ytterligare API‑funktioner och utforska alternativa implementationsmetoder i dina egna projekt. + +- [Hur man konverterar HTML till PDF Java – med Aspose.HTML för Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [Hur man redigerar HTML med Aspose.HTML för Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Konvertera HTML till String med Aspose.HTML för Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/thai/java/creating-managing-html-documents/_index.md b/html/thai/java/creating-managing-html-documents/_index.md index 6c03d603f..a7bb97b03 100644 --- a/html/thai/java/creating-managing-html-documents/_index.md +++ b/html/thai/java/creating-managing-html-documents/_index.md @@ -19,7 +19,7 @@ Aspose.HTML สำหรับ Java นำเสนอชุดเครื่ ## การสร้างเอกสาร HTML แบบอะซิงโครนัส - การสร้างเอกสาร HTML แบบอะซิงโครนัสอาจฟังดูซับซ้อน แต่ด้วย Aspose.HTML สำหรับ Java จะทำให้ทุกอย่างเป็นเรื่องง่ายๆ โดยปฏิบัติตามแนวทางทีละขั้นตอน คุณจะสามารถจัดการกระบวนการสร้างได้อย่างมีประสิทธิภาพโดยไม่หยุดชะงักเวิร์กโฟลวของแอปพลิเคชัน ลองนึกภาพว่าคุณสามารถสร้างเนื้อหา HTML แบบไดนามิกในพื้นหลังได้ในขณะที่แอปพลิเคชันของคุณทำงานได้อย่างราบรื่น นั่นคือสิ่งที่คุณจะได้รับหากเรียนรู้บทช่วยสอนนี้จนเชี่ยวชาญ[อ่านเพิ่มเติม](./create-html-documents-async/) + การสร้างเอกสาร HTML แบบอะซิงโครนัสอาจฟังดูซับซ้อน แต่ด้วย Aspose.HTML สำหรับ Java จะทำให้ทุกอย่างเป็นเรื่องง่ายๆ โดยปฏิบัตตามแนวทางทีละขั้นตอน คุณจะสามารถจัดการกระบวนการสร้างได้อย่างมีประสิทธิภาพโดยไม่หยุดชะงักเวิร์กโฟลวของแอปพลิเคชัน ลองนึกภาพว่าคุณสามารถสร้างเนื้อหา HTML แบบไดนามิกในพื้นหลังได้ในขณะที่แอปพลิเคชันของคุณทำงานได้อย่างราบรื่น นั่นคือสิ่งที่คุณจะได้รับหากเรียนรู้บทช่วยสอนนี้จนเชี่ยวชาญ[อ่านเพิ่มเติม](./create-html-documents-async/) ## การสร้างเอกสาร HTML ที่ว่างเปล่า @@ -74,6 +74,10 @@ Aspose.HTML สำหรับ Java นำเสนอชุดเครื่ เรียนรู้วิธีโหลดเอกสาร HTML, คิวรีข้อมูลและนับจำนวนองค์ประกอบใน Java ด้วย Aspose.HTML อย่างละเอียด ### [ดำเนินการ JavaScript แบบอะซิงโครนัสใน Java – คู่มือขั้นตอนเต็ม](./execute-async-javascript-in-java-complete-step-by-step-guide/) เรียนรู้วิธีดำเนินการ JavaScript แบบอะซิงโครนัสใน Java ด้วย Aspose.HTML ผ่านคู่มือขั้นตอนเต็มที่เข้าใจง่าย +### [วิธีแปลงเทมเพลตเป็น HTML ด้วยเครื่องมือเทมเพลต Java](./how-to-convert-template-to-html-with-a-java-template-engine/) +เรียนรู้วิธีใช้เครื่องมือเทมเพลต Java เพื่อแปลงเทมเพลตเป็นไฟล์ HTML อย่างง่าย +### [วิธีผูกข้อมูลกับตาราง HTML แบบไดนามิกที่มีคอลัมน์ชื่อและนามสกุล](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) +เรียนรู้วิธีผูกข้อมูลกับตาราง HTML แบบไดนามิกที่มีคอลัมน์ชื่อและนามสกุลใน Java ด้วย Aspose.HTML {{< /blocks/products/pf/tutorial-page-section >}} @@ -99,4 +103,4 @@ Aspose.HTML สำหรับ Java นำเสนอชุดเครื่ {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/thai/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/thai/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..b6b158a37 --- /dev/null +++ b/html/thai/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,322 @@ +--- +category: general +date: 2026-09-07 +description: วิธีผูกข้อมูลในตาราง HTML แบบไดนามิก – เรียนรู้วิธีสร้างแถวตารางและเติมข้อมูลชื่อและนามสกุลอย่างมีประสิทธิภาพ +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: th +lastmod: 2026-09-07 +og_description: วิธีผูกข้อมูลในตาราง HTML แบบไดนามิก บทเรียนนี้แสดงวิธีสร้างแถวตาราง + แสดงชื่อและนามสกุล และเติมข้อมูลในแถวตารางด้วย JavaScript. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: วิธีผูกข้อมูลกับตาราง HTML แบบไดนามิก – คู่มือขั้นตอนโดยละเอียด +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: วิธีผูกข้อมูลกับตาราง HTML แบบไดนามิกที่มีคอลัมน์ชื่อจริงและนามสกุล +url: /th/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# วิธีผูกข้อมูลกับตาราง HTML แบบไดนามิกที่มีคอลัมน์ชื่อและนามสกุล + +หากคุณต้องการ **how to bind data** ลงในตารางที่ขยายตัวตามแต่ละบันทึก คู่มือนี้จะแสดงวิธีแก้ไขแบบครบถ้วน คุณจะได้เห็นวิธีสร้างตาราง HTML แบบไดนามิก, เติมแถวในตาราง, และแสดงชื่อและนามสกุลของแต่ละบุคคลโดยไม่ต้องเขียนโค้ดซ้ำซ้อน + +ตัวอย่างใช้ไวยากรณ์การเทมเพลตแบบเบาที่ทำงานได้ในเบราว์เซอร์สมัยใหม่ใด ๆ แต่แนวคิดสามารถนำไปใช้กับ Handlebars, Mustache หรือเอนจินฝั่งเซิร์ฟเวอร์ได้เช่นกัน เมื่อจบบทเรียนคุณสามารถคัดลอกโค้ดไปยังโปรเจกต์ของคุณและเริ่มผูกข้อมูลได้ทันที + +## สิ่งที่บทเรียนนี้ครอบคลุม + +* วิธีจัดโครงสร้างแหล่งข้อมูลที่มีหลายบุคคล +* วิธีสร้างเทมเพลตตารางที่นำกลับมาใช้ใหม่ได้และทำซ้ำสำหรับแต่ละรายการ +* วิธีผูกข้อมูลและสร้าง HTML markup สุดท้าย +* ข้อผิดพลาดทั่วไปเมื่อเติมแถวในตารางและวิธีหลีกเลี่ยง + +ไม่จำเป็นต้องใช้ไลบรารีภายนอก แม้ว่าแพทเทิร์นเดียวกันจะทำงานกับเฟรมเวิร์กการเทมเพลตที่นิยมได้เช่นกัน เงื่อนไขเบื้องต้นเพียงแค่ความรู้พื้นฐานของ HTML และ JavaScript + +## ข้อกำหนดเบื้องต้น + +* เบราว์เซอร์สมัยใหม่ (Chrome, Edge, Firefox หรือ Safari) +* โปรแกรมแก้ไขไฟล์ HTML/JavaScript +* ตัวเลือก: ไฟล์ JSON หรืออ็อบเจ็กต์ JavaScript ที่แสดงคอลเลกชันของบุคคล + +## ขั้นตอนที่ 1: กำหนดแหล่งข้อมูล + +แรกสุด สร้างอ็อบเจ็กต์ JavaScript ที่สะท้อนโครงสร้างที่ใช้ในเทมเพลต แต่ละบุคคลจะมีชื่อ, นามสกุล, และอ็อบเจ็กต์ address + +```html + +``` + +**Why this matters:** โครงสร้างอ็อบเจ็กต์ (`Persons.Person`) ตรงกับลูป `{{#foreach Persons.Person}}` ในเทมเพลต ทำให้เอนจินสามารถวนซ้ำแต่ละรายการโดยอัตโนมัติ + +## ขั้นตอนที่ 2: เขียนเทมเพลตตารางพร้อมบล็อกการทำซ้ำ + +เทมเพลตด้านล่างใช้ไวยากรณ์แบบ Mustache‑style (`{{#foreach}}`) เพื่อทำซ้ำ `` สำหรับแต่ละบุคคล วางเทมเพลตภายในแท็ก ` +``` + +**Why this matters:** คำสั่ง `{{#foreach Persons.Person}}` บอกเอนจินให้ทำซ้ำทุกอย่างระหว่างแท็กเปิดและปิดสำหรับแต่ละอ็อบเจ็กต์บุคคล ภายในแถวคุณสามารถอ้างอิงคุณสมบัติใดก็ได้ (`{{FirstName}}`, `{{LastName}}`, เป็นต้น) เพื่อ **populate table rows** อย่างไดนามิก + +## ขั้นตอนที่ 3: สร้างฟังก์ชันการเรนเดอร์ขนาดเล็ก + +เนื่องจากบทเรียนต้องเป็นอิสระ เราจะเขียนเรนเดอร์เล็ก ๆ ที่แทนที่ตัวแปรแบบ Mustache‑style ด้วยค่าจริง ฟังก์ชันจะเดินผ่านอ็อบเจ็กต์ข้อมูล, ขยายบล็อกการทำซ้ำ, และแทรก HTML สุดท้ายลงในหน้า + +```html + +``` + +**Why this matters:** เรนเดอร์แสดง **how to generate table** markup อย่างโปรแกรมเมติกโดยไม่ต้องดึงไลบรารีเต็มรูปแบบ นอกจากนี้ยังทำให้เห็นการแปลงจากเทมเพลตเป็น HTML สุดท้าย ซึ่งช่วยให้คุณปรับโค้ดไปใช้กับเอนจินเทมเพลตอื่น ๆ ในภายหลัง + +## ขั้นตอนที่ 4: เพิ่มตัวแทนที่ตารางที่สร้างขึ้นจะปรากฏ + +สร้าง `
    ` ว่างที่สคริปต์จะเติมหลังจากการเรนเดอร์ + +```html +
    +``` + +เมื่อหน้าโหลด สคริปต์จะแทนที่เนื้อหาของ `
    ` นี้ด้วยตารางที่เต็มไปด้วยข้อมูล + +## ขั้นตอนที่ 5: ตรวจสอบผลลัพธ์ + +เปิดไฟล์ HTML ในเบราว์เซอร์ คุณควรเห็นตารางที่แสดงชื่อเต็มและที่อยู่ของแต่ละบุคคล: + +| บุคคล | ที่อยู่ | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +หากคุณเพิ่มอ็อบเจ็กต์ลงในอาร์เรย์ `data.Persons.Person` ตารางจะขยายโดยอัตโนมัติ—ตอบสนองความต้องการ **populate table rows** + +## เคล็ดลับพิเศษ: การจัดการคอลเลกชันที่ว่างเปล่า + +เมื่ออาร์เรย์ข้อมูลว่าง เรนเดอร์จะสร้างหัวตารางเปล่า เพื่อให้ประสบการณ์ผู้ใช้ชัดเจนขึ้น ให้เพิ่มการตรวจสอบ: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +การเปลี่ยนแปลงเล็ก ๆ นี้จะป้องกันไม่ให้ตารางเปล่าปรากฏและให้ผู้ใช้ได้รับฟีดแบ็กทันที + +## ความแตกต่างทั่วไปและกรณีขอบ + +| สถานการณ์ | การปรับแต่ง | +|----------------------------------------|----------------------------------------------------------------------------| +| ใช้เอนจินฝั่งเซิร์ฟเวอร์ (เช่น Handlebars) | แทนที่ `renderTemplate` แบบกำหนดเองด้วย `Handlebars.compile` และส่งอ็อบเจ็กต์ข้อมูลเดียวกัน | +| ต้องการจัดเรียงแถวตามลำดับตัวอักษร | เรียงลำดับ `data.Persons.Person` ก่อนเรียก `renderTemplate` | +| เพิ่มคอลัมน์สำหรับหมายเลขโทรศัพท์ | ขยาย `` ด้วย `{{Phone}}` และเพิ่ม `Phone` ในอ็อบเจ็กต์ของแต่ละบุคคล | +| ชุดข้อมูลขนาดใหญ่ (หลายร้อยแถว) | เรนเดอร์แถวเป็นชิ้นส่วนหรือใช้ virtual scrolling เพื่อให้ UI ตอบสนองได้ดี | + +## ตัวอย่างทำงานเต็มรูปแบบ + +ด้านล่างเป็นไฟล์ HTML ฉบับสมบูรณ์ที่คุณสามารถคัดลอก‑วางลงใน `index.html` ได้ มีส่วนประกอบทั้งหมดที่กล่าวถึงข้างต้น + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**ผลลัพธ์ที่คาดหวัง** + +หน้าจะเรนเดอร์ตารางที่มีสองแถว แต่ละแถวแสดงชื่อเต็มและที่อยู่ที่จัดรูปแบบของบุคคล การเพิ่มอ็อบเจ็กต์ลงในอาร์เรย์ `Person` จะทำให้เพิ่มแถวใหม่โดยอัตโนมัติ—แสดงให้เห็น **how to generate table** จากข้อมูล + +## สรุป + +คุณตอนนี้รู้แล้วว่า **how to bind data** ไปยัง **dynamic HTML table**, สร้างแถวสำหรับแต่ละบันทึก, และแสดงค่าชื่อและนามสกุลพร้อมที่อยู่ + +## คุณควรเรียนรู้อะไรต่อไป? + +บทเรียนต่อไปนี้ครอบคลุมหัวข้อที่เกี่ยวข้องอย่างใกล้ชิดและต่อยอดจากเทคนิคที่แสดงในคู่มือนี้ แต่ละแหล่งข้อมูลรวมตัวอย่างโค้ดทำงานเต็มรูปแบบพร้อมคำอธิบายทีละขั้นตอนเพื่อช่วยให้คุณเชี่ยวชาญฟีเจอร์ API เพิ่มเติมและสำรวจวิธีการทำงานทางเลือกในโปรเจกต์ของคุณ + +- [วิธีเพิ่ม CSS – Inline CSS ไปยังเอกสาร HTML ใน Aspose.HTML สำหรับ Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [วิธีแก้ไขโครงสร้างเอกสาร HTML ใน Aspose.HTML สำหรับ Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [วิธีเปิดใช้งาน JavaScript ใน Aspose HTML – โหลด HTML & ดึงข้อความ](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/thai/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/thai/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..4db53ca87 --- /dev/null +++ b/html/thai/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,349 @@ +--- +category: general +date: 2026-09-07 +description: วิธีแปลงเทมเพลตเป็น HTML ด้วย Java เรียนรู้การสร้าง HTML จากเทมเพลต เปิดใช้งานลูป + foreach และดูตัวอย่างเต็มของเครื่องมือเทมเพลต Java +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: th +lastmod: 2026-09-07 +og_description: วิธีแปลงเทมเพลตเป็น HTML ด้วย Java. บทเรียนนี้แสดงตัวอย่างเครื่องมือเทมเพลต + Java อย่างครบถ้วน, วิธีสร้าง HTML จากเทมเพลต, และวิธีใช้ foreach. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: วิธีแปลงเทมเพลตเป็น HTML ด้วย Java – คู่มือขั้นตอนโดยละเอียด +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: วิธีแปลงเทมเพลตเป็น HTML ด้วยเครื่องมือเทมเพลต Java +url: /th/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# วิธีแปลงเทมเพลตเป็น HTML ด้วย Java template engine + +หากคุณต้องการ **how to convert template** ให้เป็นหน้า HTML ที่พร้อมให้บริการ คำแนะนำนี้จะให้วิธีแก้ไขแบบครบวงจร คุณจะได้เห็นวิธี **generate HTML from template** ไฟล์, เปิดใช้งานการวนลูปด้วย **how to use foreach**, และทำตามตัวอย่าง **java template engine example** ที่ทำงานกับแหล่งข้อมูล XML หรือ JSON + +บทเรียนนี้ครอบคลุมทุกอย่างที่จำเป็นสำหรับการ **convert html template** ไฟล์ในโปรแกรม Java เดียวกัน เมื่อเสร็จสิ้นคุณจะมีโปรเจกต์ที่สามารถอ่านเทมเพลต, แทรกข้อมูล, และเขียนไฟล์ HTML สุดท้ายลงดิสก์ได้ + +## ข้อกำหนดเบื้องต้น + +ก่อนเริ่มทำงาน โปรดตรวจสอบว่าคุณมี: + +* JDK 17 หรือใหม่กว่า +* เครื่องมือสร้างโปรเจกต์เช่น Maven หรือ Gradle (โค้ดใช้แค่คลาสมาตรฐานของ Java) +* ความคุ้นเคยพื้นฐานกับ Java I/O และรูปแบบ XML/JSON + +ไม่จำเป็นต้องใช้ไลบรารีภายนอกสำหรับขั้นตอนหลัก แต่คุณสามารถเปลี่ยนคลาส `Template` ที่ง่าย ๆ ให้เป็นเอนจินของบุคคลที่สามได้หากต้องการ + +## ขั้นตอนที่ 1: ตั้งค่าเส้นทางไฟล์และตัวบ่งชี้เทมเพลต + +ขั้นตอนแรกกำหนดตำแหน่งของเทมเพลต, แหล่งข้อมูล, และไฟล์ผลลัพธ์ เทมเพลตจะมีตัวแทน `{{...}}` ที่เอนจินจะทำการแทนที่ + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*ทำไมต้องทำเช่นนี้*: การกำหนดเส้นทางแบบคงที่ทำให้คุณรันโปรแกรมจาก IDE ใดก็ได้โดยไม่ต้องตั้งค่าเพิ่มเติม คุณยังสามารถส่งค่าเหล่านี้เป็นอาร์กิวเมนต์บรรทัดคำสั่งเพื่อความยืดหยุ่นมากขึ้นได้อีกด้วย + +## ขั้นตอนที่ 2: โหลดแหล่งข้อมูล (XML หรือ JSON) + +เอนจินต้องการอ็อบเจกต์ข้อมูลที่แมปชื่อ placeholder กับค่า `TemplateData` คลาสทำหน้าที่สรุปการแปลง XML และ JSON + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +หาก `dataPath` ชี้ไปที่ไฟล์ JSON, `TemplateData` จะตรวจจับรูปแบบโดยอัตโนมัติและสร้างแผนที่คีย์/ค่าเดียวกัน ความยืดหยุ่นนี้มีประโยชน์เมื่อคุณ **generate html from template** ในสภาพแวดล้อมที่แตกต่างกัน + +## ขั้นตอนที่ 3: เปิดใช้งานคำสั่ง foreach สำหรับการวนลูป + +เทมเพลตหลาย ๆ ตัวต้องการทำซ้ำบล็อกสำหรับแต่ละรายการในคอลเลกชัน การเปิดใช้งานคำสั่ง foreach จะบอกเอนจินให้ประมวลผลบล็อก `{{#foreach items}} … {{/foreach}}` + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**วิธีใช้ foreach**: ภายใน `template.html` คุณสามารถเขียนได้ว่า: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +เมื่อเอนจินพบบล็อกนี้ มันจะทำซ้ำองค์ประกอบ `
  • ` สำหรับแต่ละรายการในคอลเลกชัน `products` ที่ `TemplateData` จัดเตรียมไว้ + +## ขั้นตอนที่ 4: แปลงเทมเพลตและเขียนผลลัพธ์ + +ตอนนี้เอนจินจะแทนที่ตัวบ่งชี้ทั้งหมดด้วยค่าจริงและเขียนไฟล์ HTML สุดท้าย + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +เมธอด `convertTemplate` ทำสามขั้นตอน: + +1. อ่าน `template.html` เข้าไปในหน่วยความจำ +2. แทนที่แต่ละ `{{key}}` ด้วยค่าที่สอดคล้องจาก `data` +3. ประมวลผลบล็อก foreach ที่เปิดใช้งาน +4. เขียนเนื้อหาที่แปลงแล้วลงใน `resultPath` + +## ขั้นตอนที่ 5: รันโปรแกรมและตรวจสอบผลลัพธ์ + +สุดท้าย แจ้งผู้ใช้ว่าการแปลงสำเร็จ + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +เมื่อคุณเรียกใช้เมธอด `main` คุณควรเห็นบรรทัดคอนโซลคล้าย ๆ นี้: + +``` +Template conversion completed: src/main/resources/result.html +``` + +เปิด `result.html` ในเบราว์เซอร์ placeholder ทั้งหมดจะถูกแทนที่ และลูป foreach จะสร้างส่วน HTML ที่เหมาะสมแล้ว + +### ตัวอย่างผลลัพธ์ที่คาดหวัง + +สมมติว่า `template.html` ง่าย ๆ มีดังนี้: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +และไฟล์ XML `data.xml` มีดังนี้: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +ไฟล์ `result.html` ที่สร้างขึ้นจะเป็น: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## กรณีขอบและเคล็ดลับปฏิบัติที่ดีที่สุด + +* **Missing placeholders** – เอนจินจะปล่อยตัวบ่งชี้ `{{key}}` ที่ไม่รู้จักไว้โดยไม่เปลี่ยนแปลง คุณสามารถเพิ่มขั้นตอนตรวจสอบที่สแกนเทมเพลตเพื่อหาวงเล็บที่เหลือและบันทึกคำเตือนได้ +* **Large data sets** – หากต้องจัดการกับรายการหลายพันรายการ ควรสตรีมเทมเพลตแทนการโหลดไฟล์ทั้งหมดเข้าสู่หน่วยความจำ การทำงานในปัจจุบันเหมาะกับหน้าเว็บทั่วไป +* **JSON vs. XML** – หากเปลี่ยนเป็น JSON ให้รักษาโครงสร้างเดียวกัน: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` จะทำการแปลงโดยอัตโนมัติ ดังนั้นโค้ดส่วนอื่นจึงไม่ต้องแก้ไข + +* **Encoding** – ตรวจสอบให้แน่ใจว่าไฟล์เทมเพลตและไฟล์ข้อมูลใช้ UTF‑8 เพื่อหลีกเลี่ยงการเสียหายของอักขระ โดยเฉพาะเมื่อสร้าง HTML หลายภาษา + +* **Security** – อย่าเชื่อถือข้อมูลที่ผู้ใช้ให้มาโดยตรงเพื่อแทรกลงใน HTML โดยไม่มีการทำความสะอาด ควร escape ตัวอักษรพิเศษของ HTML หากข้อมูลอาจมี markup อยู่ + +## ตัวอย่างที่สามารถรันได้เต็มรูปแบบ + +ด้านล่างเป็นคลาส Java ที่รวมทุกขั้นตอนไว้ในไฟล์เดียว บันทึกเป็น `TemplateConverter.java` แล้วรันจาก IDE หรือบรรทัดคำสั่ง + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## สิ่งที่คุณควรเรียนต่อไป + +บทเรียนต่อไปนี้ครอบคลุมหัวข้อที่เกี่ยวข้องอย่างใกล้ชิดและต่อยอดจากเทคนิคที่อธิบายในคู่มือนี้ แต่ละแหล่งรวมโค้ดทำงานเต็มรูปแบบพร้อมคำอธิบายทีละขั้นตอน เพื่อช่วยให้คุณเชี่ยวชาญฟีเจอร์ API เพิ่มเติมและสำรวจวิธีการทำงานแบบอื่นในโปรเจกต์ของคุณ + +- [วิธีแปลง HTML เป็น PDF ด้วย Java – ใช้ Aspose.HTML for Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [วิธีแก้ไข HTML ด้วย Aspose.HTML for Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [แปลง HTML เป็น String ด้วย Aspose.HTML for Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/turkish/java/creating-managing-html-documents/_index.md b/html/turkish/java/creating-managing-html-documents/_index.md index 3d0a867c1..a6fea97d6 100644 --- a/html/turkish/java/creating-managing-html-documents/_index.md +++ b/html/turkish/java/creating-managing-html-documents/_index.md @@ -69,6 +69,8 @@ Java için Aspose.HTML kullanarak HTML sandbox oluşturmayı adım adım öğren ### [Java için Aspose.HTML'de HTML Sorgulama – Tam Kılavuz](./how-to-query-html-in-java-complete-tutorial/) ### [Java için Aspose.HTML'de HTML'i Java'da Ayrıştırma – Yükleme, Sorgulama ve Eleman Sayma](./how-to-parse-html-java-load-query-count-elements/) ### [Java'da Asenkron JavaScript Çalıştırma – Adım Adım Tam Kılavuz](./execute-async-javascript-in-java-complete-step-by-step-guide/) +### [Java için Aspose.HTML'de Şablonu Java Şablon Motoru ile HTML'ye Dönüştürme](./how-to-convert-template-to-html-with-a-java-template-engine/) +### [İlk ve Soyad Sütunlarıyla Dinamik HTML Tablosuna Veri Bağlama](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) {{< /blocks/products/pf/tutorial-page-section >}} @@ -104,4 +106,4 @@ Java için Aspose.HTML kullanarak HTML'den metin çıkarma konusunda adım adım {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/turkish/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/turkish/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..9207b2ad9 --- /dev/null +++ b/html/turkish/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,325 @@ +--- +category: general +date: 2026-09-07 +description: dinamik bir HTML tablosunda verileri bağlama – tablo satırlarını nasıl + oluşturacağınızı ve ad ile soyad alanlarını verimli bir şekilde nasıl dolduracağınızı + öğrenin +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: tr +lastmod: 2026-09-07 +og_description: dinamik bir HTML tablosunda verileri bağlama. Bu öğreticide tablo + satırları nasıl oluşturulur, ad ve soyad nasıl gösterilir ve JavaScript ile tablo + satırları nasıl doldurulur gösterilmektedir. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Dinamik bir HTML tabloya veri bağlama – adım adım rehber +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: İlk ve soyad sütunları bulunan dinamik bir HTML tabloya verileri nasıl bağlarsınız +url: /tr/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# İlk ve soyad sütunlarıyla dinamik bir HTML tabloya verileri bağlama + +Eğer **verileri bağlama** ihtiyacınız varsa ve tablo her kayıtla büyüyorsa, bu rehber eksiksiz bir çözüm sunar. Dinamik bir HTML tablo oluşturmayı, tablo satırlarını doldurmayı ve her kişinin ilk ve soyadını tekrarlayan işaretleme yazmadan nasıl görüntüleyeceğinizi göreceksiniz. + +Örnek, herhangi bir modern tarayıcıda çalışan hafif bir şablonlama sözdizimi kullanır, ancak kavramlar Handlebars, Mustache veya sunucu‑tarafı motorlarına da uygulanabilir. Eğitim sonunda kodu projenize kopyalayıp verileri anında bağlamaya başlayabilirsiniz. + +## Bu eğitimde neler ele alınıyor + +* Birden fazla kişi içeren bir veri kaynağını nasıl yapılandırılır +* Her giriş için tekrarlanan yeniden kullanılabilir bir tablo şablonu nasıl oluşturulur +* Verileri nasıl bağlanır ve son HTML işaretlemesi nasıl üretilir +* Tablo satırlarını doldururken yaygın tuzaklar ve bunlardan nasıl kaçınılır + +Harici kütüphaneler gerekmez, ancak aynı desen popüler şablonlama çerçeveleriyle de çalışır. Tek ön koşul temel HTML ve JavaScript bilgisi. + +## Önkoşullar + +* Modern bir tarayıcı (Chrome, Edge, Firefox veya Safari) +* HTML/JavaScript dosyaları için bir editör +* İsteğe bağlı: Kişi koleksiyonunu temsil eden bir JSON dosyası veya JavaScript nesnesi + +## Adım 1: Veri kaynağını tanımlama + +İlk olarak, şablonda kullanılan yapıyı yansıtan bir JavaScript nesnesi oluşturun. Her kişinin bir ilk adı, soyadı ve bir adres nesnesi vardır. + +```html + +``` + +**Neden önemli:** Nesne hiyerarşisi (`Persons.Person`) şablondaki `{{#foreach Persons.Person}}` döngüsüyle eşleşir ve motorun her girişi otomatik olarak yinelemesini sağlar. + +## Adım 2: Tekrarlama bloğu ile tablo şablonunu yazma + +Aşağıdaki şablon, her kişi için `` öğesini tekrarlamak amacıyla basit bir Mustache‑stili sözdizimi (`{{#foreach}}`) kullanır. Şablonu, tarayıcının işleme alana kadar görmezden gelmesi için bir ` +``` + +**Neden önemli:** `{{#foreach Persons.Person}}` yönergesi, motorun her kişi nesnesi için açılış ve kapanış etiketleri arasındaki her şeyi tekrarlamasını söyler. Satır içinde herhangi bir özelliğe (`{{FirstName}}`, `{{LastName}}`, vb.) başvurarak tablo satırlarını dinamik olarak **doldurabilirsiniz**. + +## Adım 3: Küçük bir render fonksiyonu uygulama + +Eğitimin kendi içinde olması gerektiğinden, Mustache‑stili yer tutucuları gerçek değerlerle değiştiren minimal bir renderlayıcı yazacağız. Fonksiyon veri nesnesini dolaşır, tekrarlama bloğunu genişletir ve son HTML'i sayfaya ekler. + +```html + +``` + +**Neden önemli:** Renderlayıcı, tam bir kütüphane kullanmadan programatik olarak **tablo oluşturmayı** gösterir. Ayrıca şablondan son HTML'e dönüşümü netleştirir, bu da kodu daha sonra diğer şablon motorlarına uyarlamanıza yardımcı olur. + +## Adım 4: Oluşturulan tablonun görüneceği bir yer tutucu ekleyin + +Renderlama sonrası scriptin dolduracağı boş bir `
    ` oluşturun. + +```html +
    +``` + +Sayfa yüklendiğinde, script bu `
    ` içeriğini tamamen doldurulmuş tabloyla değiştirir. + +## Adım 5: Sonucu doğrulama + +HTML dosyasını bir tarayıcıda açın. Her kişinin tam adı ve adresini listeleyen bir tablo görmelisiniz: + +| Kişi | Adres | +|---------------|------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Eğer `data.Persons.Person` dizisine daha fazla nesne eklerseniz, tablo otomatik olarak büyür—**tablo satırlarını doldurma** gereksinimini karşılar. + +## Pro ipucu: Boş koleksiyonları ele alma + +Veri dizisi boş olduğunda, renderlayıcı şu anda boş bir tablo başlığı üretir. Daha net bir kullanıcı deneyimi sağlamak için bir koruma ekleyin: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Bu küçük değişiklik, boş bir tablonun görünmesini önler ve kullanıcılara anında geri bildirim sağlar. + +## Yaygın varyasyonlar ve uç durumlar + +| Durum | Ayarlama | +|---------------------------------------|--------------------------------------------------------------------------| +| Sunucu‑tarafı bir motor (ör. Handlebars) kullanmak | Özel `renderTemplate` fonksiyonunu `Handlebars.compile` ile değiştirin ve aynı veri nesnesini geçirin. | +| Satırları alfabetik olarak sıralama ihtiyacı | `renderTemplate` çağırmadan önce `data.Persons.Person` dizisini sıralayın. | +| Telefon numarası için bir sütun ekleme | `` öğesini `{{Phone}}` ile genişletin ve her kişi nesnesine `Phone` özelliğini ekleyin. | +| Büyük veri setleri (yüzlerce satır) | Satırları parçalar halinde renderlayın veya UI’nın yanıt verebilirliğini korumak için sanal kaydırma kullanın. | + +## Tam çalışan örnek + +Aşağıda, `index.html` içine kopyalayıp‑yapıştırabileceğiniz tam HTML dosyası bulunmaktadır. Yukarıda tartışılan tüm parçaları içerir. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Beklenen çıktı** + +Sayfa, her biri bir kişinin tam adı ve biçimlendirilmiş adresini gösteren iki satırlı bir tablo renderlar. `Person` dizisine daha fazla nesne eklemek otomatik olarak yeni satırlar ekler—verilerden **tablo oluşturmayı** gösterir. + +## Sonuç + +Artık **verileri bağlamayı** bir **dinamik HTML tabloya**, her kayıt için satır oluşturmayı ve adresin yanında ilk ve soyad değerlerini görüntülemeyi biliyorsunuz. + +## Sonra Ne Öğrenmelisiniz? + +Aşağıdaki eğitimler, bu rehberde gösterilen tekniklere dayanan ve yakından ilgili konuları kapsar. Her kaynak, ek API özelliklerini öğrenmenize ve kendi projelerinizde alternatif uygulama yaklaşımlarını keşfetmenize yardımcı olacak adım adım açıklamalar içeren eksiksiz çalışan kod örnekleri sunar. + +- [CSS Nasıl Eklenir – Aspose.HTML for Java'da HTML Belgelerine Satır İçi CSS Ekleme](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [Aspose.HTML for Java'da HTML Belge Ağacını Düzenleme](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [Aspose HTML'de JavaScript Nasıl Etkinleştirilir – HTML Yükle & Metin Al](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/turkish/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/turkish/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..4cd1108fe --- /dev/null +++ b/html/turkish/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,237 @@ +--- +category: general +date: 2026-09-07 +description: Java kullanarak şablonu HTML'ye nasıl dönüştürülür. Şablondan HTML üretmeyi + öğrenin, foreach döngülerini etkinleştirin ve tam bir Java şablon motoru örneğini + görün. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: tr +lastmod: 2026-09-07 +og_description: Java kullanarak şablonu HTML'ye nasıl dönüştüreceğinizi öğrenin. Bu + öğretici, tam bir Java şablon motoru örneği, bir şablondan HTML nasıl oluşturulur + ve foreach nasıl kullanılır konularını gösterir. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Java ile şablonu HTML'ye dönüştürme – adım adım rehber +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Java şablon motoru ile şablonu HTML'ye nasıl dönüştürürsünüz +url: /tr/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Şablonu Java şablon motoru ile HTML'e nasıl dönüştürürsünüz + +Eğer **şablonu nasıl dönüştürürsünüz** hazır‑servis bir HTML sayfasına ihtiyacınız varsa, bu kılavuz eksiksiz bir çözüm sunar. **Şablondan HTML oluşturma** dosyalarını nasıl **foreach kullanılır** ile döngüleyebileceğinizi görecek ve XML ya da JSON veri kaynaklarıyla çalışan bir **java şablon motoru örneği** üzerinden ilerleyeceksiniz. + +Bu öğretici, tek bir Java programında **html şablonunu dönüştürme** dosyalarını nasıl yapacağınızı kapsar. Sonunda bir şablonu okuyan, veriyi enjekte eden ve son HTML dosyasını diske yazan çalıştırılabilir bir projeniz olacak. + +## Önkoşullar + +Başlamadan önce şunların kurulu olduğundan emin olun: + +* JDK 17 veya daha yeni bir sürüm +* Maven ya da Gradle gibi bir derleme aracı (kod yalnızca standart Java sınıflarını kullanır) +* Java I/O ve XML/JSON formatlarına temel aşinalık + +Temel adımlar için harici kütüphanelere gerek yoktur, ancak isterseniz basit `Template` sınıflarını üçüncü‑taraf bir motorla değiştirebilirsiniz. + +## Adım 1: Dosya yollarını ve şablon işaretçilerini ayarlayın + +İlk adım, şablonun, veri kaynağının ve çıktının nerede bulunacağını tanımlar. Şablon, motorun değiştireceği `{{...}}` yer tutucularını içerir. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Neden önemli*: Yolları sabit kodlamak, programı ekstra yapılandırma olmadan herhangi bir IDE'den çalıştırmanızı sağlar. Daha fazla esneklik için bu değerleri komut‑satırı argümanları olarak da geçirebilirsiniz. + +## Adım 2: Veri kaynağını (XML veya JSON) yükleyin + +Motor, yer tutucu adlarını değerlere eşleyen bir veri nesnesine ihtiyaç duyar. `TemplateData` sınıfı XML ve JSON ayrıştırmasını soyutlar. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +`dataPath` bir JSON dosyasına işaret ediyorsa, `TemplateData` formatı otomatik olarak algılar ve aynı anahtar/değer haritasını oluşturur. Bu esneklik, **şablondan html oluşturma** farklı ortamlar içinde faydalıdır. + +## Adım 3: Döngü için foreach yönergesini etkinleştirin + +Birçok şablon, bir koleksiyondaki her öğe için bir bloğu tekrarlamak zorundadır. foreach yönergesini etkinleştirmek, motorun `{{#foreach items}} … {{/foreach}}` bloklarını işlemesini sağlar. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**foreach nasıl kullanılır**: `template.html` içinde şunu yazabilirsiniz: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +Motor bu bloğu gördüğünde, `TemplateData` tarafından sağlanan `products` koleksiyonundaki her giriş için `
  • ` öğesini tekrar eder. + +## Adım 4: Şablonu dönüştürün ve sonucu yazın + +Şimdi motor, tüm işaretçileri gerçek değerlerle değiştirir ve son HTML dosyasını yazar. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +`convertTemplate` yöntemi üç eylemi gerçekleştirir: + +1. `template.html` dosyasını belleğe okur. +2. Her `{{key}}` ifadesini `data` içindeki karşılık gelen değerle değiştirir. +3. Etkinleştirilmiş foreach bloklarını işler. +4. Dönüştürülmüş içeriği `resultPath` konumuna yazar. + +## Adım 5: Programı çalıştırın ve çıktıyı doğrulayın + +Son olarak, dönüşümün başarılı olduğunu kullanıcıya bildirin. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +`main` metodunu çalıştırdığınızda, aşağıdaki gibi bir konsol satırı görmelisiniz: + +``` +Template conversion completed: src/main/resources/result.html +``` + +`result.html` dosyasını bir tarayıcıda açın. Tüm yer tutucular değiştirilecek ve foreach döngüleri uygun HTML parçacıklarını üretecektir. + +### Beklenen çıktı örneği + +Basit bir `template.html` dosyası: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +Ve bir XML `data.xml` dosyası: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +Oluşturulan `result.html` şöyle olacaktır: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Kenar durumları ve en iyi uygulama ipuçları + +* **Eksik yer tutucular** – Motor, bilinmeyen `{{key}}` işaretçilerini değiştirmeden bırakır. Şablonda kalan süslü parantezleri tarayan ve bir uyarı kaydeden bir doğrulama adımı ekleyebilirsiniz. +* **Büyük veri setleri** – Binlerce öğe için, tüm dosyayı belleğe yüklemek yerine şablonu akış olarak işlemek daha iyidir. Mevcut uygulama tipik web sayfaları için yeterlidir. +* **JSON vs. XML** – JSON’a geçerseniz aynı yapıyı koruyun: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` otomatik olarak ayrıştırır, böylece kodun geri kalanı değişmez. + +* **Kodlama** – Şablon ve veri dosyalarının UTF‑8 kullandığından emin olun; özellikle çok dilli HTML üretirken karakter bozulmalarını önler. + +* **Güvenlik** – Kullanıcı tarafından sağlanan veriyi doğrudan HTML’e enjekte etmeden önce temizlemeyi ihmal etmeyin. Veri işaretleme içerebiliyorsa HTML özel karakterlerini kaçırın. + +## Tam çalıştırılabilir örnek + +Aşağıda tüm adımları bir araya getiren bağımsız bir Java sınıfı bulunuyor. `TemplateConverter.java` adıyla kaydedin ve IDE’nizden ya da komut satırından çalıştırın. + + + +## Sonraki Öğrenmeniz Gerekenler + +Aşağıdaki öğreticiler, bu rehberde gösterilen tekniklere dayanan ilgili konuları kapsar. Her kaynak, adım‑adım açıklamalarla tam çalışan kod örnekleri içerir ve ek API özelliklerini ustalaşmanıza ve projelerinizde alternatif uygulama yaklaşımlarını keşfetmenize yardımcı olur. + +- [How to Convert HTML to PDF Java – Using Aspose.HTML for Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [How to Edit HTML Using Aspose.HTML for Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Convert HTML to String using Aspose.HTML for Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/vietnamese/java/creating-managing-html-documents/_index.md b/html/vietnamese/java/creating-managing-html-documents/_index.md index 707525630..eadc99829 100644 --- a/html/vietnamese/java/creating-managing-html-documents/_index.md +++ b/html/vietnamese/java/creating-managing-html-documents/_index.md @@ -55,6 +55,8 @@ Tìm hiểu cách tải, thao tác và lưu tài liệu HTML bằng Aspose.HTML Tìm hiểu cách tải tài liệu HTML từ luồng bằng Aspose.HTML cho Java. Hướng dẫn này cung cấp hướng dẫn từng bước để thao tác HTML liền mạch. ### [Tạo tài liệu HTML từ chuỗi trong Aspose.HTML cho Java](./create-html-documents-from-string/) Tìm hiểu cách tạo tài liệu HTML từ chuỗi trong Aspose.HTML cho Java với hướng dẫn từng bước này. +### [Cách chuyển đổi mẫu thành HTML bằng công cụ mẫu Java](./how-to-convert-template-to-html-with-a-java-template-engine/) +Hướng dẫn chi tiết cách sử dụng công cụ mẫu Java để chuyển đổi template thành tài liệu HTML trong Aspose.HTML cho Java. ### [Tải tài liệu HTML từ URL trong Aspose.HTML cho Java](./load-html-documents-from-url/) Khám phá cách dễ dàng tải tài liệu HTML từ URL trong Java bằng Aspose.HTML. Có kèm hướng dẫn từng bước. ### [Lặp qua NodeList trong Java – Đọc HTML và Lấy src ảnh](./iterate-nodelist-java-read-html-get-image-src/) @@ -73,6 +75,7 @@ Khám phá cách truy vấn tài liệu HTML trong Java một cách chi tiết, Tìm hiểu cách tải tài liệu HTML, truy vấn và đếm các phần tử trong Java bằng Aspose.HTML với hướng dẫn chi tiết. ### [Thực thi JavaScript bất đồng bộ trong Java – Hướng dẫn chi tiết từng bước](./execute-async-javascript-in-java-complete-step-by-step-guide/) Học cách thực thi JavaScript bất đồng bộ trong Java bằng Aspose.HTML với hướng dẫn chi tiết từng bước. +### [Cách liên kết dữ liệu tới bảng HTML động với các cột Họ và Tên trong Aspose.HTML cho Java](./how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/) {{< /blocks/products/pf/tutorial-page-section >}} @@ -99,4 +102,4 @@ Học cách trích xuất nội dung văn bản từ tài liệu HTML trong Java {{< /blocks/products/pf/main-container >}} {{< /blocks/products/pf/main-wrap-class >}} -{{< blocks/products/products-backtop-button >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/vietnamese/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md b/html/vietnamese/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md new file mode 100644 index 000000000..1a5212ec7 --- /dev/null +++ b/html/vietnamese/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/_index.md @@ -0,0 +1,324 @@ +--- +category: general +date: 2026-09-07 +description: cách ràng buộc dữ liệu trong bảng HTML động – học cách tạo các dòng bảng + và điền các trường họ và tên một cách hiệu quả +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to bind data +- dynamic html table +- first and last name +- how to generate table +- populate table rows +language: vi +lastmod: 2026-09-07 +og_description: cách liên kết dữ liệu trong bảng HTML động. Hướng dẫn này cho thấy + cách tạo các hàng bảng, hiển thị họ và tên, và điền dữ liệu vào các hàng bảng bằng + JavaScript. +og_image_alt: Screenshot of a dynamic HTML table populated with first and last names + after binding data +og_title: Cách liên kết dữ liệu vào bảng HTML động – hướng dẫn từng bước +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: how to bind data in a dynamic HTML table – learn how to generate table + rows and populate first and last name fields efficiently + headline: How to bind data to a dynamic HTML table with first and last name columns + type: TechArticle +tags: +- data binding +- html table +- templating +title: Cách liên kết dữ liệu vào bảng HTML động với các cột họ và tên +url: /vi/java/creating-managing-html-documents/how-to-bind-data-to-a-dynamic-html-table-with-first-and-last/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Cách ràng buộc dữ liệu vào bảng HTML động với các cột họ và tên + +Nếu bạn cần **cách ràng buộc dữ liệu** vào một bảng mà sẽ mở rộng theo từng bản ghi, hướng dẫn này cung cấp giải pháp hoàn chỉnh. Bạn sẽ thấy cách tạo bảng HTML động, điền các hàng bảng, và hiển thị họ và tên của mỗi người mà không phải viết markup lặp lại. + +Ví dụ sử dụng cú pháp mẫu nhẹ nhàng hoạt động trong bất kỳ trình duyệt hiện đại nào, nhưng các khái niệm cũng áp dụng cho Handlebars, Mustache, hoặc các engine phía máy chủ. Khi kết thúc tutorial, bạn có thể sao chép mã vào dự án và bắt đầu ràng buộc dữ liệu ngay lập tức. + +## Những gì tutorial này đề cập + +* Cách cấu trúc nguồn dữ liệu chứa nhiều người +* Cách tạo mẫu bảng có thể tái sử dụng và lặp lại cho mỗi mục nhập +* Cách ràng buộc dữ liệu và tạo markup HTML cuối cùng +* Những lỗi thường gặp khi điền các hàng bảng và cách tránh chúng + +Không cần thư viện bên ngoài, mặc dù cùng một mẫu cũng hoạt động với các framework mẫu phổ biến. Yêu cầu duy nhất là kiến thức cơ bản về HTML và JavaScript. + +## Điều kiện tiên quyết + +* Trình duyệt hiện đại (Chrome, Edge, Firefox hoặc Safari) +* Trình soạn thảo cho các tệp HTML/JavaScript +* Tùy chọn: tệp JSON hoặc đối tượng JavaScript đại diện cho bộ sưu tập người + +## Bước 1: Định nghĩa nguồn dữ liệu + +Đầu tiên, tạo một đối tượng JavaScript phản ánh cấu trúc được sử dụng trong mẫu. Mỗi người có họ, tên và một đối tượng địa chỉ. + +```html + +``` + +**Tại sao điều này quan trọng:** Cây đối tượng (`Persons.Person`) khớp với vòng lặp `{{#foreach Persons.Person}}` trong mẫu, cho phép engine tự động lặp qua mọi mục nhập. + +## Bước 2: Viết mẫu bảng với khối lặp + +Mẫu dưới đây sử dụng cú pháp kiểu Mustache đơn giản (`{{#foreach}}`) để lặp lại `` cho mỗi người. Đặt mẫu trong thẻ ` +``` + +**Tại sao điều này quan trọng:** Chỉ thị `{{#foreach Persons.Person}}` nói cho engine biết lặp lại mọi thứ giữa thẻ mở và thẻ đóng cho mỗi đối tượng người. Bên trong hàng bạn có thể tham chiếu bất kỳ thuộc tính nào (`{{FirstName}}`, `{{LastName}}`, v.v.) để **điền các hàng bảng** một cách động. + +## Bước 3: Triển khai hàm render nhỏ + +Vì tutorial phải tự chứa, chúng ta sẽ viết một renderer tối thiểu thay thế các placeholder kiểu Mustache bằng giá trị thực. Hàm này duyệt qua đối tượng dữ liệu, mở rộng khối lặp, và chèn HTML cuối cùng vào trang. + +```html + +``` + +**Tại sao điều này quan trọng:** Renderer minh họa **cách tạo bảng** markup một cách lập trình mà không cần kéo toàn bộ thư viện. Nó cũng làm rõ quá trình chuyển đổi từ mẫu sang HTML cuối cùng, giúp bạn dễ dàng áp dụng mã cho các engine mẫu khác sau này. + +## Bước 4: Thêm vị trí giữ chỗ cho bảng được tạo + +Tạo một `
    ` trống mà script sẽ điền sau khi render. + +```html +
    +``` + +Khi trang tải, script sẽ thay thế nội dung của `
    ` này bằng bảng đã được điền đầy đủ. + +## Bước 5: Kiểm tra kết quả + +Mở tệp HTML trong trình duyệt. Bạn sẽ thấy một bảng liệt kê họ và tên đầy đủ cùng địa chỉ của mỗi người: + +| Người | Địa chỉ | +|-----------------|---------------------------------| +| Alice Johnson | Maple 12A, Springfield | +| Bob Smith | Oak 34B, Riverdale | + +Nếu bạn thêm nhiều đối tượng hơn vào mảng `data.Persons.Person`, bảng sẽ tự động mở rộng—đáp ứng yêu cầu **điền các hàng bảng**. + +## Mẹo chuyên nghiệp: xử lý bộ sưu tập rỗng + +Khi mảng dữ liệu trống, renderer hiện tại sẽ xuất ra một tiêu đề bảng rỗng. Để cung cấp trải nghiệm người dùng rõ ràng hơn, hãy thêm một kiểm tra: + +```javascript +if (items.length === 0) { + return '

    No records found.

    '; +} +``` + +Thay đổi nhỏ này ngăn không cho bảng trống xuất hiện và cung cấp phản hồi ngay cho người dùng. + +## Các biến thể phổ biến và trường hợp góc cạnh + +| Tình huống | Điều chỉnh | +|----------------------------------------|----------------------------------------------------------------------------| +| Sử dụng engine phía máy chủ (ví dụ: Handlebars) | Thay thế `renderTemplate` tùy chỉnh bằng `Handlebars.compile` và truyền cùng một đối tượng dữ liệu. | +| Cần sắp xếp các hàng theo thứ tự alphabet | Sắp xếp `data.Persons.Person` trước khi gọi `renderTemplate`. | +| Thêm cột số điện thoại | Mở rộng `` bằng `{{Phone}}` và bao gồm `Phone` trong mỗi đối tượng người. | +| Bộ dữ liệu lớn (hàng hàng trăm) | Render các hàng theo khối hoặc sử dụng cuộn ảo để giữ UI phản hồi nhanh. | + +## Ví dụ hoàn chỉnh hoạt động + +Dưới đây là tệp HTML đầy đủ mà bạn có thể sao chép‑dán vào `index.html`. Nó chứa tất cả các phần đã thảo luận ở trên. + +```html + + + + + How to bind data to a dynamic HTML table + + + + +

    Dynamic HTML table bound to JavaScript data

    + + + + + + + + +
    + + + + + + +``` + +**Kết quả mong đợi** + +Trang sẽ hiển thị một bảng với hai hàng, mỗi hàng hiển thị họ và tên đầy đủ cùng địa chỉ đã định dạng của một người. Thêm nhiều đối tượng vào mảng `Person` sẽ tự động thêm các hàng mới—chứng minh **cách tạo bảng** từ dữ liệu. + +## Kết luận + +Bây giờ bạn đã biết **cách ràng buộc dữ liệu** vào một **bảng HTML động**, tạo các hàng cho mỗi bản ghi, và hiển thị giá trị họ và tên cùng địa chỉ. + +## Bạn nên học gì tiếp theo? + +Các tutorial sau đây đề cập đến các chủ đề liên quan chặt chẽ, xây dựng trên các kỹ thuật đã được trình bày trong hướng dẫn này. Mỗi tài nguyên bao gồm mã mẫu hoàn chỉnh với giải thích từng bước để giúp bạn làm chủ các tính năng API bổ sung và khám phá các cách triển khai thay thế trong dự án của mình. + +- [How to Add CSS – Inline CSS to HTML Documents in Aspose.HTML for Java](/html/english/java/editing-html-documents/add-inline-css-html-documents/) +- [How to Edit HTML Document Tree in Aspose.HTML for Java](/html/english/java/editing-html-documents/edit-html-document-tree/) +- [How to Enable JavaScript in Aspose HTML – Load HTML & Get Text](/html/english/java/advanced-usage/how-to-enable-javascript-in-aspose-html-load-html-get-text/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file diff --git a/html/vietnamese/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md b/html/vietnamese/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md new file mode 100644 index 000000000..0dc1db30f --- /dev/null +++ b/html/vietnamese/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/_index.md @@ -0,0 +1,345 @@ +--- +category: general +date: 2026-09-07 +description: Cách chuyển đổi template sang HTML bằng Java. Tìm hiểu cách tạo HTML + từ template, bật vòng lặp foreach và xem ví dụ đầy đủ về engine template Java. +draft: false +images: +- PLACEHOLDER_URL/og-image.png +keywords: +- how to convert template +- generate html from template +- how to use foreach +- java template engine example +- convert html template +language: vi +lastmod: 2026-09-07 +og_description: Cách chuyển đổi mẫu sang HTML bằng Java. Hướng dẫn này trình bày một + ví dụ đầy đủ về công cụ mẫu Java, cách tạo HTML từ mẫu và cách sử dụng foreach. +og_image_alt: Screenshot showing the resulting HTML file after template conversion +og_title: Cách chuyển đổi mẫu sang HTML bằng Java – hướng dẫn từng bước +schemas: +- author: Aspose + dateModified: '2026-09-07' + description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + headline: How to convert template to HTML with a Java template engine + type: TechArticle +- description: How to convert template to HTML using Java. Learn to generate HTML + from a template, enable foreach loops, and see a full java template engine example. + name: How to convert template to HTML with a Java template engine + steps: + - name: Reads `template.html` into memory. + text: Reads `template.html` into memory. + - name: Substitutes each `{{key}}` with the corresponding value from `data`. + text: Substitutes each `{{key}}` with the corresponding value from `data`. + - name: Processes any enabled foreach blocks. + text: Processes any enabled foreach blocks. + - name: Writes the transformed content to `resultPath`. + text: Writes the transformed content to `resultPath`. + type: HowTo +tags: +- Java +- template engine +- HTML generation +title: Cách chuyển đổi mẫu sang HTML bằng công cụ mẫu Java +url: /vi/java/creating-managing-html-documents/how-to-convert-template-to-html-with-a-java-template-engine/ +--- + +{{< blocks/products/pf/main-wrap-class >}} +{{< blocks/products/pf/main-container >}} +{{< blocks/products/pf/tutorial-page-section >}} + +# Cách chuyển đổi mẫu thành HTML bằng công cụ mẫu Java + +Nếu bạn cần **how to convert template** thành một trang HTML sẵn sàng phục vụ, hướng dẫn này cung cấp giải pháp hoàn chỉnh. Bạn sẽ thấy cách **generate HTML from template** các tệp, bật vòng lặp với **how to use foreach**, và đi qua một **java template engine example** hoạt động với nguồn dữ liệu XML hoặc JSON. + +Bài hướng dẫn bao phủ mọi thứ cần thiết để **convert html template** các tệp trong một chương trình Java duy nhất. Khi kết thúc, bạn sẽ có một dự án có thể chạy được, đọc mẫu, chèn dữ liệu và ghi tệp HTML cuối cùng ra đĩa. + +## Yêu cầu trước + +* JDK 17 hoặc phiên bản mới hơn đã được cài đặt +* Một công cụ xây dựng như Maven hoặc Gradle (mã chỉ sử dụng các lớp Java tiêu chuẩn) +* Kiến thức cơ bản về Java I/O và định dạng XML/JSON + +Không cần thư viện bên ngoài cho các bước cốt lõi, nhưng bạn có thể thay thế các lớp `Template` đơn giản bằng một engine của bên thứ ba nếu muốn. + +## Bước 1: Thiết lập đường dẫn tệp và dấu hiệu mẫu + +Bước đầu tiên xác định vị trí của mẫu, nguồn dữ liệu và đầu ra. Mẫu chứa các placeholder `{{...}}` mà engine sẽ thay thế. + +```java +// Step 1: Define paths to the template, data source, and output file +String templatePath = "src/main/resources/template.html"; // contains {{...}} expressions +String dataPath = "src/main/resources/data.xml"; // can also be a JSON file +String resultPath = "src/main/resources/result.html"; +``` + +*Why this matters*: Việc mã hóa cứng các đường dẫn cho phép bạn chạy chương trình từ bất kỳ IDE nào mà không cần cấu hình thêm. Bạn cũng có thể truyền các giá trị này dưới dạng đối số dòng lệnh để tăng tính linh hoạt. + +## Bước 2: Tải nguồn dữ liệu (XML hoặc JSON) + +Engine cần một đối tượng dữ liệu ánh xạ tên placeholder tới giá trị. Lớp `TemplateData` trừu tượng hoá việc phân tích XML và JSON. + +```java +// Step 2: Load the data source (XML or JSON) that will fill the template +TemplateData data = new TemplateData(dataPath); +``` + +Nếu `dataPath` trỏ tới một tệp JSON, `TemplateData` sẽ tự động phát hiện định dạng và xây dựng cùng một bản đồ key/value. Tính linh hoạt này hữu ích khi bạn **generate html from template** trong các môi trường khác nhau. + +## Bước 3: Bật chỉ thị foreach cho vòng lặp + +Nhiều mẫu cần lặp lại một khối cho mỗi mục trong một bộ sưu tập. Bật chỉ thị foreach cho engine xử lý các khối `{{#foreach items}} … {{/foreach}}`. + +```java +// Step 3: Enable the foreach directive to allow loop constructs in the template +TemplateLoadOptions loadOptions = new TemplateLoadOptions(); +loadOptions.setEnableForeachDirective(true); +``` + +**How to use foreach**: Trong `template.html` bạn có thể viết: + +```html +
      +{{#foreach products}} +
    • {{name}} – ${{price}}
    • +{{/foreach}} +
    +``` + +Khi engine gặp khối này, nó sẽ lặp lại phần tử `
  • ` cho mỗi mục trong bộ sưu tập `products` được cung cấp bởi `TemplateData`. + +## Bước 4: Chuyển đổi mẫu và ghi kết quả + +Bây giờ engine thay thế tất cả các dấu hiệu bằng giá trị thực và ghi tệp HTML cuối cùng. + +```java +// Step 4: Convert the template – replace markers with data values and save the result +Template.convertTemplate(templatePath, data, loadOptions, resultPath); +``` + +Phương thức `convertTemplate` thực hiện ba hành động: + +1. Đọc `template.html` vào bộ nhớ. +2. Thay thế mỗi `{{key}}` bằng giá trị tương ứng từ `data`. +3. Xử lý bất kỳ khối foreach nào đã được bật. +4. Ghi nội dung đã chuyển đổi vào `resultPath`. + +## Bước 5: Chạy chương trình và xác minh đầu ra + +Cuối cùng, thông báo cho người dùng rằng việc chuyển đổi đã thành công. + +```java +// Step 5: Inform that the conversion has finished +System.out.println("Template conversion completed: " + resultPath); +``` + +Khi bạn thực thi phương thức `main`, bạn sẽ thấy một dòng console tương tự như: + +``` +Template conversion completed: src/main/resources/result.html +``` + +Mở `result.html` trong trình duyệt. Tất cả các placeholder sẽ được thay thế, và bất kỳ vòng lặp foreach nào sẽ tạo ra các đoạn HTML phù hợp. + +### Ví dụ đầu ra mong đợi + +Với một `template.html` đơn giản: + +```html +

    {{title}}

    +

    {{description}}

    + +
      +{{#foreach items}} +
    • {{name}} – {{quantity}}
    • +{{/foreach}} +
    +``` + +Và một tệp XML `data.xml`: + +```xml + + Shopping List + Items you need to buy + + Apples4 + Bread1 + Milk2 + + +``` + +Kết quả `result.html` được tạo sẽ là: + +```html +

    Shopping List

    +

    Items you need to buy

    + +
      + +
    • Apples – 4
    • + +
    • Bread – 1
    • + +
    • Milk – 2
    • + +
    +``` + +## Các trường hợp đặc biệt và mẹo thực hành tốt + +* **Missing placeholders** – Engine để lại các dấu `{{key}}` không biết nguyên trạng. Bạn có thể thêm bước xác thực để quét mẫu tìm các dấu ngoặc còn lại và ghi cảnh báo. +* **Large data sets** – Đối với hàng nghìn mục, hãy cân nhắc streaming mẫu thay vì tải toàn bộ tệp vào bộ nhớ. Cài đặt hiện tại phù hợp cho các trang web thông thường. +* **JSON vs. XML** – Nếu bạn chuyển sang JSON, giữ nguyên cấu trúc: + + ```json + { + "title": "Shopping List", + "description": "Items you need to buy", + "items": [ + {"name": "Apples", "quantity": 4}, + {"name": "Bread", "quantity": 1}, + {"name": "Milk", "quantity": 2} + ] + } + ``` + + `TemplateData` sẽ tự động phân tích, vì vậy phần còn lại của mã vẫn không thay đổi. +* **Encoding** – Đảm bảo cả tệp mẫu và dữ liệu đều sử dụng UTF‑8 để tránh hỏng ký tự, đặc biệt khi tạo HTML đa ngôn ngữ. +* **Security** – Không nên tin dữ liệu do người dùng cung cấp để chèn trực tiếp vào HTML mà không qua xử lý. Hãy escape các ký tự đặc biệt của HTML nếu dữ liệu có thể chứa markup. + +## Ví dụ đầy đủ có thể chạy + +Dưới đây là một lớp Java tự chứa, kết hợp tất cả các bước. Lưu lại dưới tên `TemplateConverter.java` và chạy từ IDE hoặc dòng lệnh. + +```java +import java.io.*; +import java.nio.file.*; +import java.util.*; +import javax.xml.parsers.*; +import org.w3c.dom.*; +import com.fasterxml.jackson.databind.*; +import com.fasterxml.jackson.core.type.TypeReference; + +/** + * Demonstrates how to convert template to HTML using a simple Java template engine. + */ +public class TemplateConverter { + + public static void main(String[] args) throws Exception { + // Step 1: Define paths + String templatePath = "src/main/resources/template.html"; + String dataPath = "src/main/resources/data.xml"; + String resultPath = "src/main/resources/result.html"; + + // Step 2: Load data (XML or JSON) + TemplateData data = new TemplateData(dataPath); + + // Step 3: Enable foreach loops + TemplateLoadOptions loadOptions = new TemplateLoadOptions(); + loadOptions.setEnableForeachDirective(true); + + // Step 4: Perform conversion + Template.convertTemplate(templatePath, data, loadOptions, resultPath); + + // Step 5: Notify user + System.out.println("Template conversion completed: " + resultPath); + } +} + +/** + * Holds key/value pairs loaded from XML or JSON. + */ +class TemplateData { + private final Map map = new HashMap<>(); + + public TemplateData(String path) throws Exception { + if (path.endsWith(".json")) { + loadJson(path); + } else if (path.endsWith(".xml")) { + loadXml(path); + } else { + throw new IllegalArgumentException("Unsupported data format: " + path); + } + } + + private void loadJson(String path) throws IOException { + ObjectMapper mapper = new ObjectMapper(); + Map jsonMap = mapper.readValue( + Files.readAllBytes(Paths.get(path)), + new TypeReference>() {}); + map.putAll(jsonMap); + } + + private void loadXml(String path) throws Exception { + DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); + DocumentBuilder builder = factory.newDocumentBuilder(); + Document doc = builder.parse(new File(path)); + doc.getDocumentElement().normalize(); + traverseNode(doc.getDocumentElement(), ""); + } + + private void traverseNode(Node node, String prefix) { + NodeList children = node.getChildNodes(); + for (int i = 0; i < children.getLength(); i++) { + Node child = children.item(i); + if (child.getNodeType() == Node.ELEMENT_NODE) { + String key = prefix.isEmpty() ? child.getNodeName() : prefix + "." + child.getNodeName(); + if (child.hasChildNodes() && child.getFirstChild().getNodeType() == Node.ELEMENT_NODE) { + // Nested element – recurse + traverseNode(child, key); + } else { + map.put(key, child.getTextContent().trim()); + } + } + } + } + + public Object get(String key) { + return map.get(key); + } + + public Map getAll() { + return map; + } +} + +/** + * Options that control how the template is loaded. + */ +class TemplateLoadOptions { + private boolean enableForeachDirective = false; + + public void setEnableForeachDirective(boolean enable) { + this.enableForeachDirective = enable; + } + + public boolean isForeachEnabled() { + return enableForeachDirective; + } +} + +/** + * Core engine that performs placeholder replacement and foreach processing. + */ +class Template { + public static void convertTemplate(String templatePath, + TemplateData data, + Template + + +## Bạn nên học gì tiếp theo? + +Các hướng dẫn sau đây bao gồm các chủ đề liên quan chặt chẽ, xây dựng trên các kỹ thuật được trình bày trong hướng dẫn này. Mỗi tài nguyên bao gồm các ví dụ mã hoàn chỉnh với giải thích từng bước để giúp bạn nắm vững các tính năng API bổ sung và khám phá các cách triển khai thay thế trong dự án của mình. + +- [How to Convert HTML to PDF Java – Using Aspose.HTML for Java](/html/english/java/conversion-html-to-other-formats/convert-html-to-pdf/) +- [How to Edit HTML Using Aspose.HTML for Java](/html/english/java/editing-html-documents/advanced-html-document-tree-editing/) +- [Convert HTML to String using Aspose.HTML for Java](/html/english/java/editing-html-documents/manage-inner-outer-html-properties/) + +{{< /blocks/products/pf/tutorial-page-section >}} +{{< /blocks/products/pf/main-container >}} +{{< /blocks/products/pf/main-wrap-class >}} +{{< blocks/products/products-backtop-button >}} \ No newline at end of file