diff --git a/404.html b/404.html index 67a988182..f06afc15e 100644 --- a/404.html +++ b/404.html @@ -13,7 +13,7 @@ - +
diff --git a/assets/js/2abf1b13.74f37f73.js b/assets/js/2abf1b13.74f37f73.js deleted file mode 100644 index 19ac54d8a..000000000 --- a/assets/js/2abf1b13.74f37f73.js +++ /dev/null @@ -1,100 +0,0 @@ -"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[4373],{6672:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>b,frontMatter:()=>c,metadata:()=>h,toc:()=>p});var s=n(5893),i=n(1151),o=n(6957),r=n(7796),a=n(3273),l=n(2665);const c={sidebar_position:3,title:"ListBox",slug:"listbox"},d=void 0,h={id:"components/list-components/list-box",title:"ListBox",description:"The ListBox component is a user interface element designed to display a scrollable list of objects and allows users to select single or multiple items from the list. Users can also interact with the ListBox with the arrow keys.",source:"@site/docs/components/list-components/list-box.md",sourceDirName:"components/list-components",slug:"/components/list-components/listbox",permalink:"/docs/components/list-components/listbox",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/list-components/list-box.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"ListBox",slug:"listbox"},sidebar:"documentationSidebar",previous:{title:"ComboBox",permalink:"/docs/components/list-components/combobox"},next:{title:"ProgressBar",permalink:"/docs/components/progress-bar"}},u={},p=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"Selection Options",id:"selection-options",level:2},{value:"Events",id:"events",level:2},{value:"Adding Events",id:"adding-events",level:3},{value:"Removing Events",id:"removing-events",level:3},{value:"Styling",id:"styling",level:2},{value:"Expanses",id:"expanses",level:3},{value:"Shadow Parts",id:"shadow-parts",level:3},{value:"CSS Properties",id:"css-properties",level:3},{value:"Reflected Attributes",id:"reflected-attributes",level:3},{value:"Dependencies",id:"dependencies",level:3},{value:"Best Practices",id:"best-practices",level:2}];function m(e){const t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l.Z,{tooltipText:"This component will render with a shadow DOM, an API built into the browser that facilitates encapsulation.",label:"Shadow",component:"a",href:"../../glossary#shadow-dom",target:"_blank",clickable:!0,iconName:"shadow"}),"\n",(0,s.jsx)(l.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-list-box",href:"https://basishub.github.io/basis-next/#/web-components/bbj-list-box",clickable:!1,iconName:"code"}),"\n",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/button/Button",top:"true"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"ListBox"})," component is a user interface element designed to display a scrollable list of objects and allows users to select single or multiple items from the list. Users can also interact with the ",(0,s.jsx)(t.code,{children:"ListBox"})," with the arrow keys."]}),"\n",(0,s.jsx)(o.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.listboxdemos.ListboxDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/listboxdemos/ListboxDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/listboxstyles/listbox_demo.css",height:"250px"}),"\n",(0,s.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"User Role Assignment"}),": In applications with user access control, administrators can use a ",(0,s.jsx)(t.code,{children:"ListBox"})," to assign roles and permissions to users. Users are selected from a list, and the roles or permissions are assigned based on their selection. This ensures precise and controlled access to different features and data within the application."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Project Task Assignment"}),": In project management software, ",(0,s.jsx)(t.code,{children:"ListBox"})," components are useful for assigning tasks to team members. Users can select tasks from a list and assign them to different team members. This simplifies task delegation and ensures that responsibilities are clearly defined within the team."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Multi-Category Filtering"}),": In a search application, users often need to filter search results based on multiple criteria. A ",(0,s.jsx)(t.code,{children:"ListBox"})," can display various filter options, such as"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Product features"}),"\n",(0,s.jsx)(t.li,{children:"Price ranges"}),"\n",(0,s.jsx)(t.li,{children:"Brands."}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:"Users can select items from each filter category, allowing them to refine search results and find exactly what they're looking for."}),"\n",(0,s.jsxs)(t.ol,{start:"4",children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:"Content Categorization"}),": In content management systems, ",(0,s.jsx)(t.code,{children:"ListBox"})," components assist in categorizing articles, images, or files. Users can select one or more categories to associate with their content, making it easier to organize and search for content items in the system."]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ListBox()"})}),": Constructs a new ",(0,s.jsx)(t.code,{children:"ListBox"})," without a label."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ListBox(String label)"})}),": Constructs a new ",(0,s.jsx)(t.code,{children:"ListBox"})," with the specified label."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(t.strong,{children:(0,s.jsx)(t.code,{children:"ListBox(String label, ComponentEventListenerThe ChoiceBox
class provides methods to add and remove event listeners for the following events, as well as events common to all list components:
Events | Description |
---|---|
An event which is fired when a list dropdown is opened. | |
An event which is fired when a list dropdown is closed. | |
This event is triggered when the user clicks an item from a List-based component. |
For a list of additional events supported by the ChoiceBox
, see this section which outlines shared events amongst list components.
For a list of additional events supported by the ChoiceBox
, see this section which outlines shared events amongst list components.
To add an event listener, use one of the following patterns:
choiceBox.addOpenListener(e -> {
//Executed when the event fires
});
//OR
choiceBox.addOpenListener(new ComponentEventListener<ListOpenEvent>() {
@Override
public void onComponentEvent(ComponentEvent e){
//Executed when the event fires
}
});
//OR
choiceBox.addOpenListener(this::listOpenMethod);
The ComboBox
class provides methods to add and remove event listeners for the following events, as well as events common to all list components:
Events | Description |
---|---|
An event which is fired when a list dropdown is opened. | |
An event which is fired when a list dropdown is closed. | |
This event is triggered when the user clicks an item from a List-based component. | |
An event that is fired when a component is edited or modified. | |
A Keypress event is fired when a user presses a specific key on the keyboard while an element has focus. This event is commonly used to capture and respond to user keyboard interactions. When a Keypress event is triggered,the key that was pressed can be determine using the key code, and a specific action or actions can be performed based on the user's input. For example, it can be used to validate user input in form fields, implement keyboard shortcuts, or trigger certain actions based on specific key combinations. |
For a list of additional events supported by the ComboBox
, see this section which outlines shared events amongst list components.
For a list of additional events supported by the ComboBox
, see this section which outlines shared events amongst list components.
To add an event listener, use one of the following patterns:
comboBox.addKeypressEvent(e -> {
//Executed when the event fires
});
//OR
comboBox.addKeypressEvent(new ComponentEventListener<KeypressEvent>() {
@Override
public void onComponentEvent(ComponentEvent e){
//Executed when the event fires
}
});
//OR
comboBox.addKeypressEvent(this::keypressMethod);
The ListBox
class provides methods to add and remove event listeners for the events common to all list components.
For a list of events supported by the ListBox
, see this section which outlines shared events amongst list components.
For a list of events supported by the ListBox
, see this section which outlines shared events amongst list components.
To add an event listener, use one of the following patterns:
listBox.addSelectListener(e -> {
//Executed when the event fires
});
//OR
listBox.addSelectListener(new ComponentEventListener<ListSelectEvent>() {
@Override
public void onComponentEvent(ComponentEvent e){
//Executed when the event fires
}
});
//OR
listBox.addSelectListener(this::propertyChangeMethod);