Appsudo Framework - Modern Documentation

Introduction

Appsudo framework is a lightweight, cross-platform application development framework that allows developers to create beautiful, responsive mini apps with minimal effort. Using Python for logic and XML for layouts, Appsudo provides a simple yet powerful way to build applications.

Write Once, Run Anywhere

Build applications that run consistently across multiple platforms.

Intuitive Styling

Style components using an XML-like syntax that's easy to learn and use.

Powerful Components

Access a rich library of UI components to build sophisticated interfaces.

Development Environment Setup

Follow these steps to set up your development environment for Appsudo mini app development.

Step 1: Install Visual Studio Code

Download and install Visual Studio Code, the recommended IDE for Appsudo development.

Download VS Code

Step 2: Setup Android Development Environment

Windows Setup

Download and install Android Studio.
Ensure Android SDK and Android Emulator are included during installation.

Set environment variables:

ANDROID_SDK_ROOT=C:\Users\YourUsername\AppData\Local\Android\Sdk
PATH=%PATH%;%ANDROID_SDK_ROOT%\platform-tools;%ANDROID_SDK_ROOT%\emulator

Right-click 'This PC' > Properties > Advanced system settings > Environment Variables.

Verify:
```
adb --version
emulator -help
```

macOS Setup

Download and install Android Studio.
Ensure Android SDK and Android Emulator are included.

Add to ~/.zshrc or ~/.bash_profile:

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools:$ANDROID_SDK_ROOT/emulator

Apply:

source ~/.zshrc # or source ~/.bash_profile

Verify:
```
adb --version
emulator -help
```

Linux Setup

Download and install Android Studio.

Or install directly:

sudo apt update && sudo apt install adb android-emulator

If using Android Studio, add to ~/.bashrc:

export ANDROID_SDK_ROOT=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools:$ANDROID_SDK_ROOT/emulator

Apply:
```
source ~/.bashrc
```
Verify:
```
adb --version
emulator -help
```

Step 3: Install Appsudo Extension

Open VS Code.
Go to Extensions (Ctrl+Shift+X or Cmd+Shift+X).
Search for "Appsudo App Runner" and click Install.

View Extension

Step 4: Running Your First App

Open your Appsudo project in VS Code.
Press Ctrl+Shift+P (or Cmd+Shift+P) for Command Palette.
Type "Appsudo" and select "Appsudo App Runner".
Select your target device.

Appsudo App Structure

Appsudo mini apps follow a specific directory structure. Understanding this is key for development.

PROJECT EXPLORER

my_app/

app.py

data/

config.json

view/

main_view.asxml

custom_view.asxml

style/

styles.ascss

res/

images/

icons/

metadata.json

secrets.json

Key Components

app.py: Main application entry point.
data/: JSON files for data loading.
view/: ASXML files for UI layouts.
style/: ASCSS files for styling.
res/: Resource files (images, etc.).
metadata.json: App metadata.
secrets.json: App secret.

Components

Appsudo provides a rich library of UI components.

Examples

Learn Appsudo through practical examples.

Appsudo CSS Framework

Style components easily with an XML-like syntax or separate ASCSS files.

Supported Attributes

background

Sets the background of an element (e.g., color string like "#FF0000" or a resource path like "res/images/bg.png").

background-color

Sets the background color of an element (e.g., "#RRGGBB", "#AARRGGBB").

border-radius

Defines the radius of element corners (e.g., "5dp").

border-color

Sets the color of element borders (e.g., "#0000FF").

border-width

Defines the width of element borders (e.g., "1dp").

border-style

Sets the style of element borders (e.g., "solid", "dash", "line").

font-color

Defines the color of text within an element (e.g., "#333333").

font-size

Sets the size of text within an element (e.g., "16sp", "14dp").

alignment

Positions content within an element (e.g., "center", "left", "right", "top", "bottom", "center_vertical", "center_horizontal").

width

Sets the width of an element (e.g., "fill", "wrap", "100dp", "50%").

height

Sets the height of an element (e.g., "fill", "wrap", "200dp", "25%").

margin

Sets the outer spacing on all sides (e.g., "10dp").

margin-left / -right / -top / -bottom

Sets specific margin for one side (e.g., "5dp").

padding

Sets the inner spacing on all sides (e.g., "15dp").

padding-left / -right / -top / -bottom

Sets specific padding for one side (e.g., "8dp").

enabled

Determines if an element is interactive ("true" or "false").

Inline Usage Examples

<Button
  background-color="#007bff"
  font-color="white"
  border-radius="5px"
  padding="10dp"
  alignment="center"
/>

<TextBox
  border-color="#ccc"
  border-width="1px"
  font-size="16sp"
  width="fill"
/>

External Styles (style/styles.ascss)

/* styles.ascss */
button_primary {
  background-color: #007bff;
  font-color: white;
  border-radius: 5dp;
}

input_field {
  border-color: "cccccc;
  width: fill;
}

Referencing in ASXML:

<Button style="styles.button_primary" text="Submit" />
<TextBox style="styles.input_field" placeholder="Enter text..." />

<!-- Override specific properties -->
<Button style="styles.button_primary" font-color="yellow" />

Core Features

Appsudo provides powerful core features for robust applications.

App & Component Marketplace

Discover and share reusable Appsudo apps and components built by the community.

More to Come!

Our marketplace is growing. We're working on bringing you even more exciting apps and components.

Interested in contributing? Learn more about submission guidelines (coming soon).