Fundamentals of HarmonyOS Development

Data Storage

HarmonyOS applications offer multiple data storage options:

• Preferences: Lightweight key-value storage for simple data
• SQLite: Relational database for structured data storage
• File Storage: Direct file system access for custom data storage

Arrays

Arrays are ordered collections of data accessible by index:

```javascript
let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // Outputs 1
```

Functions

Regular Functions

Encapsulate reusable blocks of code:

```javascript
function greet(name) {
    return "Hello, " + name;
}
console.log(greet("Alice")); // Outputs "Hello, Alice"
```

Arrow Functions

Concise function syntax:

```javascript
const greet = (name) => "Hello, " + name;
console.log(greet("Bob")); // Outputs "Hello, Bob"
```

Interfaces

Define object structure contracts:

```typescript
interface Person {
    name: string;
    age: number;
    greet(): string;
}

class Employee implements Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    greet(): string {
        return "Hello, I am " + this.name;
    }
}
```

Objects and Methods

Collections of properties and methods:

```javascript
let person = {
    name: "Charlie",
    age: 30,
    greet: function() {
        return "Hello, " + this.name;
    }
};
console.log(person.greet()); // Outputs "Hello, Charlie"
```

Union Types

Values that can be one of several types:

```typescript
let age: number | string;
age = 25;        // Valid
age = "twenty-five"; // Also valid
```

Enums

Named constant collections:

```typescript
enum Direction {
    Up,
    Down,
    Left,
    Right
}
let direction: Direction = Direction.Up; // Uses enum value
```

---

UI Development Concepts and Layout

Component Properties and Methods

• Properties: Configure appearance and behavior
• Methods: Perform component-specific operations

Text Styling

• Text Color: Set via text-color property
• Text Overflow: Control with text-overflow (e.g., ellipsis displays truncation dots)

Image Component

```html
<image src="path/to/image.png" width="100" height="100"></image>
```

Input Field

```html
<input type="text" placeholder="Enter text here"></input>
```

SVG Icons

Embed directly or reference SVG files:

```html
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
```

Layout Elements

Organize UI component positioning and sizing

Margin

```css
.container {
    margin: 10px; /* Uniform margin */
    margin: 5px 10px; /* Vertical | Horizontal */
    margin: 5px 10px 15px; /* Top | Horizontal | Bottom */
    margin: 5px 10px 15px 20px; /* Top | Right | Bottom | Left */
}
```

Borders

```css
.box {
    border: 1px solid black; /* Width | Style | Color */
    border-radius: 10px; /* Rounded corners */
}
```

Custom Shapes

```css
.special-shape {
    border-radius: 20px 10px 30px 5px; /* Custom rounded corners */
}
```

Backgrounds

```css
.background {
    background-color: #f0f0f0; /* Solid color */
    background-image: url('path/to/image.png'); /* Background image */
    background-position: center; /* Image positioning */
    background-size: cover; /* Image sizing */
    background-repeat: no-repeat; /* Prevent tiling */
}
```

Linear Layout Alignment

```css
.linear-layout {
    display: flex;
    justify-content: center; /* Main axis alignment */
    align-items: center;     /* Cross axis alignment */
    flex-direction: row;     /* Layout direction (row/column) */
}
```