PyWebApp3 0.1.2

PyWeb is a Python-based web framework that allows you to build responsive, modern web applications using only Python code. No HTML, CSS, or JavaScript knowledge required!

PyWeb Framework - Build Responsive Web Apps with Python

PyWeb is a Python-based web framework that allows you to build responsive, modern web applications using only Python code. No HTML, CSS, or JavaScript knowledge required!

📋 Table of Contents

• Overview
• Installation
• Quick Start
• Core Concepts
• Components
• Responsive Design
• Event Handling
• Examples
• API Reference

🌟 Overview

PyWeb lets you create web applications using Python classes and methods. It includes:

• Pythonic component system - Build UI with Python classes
• Built-in responsive design - Easy media queries with qurell()
• Event handling - Handle user interactions with Python functions
• File uploads - Built-in support for image/video uploads
• No frontend knowledge required - Everything is done in Python

🚀 Installation

1. Install required dependencies:

pip install flask

2. Create a new Python file and import PyWeb:

from pyweb import create_app, serve_pyweb, StyleManager, Div, Text, Button, Input

⚡ Quick Start

Here's a simple "Hello World" application:

from pyweb import create_app, serve_pyweb, Div, Text, Button

def create_app():
    app = create_app("My First App")
    home = app.add_page("home")
    
    # Create a simple page
    container = Div(class_name="container")
    container.add(Text("Hello, PyWeb!", tag="h1"))
    container.add(Text("Welcome to your first PyWeb application"))
    
    # Add a button
    btn = Button("Click Me!", "my_button")
    container.add(btn)
    
    # Add button click handler
    def on_button_click(page, eid, event, value, updates):
        updates["my_button"] = Button("Clicked!", "my_button").render()
    
    home.on("my_button", "click", on_button_click)
    home.add(container)
    
    return app

if __name__ == "__main__":
    app = create_app()
    flask_app = serve_pyweb(app)
    flask_app.run(debug=True, port=5000)

Run with: python app.py and visit http://localhost:5000

🧠 Core Concepts

1. Application Structure

app = create_app("App Name")          # Create main application
page = app.add_page("page_name")      # Add a page
app.navigate("page_name")             # Navigate between pages

2. Components

Build UI by adding components to pages:

page.add(Text("Hello World"))         # Add text
page.add(Button("Click", "btn_id"))   # Add button with ID
page.add(Div().add(Text("Nested")))   # Nested components

3. Styling

Use the StyleManager for CSS:

style = StyleManager()
style.background("body", "#f0f0f0")
style.color(".card", "white")
style.padding("button", "10px 20px")

🎨 Responsive Design

PyWeb makes responsive design easy with the qurell() function:

Basic Usage

style.qurell('mobile', {
    '.card': 'width: 100%; margin: 10px 0;',
    'h1': 'font-size: 24px;'
})

style.qurell('tablet', {
    '.card': 'width: 48%; margin: 1%;',
    'h1': 'font-size: 28px;'
})

style.qurell('desktop', {
    '.card': 'width: 31%; margin: 1%;', 
    'h1': 'font-size: 32px;'
})

Supported Breakpoints

• 'mobile' - 480px
• 'tablet' - 768px
• 'small-desktop' - 1024px
• 'desktop' - 1200px
• 'large' - 1440px
• Custom pixels: 600, 1024, '900px'

Responsive Grid System

PyWeb includes a built-in 12-column grid system:

row = Div(class_name="row")
col1 = Div(class_name="col-6")  # 50% width
col2 = Div(class_name="col-6")  # 50% width
row.add(col1)
row.add(col2)

🧩 Components

Basic Components

# Text elements
Text("Hello", tag="h1")              # Heading
Text("Paragraph", tag="p")           # Paragraph
Text("Span", tag="span")             # Inline text

# Buttons and inputs
Button("Submit", "btn_id")
Input("input_id", "text", "Placeholder")
TextArea("textarea_id", "Message")
Select("select_id", [("opt1", "Option 1"), ("opt2", "Option 2")])

# Media
Image("image.jpg", "img_id")
Video("video.mp4", "video_id")
InputFile("file_upload", "image/*")

# Containers
Div("container_id", "my-class")
UL().add(LI("Item 1")).add(LI("Item 2"))

Forms

form = Form("my_form", action="/submit")
form.add(Input("name", "text", "Your Name"))
form.add(Button("Submit", "submit_btn"))

def on_form_submit(page, eid, event, value, updates):
    print("Form data:", value)  # Access form data

page.on("my_form", "submit", on_form_submit)

🎯 Event Handling

Handling Events

def on_click(page, eid, event, value, updates):
    # Update components
    updates[eid] = Button("Clicked!", eid).render()
    # Or return redirect/script
    return {"redirect": "/new-page"}

page.on("button_id", "click", on_click)

Supported Events

• "click" - Button clicks
• "change" - Input changes
• "input" - Real-time input
• "submit" - Form submissions
• "file" - File uploads

File Uploads

file_input = InputFile("uploader", "image/*")

def on_file_upload(page, eid, event, value, updates):
    # value contains base64 encoded file
    if "image" in value:
        # Process image
        updates["preview"] = Image(value, "preview_img").render()

page.on("uploader", "file", on_file_upload)

📱 Example: Responsive Blog

from pyweb import create_app, serve_pyweb, StyleManager, Div, Text, Heading, Image

def create_blog():
    app = create_app("My Blog")
    home = app.add_page("home")
    
    # Responsive styling
    style = StyleManager()
    style.qurell('mobile', {
        '.post': 'width: 100%; margin: 10px 0;',
        '.sidebar': 'display: none;',
        'h1': 'font-size: 24px;'
    })
    
    style.qurell('tablet', {
        '.post': 'width: 48%; margin: 1%;',
        '.sidebar': 'width: 30%;',
        'h1': 'font-size: 28px;'
    })
    
    style.qurell('desktop', {
        '.post': 'width: 31%; margin: 1%;',
        '.sidebar': 'width: 25%;',
        'h1': 'font-size: 32px;'
    })
    
    # Layout
    container = Div(class_name="container")
    header = Div(class_name="header")
    header.add(Heading("My Responsive Blog", level=1))
    
    content = Div(class_name="row")
    posts = Div(class_name="col-8")
    sidebar = Div(class_name="col-4 sidebar")
    
    # Add blog posts
    for i in range(3):
        post = Div(class_name="card post")
        post.add(Heading(f"Blog Post {i+1}", level=2))
        post.add(Text("This is a blog post content..."))
        posts.add(post)
    
    # Add sidebar
    sidebar.add(Heading("Categories", level=3))
    sidebar.add(Text("• Python"))
    sidebar.add(Text("• Web Development"))
    sidebar.add(Text("• Responsive Design"))
    
    content.add(posts)
    content.add(sidebar)
    container.add(header)
    container.add(content)
    home.add(container)
    
    return app

if __name__ == "__main__":
    app = create_blog()
    flask_app = serve_pyweb(app)
    flask_app.run(debug=True, port=5000)

🔧 API Reference

StyleManager Methods

• .color(target, value) - Text color
• .background(target, value) - Background
• .padding(target, value) - Padding
• .margin(target, value) - Margin
• .width(target, value) - Width
• .height(target, value) - Height
• .qurell(breakpoint, rules) - Media queries

Component Properties

Most components support:

• id - Unique identifier
• class_name - CSS class
• style - Inline styles
• Event handlers via .on()

App Navigation

app.navigate("page_name")  # Switch pages
NavButton("Go Home", "home_btn", "home")  # Navigation button

🚀 Deployment

1. Run locally:

python app.py

2. For production, use a WSGI server:

pip install gunicorn
gunicorn -w 4 -b 0.0.0.0:5000 app:flask_app

💡 Tips & Best Practices

1. Use the grid system for responsive layouts
2. Leverage qurell() for device-specific styling
3. Keep event handlers simple - delegate complex logic to other functions
4. Use consistent naming for IDs and classes
5. Test on multiple screen sizes during development

🆘 Getting Help

If you encounter issues:

1. Check that Flask is installed
2. Verify component IDs are unique
3. Ensure event handlers are properly connected with .on()

📝 License

PyWeb is open source and free to use for any project.

---

Happy coding! With PyWeb, you can build beautiful, responsive web applications using the Python you already know and love.