https://drive.google.com/file/d/14OCNvUOuvPBHwxQ8vH5m05L12s2rk7nb/view?usp=sharing
https://drive.google.com/file/d/1gQTLTc3Y7urdOvsE1dZs10TVDw1eJ5CL/view?usp=sharing
https://docs.google.com/document/d/1wLEo4DY6oAKcEEwR9w_ox2FwkPd-oK8X/edit?usp=sharing&ouid=112711162618141236570&rtpof=true&sd=true
ITE Full Notes
https://drive.google.com/file/d/1YeKLyqGDOVoynCD7eWgfw3LIsg4gfn4k/view?usp=sharing Master the Basics: Your All-in-One Guide to Information Technology Essentials Are you a student diving into the world of Information Technology for the first time? Whether you are preparing for your second-semester exams or just want to understand how the internet and databases actually work, we have the perfect resource for you. This comprehensive set of notes, titled "Information Technology Essentials," is designed to take you from a curious beginner to a confident tech student. What is this PDF About? This document is a structured roadmap through the most critical pillars of modern technology. It isn't just about theory; it bridges the gap between how websites are built, how computers talk to each other across the globe, and how massive amounts of data are managed behind the scenes. What’s Inside? The notes are neatly organized into five essential units: Unit 1: Web Essentials – Lea...
Comments
---
## ✍️ **Question: Define and discuss in detail about Process and Thread in Java**
---
### ✅ **Definition:**
* A **Process** is an independent program in execution. It has **its own memory** space, data, and system resources.
* A **Thread** is a **smaller unit of execution** within a process. Threads share the same memory and resources of the process.
> Think of a process as a "full app" (like Chrome), and threads as the "tabs" inside it, running independently but sharing memory.
---
## ✅ **1. Process in Java**
In Java, a process is typically created when you **run a program** or execute another application using:
```java
Runtime.getRuntime().exec();
```
### 🔹 **Example:**
```java
public class RunNotepad {
public static void main(String[] args) {
try {
Process p = Runtime.getRuntime().exec("notepad.exe");
} catch (Exception e) {
System.out.println(e);
}
}
}
```
📝 This code starts **Notepad** as a separate process from a Java program.
---
## ✅ **2. Thread in Java**
A **thread** is a lightweight unit of execution inside a process.
Java supports **multithreading**, which means a program can do multiple things at the same time.
---
### 🔹 **Two ways to create a Thread in Java:**
#### ➤ a) **By extending the `Thread` class**:
```java
class MyThread extends Thread {
public void run() {
System.out.println("Thread is running...");
}
public static void main(String[] args) {
MyThread t1 = new MyThread();
t1.start(); // Starts the thread
}
}
```
#### ➤ b) **By implementing the `Runnable` interface**:
```java
class MyRunnable implements Runnable {
public void run() {
System.out.println("Runnable thread running...");
}
public static void main(String[] args) {
Thread t1 = new Thread(new MyRunnable());
t1.start();
}
}
```
---
## ✅ **Process vs Thread in Java (Comparison Table):**
| Feature | Process | Thread |
| ------------- | ------------------------------ | -------------------------------- |
| Memory | Separate memory space | Shared memory within a process |
| Communication | Complex | Easier (shared memory) |
| Creation | Heavyweight (slow) | Lightweight (faster) |
| Dependency | Independent | May depend on other threads |
| Use in Java | Runtime.exec(), ProcessBuilder | Thread class, Runnable interface |
---
### ✅ **Why Threads Are Useful in Java:**
* Multitasking (e.g. downloading + playing music)
* Faster execution
* Better CPU utilization
* Used in games, real-time apps, web servers
---
### ✅ **Conclusion:**
* A **process** is an independent executing program.
* A **thread** is a lightweight task inside a process.
* Java makes multithreading simple and powerful using `Thread` and `Runnable`.
---
### 📌 **Presentation Tips for Exams:**
* Begin with a definition
* Include short code snippets (at least 1 for thread)
* Use a table to compare process vs thread
* End with real-world examples or uses
---
---
## ✍️ **Question: Differentiate between Thread-Based Multitasking and Process-Based Multitasking**
---
### ✅ **Definition:**
* **Multitasking** is the ability of an operating system to perform **multiple tasks (processes or threads) simultaneously**.
There are **two types** of multitasking:
---
## 🔹 **1. Process-Based Multitasking:**
* Multiple **independent processes** run at the same time.
* Each process has **its own memory and resources**.
* Switching between processes requires **more overhead**.
* Used for running **completely different programs** simultaneously.
> 🖥️ Example: Running **MS Word + Chrome + VLC Media Player** at the same time.
---
## 🔹 **2. Thread-Based Multitasking:**
* A single process is divided into **multiple threads**.
* Threads **share memory** of the parent process.
* **Less overhead** – faster context switching.
* Used when one program performs **multiple tasks in parallel**.
> 🧵 Example: A **web browser** downloading files, rendering a webpage, and playing video **simultaneously** using threads.
---
### ✅ **Comparison Table:**
| Feature | Process-Based Multitasking | Thread-Based Multitasking |
| --------------------- | ------------------------------------------- | --------------------------------------------- |
| **Definition** | Executing multiple programs at once | Executing multiple threads in one program |
| **Memory Usage** | Each process has separate memory | Threads share memory of the same process |
| **Context Switching** | Slower (more overhead) | Faster (lightweight) |
| **Isolation** | Processes are isolated | Threads are not isolated |
| **Crash Impact** | One process crash doesn't affect others | One thread crash can affect the whole process |
| **Communication** | Complex (Inter-Process Communication - IPC) | Easier (shared memory) |
| **Example in Java** | Using `Runtime.exec()` | Using `Thread` or `Runnable` |
---
### ✅ **Conclusion:**
* **Process-based multitasking** is better for running **independent programs**.
* **Thread-based multitasking** is better for **parallel tasks** within the same program.
* Java uses **multithreading** (thread-based multitasking) to create **efficient and responsive applications**.
---
### 📌 **Presentation Tips for Exams:**
* Start with a **definition of multitasking**
* Explain each type with **real-life examples**
* Include a **comparison table**
* Underline key terms like *context switching*, *shared memory*, *isolation*
---
Here’s a complete, **exam-ready explanation** of the **Java Thread Life Cycle**, with a neat diagram structure and real-world understanding.
---
## ✍️ **Question: Explain about Java Thread Life Cycle**
---
### ✅ **Definition:**
The **Thread Life Cycle** in Java refers to the **various states** a thread goes through from creation to termination during its execution.
---
### ✅ **Java Thread States:**
Java threads follow **5 main states**, defined in the `java.lang.Thread.State` enum.
---
## 🔄 **1. New (Created)**
* A thread is **created** using the `Thread` class or `Runnable` interface.
* But it has **not started yet**.
```java
Thread t = new Thread(); // New state
```
---
## ▶️ **2. Runnable (Ready to run)**
* Thread is **ready to run**, but not yet selected by the CPU.
* Called by using `.start()` method.
```java
t.start(); // Now thread is in Runnable state
```
---
## 🏃 **3. Running**
* CPU **schedules and executes** the thread.
* Only **one thread** runs at a time per core.
---
## 😴 **4. Blocked/Waiting/Sleeping (Not Runnable)**
Thread is **temporarily inactive**:
* **sleep()** → Pauses for a given time.
* **wait()** → Waits for another thread’s signal.
* **blocked** → Waiting for a lock/resource.
Examples:
```java
Thread.sleep(1000); // Sleeping
```
---
## ❌ **5. Terminated (Dead)**
* Thread **completes execution** or is **forcefully stopped**.
* Cannot be restarted.
```java
public void run() {
System.out.println("Done");
// Thread ends, now in Dead state
}
```
---
### ✅ **Diagram – Java Thread Life Cycle:**
You can draw the following for full marks:
```
New
↓ (start())
Runnable
↓ (scheduler picks)
Running
↙ ↘
Blocked Waiting/Sleeping
↘ ↘
Terminated (Dead)
```
---
### ✅ **Important Methods Related to Lifecycle:**
| Method | Description |
| --------------------- | ----------------------------------- |
| `start()` | Starts the thread (New → Runnable) |
| `run()` | Defines the task to run |
| `sleep(ms)` | Puts thread to sleep |
| `wait()` / `notify()` | Used for inter-thread communication |
| `join()` | Waits for one thread to finish |
---
### ✅ **Conclusion:**
The Java Thread Life Cycle defines how a thread behaves during execution. Understanding these states helps in **multithreaded programming**, avoiding bugs like **deadlock**, and improving performance.
---
### 📌 **Presentation Tips:**
* Start with a **definition**
* Use a **diagram** (simple flowchart)
* Explain each state with **bullet points**
* Mention **methods** like `start()`, `sleep()`, `wait()`
* Give **real-life examples** (e.g., sleep = loading, waiting = ATM queue)
---
## ✍️ **Question: Discuss the basic steps involved in developing a JDBC application**
---
### ✅ **Definition:**
**JDBC (Java Database Connectivity)** is a Java API used to **connect and interact with databases** such as MySQL, Oracle, SQLite, etc.
It allows Java programs to **execute SQL queries**, **update records**, and **retrieve data** from databases.
---
### ✅ **Basic Steps to Develop a JDBC Application:**
---
### 🔹 **1. Import JDBC Packages**
Use the required classes from the `java.sql` package.
```java
import java.sql.*;
```
---
### 🔹 **2. Load and Register the JDBC Driver**
Load the appropriate driver for the database (like MySQL, Oracle).
```java
Class.forName("com.mysql.cj.jdbc.Driver");
```
> For Oracle, use: `"oracle.jdbc.driver.OracleDriver"`
---
### 🔹 **3. Establish a Connection**
Use `DriverManager.getConnection()` to connect to the database.
```java
Connection con = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/dbname", "username", "password");
```
---
### 🔹 **4. Create a Statement Object**
Used to send SQL queries to the database.
```java
Statement stmt = con.createStatement();
```
---
### 🔹 **5. Execute the Query**
Use `executeQuery()` for SELECT and `executeUpdate()` for INSERT/UPDATE/DELETE.
```java
ResultSet rs = stmt.executeQuery("SELECT * FROM students");
```
---
### 🔹 **6. Process the Results**
Use `ResultSet` methods to read data.
```java
while(rs.next()) {
System.out.println(rs.getInt(1) + " " + rs.getString(2));
}
```
---
### 🔹 **7. Close the Connection**
Free the database and memory resources.
```java
con.close();
```
---
### ✅ **Summary of All Steps:**
| Step | Description |
| ---- | --------------------------------------------------------- |
| 1 | Import `java.sql.*` package |
| 2 | Load JDBC driver using `Class.forName()` |
| 3 | Connect to DB using `DriverManager.getConnection()` |
| 4 | Create `Statement` or `PreparedStatement` |
| 5 | Execute query using `executeQuery()` or `executeUpdate()` |
| 6 | Process `ResultSet` |
| 7 | Close the connection |
---
### ✅ **Simple JDBC Program Example:**
```java
import java.sql.*;
public class JDBCExample {
public static void main(String[] args) {
try {
Class.forName("com.mysql.cj.jdbc.Driver");
Connection con = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/college", "root", "password");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT * FROM student");
while(rs.next())
System.out.println(rs.getInt(1) + " " + rs.getString(2));
con.close();
} catch(Exception e) {
System.out.println(e);
}
}
}
```
---
### ✅ **Conclusion:**
JDBC provides a **standard and flexible way** to interact with databases in Java. By following these 7 steps, developers can easily **perform CRUD operations** in real-time Java applications.
---
### 📌 **Presentation Tips for Exams:**
* Write steps as numbered points.
* Use keywords like `Connection`, `Statement`, `ResultSet`.
* Include a **mini program snippet** or **table of steps**.
* Don’t forget `Class.forName()` and `DriverManager.getConnection()` — these are often asked in viva.
---
---
## ✍️ **Question: Describe the FlowLayout layout manager in AWT. How does it arrange components within a container, and when is it most suitable for use?**
---
### ✅ **Definition:**
**FlowLayout** is a **layout manager** in Java AWT that arranges components **in a row**, one after another, **left to right**, like words in a sentence.
> When one row is full, it **wraps** components to the **next line** automatically.
It is the **default layout manager for `Panel` and `Applet`** in Java AWT.
---
### ✅ **Class Declaration:**
```java
java.awt.FlowLayout
```
---
### ✅ **Constructors:**
```java
FlowLayout() // Default, center aligned
FlowLayout(int align) // LEFT, CENTER, or RIGHT
FlowLayout(int align, int hgap, int vgap) // With spacing
```
* `align`: Use constants `FlowLayout.LEFT`, `CENTER`, `RIGHT`
* `hgap`: Horizontal gap between components
* `vgap`: Vertical gap between rows
---
### ✅ **How It Arranges Components:**
* Places components **horizontally from left to right**
* Wraps to next line if there's **no more horizontal space**
* Uses specified **alignment** (LEFT, CENTER, RIGHT)
* Maintains **equal horizontal and vertical spacing**
---
### ✅ **Example Code:**
```java
import java.awt.*;
import java.awt.event.*;
public class FlowLayoutExample {
public static void main(String[] args) {
Frame f = new Frame("FlowLayout Example");
f.setLayout(new FlowLayout());
Button b1 = new Button("A");
Button b2 = new Button("B");
Button b3 = new Button("C");
f.add(b1);
f.add(b2);
f.add(b3);
f.setSize(300, 200);
f.setVisible(true);
}
}
```
📌 This will place buttons "A", "B", "C" in a row. If window is resized smaller, they wrap to the next line.
---
### ✅ **When to Use FlowLayout:**
* When you want components **placed in a single line**
* When the **order of components matters**
* When you want a **simple, dynamic layout** (auto-wraps based on space)
* Useful for **toolbars**, **buttons**, or **input fields** in a row
---
### ✅ **Advantages:**
* Easy to use
* Automatically adjusts to window size
* Clean, predictable behavior
---
### ✅ **Disadvantages:**
* Not good for complex layouts (like grids or forms)
* Wrapping can make UI uneven if not enough space
---
### ✅ **Conclusion:**
**FlowLayout** is a simple and effective layout manager that arranges components in a **row-wise manner**, wrapping as needed. It’s most suitable for **lightweight, flexible UIs** where exact positioning isn't required.
---
### 📌 **Presentation Tips:**
* Start with definition and real-world analogy (like words in a sentence)
* Mention **default behavior** and constructor types
* Include a **short code snippet**
* Explain when it’s suitable (buttons, toolbars)
* Use a **diagram if space allows**
---
---
## ✍️ **Question: Explain the purpose of the ScrollPane component in AWT. How does it help in managing scrollable content within a GUI application? Provide an example of its usage.**
---
### ✅ **Definition:**
A **`ScrollPane`** is a **container class** in Java AWT that provides **automated horizontal and/or vertical scrolling** for its child components when they are **too large to fit** in the visible area.
> It helps users navigate through content that exceeds the screen or container size.
---
### ✅ **Class Declaration:**
```java
public class ScrollPane extends Container
```
---
### ✅ **Purpose and Features:**
* Allows adding a **single child component** (like Panel, Canvas, etc.).
* Automatically adds **scrollbars** when needed (or always, based on settings).
* Very useful when working with **large images**, **forms**, or **text components**.
* Makes the GUI more **user-friendly and accessible**.
---
### ✅ **Constructors:**
```java
ScrollPane() // Default, with automatic scrollbars
ScrollPane(int scrollbarPolicy)
```
**Scrollbar Policies:**
* `ScrollPane.SCROLLBARS_AS_NEEDED` (default)
* `ScrollPane.SCROLLBARS_ALWAYS`
* `ScrollPane.SCROLLBARS_NEVER`
---
### ✅ **How ScrollPane Helps:**
* Automatically detects if the content is larger than the visible area.
* Displays **vertical and/or horizontal scrollbars** to let the user scroll.
* Ensures content isn't lost or hidden when window is resized.
---
### ✅ **Example Program:**
```java
import java.awt.*;
public class ScrollPaneExample {
public static void main(String[] args) {
Frame f = new Frame("ScrollPane Demo");
// Create a ScrollPane
ScrollPane sp = new ScrollPane();
// Create a Panel with large content
Panel p = new Panel();
p.setLayout(new GridLayout(20, 1)); // 20 rows = large content
for (int i = 1; i <= 20; i++) {
p.add(new Label("Label " + i));
}
sp.add(p); // Add Panel to ScrollPane
f.add(sp); // Add ScrollPane to Frame
f.setSize(300, 200);
f.setVisible(true);
}
}
```
✅ This example adds 20 labels to a panel inside a scroll pane. The scrollbars appear automatically.
---
### ✅ **Advantages of ScrollPane:**
* Simplifies UI for large content
* Makes applications **responsive and scrollable**
* Supports better **user experience** and navigation
* Can be combined with layout managers or nested panels
---
### ✅ **Conclusion:**
The `ScrollPane` component in AWT is used to manage **overflowing content** by providing a scrollable container. It is best used when the application needs to **display more content than can fit** in a fixed window size.
---
### 📌 **Presentation Tips for Exams:**
* Define ScrollPane clearly
* Mention **scrollbar policies**
* Include a **short example** with `Panel` or `Canvas`
* Highlight **real-world uses** like long forms, image viewers, document editors
---
---
## ✍️ **Question: Explain about Dialog Boxes in Event Handling**
---
### ✅ **Definition:**
A **dialog box** is a **popup window** that appears on top of the main window to **communicate with the user** or to **get user input**.
In Java, dialog boxes are created using the **`Dialog` class (AWT)** or **`JOptionPane` (Swing)**.
Since you're focusing on **AWT & basic Java**, we'll explain using **AWT Dialog**.
---
### ✅ **Types of Dialogs in Java AWT:**
1. **Modal Dialog**: Blocks user interaction with other windows until closed.
2. **Modeless Dialog**: Allows interaction with other windows while open.
---
### ✅ **Creating a Dialog Box in AWT:**
```java
import java.awt.*;
import java.awt.event.*;
public class DialogExample {
public static void main(String[] args) {
Frame f = new Frame("Main Frame");
Dialog d = new Dialog(f, "This is a Dialog", true);
d.setLayout(new FlowLayout());
d.setSize(200, 100);
Label l = new Label("Hello, this is a dialog box");
Button b = new Button("OK");
b.addActionListener(e -> d.setVisible(false));
d.add(l);
d.add(b);
f.setSize(300, 200);
f.setLayout(new FlowLayout());
f.setVisible(true);
// Show dialog on startup
d.setVisible(true);
}
}
```
---
### ✅ **Key Components Used:**
* `Dialog` – to create a dialog
* `Label`, `Button` – to show content and accept user actions
* `ActionListener` – to handle the button click (event handling)
---
### ✅ **Using Event Handling with Dialogs:**
You attach an **event listener** to a dialog button:
```java
button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
// handle event
dialog.setVisible(false);
}
});
```
This is how dialogs are used to **interact with the user and respond to events**.
---
### ✅ **Use Cases of Dialog Boxes:**
* Showing messages (e.g., "File saved successfully")
* Confirming user actions (e.g., "Are you sure?")
* Getting user input (e.g., name, password)
* Displaying errors or alerts
---
### ✅ **Alternative: Using `JOptionPane` (from Swing)**
If you're using **Swing**, Java provides easy built-in dialogs:
```java
JOptionPane.showMessageDialog(null, "This is a message box");
JOptionPane.showConfirmDialog(null, "Do you want to continue?");
```
---
### ✅ **Conclusion:**
**Dialog boxes** are essential for user interaction in Java GUI apps. Combined with **event handling**, they allow programs to **respond dynamically** to user actions, enhancing interactivity and usability.
---
### 📌 **Presentation Tips for Exams:**
* Define `Dialog` clearly
* Explain **modal vs modeless**
* Include a **simple code snippet**
* Show how **event listener** is attached (e.g., `addActionListener`)
* Mention `JOptionPane` for extra credit (if Swing is allowed)
---
This program draws a **circle** on the window **when a button is clicked** — combining **event handling** (`ActionListener`) with **custom painting** (`paint()` method using `Graphics` class).
---
## ✅ **🖥️ Java Program: Graphics with Event Handling**
```java
import java.awt.*;
import java.awt.event.*;
public class GraphicsEventExample extends Frame implements ActionListener {
boolean drawCircle = false; // flag to control drawing
Button btnDraw;
// Constructor
GraphicsEventExample() {
// Set up frame
setTitle("Graphics + Event Handling");
setSize(400, 300);
setLayout(new FlowLayout());
// Add button
btnDraw = new Button("Draw Circle");
add(btnDraw);
// Register ActionListener
btnDraw.addActionListener(this);
setVisible(true);
}
// Event handling method
public void actionPerformed(ActionEvent e) {
drawCircle = true; // set flag to true when button is clicked
repaint(); // request to repaint (calls paint())
}
// Paint method to do custom drawing
public void paint(Graphics g) {
if (drawCircle) {
g.setColor(Color.BLUE);
g.fillOval(150, 100, 100, 100); // x, y, width, height
}
}
// Main method
public static void main(String[] args) {
new GraphicsEventExample();
}
}
```
---
### ✅ **How it works:**
* A **button** is added to the frame.
* When the button is clicked, the `actionPerformed()` method sets a flag and calls `repaint()`.
* The `paint()` method draws a **blue circle** only if the flag is set to `true`.
---
### 📌 **Concepts Used:**
* **AWT Components**: `Frame`, `Button`
* **Event Handling**: `ActionListener`
* **Graphics Class**: `paint(Graphics g)`, `fillOval()`
* **Custom Drawing**: Done inside `paint()`
---
### ✅ **Presentation Tip (for Viva/Exam):**
* Say: *"This program demonstrates event-driven programming by drawing graphics (a circle) in response to a button click using AWT's ActionListener and Graphics APIs."*
* Explain `repaint()` triggers `paint()`
---
* ✅ **ComboBox** (using `Choice`)
* ✅ **Scrollbars** (`Scrollbar` class)
* ✅ **Lists** (`List` class)
And uses **ItemListener** to handle selection events.
---
## ✍️ **Java Program Using ComboBox, ScrollBar, List with ItemListener**
```java
import java.awt.*;
import java.awt.event.*;
public class ItemListenerExample extends Frame implements ItemListener {
Choice comboBox;
Scrollbar vScrollBar;
List itemList;
Label labelCombo, labelScroll, labelList;
ItemListenerExample() {
setTitle("AWT Components with ItemListener");
setSize(400, 400);
setLayout(new FlowLayout());
// ComboBox (Choice)
comboBox = new Choice();
comboBox.add("Java");
comboBox.add("Python");
comboBox.add("C++");
comboBox.add("JavaScript");
comboBox.addItemListener(this);
labelCombo = new Label("Selected Combo Item: ");
// Scrollbar
vScrollBar = new Scrollbar(Scrollbar.VERTICAL, 0, 1, 0, 100); // min=0, max=100
vScrollBar.addAdjustmentListener(e -> {
labelScroll.setText("Scrollbar Value: " + vScrollBar.getValue());
});
labelScroll = new Label("Scrollbar Value: 0");
// List (Multiple Select List)
itemList = new List(5, false); // 5 rows visible, single selection
itemList.add("Red");
itemList.add("Green");
itemList.add("Blue");
itemList.add("Yellow");
itemList.add("Pink");
itemList.addItemListener(this);
labelList = new Label("Selected List Item: ");
// Add to Frame
add(comboBox);
add(labelCombo);
add(vScrollBar);
add(labelScroll);
add(itemList);
add(labelList);
setVisible(true);
}
// Handle item selection for ComboBox and List
public void itemStateChanged(ItemEvent e) {
if (e.getSource() == comboBox) {
labelCombo.setText("Selected Combo Item: " + comboBox.getSelectedItem());
} else if (e.getSource() == itemList) {
labelList.setText("Selected List Item: " + itemList.getSelectedItem());
}
}
public static void main(String[] args) {
new ItemListenerExample();
}
}
```
---
## ✅ Output Summary:
* A **ComboBox** (Choice) with programming languages.
* A **vertical Scrollbar** that updates a label with its current value.
* A **List** of colors that shows selected item.
* Each component is connected to **event handling via `ItemListener` or `AdjustmentListener`**.
---
### 📌 Concepts Covered:
| Component | Class | Listener Used |
| --------- | ----------- | -------------------- |
| ComboBox | `Choice` | `ItemListener` |
| Scrollbar | `Scrollbar` | `AdjustmentListener` |
| List | `List` | `ItemListener` |
---
## 🎯 Viva/Exam Tips:
* Define each component before showing code.
* Explain `ItemListener` → triggered when **user selects** an item.
* `AdjustmentListener` → used for **scrollbars**.
* Show how GUI layout is controlled with `FlowLayout`.
---