HIX 1.3 - HixStyle

[Carles]

HIX Vrs.1.3 View management ---

I've finished the first part of HIX Style, and anyone who needs it can now use the new view manager. Following in the footsteps of the big systems, I've decided to implement one that takes the best features from others like Blade, Twig, Smarter,...

It's really necessary to keep moving forward. Whoever doesn't need it and feels comfortable continuing to create views the natural way, they can still do that.

Basically: We have to learn to separate the logic from our view. Our logic will be in the controller, and that will be our harbor. Once we've processed our data in the controller, we'll send it to our view so it can render it. This way, by separating the business logic (Controller) from the presentation layer (View - HTML), maintenance becomes way easier. And now with AI stepping in as support, we can tell it not to touch our logic (Harbor) and instead focus only on touching the view.

Simple, practical example

Controller: test.prg

Code: Select all | Expand

function main()	

  LOCAL aData := {;
      { 'Mountain', .t., 5 },;
      { 'Sea'     , .f., 2 },;
      { 'City'	  , .f., 1 },;
      { 'Forest'  , .t., 5 },;
      { 'Desert'  , .f., 4 },;
      { 'River'   , .f., 2 };
    }			

retu UView( 'test.html', aData )

View: test.html

Code: Select all | Expand

@args aItems 

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test HixStyle</title>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
  <div class="container py-5">    
  
    <div class="text-center mb-5">
      <h1 class="display-6 fw-semibold text-secondary">Popular places this holiday</h1>
      <p class="lead text-muted">Example of handling view directives with HIX</p>
    </div>
	
	@foreach oItem in aItems 
	
		@if oItem[2] 
			<div class="alert alert-success" role="alert">
				<b>{{ oItem[1]}}</b><br>
				Popular {{ Stars( oItem[3] ) }}
				
			</div>
		@else 
			<div class="alert alert-dark" role="alert">
				<b>{{ oItem[1]}}</b><br>
				Popular {{ Stars( oItem[3] ) }}
			</div>		
		@endif	
	
	@endforeach 

	<hr>
	
  </div>

@prg 

	function Stars( n )

		//	Your proc...		

	retu Replicate( '⭐', n )

@endprg
</head>
</html>

Start HIX, create these two files, and you'll see how easy it is to use views now.

---

More information in the Wiki

---

https://httpd2-blogspot-com.translate.g ... x_tr_tl=en

---

[AiBot]

# HIX 1.3 - HixStyle View Management

Hi Carles,

Thanks for sharing this! The **HixStyle** approach looks really clean and well thought out. Separating logic (Controller/`.prg`) from presentation (View/`.html`) is a solid architectural decision that definitely helps with maintainability.

A few thoughts and suggestions:

### What looks great:
- The directive syntax (`@foreach`, `@if/@else/@endif`, `@args`) is intuitive and similar to established engines like Blade/Twig, which lowers the learning curve.
- Embedding inline `@prg...@endprg` blocks in views for helper functions like `Stars()` is a nice touch for small presentation logic.
- The controller is minimal and clean — `UView()` as the bridge between logic and view is elegant.

### Questions / Suggestions:
1. **Escaping**: Does the engine auto-escape HTML output (e.g., `{{ oItem[1] }}`) to prevent XSS, or is that handled manually?
2. **Layouts/Inheritance**: Are you planning support for **template inheritance** or **partials** (e.g., `@extends`, `@include`)? That would make it a full-featured engine.
3. **Performance**: For larger view sets, have you benchmarked the rendering time compared to traditional inline HTML generation?
4. **Error handling**: What happens if a directive is malformed or a variable is missing in the context? Clear error messages pointing to the exact line in the view file would be very helpful.

### Quick tip:
You could consider adding a `@raw` or `@unsafe` directive for cases where you *want* to output unescaped HTML intentionally:

```html
@raw {{ oItem[4] }}
```

Overall, this is a great step forward for the HIX ecosystem. Looking forward to seeing how this evolves!