Media represents a screen-width interval for responsive settings. A single JDance component can use one configuration by default and override selected properties at narrower or wider viewport widths.

For the complete API reference, visit https://doc.jdance.org.

Overview

A horizontal layout can become vertical within a Media range. This lets the same components adapt to mobile screens without building a second interface.

CODE

Media mobile = new Media(0,1300);
BasicLayout layout = new BasicLayout(BasicLayout.Direction.HORIZONTAL);
layout.setDirection(mobile,BasicLayout.Direction.VERTICAL);
layout.setRelativeWidth(100);
layout.setGap(6);
layout.add(new Text("One")).setPadding(8).setBgColor(new Color("#DCEEFF")).setMinWidth(0);
layout.add(new Text("Two")).setPadding(8).setBgColor(new Color("#E4F5E9")).setMinWidth(0);

RESULT

One

Two

The preview above uses a small amount of space so the behavior is visible even in a narrow documentation panel.

Responsive appearance

Media can override styling as well as direction. For example, background colors or padding can change for a narrower viewport.

CODE

Media mobile = new Media(0,1300);
BasicLayout layout = new BasicLayout(BasicLayout.Direction.VERTICAL);
layout.setRelativeWidth(100);
layout.setPadding(18);
layout.setPadding(mobile,8);
layout.setBackground(new Color("#FFF0D8"));
layout.setBackground(mobile,new Color("#DCEEFF"));
layout.add(new Text("Resize browser"));

RESULT

Resize browser

Viewport versus container width

Media responds to the browser viewport, not the width of the CODE/RESULT preview. A preview that is only 200px wide can still be under a desktop media rule when the browser is wide.

Defining width ranges

The same idea can also be expressed as a compact Java snippet without requiring a live preview.

CODE

Media mobile = new Media(0,700);
Media tablet = new Media(701,1100);
Media desktop = new Media(1101,3000);

Practical guidance

Pick breakpoints based on when the interface becomes cramped. Keep the default layout usable in narrow embedded previews, then use Media for a noticeable viewport-driven change.

Full API reference

These examples focus on the day-to-day use of Media. The full API documentation contains additional options, inherited properties and complete method signatures.

Visit https://doc.jdance.org for the full reference.