Halaman utama Jelajahi Bantuan
Masuk
Tilo15
/
Spry
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

refactor(examples): migrate to SID-based element access pattern

Update component examples to use the new sid attribute and indexer
syntax (this["sid"]) instead of id attributes and get_element_by_id()
calls. The instance property is now private as external access is no
longer required.
Billy Barrow 1 Minggu lalu
induk
70dede1201
melakukan
bc7cd3005f
3 mengubah file dengan 36 tambahan dan 37 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 16 16
      examples/CounterComponent.vala
  2. 19 20
      examples/TodoComponent.vala
  3. 1 1
      src/Component.vala

+ 16 - 16
examples/CounterComponent.vala
Tampilan Berkas 

@@ -210,22 +210,22 @@ class InfoItemComponent : Component {
 
     public override string markup { get {
 
         return """
 
         <div class="info-item">
 
-            <div class="info-label" id="label"></div>
 
-            <div class="info-value" id="value"></div>
 
+            <div class="info-label" sid="label"></div>
 
+            <div class="info-value" sid="value"></div>
 
         </div>
 
         """;
 
     }}
 
 
     public string label { set {
 
-        instance.get_element_by_id("label").text_content = value;
 
+        this["label"].text_content = value;
 
     }}
 
 
     public string info_value { set {
 
-        instance.get_element_by_id("value").text_content = value;
 
+        this["value"].text_content = value;
 
     }}
 
 
     public string? status_class { set {
 
-        var el = instance.get_element_by_id("value");
 
+        var el = this["value"];
 
         if (value != null) {
 
             el.add_class(value);
 
         }
 
@@ -244,7 +244,7 @@ class InfoGridComponent : Component {
 
     public override string markup { get {
 
         return """
 
         <div class="info-grid">
 
-            <spry-outlet id="items"/>
 
+            <spry-outlet sid="items"/>
 
         </div>
 
         """;
 
     }}
 
@@ -267,10 +267,10 @@ class CounterDisplayComponent : Component {
 
     
     public override string markup { get {
 
         return """
 
-        <div class="card" id="counter-card">
 
+        <div class="card">
 
             <div class="counter-display">
 
                 <div class="counter-label">Current Value</div>
 
-                <div class="counter-value" id="counter-value">0</div>
 
+                <div class="counter-value" sid="counter-value">0</div>
 
             </div>
 
             <div class="button-group">
 
                 <form method="POST" action="/decrement" style="display: inline;">
 
@@ -283,13 +283,13 @@ class CounterDisplayComponent : Component {
 
                     <button type="submit" class="btn-success">+ Increase</button>
 
                 </form>
 
             </div>
 
-            <spry-outlet id="info-grid"/>
 
+            <spry-outlet sid="info-grid"/>
 
         </div>
 
         """;
 
     }}
 
     
     public int counter { set {
 
-        var counter_el = instance.get_element_by_id("counter-value");
 
+        var counter_el = this["counter-value"];
 
         counter_el.text_content = value.to_string();
 
         
         // Update status class
 
@@ -327,12 +327,12 @@ class CounterPageComponent : Component {
 
             <link rel="stylesheet" href="/styles.css"/>
 
         </head>
 
         <body>
 
-            <div class="card" id="main-card">
 
-                <h1 id="page-title">Component Counter Example</h1>
 
-                <p id="description">This page demonstrates using Spry.Component with outlets for dynamic content.</p>
 
+            <div class="card">
 
+                <h1>Component Counter Example</h1>
 
+                <p>This page demonstrates using Spry.Component with outlets for dynamic content.</p>
 
             </div>
 
-            <spry-outlet id="counter-section"/>
 
-            <div class="card" id="code-card">
 
+            <spry-outlet sid="counter-section"/>
 
+            <div class="card">
 
                 <h2>How It Works</h2>
 
                 <p>The page uses Component with spry-outlet elements for dynamic content:</p>
 
                 <pre>component.set_outlet_child("content", child);</pre>
 
@@ -343,7 +343,7 @@ class CounterPageComponent : Component {
 
                     <li><code>to_result()</code> - Render as HttpResult</li>
 
                 </ul>
 
             </div>
 
-            <div class="card" id="footer-card">
 
+            <div class="card">
 
                 <p style="text-align: center; color: #666; margin: 0;">
 
                     Built with <code>Spry.Component</code> |
 
                     <a href="/raw">View Raw HTML</a>

+ 19 - 20
examples/TodoComponent.vala
Tampilan Berkas 

@@ -101,12 +101,12 @@ class TodoItemComponent : Component {
 
         return """
 
         <div class="todo-item">
 
             <form method="POST" action="/toggle" style="display: inline;">
 
-                <input type="hidden" name="id" id="toggle-id"/>
 
-                <button type="submit" class="btn-toggle" id="toggle-btn"></button>
 
+                <input type="hidden" name="id" sid="toggle-id"/>
 
+                <button type="submit" class="btn-toggle" sid="toggle-btn"></button>
 
             </form>
 
-            <span class="title" id="title"></span>
 
+            <span class="title" sid="title"></span>
 
             <form method="POST" action="/delete" style="display: inline;">
 
-                <input type="hidden" name="id" id="delete-id"/>
 
+                <input type="hidden" name="id" sid="delete-id"/>
 
                 <button type="submit" class="btn-delete">Delete</button>
 
             </form>
 
         </div>
 
@@ -114,17 +114,16 @@ class TodoItemComponent : Component {
 
     }}
 
     
     public int item_id { set {
 
-        instance.get_element_by_id("toggle-id").set_attribute("value", value.to_string());
 
-        instance.get_element_by_id("delete-id").set_attribute("value", value.to_string());
 
+        this["toggle-id"].set_attribute("value", value.to_string());
 
+        this["delete-id"].set_attribute("value", value.to_string());
 
     }}
 
     
     public string title { set {
 
-        instance.get_element_by_id("title").text_content = value;
 
+        this["title"].text_content = value;
 
     }}
 
     
     public bool completed { set {
 
-        var btn = instance.get_element_by_id("toggle-btn");
 
-        btn.text_content = value ? "Undo" : "Done";
 
+        this["toggle-btn"].text_content = value ? "Undo" : "Done";
 
     }}
 
 }
 
 
@@ -141,7 +140,7 @@ class TodoListComponent : Component {
 
         return """
 
         <div class="card">
 
             <h2>Todo List</h2>
 
-            <spry-outlet id="items"/>
 
+            <spry-outlet sid="items"/>
 
         </div>
 
         """;
 
     }}
 
@@ -158,11 +157,11 @@ class HeaderComponent : Component {
 
             <p>This page demonstrates <code>Spry.Component</code> for building dynamic pages.</p>
 
             <div class="stats">
 
                 <div class="stat">
 
-                    <div class="stat-value" id="total"></div>
 
+                    <div class="stat-value" sid="total"></div>
 
                     <div class="stat-label">Total Tasks</div>
 
                 </div>
 
                 <div class="stat">
 
-                    <div class="stat-value" id="completed"></div>
 
+                    <div class="stat-value" sid="completed"></div>
 
                     <div class="stat-label">Completed</div>
 
                 </div>
 
             </div>
 
@@ -171,11 +170,11 @@ class HeaderComponent : Component {
 
     }}
 
     
     public int total_tasks { set {
 
-        instance.get_element_by_id("total").text_content = value.to_string();
 
+        this["total"].text_content = value.to_string();
 
     }}
 
     
     public int completed_tasks { set {
 
-        instance.get_element_by_id("completed").text_content = value.to_string();
 
+        this["completed"].text_content = value.to_string();
 
     }}
 
 }
 
 
@@ -210,7 +209,7 @@ class FeaturesComponent : Component {
 
             </div>
 
             <div class="feature">
 
                 <strong>Using Outlets:</strong>
 
-                <code><spry-outlet id="content"/></code>
 
+                <code><spry-outlet sid="content"/></code>
 
             </div>
 
             <div class="feature">
 
                 <strong>Setting Outlet Content:</strong>
 
@@ -303,11 +302,11 @@ class PageLayoutComponent : Component {
 
             </style>
 
         </head>
 
         <body>
 
-            <spry-outlet id="header"/>
 
-            <spry-outlet id="todo-list"/>
 
-            <spry-outlet id="add-form"/>
 
-            <spry-outlet id="features"/>
 
-            <spry-outlet id="footer"/>
 
+            <spry-outlet sid="header"/>
 
+            <spry-outlet sid="todo-list"/>
 
+            <spry-outlet sid="add-form"/>
 
+            <spry-outlet sid="features"/>
 
+            <spry-outlet sid="footer"/>
 
         </body>
 
         </html>
 
         """;

+ 1 - 1
src/Component.vala
Tampilan Berkas 

@@ -15,7 +15,7 @@ namespace Spry {
 
         private Catalogue<string, Component> _children = new Catalogue<string, Component>();
 
         private MarkupDocument _instance;
 
 
-        protected MarkupDocument instance { get {
 
+        private MarkupDocument instance { get {
 
             if(_instance == null) {
 
                 try {
 
                     lock(_instance) {