diff --git a/404.html b/404.html index b58f92504..876c9c76e 100644 --- a/404.html +++ b/404.html @@ -16,7 +16,7 @@ - +
diff --git a/assets/js/c43ec111.8585fff0.js b/assets/js/c43ec111.2bb70eb4.js similarity index 64% rename from assets/js/c43ec111.8585fff0.js rename to assets/js/c43ec111.2bb70eb4.js index f3219a0cf..89a2e779a 100644 --- a/assets/js/c43ec111.8585fff0.js +++ b/assets/js/c43ec111.2bb70eb4.js @@ -1,4 +1,4 @@ -"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[9332],{14922:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>c,contentTitle:()=>d,default:()=>p,frontMatter:()=>l,metadata:()=>t,toc:()=>h});var t=o(24168),s=o(74848),i=o(28453),a=o(5943),r=o(92809);const l={title:"What's new in version 24.10?",description:"Get to know the features, fixes, and functionality new in webforJ version 24.10.",slug:"whats-new-24.10",date:new Date("2024-07-23T00:00:00.000Z"),authors:"webforJ",tags:["webforJ","v24.10","release"],image:"https://documentation.webforj.com/release_blog/_images/24.10-social.png",hide_table_of_contents:!1},d="24.10",c={authorsImageUrls:[void 0]},h=[{value:"New features and enhancements \ud83c\udf89",id:"new-features-and-enhancements-",level:2},{value:"TextArea
and masked input component",id:"textarea-and-masked-input-component",level:3},{value:"MaskedDateField
& MaskedDateFieldSpinner
",id:"maskeddatefield--maskeddatefieldspinner",level:4},{value:"MaskedNumberField
& MaskedNumberFieldSpinner
",id:"maskednumberfield--maskednumberfieldspinner",level:4},{value:"MaskedTimeField
& MaskedTimeFieldSpinner
",id:"maskedtimefield--maskedtimefieldspinner",level:4},{value:"MaskedTextField
& MaskedTextFieldSpinner
",id:"maskedtextfield--maskedtextfieldspinner",level:4},{value:"TextArea
",id:"textarea",level:4},{value:"BusyIndicator
, Loading
and Spinner
components",id:"busyindicator-loading-and-spinner-components",level:3},{value:"Terminal emulator",id:"terminal-emulator",level:3},{value:"Column layout",id:"column-layout",level:3},{value:"Slider overhaul",id:"slider-overhaul",level:3},{value:"Toast component",id:"toast-component",level:3},{value:"Debugging tooling",id:"debugging-tooling",level:3},{value:"Breaking changes \ud83d\udee0",id:"breaking-changes-",level:2},{value:"Console logging",id:"console-logging",level:3},{value:"HTML container",id:"html-container",level:3},{value:"Rendering HTML in components",id:"rendering-html-in-components",level:3}];function m(e){const n={a:"a",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"cover image",src:o(87105).A+"",width:"1200",height:"630"})}),"\n",(0,s.jsx)(n.p,{children:"webforJ version 24.10 is live and available for development. Learn more about what main features and fixes are included in this release."}),"\n",(0,s.jsxs)(n.p,{children:["As always, see the ",(0,s.jsx)(n.a,{href:"https://github.com/webforj/webforj/releases/tag/24.10",children:"GitHub release overview"})," for a more comprehensive list of changes."]}),"\n",(0,s.jsx)(n.h2,{id:"new-features-and-enhancements-",children:"New features and enhancements \ud83c\udf89"}),"\n",(0,s.jsx)(n.p,{children:"The following new components, features, and enhancements to various existing behavior have been introduced in this release:"}),"\n",(0,s.jsxs)(n.h3,{id:"textarea-and-masked-input-component",children:[(0,s.jsx)(n.code,{children:"TextArea"})," and masked input component"]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"24.10"})," brings the addition of several new components to the webforJ library. This release introduces various masked fields and decorators that utilize masked input, allowing for specific input patterns. The following components have been made available for development:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.h4,{id:"maskeddatefield--maskeddatefieldspinner",children:[(0,s.jsx)(n.code,{children:"MaskedDateField"})," & ",(0,s.jsx)(n.code,{children:"MaskedDateFieldSpinner"})]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsx)(n.p,{children:"These components allow users to input dates with a predefined format, with the spinner variant providing an intuitive way for users to increment or decrement date values."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.h4,{id:"maskednumberfield--maskednumberfieldspinner",children:[(0,s.jsx)(n.code,{children:"MaskedNumberField"})," & ",(0,s.jsx)(n.code,{children:"MaskedNumberFieldSpinner"})]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsx)(n.p,{children:"Designed for numerical input, these fields ensure that users can only enter valid numbers. The spinner variant adds convenience by allowing users to adjust the value using increment/decrement controls."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.h4,{id:"maskedtimefield--maskedtimefieldspinner",children:[(0,s.jsx)(n.code,{children:"MaskedTimeField"})," & ",(0,s.jsx)(n.code,{children:"MaskedTimeFieldSpinner"})]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsx)(n.p,{children:"These components handle time inputs, enforcing a standard time format. The spinner variant provides controls for easily adjusting time values."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.h4,{id:"maskedtextfield--maskedtextfieldspinner",children:[(0,s.jsx)(n.code,{children:"MaskedTextField"})," & ",(0,s.jsx)(n.code,{children:"MaskedTextFieldSpinner"})]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.h4,{id:"textarea",children:(0,s.jsx)(n.code,{children:"TextArea"})}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsx)(n.p,{children:"A versatile, multi-line text input component ideal for larger text entries, such as comments or descriptions."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.h3,{id:"busyindicator-loading-and-spinner-components",children:[(0,s.jsx)(n.code,{children:"BusyIndicator"}),", ",(0,s.jsx)(n.code,{children:"Loading"})," and ",(0,s.jsx)(n.code,{children:"Spinner"})," components"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"Spinner"})," and ",(0,s.jsx)(n.code,{children:"BusyIndicator"})," components have both been added in this release to the core webforJ components. The ",(0,s.jsx)(n.code,{children:"Spinner"})," provides a simple, elegant way to display a loading animation, and can be used independently or as part of the ",(0,s.jsx)(n.code,{children:"BusyIndicator"})," or ",(0,s.jsx)(n.code,{children:"Loading"})," components."]}),"\n",(0,s.jsxs)(n.p,{children:["Building on the ",(0,s.jsx)(n.code,{children:"Spinner"}),", the ",(0,s.jsx)(n.code,{children:"BusyIndicator"})," is an app-level loading overlay that indicates when the app is busy or processing data. It blocks user interaction until the process is complete. This component displays both a ",(0,s.jsx)(n.code,{children:"Spinner"})," and a textual description while the process is occurring."]}),"\n",(0,s.jsx)(a.A,{path:"https://demo.webforj.com/webapp/controlsamples/busyindicator?",javaE:"https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/busyindicator/BusyIndicatorView.java",height:"225px"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"Loading"})," component uses the same client component, but allows the addition of children and can be attached to any parent component, making it scoped to its parent."]}),"\n",(0,s.jsx)(n.h3,{id:"terminal-emulator",children:"Terminal emulator"}),"\n",(0,s.jsxs)(n.p,{children:["The webforJ ",(0,s.jsx)(n.code,{children:"Terminal"})," component represents an exciting opportunity to emulate a terminal in a webforJ app. Based on ",(0,s.jsx)(n.code,{children:"xterm.js"}),", this tool allows for interactions with a terminal while running within a webforJ app, blending command line features with modern web app capabilities."]}),"\n",(0,s.jsx)("video",{width:"100%",height:"300px",controls:!0,children:(0,s.jsx)("source",{src:r.A,type:"video/mp4"})}),"\n",(0,s.jsx)(n.h3,{id:"column-layout",children:"Column layout"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"ColumnsLayout"})," component has come to webforJ in ",(0,s.jsx)(n.code,{children:"24.10"}),", and is designed to offer a flexible and responsive layout solution in addition to the ",(0,s.jsx)(n.a,{href:"../../docs/components/flex-layout",children:"FlexLayout"})," component. The ",(0,s.jsx)(n.code,{children:"ColumnsLayout"})," easily facilitates two-dimensional layouts by providing columns rather than just rows. It dynamically adjusts the number of columns based on the width of the layout and utilizes breakpoints to determine how many columns should be displayed at different viewport widths to help with responsiveness."]}),"\n",(0,s.jsx)(a.A,{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"}),"\n",(0,s.jsxs)(n.p,{children:["In addition to dynamic column adjustments, ",(0,s.jsx)(n.code,{children:"ColumnsLayout"})," supports customizable alignment and spacing options. The ",(0,s.jsx)(n.code,{children:"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."]}),"\n",(0,s.jsx)(n.p,{children:"Next time you build a form, give this new component a try in your app!"}),"\n",(0,s.jsx)(n.h3,{id:"slider-overhaul",children:"Slider overhaul"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"Slider"})," component has received on overhaul in this release. The appearance and use case for the component remains the same, ensuring that your applications have the same look and feel as they did prior to the updated API overhaul."]}),"\n",(0,s.jsx)(n.p,{children:"However, with this rework, a few of the methods have changed to better reflect modern standards. If you are using this component in your app, review the following methods to ensure you're using the updated API. An example of the various methods can be seen in the code demo below:"}),"\n",(0,s.jsx)(a.A,{path:"https://demo.webforj.com/webapp/controlsamples/sliderdemo?",javaE:"https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/slider/SliderDemoView.java",height:"150px"}),"\n",(0,s.jsx)(n.h3,{id:"toast-component",children:"Toast component"}),"\n",(0,s.jsxs)(n.p,{children:["Another powerful component introduced in ",(0,s.jsx)(n.code,{children:"24.10"})," is the ",(0,s.jsx)(n.code,{children:"Toast"})," component, which offers a subtle notification system commonly used in modern applications to inform users about the completion of an operation, system messages, or other important updates."]}),"\n",(0,s.jsx)(n.p,{children:"Developers can set the display duration, choose from various themes, and configure the position of the toast on the screen. The component supports multiple placements, and also allows for setting custom text and HTML content, giving developers the ability to style the messages as needed."}),"\n",(0,s.jsx)(a.A,{path:"https://demo.webforj.com/webapp/controlsamples/toastdemo?",javaE:"https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/toast/ToastDemoView.java",height:"300px"}),"\n",(0,s.jsx)(n.h3,{id:"debugging-tooling",children:"Debugging tooling"}),"\n",(0,s.jsxs)(n.p,{children:["Logging to the console has gotten much more powerful in ",(0,s.jsx)(n.code,{children:"24.10"}),". A dedicated utility class can now be accessed statically through the ",(0,s.jsx)(n.code,{children:"App"})," class to log styled messages to the browser console."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-java",children:'// Types\nconsole().log("Log message");\nconsole().info("Info message");\nconsole().warn("Warn message");\nconsole().error("Error message");\nconsole().debug("Debug message");\n'})}),"\n",(0,s.jsx)(n.p,{children:"A variety of builder-patterned methods are available for more fine-grained control over the appearance of messages in the console. These include font weight, style, size, text color, background color, and other configurations."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-java",children:'// A variety of options for custom logging display\nconsole().weight().bolder().size().from("30px").color().red().style().italic().transform()\n .uppercase().background().cyan().warn("Mixing Styles");\n\n'})}),"\n",(0,s.jsx)(n.h2,{id:"breaking-changes-",children:"Breaking changes \ud83d\udee0"}),"\n",(0,s.jsx)(n.p,{children:"When updating an existing project using an older version of webforJ, keep an eye out for the following breaking changes:"}),"\n",(0,s.jsx)(n.h3,{id:"console-logging",children:"Console logging"}),"\n",(0,s.jsxs)(n.p,{children:["Using the browser's console to get valuable program information printed is an integral part of the development process. Previously, the ",(0,s.jsx)(n.code,{children:"App.consoleLog()"})," and ",(0,s.jsx)(n.code,{children:"App.consoleError()"})," methods enabled this behavior. In ",(0,s.jsx)(n.code,{children:"24.10"}),", these methods have been marked for deprecation. Going forward, use ",(0,s.jsx)(n.code,{children:"BrowserConsole"}),", which comes with a slough of new features to enhance logging capabilities. The new equivalent method to print to the console is ",(0,s.jsx)(n.a,{href:"#debugging-tooling",children:(0,s.jsx)(n.code,{children:"App.console().log()"})}),"."]}),"\n",(0,s.jsx)(n.h3,{id:"html-container",children:"HTML container"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"HtmlContainer"})," component is marked for deprecation in ",(0,s.jsx)(n.code,{children:"24.10"}),". Going forward, use ",(0,s.jsx)(n.code,{children:"Element"})," instead for custom content or use the ",(0,s.jsx)(n.code,{children:"Iframe"})," component for embedding pages."]}),"\n",(0,s.jsx)(n.h3,{id:"rendering-html-in-components",children:"Rendering HTML in components"}),"\n",(0,s.jsxs)(n.p,{children:["Setting HTML text that's not specifically wrapped with ",(0,s.jsx)(n.code,{children:""})," tags using the ",(0,s.jsx)(n.code,{children:"setText"})," method is no longer possible. To set HTML, make sure to wrap your code with these tags to properly render the desired code."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-java",children:'// Valid\nButton home = new Button("""\n \n TextArea
and masked input component",id:"textarea-and-masked-input-component",level:3},{value:"MaskedDateField
& MaskedDateFieldSpinner
",id:"maskeddatefield--maskeddatefieldspinner",level:4},{value:"MaskedNumberField
& MaskedNumberFieldSpinner
",id:"maskednumberfield--maskednumberfieldspinner",level:4},{value:"MaskedTimeField
& MaskedTimeFieldSpinner
",id:"maskedtimefield--maskedtimefieldspinner",level:4},{value:"MaskedTextField
& MaskedTextFieldSpinner
",id:"maskedtextfield--maskedtextfieldspinner",level:4},{value:"TextArea
",id:"textarea",level:4},{value:"BusyIndicator
, Loading
and Spinner
components",id:"busyindicator-loading-and-spinner-components",level:3},{value:"Terminal emulator",id:"terminal-emulator",level:3},{value:"Column layout",id:"column-layout",level:3},{value:"Slider overhaul",id:"slider-overhaul",level:3},{value:"Toast component",id:"toast-component",level:3},{value:"Debugging tooling",id:"debugging-tooling",level:3},{value:"Breaking changes \ud83d\udee0",id:"breaking-changes-",level:2},{value:"Console logging",id:"console-logging",level:3},{value:"HTML container",id:"html-container",level:3},{value:"Rendering HTML in components",id:"rendering-html-in-components",level:3}];function m(e){const n={a:"a",blockquote:"blockquote",code:"code",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"cover image",src:o(87105).A+"",width:"1200",height:"630"})}),"\n",(0,s.jsx)(n.p,{children:"webforJ version 24.10 is live and available for development. Learn more about what main features and fixes are included in this release."}),"\n",(0,s.jsxs)(n.p,{children:["As always, see the ",(0,s.jsx)(n.a,{href:"https://github.com/webforj/webforj/releases/tag/24.10",children:"GitHub release overview"})," for a more comprehensive list of changes."]}),"\n",(0,s.jsx)(n.h2,{id:"new-features-and-enhancements-",children:"New features and enhancements \ud83c\udf89"}),"\n",(0,s.jsx)(n.p,{children:"The following new components, features, and enhancements to various existing behavior have been introduced in this release:"}),"\n",(0,s.jsxs)(n.h3,{id:"textarea-and-masked-input-component",children:[(0,s.jsx)(n.code,{children:"TextArea"})," and masked input component"]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"24.10"})," brings the addition of several new components to the webforJ library. This release introduces various masked fields and decorators that utilize masked input, allowing for specific input patterns. The following components have been made available for development:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.h4,{id:"maskeddatefield--maskeddatefieldspinner",children:[(0,s.jsx)(n.code,{children:"MaskedDateField"})," & ",(0,s.jsx)(n.code,{children:"MaskedDateFieldSpinner"})]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsx)(n.p,{children:"These components allow users to input dates with a predefined format, with the spinner variant providing an intuitive way for users to increment or decrement date values."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.h4,{id:"maskednumberfield--maskednumberfieldspinner",children:[(0,s.jsx)(n.code,{children:"MaskedNumberField"})," & ",(0,s.jsx)(n.code,{children:"MaskedNumberFieldSpinner"})]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsx)(n.p,{children:"Designed for numerical input, these fields ensure that users can only enter valid numbers. The spinner variant adds convenience by allowing users to adjust the value using increment/decrement controls."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.h4,{id:"maskedtimefield--maskedtimefieldspinner",children:[(0,s.jsx)(n.code,{children:"MaskedTimeField"})," & ",(0,s.jsx)(n.code,{children:"MaskedTimeFieldSpinner"})]}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsx)(n.p,{children:"These components handle time inputs, enforcing a standard time format. The spinner variant provides controls for easily adjusting time values."}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.h4,{id:"maskedtextfield--maskedtextfieldspinner",children:[(0,s.jsx)(n.code,{children:"MaskedTextField"})," & ",(0,s.jsx)(n.code,{children:"MaskedTextFieldSpinner"})]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.h4,{id:"textarea",children:(0,s.jsx)(n.code,{children:"TextArea"})}),"\n",(0,s.jsxs)(n.blockquote,{children:["\n",(0,s.jsx)(n.p,{children:"A versatile, multi-line text input component ideal for larger text entries, such as comments or descriptions."}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(n.h3,{id:"busyindicator-loading-and-spinner-components",children:[(0,s.jsx)(n.code,{children:"BusyIndicator"}),", ",(0,s.jsx)(n.code,{children:"Loading"})," and ",(0,s.jsx)(n.code,{children:"Spinner"})," components"]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"Spinner"})," and ",(0,s.jsx)(n.code,{children:"BusyIndicator"})," components have both been added in this release to the core webforJ components. The ",(0,s.jsx)(n.code,{children:"Spinner"})," provides a simple, elegant way to display a loading animation, and can be used independently or as part of the ",(0,s.jsx)(n.code,{children:"BusyIndicator"})," or ",(0,s.jsx)(n.code,{children:"Loading"})," components."]}),"\n",(0,s.jsxs)(n.p,{children:["Building on the ",(0,s.jsx)(n.code,{children:"Spinner"}),", the ",(0,s.jsx)(n.code,{children:"BusyIndicator"})," is an app-level loading overlay that indicates when the app is busy or processing data. It blocks user interaction until the process is complete. This component displays both a ",(0,s.jsx)(n.code,{children:"Spinner"})," and a textual description while the process is occurring."]}),"\n",(0,s.jsx)(a.A,{path:"https://demo.webforj.com/webapp/controlsamples/busyindicator?",javaE:"https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/busyindicator/BusyIndicatorView.java",height:"225px"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"Loading"})," component uses the same client component, but allows the addition of children and can be attached to any parent component, making it scoped to its parent."]}),"\n",(0,s.jsx)(n.h3,{id:"terminal-emulator",children:"Terminal emulator"}),"\n",(0,s.jsxs)(n.p,{children:["The webforJ ",(0,s.jsx)(n.code,{children:"Terminal"})," component represents an exciting opportunity to emulate a terminal in a webforJ app. Based on ",(0,s.jsx)(n.code,{children:"xterm.js"}),", this tool allows for interactions with a terminal while running within a webforJ app, blending command line features with modern web app capabilities."]}),"\n",(0,s.jsx)("video",{width:"100%",height:"300px",controls:!0,children:(0,s.jsx)("source",{src:r.A,type:"video/mp4"})}),"\n",(0,s.jsx)(n.h3,{id:"column-layout",children:"Column layout"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"ColumnsLayout"})," component has come to webforJ in ",(0,s.jsx)(n.code,{children:"24.10"}),", and is designed to offer a flexible and responsive layout solution in addition to the ",(0,s.jsx)(n.a,{href:"../../docs/components/flex-layout",children:"FlexLayout"})," component. The ",(0,s.jsx)(n.code,{children:"ColumnsLayout"})," easily facilitates two-dimensional layouts by providing columns rather than just rows. It dynamically adjusts the number of columns based on the width of the layout and utilizes breakpoints to determine how many columns should be displayed at different viewport widths to help with responsiveness."]}),"\n",(0,s.jsx)(a.A,{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"}),"\n",(0,s.jsxs)(n.p,{children:["In addition to dynamic column adjustments, ",(0,s.jsx)(n.code,{children:"ColumnsLayout"})," supports customizable alignment and spacing options. The ",(0,s.jsx)(n.code,{children:"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."]}),"\n",(0,s.jsx)(n.p,{children:"Next time you build a form, give this new component a try in your app!"}),"\n",(0,s.jsx)(n.h3,{id:"slider-overhaul",children:"Slider overhaul"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"Slider"})," component has received on overhaul in this release. The appearance and use case for the component remains the same, ensuring that your applications have the same look and feel as they did prior to the updated API overhaul."]}),"\n",(0,s.jsx)(n.p,{children:"However, with this rework, a few of the methods have changed to better reflect modern standards. If you are using this component in your app, review the following methods to ensure you're using the updated API. An example of the various methods can be seen in the code demo below:"}),"\n",(0,s.jsx)(a.A,{path:"https://demo.webforj.com/webapp/controlsamples/sliderdemo?",javaE:"https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/slider/SliderDemoView.java",height:"150px"}),"\n",(0,s.jsx)(n.h3,{id:"toast-component",children:"Toast component"}),"\n",(0,s.jsxs)(n.p,{children:["Another powerful component introduced in ",(0,s.jsx)(n.code,{children:"24.10"})," is the ",(0,s.jsx)(n.code,{children:"Toast"})," component, which offers a subtle notification system commonly used in modern applications to inform users about the completion of an operation, system messages, or other important updates."]}),"\n",(0,s.jsx)(n.p,{children:"Developers can set the display duration, choose from various themes, and configure the position of the toast on the screen. The component supports multiple placements, and also allows for setting custom text and HTML content, giving developers the ability to style the messages as needed."}),"\n",(0,s.jsx)(a.A,{path:"https://demo.webforj.com/webapp/controlsamples/toast?",javaE:"https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/toast/ToastView.java",height:"300px"}),"\n",(0,s.jsx)(n.h3,{id:"debugging-tooling",children:"Debugging tooling"}),"\n",(0,s.jsxs)(n.p,{children:["Logging to the console has gotten much more powerful in ",(0,s.jsx)(n.code,{children:"24.10"}),". A dedicated utility class can now be accessed statically through the ",(0,s.jsx)(n.code,{children:"App"})," class to log styled messages to the browser console."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-java",children:'// Types\nconsole().log("Log message");\nconsole().info("Info message");\nconsole().warn("Warn message");\nconsole().error("Error message");\nconsole().debug("Debug message");\n'})}),"\n",(0,s.jsx)(n.p,{children:"A variety of builder-patterned methods are available for more fine-grained control over the appearance of messages in the console. These include font weight, style, size, text color, background color, and other configurations."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-java",children:'// A variety of options for custom logging display\nconsole().weight().bolder().size().from("30px").color().red().style().italic().transform()\n .uppercase().background().cyan().warn("Mixing Styles");\n\n'})}),"\n",(0,s.jsx)(n.h2,{id:"breaking-changes-",children:"Breaking changes \ud83d\udee0"}),"\n",(0,s.jsx)(n.p,{children:"When updating an existing project using an older version of webforJ, keep an eye out for the following breaking changes:"}),"\n",(0,s.jsx)(n.h3,{id:"console-logging",children:"Console logging"}),"\n",(0,s.jsxs)(n.p,{children:["Using the browser's console to get valuable program information printed is an integral part of the development process. Previously, the ",(0,s.jsx)(n.code,{children:"App.consoleLog()"})," and ",(0,s.jsx)(n.code,{children:"App.consoleError()"})," methods enabled this behavior. In ",(0,s.jsx)(n.code,{children:"24.10"}),", these methods have been marked for deprecation. Going forward, use ",(0,s.jsx)(n.code,{children:"BrowserConsole"}),", which comes with a slough of new features to enhance logging capabilities. The new equivalent method to print to the console is ",(0,s.jsx)(n.a,{href:"#debugging-tooling",children:(0,s.jsx)(n.code,{children:"App.console().log()"})}),"."]}),"\n",(0,s.jsx)(n.h3,{id:"html-container",children:"HTML container"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"HtmlContainer"})," component is marked for deprecation in ",(0,s.jsx)(n.code,{children:"24.10"}),". Going forward, use ",(0,s.jsx)(n.code,{children:"Element"})," instead for custom content or use the ",(0,s.jsx)(n.code,{children:"Iframe"})," component for embedding pages."]}),"\n",(0,s.jsx)(n.h3,{id:"rendering-html-in-components",children:"Rendering HTML in components"}),"\n",(0,s.jsxs)(n.p,{children:["Setting HTML text that's not specifically wrapped with ",(0,s.jsx)(n.code,{children:""})," tags using the ",(0,s.jsx)(n.code,{children:"setText"})," method is no longer possible. To set HTML, make sure to wrap your code with these tags to properly render the desired code."]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-java",children:'// Valid\nButton home = new Button("""\n \n Another powerful component introduced in 24.10
is the Toast
component, which offers a subtle notification system commonly used in modern applications to inform users about the completion of an operation, system messages, or other important updates.
Developers can set the display duration, choose from various themes, and configure the position of the toast on the screen. The component supports multiple placements, and also allows for setting custom text and HTML content, giving developers the ability to style the messages as needed.
-
Logging to the console has gotten much more powerful in 24.10
. A dedicated utility class can now be accessed statically through the App
class to log styled messages to the browser console.
// Types
console().log("Log message");
console().info("Info message");
console().warn("Warn message");
console().error("Error message");
console().debug("Debug message");
Another powerful component introduced in 24.10
is the Toast
component, which offers a subtle notification system commonly used in modern applications to inform users about the completion of an operation, system messages, or other important updates.
Developers can set the display duration, choose from various themes, and configure the position of the toast on the screen. The component supports multiple placements, and also allows for setting custom text and HTML content, giving developers the ability to style the messages as needed.
-
Logging to the console has gotten much more powerful in 24.10
. A dedicated utility class can now be accessed statically through the App
class to log styled messages to the browser console.
// Types
console().log("Log message");
console().info("Info message");
console().warn("Warn message");
console().error("Error message");
console().debug("Debug message");
Another powerful component introduced in 24.10
is the Toast
component, which offers a subtle notification system commonly used in modern applications to inform users about the completion of an operation, system messages, or other important updates.
Developers can set the display duration, choose from various themes, and configure the position of the toast on the screen. The component supports multiple placements, and also allows for setting custom text and HTML content, giving developers the ability to style the messages as needed.
-
Logging to the console has gotten much more powerful in 24.10
. A dedicated utility class can now be accessed statically through the App
class to log styled messages to the browser console.
// Types
console().log("Log message");
console().info("Info message");
console().warn("Warn message");
console().error("Error message");
console().debug("Debug message");