Introduction

purgetss.ui is the CommonJS runtime generated by purgetss module. It can be used from both Alloy and Titanium Classic; only the way you create and reference views changes.

Project	Generated file	Load it with
Alloy	app/lib/purgetss.ui.js	require('purgetss.ui')
Classic	Resources/lib/purgetss.ui.js	require('lib/purgetss.ui')

Classic paths are relative to Resources/, as described by Titanium's CommonJS module path resolution.

Two authoring models

Alloy examples can use XML, TSS, PurgeTSS classes, <Animation module="purgetss.ui">, controllers, and $.* references. Classic projects do not have those features: create views with Ti.UI.create*() and express every animation with JavaScript objects and native Titanium properties.

For the full Classic setup, see Using purgetss.ui in Titanium Classic.

Installation

Run the command from the root of either project type:

purgetss module

The command selects the correct destination automatically. The generated file is self-contained, so a Classic application does not need PurgeTSS at runtime.

Public exports

Export	Purpose
AnimationProperties	Direct constructor export for an animation object
createAnimation(args)	Factory that creates the same kind of animation object
deviceInfo()	Logs Titanium platform and display diagnostics
saveComponent({ source, directory })	Renders a view, writes a PNG, and sends it to the photo gallery
Appearance	Persists and applies system, light, or dark appearance

Use createAnimation() in Classic application code. Both animation exports return behavior-equivalent objects; <Animation module="purgetss.ui"> remains the idiomatic Alloy form.

Animation model

An animation object holds native Titanium animation properties and exposes 15 methods:

• State: play, toggle, apply, open and close.
• Interaction: draggable, undraggable, and detectCollisions.
• Helpers: sequence, swap, pulse, shake, snapTo, reorder, and transition.

The object can animate position, size, opacity, colors, and a 2D transform. Timing uses native Ti.UI.Animation properties such as duration, delay, curve, repeat, and autoreverse. The module does not add a universal duration default; set duration explicitly whenever visible motion is required.

Stateful animations can define open, close, and complete under animationProperties. Child views can inherit a global children object and override it with their own child, open, close, and complete objects.

Alloy example

app/views/index.xml

<Alloy>
  <Window>
    <Animation id="fade" module="purgetss.ui" class="open:opacity-100 close:opacity-0 duration-200" />
    <View id="card" class="opacity-0" />
  </Window>
</Alloy>

app/controllers/index.js

$.fade.open($.card)
$.index.open()

Titanium Classic example

Resources/app.js

const { createAnimation } = require('lib/purgetss.ui')

const window = Ti.UI.createWindow({ backgroundColor: '#0f172a' })
const card = Ti.UI.createView({ width: 160, height: 96, opacity: 0 })
const fade = createAnimation({
  duration: 200,
  animationProperties: {
    open: { opacity: 1 },
    close: { opacity: 0 }
  }
})

window.add(card)
window.addEventListener('open', () => fade.open(card))
window.open()

Utilities and lifecycle

deviceInfo() only writes diagnostic output. saveComponent() calls both source.toImage() and Ti.Media.saveToPhotoGallery(); check photo-gallery permissions before using it and do not expect a return value or completion callback from the wrapper.

When a window owns draggable views, call undraggable() before releasing them. Also remove app-level or gesture listeners that your application added and drop references to callbacks and views when the window closes. See the Classic lifecycle example.