Merge pull request #400 from webforj/399-componentdemo-links-and-height

chore: Corrected Demo URLs and Adjusted Heights

blog/2024-07-23-webforj-v24.10/24.10.md

@@ -80,7 +80,7 @@ The `ColumnsLayout` component has come to webforJ in `24.10`, and is designed to
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/columnslayout?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/columnslayout/ColumnsLayoutView.java'
-height = '300px'
+height = '450px'
 />
 
 In addition to dynamic column adjustments, `ColumnsLayout` supports customizable alignment and spacing options. The `ColumnsLayout` component is designed to be intuitive and easy to use. It includes built-in methods for setting column spans and positions, making it simple to create complex layouts with minimal effort.

docs/building-ui/composite-components.md

@@ -87,5 +87,5 @@ This component is then instantiated and utilized in an Application, and allows f
 path='https://demo.webforj.com/webapp/controlsamples/compositedemo?' 
 cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/compositeDemo.css'
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/CompositeDemoView.java'
-height='500px'
+height='550px'
 />

docs/building-ui/elements.md

@@ -15,6 +15,7 @@ The `Element` component cannot be extended, and is not the base component for al
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/elementinputdemo?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/element/ElementInputDemoView.java'
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/element/elementInput.css'
 />
 
 ## Adding events
@@ -26,7 +27,8 @@ There are also additional options to further customize events by using the Event
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/elementinputevent?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/element/ElementInputEventView.java'
-height='175px'
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/element/elementInputEvent.css'
+height='240px'
 />
 
 ## Component interaction
@@ -48,6 +50,7 @@ The `Element` component supports the composition of child components. Developers
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/elementinputtext?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/element/ElementInputTextView.java'
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/element/elementInput.css'
 height='175px'
 />
 
@@ -97,7 +100,8 @@ In the demo below, an event is added to an HTML `Button`. This event is then fir
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/elementinputfunction?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/element/ElementInputFunctionView.java'
-height='175px'
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/element/elementInput.css'
+height='240px'
 />
 
 ## Executing JavaScript

docs/components/columns-layout.md

@@ -21,7 +21,7 @@ When first instantiated, the `ColumnsLayout` uses two columns to display items a
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/columnslayout?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/columnslayout/ColumnsLayoutView.java'
-height="350px"
+height="450px"
 />
 
 ## Breakpoints
@@ -148,7 +148,7 @@ In the following demonstration, notice that when the `"medium"` breakpoint is tr
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/columnslayoutspancolumn?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/columnslayout/ColumnsLayoutSpanColumnView.java'
-height="350px"
+height="375px"
 />
 
 :::tip Avoid collisions
@@ -175,7 +175,7 @@ Available `Alignment` options include:
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/columnslayoutalignment?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/columnslayout/ColumnsLayoutAlignmentView.java'
-height="350px"
+height="500px"
 />
 
 In the demo above, the `Submit` button has been given `ColumnsLayout.Alignment.END` to ensure that it appears at the end, or in this case to the right, of its column.
@@ -209,5 +209,5 @@ Building responsive and attractive layouts is possible using both the [`FlexLayo
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/columnslayoutform?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/columnslayout/ColumnsLayoutFormView.java'
-height="450px"
+height="700px"
 />

docs/components/flex-layout.md

@@ -105,7 +105,8 @@ It's important to note that the order property only affects the visual order of
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/flexorder?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/flexlayout/item/FlexOrderView.java'
-height="200px"
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/flexlayout/container/flexContainerBuilder.css'
+height="320px"
 />
 
 #### Self alignment
@@ -123,6 +124,7 @@ This property is especially useful when you need to align a specific item differ
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/flexselfalign?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/flexlayout/item/FlexSelfAlignView.java'
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/flexlayout/container/flexContainerBuilder.css'
 height="350px"
 />
 
@@ -141,7 +143,7 @@ The following demo allows you to select one or more boxes and change the `Item B
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/flexbasis?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/flexlayout/FlexBasisView.java'
-height="250px"
+height="300px"
 />
 
 #### Flex grow / shrink
@@ -162,7 +164,8 @@ Similarly, when a container does not have enough space to accommodate its conten
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/flexlayout?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/flexlayout/FlexLayoutView.java'
-height="500px"
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/flexlayout/flexLayout.css'
+height="620px"
 />
 
 :::tip

docs/components/google-charts.md

@@ -31,6 +31,7 @@ The `GoogleChart` class is a comprehensive solution for embedding rich, interact
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/chart?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/googlecharts/ChartView.java'
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/googlecharts/chart.css'
 height='300px'
 />
 
@@ -149,7 +150,7 @@ Invoke `redraw()` in scenarios such as:
 path='https://demo.webforj.com/webapp/controlsamples/chartredraw?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/googlecharts/ChartRedrawView.java'
 cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/googlecharts/chartRedraw.css'
-height='500px'
+height='650px'
 />
 
 <!-- tabs={['ChartDemoRedraw.java', 'redrawchart_styles.css']} -->

docs/components/lists/choice-box.md

@@ -12,12 +12,7 @@ slug: choicebox
 
 <ParentLink parent="List" />
 
-The `ChoiceBox` component is a user interface element designed to present users with a list of options or choices. Users can select a single option from this list, typically by clicking the `ChoiceBox`, which triggers the display of a dropdown list containing available choices. Users can also interact with the `ChoiceBox` with the arrow keys. When a user makes a selection, the chosen option is then displayed in the `ChoiceBox` button. 
-
-<!-- <AppLayoutViewer path='https://demo.webforj.com/webapp/controlsamples?class=componentdemos.choiceboxdemos.ChoiceBoxDemo' mobile='false'
-javaE='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/java/componentdemos/choiceboxdemos/ChoiceBoxDemo.java'
-cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/applayoutstyles/applayout_styles.css'
-/> -->
+The `ChoiceBox` component is a user interface element designed to present users with a list of options or choices. Users can select a single option from this list, typically by clicking the `ChoiceBox`, which triggers the display of a dropdown list containing available choices. Users can also interact with the `ChoiceBox` with the arrow keys. When a user makes a selection, the chosen option is then displayed in the `ChoiceBox` button.
 
 ## Usages
 `ChoiceBox` components are used for various purposes, such as selecting items from a menu, choosing from a list of categories, or picking options from predefined sets. They provide an organized and visually pleasing way for users to make selections, particularly when there are multiple options available. Common usages include:
@@ -68,7 +63,7 @@ Using a number that is less than or equal to 0 will result in unsetting this pro
 path='https://demo.webforj.com/webapp/controlsamples/choiceboxmaxrow?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/lists/choicebox/ChoiceboxMaxRowView.java'
 javaC='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/code_snippets/choicebox/MaxRow.txt'
-height='250px'
+height='450px'
 />
 
 ## Opening and closing

docs/components/lists/combo-box.md

@@ -82,7 +82,7 @@ Using a number that is less than or equal to 0 will result in unsetting this pro
 path='https://demo.webforj.com/webapp/controlsamples/comboboxmaxrow?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/lists/combobox/ComboBoxMaxRowView.java'
 javaC='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/code_snippets/combobox/MaxRow.txt'
-height='250px'
+height='450px'
 />
 
 ## Opening and closing

docs/components/splitter.md

@@ -22,7 +22,6 @@ The `Splitter` component, designed to divide and resize content within your app,
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/splitterbasic?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/splitter/SplitterBasicView.java'
-urls={['https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/java/layout_demos/splitter/SplitterBox.java',]}
 height='300px'
 />
 
@@ -39,7 +38,6 @@ You can specify sizes using any valid CSS units, as shown below:
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/splitterminmax?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/splitter/SplitterMinMaxView.java'
-urls={['https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/java/layout_demos/splitter/SplitterBox.java',]}
 height='300px'
 />
 
@@ -52,7 +50,6 @@ To configure the orientation, use the supported orientations Enum to specify whe
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/splitterorientation?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/splitter/SplitterOrientationView.java'
-urls={['https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/java/layout_demos/splitter/SplitterBox.java',]}
 height='300px'
 />
 
@@ -63,7 +60,6 @@ To set the initial position of the divider bar in the `Splitter` component, use
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/splitterposition?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/splitter/SplitterPositionView.java'
-urls={['https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/java/layout_demos/splitter/SplitterBox.java',]}
 height='300px'
 />
 
@@ -76,7 +72,6 @@ To nest Splitter components, instantiate new `Splitter` instances and add them a
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/splitternested?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/splitter/SplitterNestedView.java'
-urls={['https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/java/layout_demos/splitter/SplitterBox.java',]}
 height='300px'
 />
 
@@ -93,7 +88,6 @@ To programmatically revert the `Splitter` back to default settings and dimension
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/splitterautosave?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/splitter/SplitterAutoSaveView.java'
-urls={['https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/java/layout_demos/splitter/SplitterBox.java',]}
 height='400px'
 />
 

docs/components/table/table_rendering.md

@@ -99,6 +99,7 @@ Below is an example of a `Table` that uses renderers to display rich content:
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/tablerichcontent?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/table/TableRichContentView.java'
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/table/tableRichContent.css'
 urls={['https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/table/MusicRecord.java', 
 'https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/table/Service.java']}
 height='600px'

docs/components/toast.md

@@ -95,7 +95,7 @@ toast.open();
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/toastplacement?'
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/toast/ToastPlacementView.java'
-height='300px'
+height='320px'
 />
 
 By customizing the placement of your `Toast` notifications, you can ensure that users receive information in a way that is appropriate for any given app, screen layout, and context.