Overhaul of field demos

src/main/java/com/webforj/samples/views/fields/colorfield/ColorFieldDemoView.java → src/main/java/com/webforj/samples/views/fields/colorfield/ColorFieldView.java

@@ -1,85 +1,89 @@
-package com.webforj.samples.views.fields.colorfield;
-
-import java.awt.Color;
-import com.webforj.annotation.InlineStyleSheet;
-import com.webforj.component.Composite;
-import com.webforj.component.event.ModifyEvent;
-import com.webforj.component.field.ColorField;
-import com.webforj.component.html.elements.Div;
-import com.webforj.component.layout.flexlayout.FlexLayout;
-import com.webforj.component.text.Label;
-import com.webforj.component.window.Panel;
-import com.webforj.router.annotation.FrameTitle;
-import com.webforj.router.annotation.Route;
-
-@InlineStyleSheet("context://css/fields/colorfield/colorFieldDemo.css")
-@Route
-@FrameTitle("Color Field Demo")
-public class ColorFieldDemoView extends Composite<Div> {
-
-  ColorField colorField;
-  Color[] tetradic = new Color[4];
-  Panel[] colors;
-
-  public ColorFieldDemoView() {
-    getBoundComponent().addClassName("main__window");
-
-    colorField = new ColorField();
-    colorField.addClassName("color__field")
-        .setLabel("Choose a color:")
-        .onModify(this::tetradicColor);
-
-    colors = new Panel[4];
-    for (int i = 0; i <= 3; i++) {
-      colors[i] = new Panel();
-          colors[i].addClassName("color__panel");
-    }
-
-    FlexLayout colorDisplay = FlexLayout.create(colors)
-        .horizontal()
-        .justify().center()
-        .align().center()
-        .build()
-        .addClassName("display__panel");
-    colorDisplay.setSpacing("20px");
-
-    Label title = new Label("Tetradic complementary colors:");
-
-    colorField.setValue(Color.RED);
-    tetradicColor(null);
-
-    getBoundComponent().add(colorField, title, colorDisplay);
-  }
-
-  private void tetradicColor(ModifyEvent e) {
-    Color selected = colorField.getValue();
-    setBackgroundColor(colors[0], selected);
-    int baseHue = getHue(selected);
-    for (int i = 1; i <= 3; i++) {
-      int hue = (baseHue + i * 60) % 360;
-      setBackgroundColor(colors[i], Color.getHSBColor(hue / 360.0f, getSaturation(selected), getBrightness(selected)));
-    }
-  }
-
-  private void setBackgroundColor(Panel colorPanel, Color color) {
-    colorPanel.setStyle("background-color", "rgb(" + String.valueOf(color.getRed()) +
-        "," + String.valueOf(color.getGreen()) +
-        "," + String.valueOf(color.getBlue()) +
-        ")");
-  }
-
-  private static int getHue(Color color) {
-    float[] hsbValues = Color.RGBtoHSB(color.getRed(), color.getGreen(), color.getBlue(), null);
-    return (int) (hsbValues[0] * 360);
-  }
-
-  private static float getSaturation(Color color) {
-    float[] hsbValues = Color.RGBtoHSB(color.getRed(), color.getGreen(), color.getBlue(), null);
-    return hsbValues[1];
-  }
-
-  private static float getBrightness(Color color) {
-    float[] hsbValues = Color.RGBtoHSB(color.getRed(), color.getGreen(), color.getBlue(), null);
-    return hsbValues[2];
-  }
+package com.webforj.samples.views.fields.colorfield;
+
+import java.awt.Color;
+import com.webforj.annotation.InlineStyleSheet;
+import com.webforj.component.Composite;
+import com.webforj.component.event.ModifyEvent;
+import com.webforj.component.field.ColorField;
+import com.webforj.component.html.elements.Div;
+import com.webforj.component.html.elements.Paragraph;
+import com.webforj.component.layout.flexlayout.FlexAlignment;
+import com.webforj.component.layout.flexlayout.FlexDirection;
+import com.webforj.component.layout.flexlayout.FlexJustifyContent;
+import com.webforj.component.layout.flexlayout.FlexLayout;
+import com.webforj.router.annotation.FrameTitle;
+import com.webforj.router.annotation.Route;
+
+@InlineStyleSheet("context://css/fields/colorfield/colorFieldDemo.css")
+@Route
+@FrameTitle("Color Field Demo")
+public class ColorFieldView extends Composite<FlexLayout> {
+
+  ColorField colorField;
+  Color[] tetradic = new Color[4];
+  Div[] colors;
+
+  public ColorFieldView() {
+    getBoundComponent().setDirection(FlexDirection.COLUMN).setAlignment(FlexAlignment.CENTER)
+    .setJustifyContent(FlexJustifyContent.CENTER).setSpacing("var(--dwc-space-l")
+    .setMargin("var(--dwc-space-m)");
+
+    colorField = new ColorField();
+    colorField.setWidth("200px")
+        .setLabel("Choose a color:")
+        .onModify(this::tetradicColor);
+
+    colors = new Div[4];
+    for (int i = 0; i <= 3; i++) {
+      colors[i] = new Div();
+      colors[i].addClassName("colorDiv");
+    }
+
+    FlexLayout colorDisplay = FlexLayout.create(colors)
+        .horizontal()
+        .justify().center()
+        .align().center()
+        .build();
+
+    colorDisplay.setSpacing("20px");
+
+    Paragraph title = new Paragraph("Tetradic complementary colors:");
+
+    colorField.setValue(Color.RED);
+    tetradicColor(null);
+
+    getBoundComponent().add(colorField, title, colorDisplay);
+  }
+
+  private void tetradicColor(ModifyEvent e) {
+    Color selected = colorField.getValue();
+    setBackgroundColor(colors[0], selected);
+    int baseHue = getHue(selected);
+    for (int i = 1; i <= 3; i++) {
+      int hue = (baseHue + i * 60) % 360;
+      setBackgroundColor(colors[i], Color.getHSBColor(hue / 360.0f, getSaturation(selected), getBrightness(selected)));
+    }
+  }
+
+  private void setBackgroundColor(Div colorPanel, Color color) {
+    colorPanel.setStyle("background-color", "rgb(" + String.valueOf(color.getRed()) +
+        "," + String.valueOf(color.getGreen()) +
+        "," + String.valueOf(color.getBlue()) +
+        ")");
+  }
+
+  private static int getHue(Color color) {
+    float[] hsbValues = Color.RGBtoHSB(color.getRed(), color.getGreen(), color.getBlue(), null);
+    return (int) (hsbValues[0] * 360);
+  }
+
+  private static float getSaturation(Color color) {
+    float[] hsbValues = Color.RGBtoHSB(color.getRed(), color.getGreen(), color.getBlue(), null);
+    return hsbValues[1];
+  }
+
+  private static float getBrightness(Color color) {
+    float[] hsbValues = Color.RGBtoHSB(color.getRed(), color.getGreen(), color.getBlue(), null);
+    return hsbValues[2];
+  }
 }

src/main/java/com/webforj/samples/views/fields/datefield/DateFieldMinMaxView.java

@@ -1,29 +1,29 @@
 package com.webforj.samples.views.fields.datefield;
 
 import java.time.LocalDate;
-import com.webforj.annotation.InlineStyleSheet;
 import com.webforj.component.Composite;
 import com.webforj.component.field.DateField;
-import com.webforj.component.html.elements.Div;
+import com.webforj.component.layout.flexlayout.FlexDirection;
+import com.webforj.component.layout.flexlayout.FlexLayout;
 import com.webforj.router.annotation.FrameTitle;
 import com.webforj.router.annotation.Route;
 
-@InlineStyleSheet("context://css/fields/datefield/dateFieldDemo.css")
 @Route
 @FrameTitle("Date Field Min/Max")
-public class DateFieldMinMaxView extends Composite<Div> {
+public class DateFieldMinMaxView extends Composite<FlexLayout> {
 
   public DateFieldMinMaxView() {
-    getBoundComponent().addClassName("main__window");
+    getBoundComponent().setDirection(FlexDirection.ROW).setSpacing("var(--dwc-space-l")
+    .setMargin("var(--dwc-space-m)");
 
     DateField departure = new DateField(LocalDate.now());
     departure.setLabel("Departure Date:")
-        .setMin(LocalDate.now())
-        .addClassName("date__input");
+        .setWidth("200px")
+        .setMin(LocalDate.now());
 
     DateField returnField = new DateField(LocalDate.now().plusDays(1));
     returnField.setLabel("Return Date:")
-        .addClassName("date__input");
+        .setWidth("200px");
 
     getBoundComponent().add(departure, returnField);
 

src/main/java/com/webforj/samples/views/fields/datefield/DateFieldDemoView.java → src/main/java/com/webforj/samples/views/fields/datefield/DateFieldView.java

@@ -1,41 +1,40 @@
 package com.webforj.samples.views.fields.datefield;
 
 import java.time.LocalDate;
-import com.webforj.annotation.InlineStyleSheet;
 import com.webforj.component.Composite;
 import com.webforj.component.field.DateField;
-import com.webforj.component.html.elements.Div;
+import com.webforj.component.layout.flexlayout.FlexDirection;
+import com.webforj.component.layout.flexlayout.FlexLayout;
 import com.webforj.data.event.ValueChangeEvent;
 import com.webforj.router.annotation.FrameTitle;
 import com.webforj.router.annotation.Route;
 
-@InlineStyleSheet("context://css/fields/datefield/dateFieldDemo.css")
-
 @Route
 @FrameTitle("Date Field Demo")
-public class DateFieldDemoView extends Composite<Div> {
+public class DateFieldView extends Composite<FlexLayout> {
 
-  private DateField returnField = new DateField(LocalDate.now());
-  private DateField departure = new DateField(LocalDate.now());
+  DateField returnField = new DateField(LocalDate.now());
+  DateField departure = new DateField(LocalDate.now());
 
-  public DateFieldDemoView() {
-    getBoundComponent().addClassName("main__window");
+  public DateFieldView() {
+    getBoundComponent().setDirection(FlexDirection.ROW).setSpacing("var(--dwc-space-l")
+    .setMargin("var(--dwc-space-m)");
 
     departure.setLabel("Departure Date:")
-        .addClassName("date__input")
+        .setWidth("200px")
         .setMin(LocalDate.now())
         .addValueChangeListener(this::setMinReturn);
 
     returnField.setLabel("Return Date:")
-        .addClassName("date__input")
+        .setWidth("200px")
         .setMin(LocalDate.now());
 
     getBoundComponent().add(departure, returnField);
   }
 
   private void setMinReturn(ValueChangeEvent e) {
     LocalDate departureDate = (LocalDate) e.getValue();
-    LocalDate arrivalDate = (LocalDate) returnField.getValue();
+    LocalDate arrivalDate = returnField.getValue();
 
     if (departureDate.isAfter(arrivalDate)) {
       returnField.setValue(departureDate);

src/main/java/com/webforj/samples/views/fields/datetimefield/DateTimeFieldView.java

@@ -0,0 +1,24 @@
+package com.webforj.samples.views.fields.datetimefield;
+
+import com.webforj.component.Composite;
+import com.webforj.component.field.DateTimeField;
+import com.webforj.component.layout.flexlayout.FlexLayout;
+import com.webforj.router.annotation.FrameTitle;
+import com.webforj.router.annotation.Route;
+
+@Route
+@FrameTitle("Date Time Field Demo")
+public class DateTimeFieldView extends Composite<FlexLayout> {
+
+  DateTimeField departure = new DateTimeField();
+
+  public DateTimeFieldView() {
+    getBoundComponent().setMargin("var(--dwc-space-m)");
+
+    departure.setLabel("Departure Date and Time:")
+        .setWidth("200px");
+
+    getBoundComponent().add(departure);
+
+  }
+}

src/main/java/com/webforj/samples/views/fields/numberfield/NumberFieldView.java

@@ -0,0 +1,23 @@
+package com.webforj.samples.views.fields.numberfield;
+
+import com.webforj.component.Composite;
+import com.webforj.component.field.NumberField;
+import com.webforj.component.layout.flexlayout.FlexLayout;
+import com.webforj.router.annotation.FrameTitle;
+import com.webforj.router.annotation.Route;
+
+@Route
+@FrameTitle("Number Field Demo")
+public class NumberFieldView extends Composite<FlexLayout> {
+
+  NumberField numField = new NumberField();
+
+  public NumberFieldView() {
+    getBoundComponent().setMargin("var(--dwc-space-m)");
+
+    numField.setWidth("200px")
+            .setLabel("Quantity:");
+
+    getBoundComponent().add(numField);
+  }
+}