[{"data":1,"prerenderedAt":938},["ShallowReactive",2],{"navigation_docs_en":3,"-en-owo-ui-components-components-templates":237,"-en-owo-ui-components-components-templates-surround":933},[4,15,69,122],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":14},"Getting Started with Docs","i-lucide-home","/en/getting-started","en/1.getting-started",[10],{"title":11,"path":12,"stem":13,"icon":6},"Introduction","/en/getting-started/introduction","en/1.getting-started/1.introduction",false,{"title":16,"path":17,"stem":18,"children":19,"page":14},"owo-ui Components","/en/owo-ui-components","en/2.owo-ui-components",[20,23],{"title":11,"path":21,"stem":22,"icon":6},"/en/owo-ui-components/introduction","en/2.owo-ui-components/2.introduction",{"title":24,"icon":25,"path":26,"stem":27,"children":28,"page":14},"Components","i-lucide-layout","/en/owo-ui-components/components","en/2.owo-ui-components/3.components",[29,33,37,41,45,49,53,57,61,65],{"title":30,"path":31,"stem":32},"Button","/en/owo-ui-components/components/button","en/2.owo-ui-components/3.components/button",{"title":34,"path":35,"stem":36},"Checkbox","/en/owo-ui-components/components/checkbox","en/2.owo-ui-components/3.components/checkbox",{"title":38,"path":39,"stem":40},"Collapsible Container","/en/owo-ui-components/components/collapsible-container","en/2.owo-ui-components/3.components/collapsible-container",{"title":42,"path":43,"stem":44},"Dropdown","/en/owo-ui-components/components/dropdown","en/2.owo-ui-components/3.components/dropdown",{"title":46,"path":47,"stem":48},"Flow Layout","/en/owo-ui-components/components/flow-layout","en/2.owo-ui-components/3.components/flow-layout",{"title":50,"path":51,"stem":52},"Grid Layout","/en/owo-ui-components/components/grid-layout","en/2.owo-ui-components/3.components/grid-layout",{"title":54,"path":55,"stem":56},"Label","/en/owo-ui-components/components/label","en/2.owo-ui-components/3.components/label",{"title":58,"path":59,"stem":60},"Scroll Container","/en/owo-ui-components/components/scroll-container","en/2.owo-ui-components/3.components/scroll-container",{"title":62,"path":63,"stem":64},"Slider","/en/owo-ui-components/components/slider","en/2.owo-ui-components/3.components/slider",{"title":66,"path":67,"stem":68},"Templates","/en/owo-ui-components/components/templates","en/2.owo-ui-components/3.components/templates",{"title":70,"path":71,"stem":72,"children":73,"page":14},"Nexus","/en/nexus","en/3.nexus",[74,77,82],{"title":11,"path":75,"stem":76,"icon":6},"/en/nexus/introduction","en/3.nexus/2.introduction",{"title":78,"path":79,"stem":80,"icon":81},"Deployment","/en/nexus/deployment","en/3.nexus/3.deployment","i-lucide-rocket",{"title":83,"path":84,"stem":85,"children":86,"page":14},"Endpoints","/en/nexus/endpoints","en/3.nexus/endpoints",[87,91,95,99,102,106,110,114,118],{"title":88,"path":89,"stem":90},"Authentication","/en/nexus/endpoints/authentication","en/3.nexus/endpoints/1.authentication",{"title":92,"path":93,"stem":94},"Rate Limiting","/en/nexus/endpoints/rate-limiting","en/3.nexus/endpoints/2.rate-limiting",{"title":96,"path":97,"stem":98},"Error Handling","/en/nexus/endpoints/error-handling","en/3.nexus/endpoints/3.error-handling",{"title":83,"path":100,"stem":101},"/en/nexus/endpoints/_dir","en/3.nexus/endpoints/_dir",{"title":103,"path":104,"stem":105},"Album","/en/nexus/endpoints/albums","en/3.nexus/endpoints/albums",{"title":107,"path":108,"stem":109},"Blog","/en/nexus/endpoints/blog","en/3.nexus/endpoints/blog",{"title":111,"path":112,"stem":113},"Comments","/en/nexus/endpoints/comments","en/3.nexus/endpoints/comments",{"title":115,"path":116,"stem":117},"File Management","/en/nexus/endpoints/file-management","en/3.nexus/endpoints/file-management",{"title":119,"path":120,"stem":121},"Photo Management","/en/nexus/endpoints/photos","en/3.nexus/endpoints/photos",{"title":123,"icon":124,"path":125,"stem":126,"children":127,"page":14},"Tauri SQLite ORM","i-lucide-database","/en/tauri-sqlite-orm","en/4.tauri-sqlite-orm",[128,132,137,141,162,187,232],{"title":11,"path":129,"stem":130,"icon":131},"/en/tauri-sqlite-orm/introduction","en/4.tauri-sqlite-orm/1.introduction","i-lucide-book-open",{"title":133,"path":134,"stem":135,"icon":136},"Installation & Setup","/en/tauri-sqlite-orm/installation-and-setup","en/4.tauri-sqlite-orm/2.installation-and-setup","i-lucide-download",{"title":138,"path":139,"stem":140,"icon":81},"Your First Schema & Query","/en/tauri-sqlite-orm/your-first-schema-and-query","en/4.tauri-sqlite-orm/3.your-first-schema-and-query",{"title":142,"path":143,"stem":144,"children":145,"page":14},"Core Concepts","/en/tauri-sqlite-orm/core-concepts","en/4.tauri-sqlite-orm/4.core-concepts",[146,150,154,158],{"title":147,"path":148,"stem":149},"Defining Schemas","/en/tauri-sqlite-orm/core-concepts/defining-schemas","en/4.tauri-sqlite-orm/4.core-concepts/1.defining-schemas",{"title":151,"path":152,"stem":153},"Column Types & Modifiers","/en/tauri-sqlite-orm/core-concepts/column-types-and-modifiers","en/4.tauri-sqlite-orm/4.core-concepts/2.column-types-and-modifiers",{"title":155,"path":156,"stem":157},"The ORM Instance","/en/tauri-sqlite-orm/core-concepts/the-orm-instance","en/4.tauri-sqlite-orm/4.core-concepts/3.the-orm-instance",{"title":159,"path":160,"stem":161},"Migrations","/en/tauri-sqlite-orm/core-concepts/migrations","en/4.tauri-sqlite-orm/4.core-concepts/4.migrations",{"title":163,"path":164,"stem":165,"children":166,"page":14},"Querying Data","/en/tauri-sqlite-orm/querying-data","en/4.tauri-sqlite-orm/5.querying-data",[167,171,175,179,183],{"title":168,"path":169,"stem":170},"Select","/en/tauri-sqlite-orm/querying-data/selecting-data","en/4.tauri-sqlite-orm/5.querying-data/1.selecting-data",{"title":172,"path":173,"stem":174},"Insert","/en/tauri-sqlite-orm/querying-data/inserting-data","en/4.tauri-sqlite-orm/5.querying-data/2.inserting-data",{"title":176,"path":177,"stem":178},"Update","/en/tauri-sqlite-orm/querying-data/updating-data","en/4.tauri-sqlite-orm/5.querying-data/3.updating-data",{"title":180,"path":181,"stem":182},"Delete","/en/tauri-sqlite-orm/querying-data/deleting-data","en/4.tauri-sqlite-orm/5.querying-data/4.deleting-data",{"title":184,"path":185,"stem":186},"Conditions & Operators","/en/tauri-sqlite-orm/querying-data/conditions-and-operators","en/4.tauri-sqlite-orm/5.querying-data/5.conditions-and-operators",{"title":188,"path":189,"stem":190,"children":191,"page":14},"Advanced Topics","/en/tauri-sqlite-orm/advanced-topics","en/4.tauri-sqlite-orm/6.advanced-topics",[192,196,200,204,208,212,216,220,224,228],{"title":193,"path":194,"stem":195},"Relations","/en/tauri-sqlite-orm/advanced-topics/working-with-relations","en/4.tauri-sqlite-orm/6.advanced-topics/1.working-with-relations",{"title":197,"path":198,"stem":199},"Error Handling & Safety","/en/tauri-sqlite-orm/advanced-topics/error-handling-and-safety","en/4.tauri-sqlite-orm/6.advanced-topics/10.error-handling-and-safety",{"title":201,"path":202,"stem":203},"Joins","/en/tauri-sqlite-orm/advanced-topics/joins","en/4.tauri-sqlite-orm/6.advanced-topics/2.joins",{"title":205,"path":206,"stem":207},"Transactions","/en/tauri-sqlite-orm/advanced-topics/transactions","en/4.tauri-sqlite-orm/6.advanced-topics/3.transactions",{"title":209,"path":210,"stem":211},"Common Table Expressions","/en/tauri-sqlite-orm/advanced-topics/common-table-expressions","en/4.tauri-sqlite-orm/6.advanced-topics/4.common-table-expressions",{"title":213,"path":214,"stem":215},"Raw SQL","/en/tauri-sqlite-orm/advanced-topics/raw-sql","en/4.tauri-sqlite-orm/6.advanced-topics/5.raw-sql",{"title":217,"path":218,"stem":219},"Type Safety & Inference","/en/tauri-sqlite-orm/advanced-topics/type-safety-and-inference","en/4.tauri-sqlite-orm/6.advanced-topics/6.type-safety-and-inference",{"title":221,"path":222,"stem":223},"Schema Management","/en/tauri-sqlite-orm/advanced-topics/manual-schema-management","en/4.tauri-sqlite-orm/6.advanced-topics/7.manual-schema-management",{"title":225,"path":226,"stem":227},"Query Debugging","/en/tauri-sqlite-orm/advanced-topics/query-debugging","en/4.tauri-sqlite-orm/6.advanced-topics/8.query-debugging",{"title":229,"path":230,"stem":231},"Subqueries & Aggregates","/en/tauri-sqlite-orm/advanced-topics/subqueries-and-aggregates","en/4.tauri-sqlite-orm/6.advanced-topics/9.subqueries-and-aggregates",{"title":233,"path":234,"stem":235,"icon":236},"API Reference","/en/tauri-sqlite-orm/api-reference","en/4.tauri-sqlite-orm/7.api-reference","i-lucide-book",{"id":238,"title":66,"body":239,"description":926,"extension":927,"links":928,"meta":929,"navigation":553,"path":67,"seo":931,"stem":68,"__hash__":932},"docs_en/en/2.owo-ui-components/3.components/templates.md",{"type":240,"value":241,"toc":915},"minimark",[242,259,264,281,284,289,295,301,306,359,369,373,380,384,511,521,671,688,699,709,713,720,724,810,817,823,895,908,911],[243,244,247,248,258],"alert",{"icon":245,"type":246},"i-heroicons-exclamation-triangle","warning","Do keep in mind, at least, in my (",[249,250,251],"em",{},[252,253,257],"a",{"href":254,"rel":255},"https://github.com/Type-32",[256],"nofollow","Type-32",") experience, that the templates feature is not accessible in a code-driven form. If it is,\nplease open up a pull-request and help us write the code-driven documentation for the template feature.",[260,261,263],"h2",{"id":262},"template-basics","Template Basics",[265,266,267,268,272,273,276,277,280],"p",{},"The ",[269,270,271],"code",{},"template"," tag allows you to define reusable components that can be inserted into your UI at different places. Templates are defined within the ",[269,274,275],{},"templates"," section of your owo-ui XML file and can be expanded and added to your UI using the ",[269,278,279],{},"expandTemplate"," method.",[265,282,283],{},"Templates can be referenced within the same file.",[285,286,288],"h3",{"id":287},"instantiation","Instantiation",[265,290,291,292],{},"In some cases you might need a list of custom components with buttons and a text. Referencing templates across files are easy,\nprovided with this simple identifier syntax: ",[269,293,294],{},"\u003Ctemplate-name>@\u003Cmod-resource-namespace>:\u003Cmod-file-name>.xml",[265,296,297,298],{},"If you have decided to categorize your files by putting them into different directories for organizational purposes, you\ncan use the similar syntax: ",[269,299,300],{},"\u003Ctemplate-name>@\u003Cmod-resource-namespace>:\u003Cmod-directories>/\u003Cmod-file-name>.xml",[302,303,305],"h4",{"id":304},"examples","Examples",[307,308,313],"pre",{"className":309,"code":310,"language":311,"meta":312,"style":312},"language-dir shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","-- assets\n  -- examplemod\n    -- owo_ui\n      -- ui_components\n        -- templates\n          -- example_template.xml\n      -- example_template.xml\n","dir","",[269,314,315,323,329,335,341,347,353],{"__ignoreMap":312},[316,317,320],"span",{"class":318,"line":319},"line",1,[316,321,322],{},"-- assets\n",[316,324,326],{"class":318,"line":325},2,[316,327,328],{},"  -- examplemod\n",[316,330,332],{"class":318,"line":331},3,[316,333,334],{},"    -- owo_ui\n",[316,336,338],{"class":318,"line":337},4,[316,339,340],{},"      -- ui_components\n",[316,342,344],{"class":318,"line":343},5,[316,345,346],{},"        -- templates\n",[316,348,350],{"class":318,"line":349},6,[316,351,352],{},"          -- example_template.xml\n",[316,354,356],{"class":318,"line":355},7,[316,357,358],{},"      -- example_template.xml\n",[265,360,361,362,365,366],{},"The corresponding template identifiers for the templates in both files are: ",[269,363,364],{},"my-template@examplemod:example_template.xml",", ",[269,367,368],{},"my-template@examplemod:ui_components/templates/example_template.xml",[260,370,372],{"id":371},"parameters","Parameters",[374,375,379],"field",{":required":376,"name":377,"type":378},"true","name","string","The name of the template, which is used to reference it when expanding the template.",[285,381,383],{"id":382},"example-template","Example Template",[307,385,390],{"className":386,"code":387,"filename":388,"language":389,"meta":312,"style":312},"language-xml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cowo-ui xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"https://raw.githubusercontent.com/wisp-forest/owo-lib/1.20/owo-ui.xsd\">\n    \u003Ccomponents>\n        \u003Cmy-template/>  \u003C!-- You can use your own template in the components like this! -->\n        \u003C!-- Your main UI components go here -->\n    \u003C/components>\n    \u003Ctemplates>\n        \u003Ctemplate name=\"my-template\">\n            \u003Cflow-layout direction=\"vertical\">\n                \u003Cchildren>\n                    \u003Clabel>\n                        \u003Ctext>My Text\u003C/text>\n                    \u003C/label>\n                    \u003Cbutton id=\"the-click-me-button\">\n                        \u003Ctext>Click me!\u003C/text>\n                    \u003C/button>\n                \u003C/children>\n            \u003C/flow-layout>\n        \u003C/template>\n    \u003C/templates>\n\u003C/owo-ui>\n",".../my-namespace/owo-ui/example_ui.xml","xml",[269,391,392,397,402,407,412,417,422,427,433,439,445,451,457,463,469,475,481,487,493,499,505],{"__ignoreMap":312},[316,393,394],{"class":318,"line":319},[316,395,396],{},"\u003Cowo-ui xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"\n",[316,398,399],{"class":318,"line":325},[316,400,401],{},"        xsi:noNamespaceSchemaLocation=\"https://raw.githubusercontent.com/wisp-forest/owo-lib/1.20/owo-ui.xsd\">\n",[316,403,404],{"class":318,"line":331},[316,405,406],{},"    \u003Ccomponents>\n",[316,408,409],{"class":318,"line":337},[316,410,411],{},"        \u003Cmy-template/>  \u003C!-- You can use your own template in the components like this! -->\n",[316,413,414],{"class":318,"line":343},[316,415,416],{},"        \u003C!-- Your main UI components go here -->\n",[316,418,419],{"class":318,"line":349},[316,420,421],{},"    \u003C/components>\n",[316,423,424],{"class":318,"line":355},[316,425,426],{},"    \u003Ctemplates>\n",[316,428,430],{"class":318,"line":429},8,[316,431,432],{},"        \u003Ctemplate name=\"my-template\">\n",[316,434,436],{"class":318,"line":435},9,[316,437,438],{},"            \u003Cflow-layout direction=\"vertical\">\n",[316,440,442],{"class":318,"line":441},10,[316,443,444],{},"                \u003Cchildren>\n",[316,446,448],{"class":318,"line":447},11,[316,449,450],{},"                    \u003Clabel>\n",[316,452,454],{"class":318,"line":453},12,[316,455,456],{},"                        \u003Ctext>My Text\u003C/text>\n",[316,458,460],{"class":318,"line":459},13,[316,461,462],{},"                    \u003C/label>\n",[316,464,466],{"class":318,"line":465},14,[316,467,468],{},"                    \u003Cbutton id=\"the-click-me-button\">\n",[316,470,472],{"class":318,"line":471},15,[316,473,474],{},"                        \u003Ctext>Click me!\u003C/text>\n",[316,476,478],{"class":318,"line":477},16,[316,479,480],{},"                    \u003C/button>\n",[316,482,484],{"class":318,"line":483},17,[316,485,486],{},"                \u003C/children>\n",[316,488,490],{"class":318,"line":489},18,[316,491,492],{},"            \u003C/flow-layout>\n",[316,494,496],{"class":318,"line":495},19,[316,497,498],{},"        \u003C/template>\n",[316,500,502],{"class":318,"line":501},20,[316,503,504],{},"    \u003C/templates>\n",[316,506,508],{"class":318,"line":507},21,[316,509,510],{},"\u003C/owo-ui>\n",[265,512,513,514,516,517,520],{},"To use the template in your UI, you need to expand it using the ",[269,515,279],{}," method within your screen's ",[269,518,519],{},"init"," method. Here's an example:",[307,522,527],{"className":523,"code":524,"filename":525,"language":526,"meta":312,"style":312},"language-java shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","public class Example extends BaseUIModelScreen\u003CFlowLayout> {\n    public Example() {\n        super(FlowLayout.class, new Identifier(\"your-namespace-here\", \"your-ui-file-path-here\"));\n    }\n\n    @Override\n    protected void build(FlowLayout rootComponent) {\n        // Your regular code\n    }\n\n    @Override\n    protected void init() {\n        super.init();\n\n        if (this.uiAdapter == null) return;\n\n        this.uiAdapter.rootComponent.child(\n            this.model.expandTemplate(\n                FlowLayout.class,\n                \"my-template@examples:example_ui\",\n                Map.of()\n            ).childById(ButtonComponent.class, \"the-click-me-button\")\n            .configure(component -> {\n                System.out.println(\"Button clicked!\");\n            })\n        );\n    }\n}\n","Example.java","java",[269,528,529,534,539,544,549,555,560,565,570,574,578,582,587,592,596,601,605,610,615,620,625,630,636,642,648,654,660,665],{"__ignoreMap":312},[316,530,531],{"class":318,"line":319},[316,532,533],{},"public class Example extends BaseUIModelScreen\u003CFlowLayout> {\n",[316,535,536],{"class":318,"line":325},[316,537,538],{},"    public Example() {\n",[316,540,541],{"class":318,"line":331},[316,542,543],{},"        super(FlowLayout.class, new Identifier(\"your-namespace-here\", \"your-ui-file-path-here\"));\n",[316,545,546],{"class":318,"line":337},[316,547,548],{},"    }\n",[316,550,551],{"class":318,"line":343},[316,552,554],{"emptyLinePlaceholder":553},true,"\n",[316,556,557],{"class":318,"line":349},[316,558,559],{},"    @Override\n",[316,561,562],{"class":318,"line":355},[316,563,564],{},"    protected void build(FlowLayout rootComponent) {\n",[316,566,567],{"class":318,"line":429},[316,568,569],{},"        // Your regular code\n",[316,571,572],{"class":318,"line":435},[316,573,548],{},[316,575,576],{"class":318,"line":441},[316,577,554],{"emptyLinePlaceholder":553},[316,579,580],{"class":318,"line":447},[316,581,559],{},[316,583,584],{"class":318,"line":453},[316,585,586],{},"    protected void init() {\n",[316,588,589],{"class":318,"line":459},[316,590,591],{},"        super.init();\n",[316,593,594],{"class":318,"line":465},[316,595,554],{"emptyLinePlaceholder":553},[316,597,598],{"class":318,"line":471},[316,599,600],{},"        if (this.uiAdapter == null) return;\n",[316,602,603],{"class":318,"line":477},[316,604,554],{"emptyLinePlaceholder":553},[316,606,607],{"class":318,"line":483},[316,608,609],{},"        this.uiAdapter.rootComponent.child(\n",[316,611,612],{"class":318,"line":489},[316,613,614],{},"            this.model.expandTemplate(\n",[316,616,617],{"class":318,"line":495},[316,618,619],{},"                FlowLayout.class,\n",[316,621,622],{"class":318,"line":501},[316,623,624],{},"                \"my-template@examples:example_ui\",\n",[316,626,627],{"class":318,"line":507},[316,628,629],{},"                Map.of()\n",[316,631,633],{"class":318,"line":632},22,[316,634,635],{},"            ).childById(ButtonComponent.class, \"the-click-me-button\")\n",[316,637,639],{"class":318,"line":638},23,[316,640,641],{},"            .configure(component -> {\n",[316,643,645],{"class":318,"line":644},24,[316,646,647],{},"                System.out.println(\"Button clicked!\");\n",[316,649,651],{"class":318,"line":650},25,[316,652,653],{},"            })\n",[316,655,657],{"class":318,"line":656},26,[316,658,659],{},"        );\n",[316,661,663],{"class":318,"line":662},27,[316,664,548],{},[316,666,668],{"class":318,"line":667},28,[316,669,670],{},"}\n",[265,672,673,674,676,677,679,680,683,684,687],{},"In the ",[269,675,519],{}," method, the ",[269,678,279],{}," method is called with the template name (",[269,681,682],{},"my-template@examples:example_ui",") and an empty map (",[269,685,686],{},"Map.of()","). This expands the template and adds the resulting components to the root component.",[265,689,690,691,694,695,698],{},"After expanding the template, you can access its child components using the ",[269,692,693],{},"childById"," method. In this example, the button component with the ID ",[269,696,697],{},"the-click-me-button"," is retrieved, and a click event handler is configured to print \"Button clicked!\" when the button is clicked.",[265,700,701,702,704,705,708],{},"Note that accessing components from a template should be done in the ",[269,703,519],{}," method rather than the ",[269,706,707],{},"build"," method because the template components are not available during the build phase.",[260,710,712],{"id":711},"value-replacement-in-templates","Value Replacement in Templates",[265,714,715,716,719],{},"Templates in owo-ui support value replacement, allowing you to customize the content of the template components when expanding them. You can define placeholders in your template using double curly braces (",[269,717,718],{},"{{placeholder}}",") and replace them with actual values when expanding the template.",[285,721,723],{"id":722},"example","Example",[307,725,727],{"className":386,"code":726,"filename":388,"language":389,"meta":312,"style":312},"\u003Cowo-ui xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"https://raw.githubusercontent.com/wisp-forest/owo-lib/1.20/owo-ui.xsd\">\n    \u003Ccomponents>\n        \u003C!-- Your main UI components go here -->\n    \u003C/components>\n    \u003Ctemplates>\n        \u003Ctemplate name=\"my-template\">\n            \u003Cflow-layout direction=\"vertical\">\n                \u003Cchildren>\n                    \u003Clabel>\n                        \u003Ctext>{{custom-text}}\u003C/text>\n                    \u003C/label>\n                    \u003Cbutton id=\"the-click-me-button\">\n                        \u003Ctext>Click me!\u003C/text>\n                    \u003C/button>\n                \u003C/children>\n            \u003C/flow-layout>\n        \u003C/template>\n    \u003C/templates>\n\u003C/owo-ui>\n",[269,728,729,733,737,741,745,749,753,757,761,765,769,774,778,782,786,790,794,798,802,806],{"__ignoreMap":312},[316,730,731],{"class":318,"line":319},[316,732,396],{},[316,734,735],{"class":318,"line":325},[316,736,401],{},[316,738,739],{"class":318,"line":331},[316,740,406],{},[316,742,743],{"class":318,"line":337},[316,744,416],{},[316,746,747],{"class":318,"line":343},[316,748,421],{},[316,750,751],{"class":318,"line":349},[316,752,426],{},[316,754,755],{"class":318,"line":355},[316,756,432],{},[316,758,759],{"class":318,"line":429},[316,760,438],{},[316,762,763],{"class":318,"line":435},[316,764,444],{},[316,766,767],{"class":318,"line":441},[316,768,450],{},[316,770,771],{"class":318,"line":447},[316,772,773],{},"                        \u003Ctext>{{custom-text}}\u003C/text>\n",[316,775,776],{"class":318,"line":453},[316,777,462],{},[316,779,780],{"class":318,"line":459},[316,781,468],{},[316,783,784],{"class":318,"line":465},[316,785,474],{},[316,787,788],{"class":318,"line":471},[316,789,480],{},[316,791,792],{"class":318,"line":477},[316,793,486],{},[316,795,796],{"class":318,"line":483},[316,797,492],{},[316,799,800],{"class":318,"line":489},[316,801,498],{},[316,803,804],{"class":318,"line":495},[316,805,504],{},[316,807,808],{"class":318,"line":501},[316,809,510],{},[265,811,812,813,816],{},"In the above example, the label's text is defined as ",[269,814,815],{},"{{custom-text}}",", which serves as a placeholder that can be replaced with actual text when the template is expanded.",[265,818,819,820,822],{},"To replace the placeholder values when expanding the template, you need to provide a map of key-value pairs to the ",[269,821,279],{}," method. The keys in the map should match the placeholder names, and the corresponding values will be used to replace the placeholders.",[307,824,826],{"className":523,"code":825,"filename":525,"language":526,"meta":312,"style":312},"@Override\nprotected void init() {\n    super.init();\n\n    if (this.uiAdapter == null) return;\n\n    this.uiAdapter.rootComponent.child(\n        this.model.expandTemplate(\n            FlowLayout.class,\n            \"my-template@examples:example_ui\",\n            Map.of(\"custom-text\", \"Hello, World!\")\n        )\n    );\n}\n",[269,827,828,833,838,843,847,852,856,861,866,871,876,881,886,891],{"__ignoreMap":312},[316,829,830],{"class":318,"line":319},[316,831,832],{},"@Override\n",[316,834,835],{"class":318,"line":325},[316,836,837],{},"protected void init() {\n",[316,839,840],{"class":318,"line":331},[316,841,842],{},"    super.init();\n",[316,844,845],{"class":318,"line":337},[316,846,554],{"emptyLinePlaceholder":553},[316,848,849],{"class":318,"line":343},[316,850,851],{},"    if (this.uiAdapter == null) return;\n",[316,853,854],{"class":318,"line":349},[316,855,554],{"emptyLinePlaceholder":553},[316,857,858],{"class":318,"line":355},[316,859,860],{},"    this.uiAdapter.rootComponent.child(\n",[316,862,863],{"class":318,"line":429},[316,864,865],{},"        this.model.expandTemplate(\n",[316,867,868],{"class":318,"line":435},[316,869,870],{},"            FlowLayout.class,\n",[316,872,873],{"class":318,"line":441},[316,874,875],{},"            \"my-template@examples:example_ui\",\n",[316,877,878],{"class":318,"line":447},[316,879,880],{},"            Map.of(\"custom-text\", \"Hello, World!\")\n",[316,882,883],{"class":318,"line":453},[316,884,885],{},"        )\n",[316,887,888],{"class":318,"line":459},[316,889,890],{},"    );\n",[316,892,893],{"class":318,"line":465},[316,894,670],{},[265,896,897,898,900,901,904,905,907],{},"In the above example, the ",[269,899,279],{}," method is called with a map (",[269,902,903],{},"Map.of(\"custom-text\", \"Hello, World!\")","). This replaces the ",[269,906,815],{}," placeholder in the template with the value \"Hello, World!\".",[265,909,910],{},"By using value replacement in templates, you can create more flexible and reusable components that can be customized based on the specific needs of your UI.",[912,913,914],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":312,"searchDepth":325,"depth":325,"links":916},[917,920,923],{"id":262,"depth":325,"text":263,"children":918},[919],{"id":287,"depth":331,"text":288},{"id":371,"depth":325,"text":372,"children":921},[922],{"id":382,"depth":331,"text":383},{"id":711,"depth":325,"text":712,"children":924},[925],{"id":722,"depth":331,"text":723},"The special Template Component.","md",null,{"category":930},"owo-ui",{"title":66,"description":926},"ZZ46wzZM7lBPFZFopMC1WOLOCCuljurwedLusazyJ4c",[934,936],{"title":62,"path":63,"stem":64,"description":935,"children":-1},"The Slider Component.",{"title":11,"path":75,"stem":76,"description":937,"icon":6,"children":-1},"Introduction of the Nexus Documentation.",1773317301245]