AnNingUI / AnNingUI/ImproperUIForge
Add template and for-div
- Dominant language
- Java
- Stars
- 1
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
## Brief Description
Introduce `template` and `for-div` loops to reduce repetitive code.
## Introduction
Using `template` to define reusable code blocks and `for-div` to loop-render elements instead of writing each one manually.
The following shows the syntax (not the final version):
```ui
div #exmpl_for {
background-color: #40FFFFFF
border-radius: 5
size: 420 240
center: both
padding: 10
child-align: grid
template #blockTemplate {
args: i
tag-name: div
class-name: "block_${i}"
background-image: textures/block/ice.png
draggable: true
children {
div {
inner-text: "Block $ctx{i}"
}
}
}
for-div #forId {
range: "0..=20"
index-name: i
body {
use: blockTemplate
}
}
// or
for-div #forId {
range: "0..=20"
index-name: i
body {
create {
name: div
class: "block_${i}"
background-image: textures/block/ice.png
draggable: true
hovered => { border-thickness: 1; border-color: white; }
}
}
}
// or
for-div #forId {
range-use: "$rangeUse{0..=20, blockTemplate}"
}
}
```
---
Below are step‑by‑step optimizations to address the repetition and poor readability of writing each element manually, followed by a refined final example.
## 1. Extract a reusable Block template
- **Issue**: Every block requires rewriting the same properties, leading to redundancy.
- **Optimization**: Use a `template` to encapsulate common logic (CSS/class, background, draggable, hover), leaving only the variable part (`index`) as a parameter.
```ui
template #blockTemplate {
args: index
tag-name: div
class-name: "block_${index}"
background-image: textures/block/ice.png
draggable: true
hovered => {
border-thickness: 1
border-color: white
}
children {
div { inner-text: "Block ${index}" }
}
}
```
---
## 2. Loop-render with for-div
- **Issue**: Writing 20+ `
- **Optimization**: Use `for-div` to generate them in one block:
```ui
for-div #forId {
range: "0..=20"
index-name: index
body {
use: blockTemplate
}
}
```
Or combine range and template in one shorthand:
```ui
for-div #forId {
range-use: "$rangeUse{0..=20, blockTemplate}"
}
```
---
## 3. Move common layout styles to the parent container
- **Issue**: If every block shares the same `size`, `margin`, `padding`, or alignment, that’s still duplicated inside the template.
- **Optimization**: Define layout-related properties (e.g. `child-align: grid; gap: 10`) on the parent node.
```ui
div #exmpl_for {
background-color: #40FFFFFF
border-radius: 5
size: 420 240
center: both
padding: 10
child-align: grid
// template and for-div as above…
}
```
---
## 4. Final Refined Example
```ui
div #exmpl_for {
background-color: #40FFFFFF
border-radius: 5
size: 420 240
center: both
padding: 10
child-align: grid
// Reusable Block Template
template #blockTemplate {
args: idx
tag-name: div
class-name: "block_${idx}"
background-image: textures/block/ice.png
draggable: true
hovered => {
border-thickness: 1
border-color: white
}
children {
div { inner-text: "Block ${idx}" }
}
}
// One‑line loop generating blocks 0–20 (21 total)
for-div #forId {
range: "0..=20"
index-name: idx
body { use: blockTemplate }
}
}
```
---
**Benefits of this approach:**
1. **Easily extensible**: To change background, drag logic, or hover effect, update only the template.
2. **Improved readability**: The overall structure, loop generation, and layout are clear at a glance.
3. **Lower maintenance cost**: Adjusting the count, styles, or layout no longer requires hunting down dozens of repetitive lines.
> For advanced needs (e.g. dynamic data sources, multiple block types), you can loop over arrays or add more `args` to the `template`. This pattern helps eliminate manual hard‑coding of each element.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.