Drawer
The drawer is a container that slides into the viewport to expose additional options and information. Multiple drawers can be created in an application, and they will be stacked above each other.
The Drawer component can be used in many different situations, such as by providing a navigation menu that can be toggled, a panel that displays supplementary or contextual information, or to optimize usage on a mobile device. The following example will show a mobile application that uses the DWCJ's AppLayout component, and displays a "Welcome Popup" drawer at the bottom when first loaded. Additionally, a navigational Drawer component can be toggled in the application by clicking on the hamburger menu.
-Show Code
- Java
- CSS
Usages
-
diff --git a/docs/components/events/BlurEvent.html b/docs/components/events/BlurEvent.html
index e242ff139..5cca83ef1 100644
--- a/docs/components/events/BlurEvent.html
+++ b/docs/components/events/BlurEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/ButtonClickEvent.html b/docs/components/events/ButtonClickEvent.html
index dd3c9b4ea..19711eda0 100644
--- a/docs/components/events/ButtonClickEvent.html
+++ b/docs/components/events/ButtonClickEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/CheckEvent.html b/docs/components/events/CheckEvent.html
index b08fa1e74..208932e52 100644
--- a/docs/components/events/CheckEvent.html
+++ b/docs/components/events/CheckEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/FocusEvent.html b/docs/components/events/FocusEvent.html
index 1ad8d540f..b26456bbb 100644
--- a/docs/components/events/FocusEvent.html
+++ b/docs/components/events/FocusEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/KeypressEvent.html b/docs/components/events/KeypressEvent.html
index dd062d198..53184af03 100644
--- a/docs/components/events/KeypressEvent.html
+++ b/docs/components/events/KeypressEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/ListClickEvent.html b/docs/components/events/ListClickEvent.html
index d89dc36e3..b62ee770e 100644
--- a/docs/components/events/ListClickEvent.html
+++ b/docs/components/events/ListClickEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/ListCloseEvent.html b/docs/components/events/ListCloseEvent.html
index da245910f..394fba81f 100644
--- a/docs/components/events/ListCloseEvent.html
+++ b/docs/components/events/ListCloseEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/ListEvent.html b/docs/components/events/ListEvent.html
index 356beb846..c54f52121 100644
--- a/docs/components/events/ListEvent.html
+++ b/docs/components/events/ListEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/ListOpenEvent.html b/docs/components/events/ListOpenEvent.html
index 69e1b4b0a..8928dd168 100644
--- a/docs/components/events/ListOpenEvent.html
+++ b/docs/components/events/ListOpenEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/ListSelectEvent.html b/docs/components/events/ListSelectEvent.html
index 12aed81da..ce582653b 100644
--- a/docs/components/events/ListSelectEvent.html
+++ b/docs/components/events/ListSelectEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/ModifyEvent.html b/docs/components/events/ModifyEvent.html
index d64481982..a7c8fba3b 100644
--- a/docs/components/events/ModifyEvent.html
+++ b/docs/components/events/ModifyEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/MouseEnterEvent.html b/docs/components/events/MouseEnterEvent.html
index c183bc867..dce10a7d3 100644
--- a/docs/components/events/MouseEnterEvent.html
+++ b/docs/components/events/MouseEnterEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/MouseExitEvent.html b/docs/components/events/MouseExitEvent.html
index 518a52fe1..fc39b3941 100644
--- a/docs/components/events/MouseExitEvent.html
+++ b/docs/components/events/MouseExitEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/RightMouseDownEvent.html b/docs/components/events/RightMouseDownEvent.html
index 45080c98f..329e809c3 100644
--- a/docs/components/events/RightMouseDownEvent.html
+++ b/docs/components/events/RightMouseDownEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/ToggleEvent.html b/docs/components/events/ToggleEvent.html
index f2a1f2a7c..33977777f 100644
--- a/docs/components/events/ToggleEvent.html
+++ b/docs/components/events/ToggleEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/UncheckEvent.html b/docs/components/events/UncheckEvent.html
index 109993570..546e32c1f 100644
--- a/docs/components/events/UncheckEvent.html
+++ b/docs/components/events/UncheckEvent.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/events/event.html b/docs/components/events/event.html
index 916cd4ec7..f5de6e102 100644
--- a/docs/components/events/event.html
+++ b/docs/components/events/event.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/fields.html b/docs/components/fields.html
index c7cc0da0f..169b8a594 100644
--- a/docs/components/fields.html
+++ b/docs/components/fields.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/fields/colorfield.html b/docs/components/fields/colorfield.html
index 0b9a94785..f98df9ab5 100644
--- a/docs/components/fields/colorfield.html
+++ b/docs/components/fields/colorfield.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/fields/datefield.html b/docs/components/fields/datefield.html
index b84ed1ce9..15a8e5335 100644
--- a/docs/components/fields/datefield.html
+++ b/docs/components/fields/datefield.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/fields/datetimefield.html b/docs/components/fields/datetimefield.html
index 8f6646a8f..96d1d9394 100644
--- a/docs/components/fields/datetimefield.html
+++ b/docs/components/fields/datetimefield.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/fields/numberfield.html b/docs/components/fields/numberfield.html
index 5d71d7d7f..28264bbcd 100644
--- a/docs/components/fields/numberfield.html
+++ b/docs/components/fields/numberfield.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/fields/passwordfield.html b/docs/components/fields/passwordfield.html
index 3d6a8ad98..cc6181fe1 100644
--- a/docs/components/fields/passwordfield.html
+++ b/docs/components/fields/passwordfield.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/fields/textfield.html b/docs/components/fields/textfield.html
index 1d8a7f849..e3d0a2d17 100644
--- a/docs/components/fields/textfield.html
+++ b/docs/components/fields/textfield.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/fields/timefield.html b/docs/components/fields/timefield.html
index 45c750053..457834cf1 100644
--- a/docs/components/fields/timefield.html
+++ b/docs/components/fields/timefield.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/home.html b/docs/components/home.html
index f2b68b842..46298f8a1 100644
--- a/docs/components/home.html
+++ b/docs/components/home.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/label.html b/docs/components/label.html
index 46bb2c888..14af2ccb8 100644
--- a/docs/components/label.html
+++ b/docs/components/label.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/list-components/choicebox.html b/docs/components/list-components/choicebox.html
index 728bf4920..4c10030ca 100644
--- a/docs/components/list-components/choicebox.html
+++ b/docs/components/list-components/choicebox.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/list-components/combobox.html b/docs/components/list-components/combobox.html
index 6762bb734..3d7857134 100644
--- a/docs/components/list-components/combobox.html
+++ b/docs/components/list-components/combobox.html
@@ -13,7 +13,7 @@
-
+
diff --git a/docs/components/list-components/listbox.html b/docs/components/list-components/listbox.html
index a822a4777..83600d2de 100644
--- a/docs/components/list-components/listbox.html
+++ b/docs/components/list-components/listbox.html
@@ -13,7 +13,7 @@
-
+
@@ -55,6 +55,7 @@
- Java
- CSS
Constructors
Selection Options
By default, the list box is configured to allow selection of a single item at a time. However, this can be easily configured with a built-in method which allows users to select multiple items using the Shift
key for contiguous entry selection and Control
(Windows) or Command
(Mac) key for separate, multiple item selection. Use the setMultipleSelection()
function to change this property. True will enable multiple selection, false disables it.
+Additionally, the arrow keys can be used to navigate the ListBox
, and typing a letter key while the ListBox
has focus will select the option that begins with that letter, or cycle through the options beginning with that letter should multiple options exist.
Show Code
Events
The ListBox
class provides methods to add and remove event listeners for the events common to all list components.
diff --git a/docs/components/list-components/lists.html b/docs/components/list-components/lists.html
index e528841f9..0fa294ffd 100644
--- a/docs/components/list-components/lists.html
+++ b/docs/components/list-components/lists.html
@@ -13,7 +13,7 @@
-
+
@@ -33,16 +33,16 @@ tipUsing the add method triggers a roundtrip to the server each time it is used. For more efficient usage, create a list of ListItem
objects, and put them in the list using the insert(int index, List<ListItem> items)
method outlined below.
Shift
key for contiguous entry selection and Control
(Windows) or Command
(Mac) key for separate, multiple item selection. Use the setMultipleSelection()
function to change this property. True will enable multiple selection, false disables it.ListBox
, and typing a letter key while the ListBox
has focus will select the option that begins with that letter, or cycle through the options beginning with that letter should multiple options exist.Show Code
ListBox
class provides methods to add and remove event listeners for the events common to all list components.Using the add method triggers a roundtrip to the server each time it is used. For more efficient usage, create a list of ListItem
objects, and put them in the list using the insert(int index, List<ListItem> items)
method outlined below.
-
+
-
Inserting an Item at a Specific Index:
@@ -78,14 +78,14 @@
Shared List Properties
Label
The various List components can be assigned a label, which is a descriptive text or title that is associated with the component. It provides a brief explanation or prompt to help users understand the purpose or expected selection for that particular list. List labels are not only important for usability but also play a crucial role in accessibility, as they enable screen readers and assistive technologies to provide accurate information and facilitate keyboard navigation.
diff --git a/docs/components/progress-bar.html b/docs/components/progress-bar.html index f841ff5eb..3cec4a370 100644 --- a/docs/components/progress-bar.html +++ b/docs/components/progress-bar.html @@ -13,7 +13,7 @@ - + diff --git a/docs/components/radiobutton.html b/docs/components/radiobutton.html index 7c10a49eb..c841173d4 100644 --- a/docs/components/radiobutton.html +++ b/docs/components/radiobutton.html @@ -13,7 +13,7 @@ - + @@ -52,7 +52,7 @@Text an
Show Code
- Java
- CSS
Activation
Radio buttons can be controlled using two types of activation: manual activation and auto activation. These dictate when a
-RadioButton
will change its state.+Show Code
- Java
- CSS
Show Code
- Java
- CSS
Manual Activation
When a radio button is set to manual activation, it means that it will not be automatically checked when it gains focus. Manual activation allows the user to navigate through the radio button options using the keyboard or other input methods without immediately changing the selected option.
diff --git a/docs/components/radiobuttongroup.html b/docs/components/radiobuttongroup.html index 3c4a73df0..694eed929 100644 --- a/docs/components/radiobuttongroup.html +++ b/docs/components/radiobuttongroup.html @@ -13,7 +13,7 @@ - + diff --git a/docs/components/slider.html b/docs/components/slider.html index acc10ca94..0abfbfc67 100644 --- a/docs/components/slider.html +++ b/docs/components/slider.html @@ -13,7 +13,7 @@ - + diff --git a/docs/components/styles/checkbox.html b/docs/components/styles/checkbox.html index 119af79e4..ef14cb288 100644 --- a/docs/components/styles/checkbox.html +++ b/docs/components/styles/checkbox.html @@ -13,7 +13,7 @@ - + diff --git a/docs/components/text-area.html b/docs/components/text-area.html index cf38c1ef9..73f1d7222 100644 --- a/docs/components/text-area.html +++ b/docs/components/text-area.html @@ -13,7 +13,7 @@ - + diff --git a/docs/getting_started/Templates/app_layout.html b/docs/getting_started/Templates/app_layout.html index 93b262fd7..71d8a862e 100644 --- a/docs/getting_started/Templates/app_layout.html +++ b/docs/getting_started/Templates/app_layout.html @@ -13,7 +13,7 @@ - + diff --git a/docs/getting_started/Templates/hello_world.html b/docs/getting_started/Templates/hello_world.html index 4a2d25806..1484fa0c1 100644 --- a/docs/getting_started/Templates/hello_world.html +++ b/docs/getting_started/Templates/hello_world.html @@ -13,7 +13,7 @@ - + diff --git a/docs/getting_started/architecture.html b/docs/getting_started/architecture.html index 24b6374ff..a905206b8 100644 --- a/docs/getting_started/architecture.html +++ b/docs/getting_started/architecture.html @@ -13,7 +13,7 @@ - + diff --git a/docs/getting_started/configuration.html b/docs/getting_started/configuration.html index 16a6752ce..da87cb44d 100644 --- a/docs/getting_started/configuration.html +++ b/docs/getting_started/configuration.html @@ -13,7 +13,7 @@ - + diff --git a/docs/getting_started/creating_an_application.html b/docs/getting_started/creating_an_application.html index 2f4f67fe8..2990f51b5 100644 --- a/docs/getting_started/creating_an_application.html +++ b/docs/getting_started/creating_an_application.html @@ -13,7 +13,7 @@ - + diff --git a/docs/glossary.html b/docs/glossary.html index 2b7de4d59..6b3c00b0c 100644 --- a/docs/glossary.html +++ b/docs/glossary.html @@ -13,7 +13,7 @@ - + diff --git a/docs/installation.html b/docs/installation.html index 3059099db..2651f647d 100644 --- a/docs/installation.html +++ b/docs/installation.html @@ -13,7 +13,7 @@ - + diff --git a/docs/installation/contributors.html b/docs/installation/contributors.html index f0f019856..6807f6031 100644 --- a/docs/installation/contributors.html +++ b/docs/installation/contributors.html @@ -13,14 +13,14 @@ - +Contributors
-WARNINGThis installation guide is aimed at developers wishing to contribute to the engine, and thus contains more complex +
IMPORTANTThis installation guide is aimed at developers wishing to contribute to the engine, and thus contains more complex setup instructions. For developers simply wishing to use the DWCJ, select one of the other installation methods.
@@ -44,7 +44,7 @@infoThis walkthrough will cover installation on a Windows system - installation steps may vary for Mac/Linux OS devices.
Mavenhere.
2) BBj Download and Installation
-+importantWhile following this step, be sure to install BBj version 22.14 or newer
importantWhile following this step, be sure to install BBj version 22.14 or newer
This video can help with the installation of BBj if you need assistance with setup. The installation section of the BASIS website can be found at this link
tipIt is recommended to use the latest stable revision build of BBj, and to select "BBj" from the list of options, without "Barista" or "Addon".
Once BBj has been installed, it is also necessary to install the needed dependencies from the BBj library. This is done by navigating to the
diff --git a/docs/installation/github_codespaces.html b/docs/installation/github_codespaces.html index a324c882a..6050283d2 100644 --- a/docs/installation/github_codespaces.html +++ b/docs/installation/github_codespaces.html @@ -13,7 +13,7 @@ - + diff --git a/docs/installation/local_install.html b/docs/installation/local_install.html index bbaf25c01..f403dac9f 100644 --- a/docs/installation/local_install.html +++ b/docs/installation/local_install.html @@ -13,7 +13,7 @@ - + diff --git a/docs/intro.html b/docs/intro.html index 063dac5dd..5d46d79c3 100644 --- a/docs/intro.html +++ b/docs/intro.html @@ -13,7 +13,7 @@ - + diff --git a/docs/layouts/app-layout.html b/docs/layouts/app-layout.html index ff5a29a2c..75d0dbfd5 100644 --- a/docs/layouts/app-layout.html +++ b/docs/layouts/app-layout.html @@ -13,7 +13,7 @@ - + @@ -28,37 +28,37 @@lib
directory inside your bbx folder, and diff --git a/docs/installation/docker_user.html b/docs/installation/docker_user.html index c51b1a959..d3fe6a704 100644 --- a/docs/installation/docker_user.html +++ b/docs/installation/docker_user.html @@ -13,7 +13,7 @@ - +Features
@AppMeta(name = "viewport", content = "width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no")
Overview
The following code sample will result in an application with a collapsible sidebar that contains a logo and tabs for various content options and a header. The demo uses the bbj-icon-button web component to create a drawer toggle button. The button has the data-drawer-toggle attribute which instructs the BBjAppLayout to listen to click events coming from that component to toggle the drawer state.
-+Show Code
- Java
- CSS
Full-Width Navbars
By default, the AppLayout renders the header and the footer in the off-screen mode. The off-screen mode means that the header and the footer position will be shifted to fit beside the opened drawer. Disabling this mode will cause the header and footer to take the full available space and shift the drawer top and bottom position to fit with the header and the footer.
-AppLayout myApp = new AppLayout();
myApp.setHeaderOffscreen(false);
myApp.setFooterOffscreen(false);+Show Code
- Java
- CSS
Multiple Toolbars
The navbar has no limit to the number of toolbars you can add. A toolbar is only a Div. To add an additional toolbar, simply add a new Div to the existing header div of the AppLayout.
The following demo shows how to use two toolbars, The first one houses the drawer's toggle button and the application's title. The second toolbar houses a secondary navigation menu.
-+Show Code
- Java
- CSS
Sticky Toolbars
A sticky toolbar is a toolbar that remains visible at the top of the page when the user scrolls down but the navbar height is collapsed to make more space available for the page's content. Usually this kind of toolbar contains a fixed navigation menu which is relevant to the current page.
It is possible to create a sticky toolbars using the CSS custom property
--bbj-app-layout-header-collapse-height
and theAppLayout.setHeaderReveal()
option.When
AppLayout.setHeaderReveal(true)
is set called, the header will be visible on first render, and then hidden when the user starts scrolling down. Once the user starts scrolling up again the header will be revealed.With the help of the CSS custom property
---bbj-app-layout-header-collapse-height
it is possible to control how much of the header navbar will be hidden.+Show Code
- Java
- CSS
Mobile Navigation Layout
The bottom navbar can be used to provide a different version of the navigation at the bottom of application. This type of navigation is specifically popular in mobile apps.
Notice how the drawer is hidden in the following demo. The AppLayout widget supports three drawer positions:
DrawerPlacement.LEFT
,DrawerPlacement.RIGHT
, andDrawerPlacement.HIDDEN
.Same as
AppLayout.setHeaderReveal()
,AppLayout.setFooterReveal()
is supported. WhenAppLayout.setFooterReveal(true)
is called, the footer will be visible at first render then hidden when the user starts scrolling up. Once the user starts scrolling down again the footer will be revealed.Be default, when the screen width is 800px or less , the drawer will be switched to popover mode. This is called the breakpoint. The popover mode means that the drawer will pop over the content area with an overlay. It is possible to configure the breakpoint by using the BBjAppLayout:setDrawerBreakpoint method and the breakpoint must be a valid media query.
-+Show Code
- Java
- CSS
Drawer Breakpoint
Be default, when the screen width is 800px or less , the drawer will be switched to popover mode. This is called the breakpoint. Popover mode means that the drawer will pop over the content area with an overlay. It is possible to configure the breakpoint by using the BBjAppLayout:setDrawerBreakpoint method and the breakpoint must be a valid media query.
For instance, in the following sample. we configure the drawer breakpoint to be 500px or less.
-AppLayout demo = new AppLayout();
demo.setDrawerBreakpoint("(max-width:500px)");+Show Code
- Java
- CSS
Events
The
diff --git a/docs/layouts/flex_layouts.html b/docs/layouts/flex_layouts.html index 83186f419..afa66282f 100644 --- a/docs/layouts/flex_layouts.html +++ b/docs/layouts/flex_layouts.html @@ -13,7 +13,7 @@ - + diff --git a/docs/styling/styling_intro.html b/docs/styling/styling_intro.html index b8a2e9707..d69bd613f 100644 --- a/docs/styling/styling_intro.html +++ b/docs/styling/styling_intro.html @@ -13,7 +13,7 @@ - + diff --git a/docs/styling/theme.html b/docs/styling/theme.html index 3f3f7588c..65d12c732 100644 --- a/docs/styling/theme.html +++ b/docs/styling/theme.html @@ -13,7 +13,7 @@ - + diff --git a/index.html b/index.html index e0ee6bd8c..f23f288cc 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ - + diff --git a/live_demo.html b/live_demo.html index d361a8e1e..eaa1be73b 100644 --- a/live_demo.html +++ b/live_demo.html @@ -13,7 +13,7 @@ - + diff --git a/markdown-page.html b/markdown-page.html index 7e7a1d413..2d4c39661 100644 --- a/markdown-page.html +++ b/markdown-page.html @@ -13,7 +13,7 @@ - + diff --git a/search.html b/search.html index 52fe6d99a..fa79ce06c 100644 --- a/search.html +++ b/search.html @@ -13,7 +13,7 @@ - +AppLayout
class supports two events:
Using the add method triggers a server-to-client message each time it is used. For more efficient usage, create a list of ListItem
objects, and put them in the list using the insert(int index, List<ListItem> items)
method outlined below.