Skip to content

Commit

Permalink
Rename components to component, part 5
Browse files Browse the repository at this point in the history
  • Loading branch information
kirill-grouchnikov committed Oct 20, 2021
1 parent d49db6e commit 9154dce
Show file tree
Hide file tree
Showing 25 changed files with 135 additions and 135 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Radiance is a collection of libraries for writing modern, elegant and fast Swing

[Components](docs/component/overview.md) provides a robust set of additional Swing components that can be used as building blocks for creating modern, rich Swing applications. In addition to providing the powerful command button and breadcrumb bar components, it packs an Office Command Bar (ribbon) container that can host a complex hierarchy of flexible, scalable application control surface.

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/ribbon/taskbar/taskbar-overflow-popup.png" width="1181" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/ribbon/taskbar/taskbar-overflow-popup.png" width="1181" border=0/>

## Core Kotlin libraries

Expand Down
8 changes: 4 additions & 4 deletions docs/component/AnotherSample.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@

Let's take a look at another similar example of using Radiance commands.

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/intro-text-styling.png" width="696" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/intro-text-styling.png" width="696" border=0/>

The setup has the same `JTextPane` and a vertical button strip with four buttons. When there's nothing selected in the text pane, the buttons are disabled. When there is selection, the buttons are enabled. In addition, each button corresponds to bold, italic, underline and strikethrough content style. Each button shows presence of the matching style in the selected content. When clicked, the presence of the matching style is toggled.

For example, selecting some content and clicking the bold button shows this:
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/intro-text-styling-bold.png" width="696" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/intro-text-styling-bold.png" width="696" border=0/>

And then selecting another, overlapping, part of content, and clicking the italic button shows this:
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/intro-text-styling-bold-italic.png" width="696" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/intro-text-styling-bold-italic.png" width="696" border=0/>

Note how both bold and italic buttons show up as selected, since the currently selected content has both bold and italic presence (not necessarily on the entire selection).

Expand Down Expand Up @@ -190,7 +190,7 @@ Whenever the selection changes we update two things:
* If there is no selection at all, we disable all four commands.
* We update the toggle selection state of each command based on the presence of the matching style anywhere in the current selection of our text pane.

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/intro-text-styling-removed-bold.png" width="696" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/intro-text-styling-removed-bold.png" width="696" border=0/>

### Command strip

Expand Down
6 changes: 3 additions & 3 deletions docs/component/BreadcrumbBar.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## Components - breadcrumb bars

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/breadcrumb.png" width="620" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/breadcrumb.png" width="620" border=0/>

Breadcrumb bars facilitate quick navigation of multi-level hierarchies, such as file systems or XML documents. This functionality is commonly found in many web sites and is the main navigation tool in the Windows Explorer application.

Expand All @@ -17,7 +17,7 @@ The `BreadcrumbBarCallBack` is used by the breadcrumb component at runtime to qu

What are these two used for? Let's take another look at the screenshot of a sample app that is using the breadcrumb bar for navigating the local file system:

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/breadcrumb.png" width="620" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/breadcrumb.png" width="620" border=0/>

The `getPathChoices()` should return the list of paths that can be "explored" from the specified path. In the screenshot above these are the subfolders of the currently activated "JavaVirtualMachines" path.

Expand Down Expand Up @@ -47,7 +47,7 @@ Here, we are using the `BreadcrumbFileSelector` that is a core extension of `JBr

Let's go back to our app screenshot again:

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/breadcrumb.png" width="620" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/breadcrumb.png" width="620" border=0/>

The top part of the app is `BreadcrumbFileSelector` (which is a subclass of `JBreadcrumbBar`). The main content is the panel that shows the list of files in the currently selected path. This panel is an extension of `AbstractFileViewPanel` class.

Expand Down
8 changes: 4 additions & 4 deletions docs/component/ColorSelectorCommand.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## Components - command popup menus

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/color-selector-command1.png" width="665" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/color-selector-command1.png" width="665" border=0/>

A projection of a color selector command is a popup button ("Styles3" button in the screenshot above) that displays a popup menu with regular commands and additional, optional three color selector panels:
- color section with derived colors
Expand Down Expand Up @@ -58,7 +58,7 @@ public interface ColorActivationListener extends EventListener {

### Sample code

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/color-selector-command2.png" width="546" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/color-selector-command2.png" width="546" border=0/>

First let's take a look at the functionality that we see in this screenshot, and then get to the code behind it.

Expand Down Expand Up @@ -206,7 +206,7 @@ selectorBuilder.addColorSectionWithDerived(

We're using `Builder.addColorSectionWithDerived()`, passing a `ColorSectionModel` initialized with ten colors. Internally, each color will be used to generate additional five colors of varying brightness but the same hue and saturation:

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/color-selector-command2.png" width="546" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/color-selector-command2.png" width="546" border=0/>

#### Adding a color section with a row of colors

Expand Down Expand Up @@ -253,7 +253,7 @@ Here we have a `Command` configured to bring up a `JColorChooser` configured to

#### Bringing it all together to project a Swing button

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/color-selector-command2.png" width="546" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/color-selector-command2.png" width="546" border=0/>

```java
this.colorSelectorCommand = ColorSelectorCommand.colorSelectorBuilder()
Expand Down
18 changes: 9 additions & 9 deletions docs/component/Command.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

A command is the most basic building block of Radiance components. Let's take a look at this screenshot of the main Radiance ribbon demo application:

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/ribbon-lego.jpg" width="767" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/ribbon-lego.jpg" width="767" border=0/>

Apart from the two comboboxes in the main content area on the right, and another combobox in the title area, all the other components in this screen are built from commands. In fact, even those comboboxes could be replaced with commands, and the only reason to have them in this demo is to show that ribbon can host regular Swing components (such as comboboxes, spinners, etc). But more on that later.

Expand Down Expand Up @@ -30,7 +30,7 @@ Commands are created with the builder pattern which is pervasive throughout Radi

Let's take a look at the following screenshot that shows how four commands (paste, cut, copy, and select all) might be rendered on the screen (or projected, in Radiance terminology):

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/command-basics.png" width="780" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/command-basics.png" width="780" border=0/>

In each column, all four buttons were projected from the same command. The only difference is the presentation model associated with each one of the projection:

Expand Down Expand Up @@ -95,7 +95,7 @@ Command preview is activated when the command's projection goes into the preview

Rich tooltips are shown on hover, providing the opportunity to explain what the corresponding command does:

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/command-tooltips.png" width="782" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/command-tooltips.png" width="782" border=0/>

To configure the rich tooltip for the command's action, use `RichTooltip.Builder` and `setActionRichTooltip()` APIs:

Expand Down Expand Up @@ -151,29 +151,29 @@ Secondary content allows logical grouping of multiple commands that are only sho

The simplest case of secondary content is additional commands shown in a popup menu:

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/command-secondary-simple.png" width="734" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/command-secondary-simple.png" width="734" border=0/>

Secondary content can be configured to display a certain maximum number of commands on the screen, kicking in vertical scrolling:

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/command-secondary-scrollable.png" width="734" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/command-secondary-scrollable.png" width="734" border=0/>

Or have a more complex structure, with an embedded, separately scrollable panel of commands:

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/command-secondary-complex.png" width="734" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/command-secondary-complex.png" width="734" border=0/>

All these three examples would be called "popup buttons" in similar component suites. The power of secondary content in Radiance commands can be seen in how easily it is to configure a projected button to be a "regular" action button - with just one action.

Or, by calling `setSecondaryContentModel()` and `CommandButtonPresentationModel.Builder.setTextClickAction(true)` make it a split button with a popup menu shown when the down arrow is clicked:

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/command-title-action.png" width="764" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/command-title-action.png" width="764" border=0/>

Or instead, calling `CommandButtonPresentationModel.Builder.setTextClickPopup(true)` to make it a split button with a popup menu shown when either texts or down arrow are clicked:

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/command-title-popup.png" width="764" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/command-title-popup.png" width="764" border=0/>

An important note is in order here. Even though all the examples so far have shown secondary content displayed as a popup menu, that is not necessarily the case. Radiance's model of separating content from presentation (and combining the two in a projection) means that the **same exact command** projected as a split button can be projected into something that looks like this:

<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/components/walkthrough/ribbon-application-menu.png" width="754" border=0/>
<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/sunshine/docs/images/component/walkthrough/ribbon-application-menu.png" width="754" border=0/>

Here, the ribbon application menu is a two-panel layout. The main commands are projected in the left column. The secondary content associated with a command is displayed in the panel on the right - not as a separate popup menu, but as part of the same application menu container.

Expand Down
Loading

0 comments on commit 9154dce

Please sign in to comment.