Home
Mail
News
Sports
Finance
Weather
Games
Groups
Answers
Screen
Flickr
Mobile
More
My Apps
Sign in
Hide
Search Results
Introducing Mojito
Overview
What is Mojito?
Why Mojito?
One Language
Two Runtimes
Views for Different Devices
Progressive Enhancement
Localization and Internationalization
Mojito: A Quick Tour
Node.js
Mojito Framework
Mojito Command-Line Tool
YUI 3
Mojito Applications
Mojito Architecture
Overview
Clients and Runtimes
Mojito Applications
Data
Mojito Framework
Mojito Server Runtime
Mojito Client Runtime
Mojito Core
Mojit Container
“API” (Action Context)
Mojito Services
View Factory
View Cache
Mojito Framework Components
Dispatcher/Mapper
Navigation Manager
Mojit Host
Application Configuration
Mojito Applications
Overview
Application Files and Directories
Mojits
Mojit Files and Directories
Application Directory Structure
Mojits
Why Mojit?
Mojit Architecture
Binders
Mojit Proxy
Controllers
Models
Addons
View Files
Mojit Structure
Active View
Mojit Definition
Mojit Instance
Composite Mojits
MVC in Mojito
Models
Location
Naming Convention
Basic Structure
Model Objects and Methods
Using Models
Example
Controllers
Location
Naming Convention
Files
YUI Module
Basic Structure
Controller Objects and Methods
Example
Controller Functions as Mojito Actions
Calling the Model
Passing Data to the View
Specifying the View
Reporting Errors
Views
Naming Convention
Supported Devices
Using Handlebars Expressions
Partials
Helpers
Using Helpers
Basic Helpers
Block Helpers
Creating Custom Helpers
Node.js Applications
Mojito Applications
Using Mustache Tags
Mojito-Supplied Data
Examples
Configuring Mojito
Basic Information
File Format
JSON
YAML
Application Configuration
configuration Object
builds Object
specs Object
staticHandling Object
viewEngine Object
yui Object
Configuring Applications to Have Multiple Mojits
Application With Multiple Mojits
Parent Mojit With Child Mojit
Parent Mojit With Children
Child Mojit With Children
Configuring Applications to Be Deployed to Client
What Gets Deployed?
Example
Example Application Configurations
Mojit Configuration
Configuring Metadata
Configuring and Using an Application-Level Mojit
Configuring Defaults for Mojit Instances
Mojit Instances
Using Mojit Instances
Routing
Routing Configuration File
Map Routes to Specific Mojit Instances and Actions
Single Route
Multiple Routes
Adding Routing Parameters
Using Parameterized Paths to Call a Mojit Action
Using Regular Expressions to Match Routing Paths
Generate URLs from the Controller
Accessing Configurations from Mojits
Application-Level Configurations
application.json
routes.json
Application Context
Mojit-Level Configurations
Controller
Model
Binder
Mojito Binders
Overview
Application Requirements for Using Binders
Anatomy of the Binder
init
bind
mojitProxy Object
Refreshing Views
Example Usage
Destroying Child Mojits
Example Usage
Class MojitProxy
Binder Examples
Static Resources
Prefix
Source Path
Relative Path
Examples
Getting Started with Mojito
Mojito Quickstart
Requirements
Installation Steps
Create a Mojito Application
Modify Your Application
Running the Application
Tutorial: Creating Your First Application
Prerequisite
Create the Application
Create the Sample Mojit
Start the Server
Modify the Sample Mojit
Code Examples
Overview of Code Examples
Prerequisites
Format of Code Examples
Configuration
Basic Configuring of Applications
Summary
Implementation Notes
Setting Up this Example
Source Code
Configuring Routing
Summary
Implementation Notes
Setting Up this Example
Source Code
Generating URLs
Summary
Implementation Notes
Setting Up this Example
Source Code
Simple Logging
Summary
Implementation Notes
Log Configuration
Log Levels
Example Log Configuration
Configuring Client and Server Logging
Using Y.log
Setting Up this Example
Source Code
Views
Creating a Simple View with Handlebars
Summary
Implementation Notes
Setting Up This Example
Source Code
Creating Views for Different Devices
Summary
Implementation Notes
Configuring Application to Use Device-Specific Templates
Creating Templates for Devices
Setting Up this Example
Source Code
Using the HTML Frame Mojit
Summary
Implementation Notes
Setting Up this Example
Source Code
Including YUI Modules in Views
Summary
Implementation Notes
Setting Up this Example
Source Code
Creating and Using a View Engine Addon
Summary
Implementation Notes
What Is a View Engine?
Installing a Rendering Engine
Creating the View Engine Addon
EJS Templates
Setting Up this Example
Source Code
Assets
Adding CSS
Summary
Implementation Notes
Setting Up this Example
Source Code
Attaching Assets with HTMLFrameMojit
Summary
Implementation Notes
Setting Up this Example
Source Code
Dynamically Adding CSS to Different Devices
Summary
Implementation Notes
Setting Up this Example
Source Code
Using Global Assets
Summary
Implementation Notes
What Are Assets?
Location of Assets
Static URLs to Assets
Configuring HTMLFrameMojit to Include Assets
Setting Up this Example
Source Code
Including YUI Modules
Summary
Implementation Notes
Adding YUI Modules
Using a YUI Module from Mojits
Setting Up this Example
Source Code
Data Access
Calling YQL from a Mojit
Summary
Implementation Notes
Forming the YQL Statement and Flickr Photo URI
Creating the Model
Calling the Model from the Controller
Setting Up this Example
Source Code
Using Cookies
Summary
Implementation Notes
Setting Up this Example
Source Code
Using Query Parameters
Summary
Implementation Notes
Setting Up this Example
Source Code
Binding Events
Summary
Requirements
Implementation Notes
Configuring the Application to Run on the Client
Getting Data with YQL in the Model
Binding Events
Binder Basics
Examining the PageMojitBinder
Using Paging
Setting Up this Example
Source Code
Inter-Mojit Communication
Summary
Implementation Notes
Application Configuration
Routing Configuration
Master Mojit
Sender Mojit
Receiver Mojit
Setting Up this Example
Source Code
Other
Internationalizing Your Application
Summary
Implementation Notes
Resources Bundles for Languages
Using the intl Addon
Configuring a Mojit to Run on Client
Setting Up this Example
Source Code
Using Multiple Mojits
Summary
Implementation Notes
Setting Up this Example
Source Code
Developer Topics
Assets
Introduction
Location of Asset Files
Configuration
assets Object
Examples
Accessing Assets from an Application
Syntax for Static URL
Referring to the Static URL in the Template
Using the Assets Addon
YUI Assets
Rolling Up Static Assets
Inline CSS
Data in Mojito
Getting Input and Cookie Data
Introduction
Getting Data from Parameters
GET
POST
Routing
Setting Routing Parameters
Getting Routing Parameters
Getting All Parameters
Single
All
Params Addon Method Aliases
Cookies
Getting Cookie Data
Writing Data to Cookies
Sharing Data
Overview
How Is Data Shared?
Benefits
Potential Issues
Data Addon
Requiring Data Addon
Mojits Sharing Data With Its Binders and Templates
Example
Sharing Page Data
page Object
Example
Logging
Log Levels
Log Defaults
Log Configuration
Recommended Logging Configuration for Production
Customizing Logging
Client and Server Logging
Using Y.log in Mojito Applications
Customizing the Log Level Order
Including and Excluding Modules From Logging
Testing
Conventions
Application Tests
Mojit Tests
Types of Mojit Tests
Testing Standards
Controller Tests
Example
Testing with the MockActionContext Object
Using the Mock ActionContext
Creating the MockActionContext Object
Setting Test Expectations
Configuring Mojito to Test MockActionContext Object
Example Expectations
Passing Multiple expectation Objects
Chaining expect Methods
Mocking Addons
Mocking Custom Addons
Mocking Models
Example MockAction Test
controller.server.js
controller.server-tests.js
Model Tests
Example
Mojito Built-In Functional/Unit Tests
Running Mojito’s Built-In Tests
Required Software
Optional Software
Setting Up
Running Tests with PhantomJS
Running Tests with Selenium
Test Results
Composite Mojits
Introduction
Creating Parent and Child Mojit Instances
Executing Child Mojits
Passing Data to the Parent Template
Specifying the View for a Parent Mojit
Attaching Assets to a Parent Template
Displaying Child Mojits in View
Propagating Child Mojit Errors to Parent Mojits
Dynamically Defining Child Mojits
Running Dynamically Defined Mojit Instances
Introduction
ac.composite.execute
ac._dispatch
Use Cases
Should I Use ac.composite.execute or ac._dispatch?
Using the Composite Addon
Configuring Child Instances
Running Mojit Instances
Templates
Example
Controllers
Templates
Rendered Views
Using ac._dispatch
Configuring a Child Instance
Command Object
Adapter Object
Adapter Functions
Controller
Templates
Examples
Using ac._dispatch with ac.composite.execute
Example
Application Configuration
Controllers
Templates
Frame Mojits
Introduction
HTMLFrameMojit
Configuration
Deploying to Client
Adding Assets with HTMLFrameMojit
LazyLoadMojit
How Does It Work?
Configuring Lazy Loading
Example
Application Configuration
Container Mojit
LazyChild Mojit
Creating Custom Frame Mojits
Why Create a Custom Frame Mojit?
What Frame Mojits Cannot Do
Responsibilities of the Frame Mojit
Configuring Your Frame Mojit
Frame Mojit Controller
Requirements
Example
application.json
IntlHTMLFrameMojit
Extending Mojito
Introduction
Addons
Creating New Addons
Naming Convention
Location of Addons
Namespace of Addon
Writing the Addon
Example Addon
Using Your Addon
Middleware
Introduction
Configuring Middleware
Location of Middleware
Example
Libraries
YUI Library
File Naming Convention
Location of YUI Modules
Using the YUI Module
Other Libraries
Location of Non-YUI Libraries
View Engines
Overview
Terminology
General Steps for Creating View Engines
File Naming Conventions
View Engine Addon
Template
File Locations
Application-Level View Engine Addons
Mojit-Level View Engine Addons
Rendering Engines
Requirements of the View Engine Addon
Methods for the View Engine Addon
render
compiler
View Engine Addon and Its View
Example
Embedded JavaScript (EJS)
Using Context Configurations
Introduction
Why Use Context Configurations?
What is a Context?
Base Context
Syntax
Example
Request Contexts
Request Headers
Query String Parameters
Mojito Predefined Contexts
How Does Mojito Resolve Context Configurations?
Defining Configurations for Contexts
Configuration Objects
setting
specs
config
Examples
application.json
defaults.json
routes.json
Static Configurations
Dynamically Changing Configurations
Creating Custom Contexts
Who Should Create Custom Contexts?
Dimensions File
Syntax for JavaScript Object
Example dimensions.js
Configuring YUI in Mojito
Overview
Benefits of Customizing YUI Configuration
YUI Seed File
Seed File in YUI Applications
Seed File in Mojito Applications
Mojito’s Default Seed File
Configuration of the Mojito Seed File
What Modules Should Be in the Seed?
Synthetic Modules in Mojito
What Are Synthetic Modules?
Base and Resolved Synthetic Modules
Synthetic Modules for Multiple Languages
Creation of Synthetic Files
Performance Optimization
Default Application Optimization
Minimize the Size of the Seed File
Use Synthetic Modules for YUI Core Modules
Use Base Synthetic Modules to Reduce Latency and Memory
Use Resolved Synthetic Modules to Use Less CPU Power
Use Contexts to Customize Seed to Runtime Environment
Getting YUI to Your Application
Using the YUI Version Bundled with Mojito
Pros
Cons
Default Configuration
Specifying YUI Modules
Using the YUI CDN
Pros
Cons
Example
Using a Custom CDN to Load YUI
Pros
Cons
Example
Using the YUI Bundled With Your Application
Pros
Cons
Example
YUI App Group
Introduction
Why Use the App Group?
Configuration of the App Group
Default Combo Handler of Mojito
Inheritance of Default Group Configurations
Shaker Integration
Mojito and npm Packaging
Overview
Mojito Resources
Using Shared Mojits
General Process of Using Shared Mojits
Example package.json
Authoring an npm Module Containing Shared Mojito Resources
General Process of Authoring an npm Module Containing Shared Mojito Resources
Resource Definition Metadata
mojito object
Mojito Package Types
Examples
Resource Store
Overview
Intended Audience
Prerequisites
How Can the Resource Store Help Developers?
Reflection
Define/Register New Resource Types
Extend/Modify Functionality of the Resource Store
Resources
What is a Resource?
To Mojito
To the Resource Store
Resource Versions
Resource Scope
Application-Level Resources
Mojit-Level Resources
Shared Resources
Resource Types
Resource Metadata
Intro
Metadata Object
source Object
view Object
yui Object
Types of Resources
Subtypes
selector Property
Example
Resource Versions
Example
How Does the Resource Store Work?
Overview
Walking the Filesystem
Resolution and Priorities
Affinities
Selectors
Sources
Relationships
Getting Data from the Resource Store
Creating Your Own Resource Store Addons
Intro
Anatomy of a Resource Store Addon
Key Methods
Key Events
Example
Resource Store Addon
Text ActionContext Addon
Controller
Resource Store Built-In Addons
Intro
Creating Custom Versions of Built-In Resource Store Addons
selector
url
Startup Requirements for Mojito in Hosting Environments
Mojito v0.4.8 and Later
index.js
server.js
Mojito v0.4.7
index.js
server.js
Mojito v0.4.6
index.js
server.js
npm start
Mojito v0.4.5 and Earlier Versions
index.js
server.js
Mojito API Overview
Action Context
done Method
meta Object
Example
Action Context Addons
Syntax
Requiring Addons
Addon Examples
Creating Addons
REST Library
Including Library
Example
Client Object
Pausing Mojits
Resuming Mojits
Mojito: FAQ
Questions
General
Configuration
Data
Binders
CSS/JavaScript Assets
HTTP Headers/Responses
Mojits
Views
Logging/Testing
Addons/Libraries/Middleware
Answers
General
Configuration
Data
Binders
CSS/JavaScript Assets
HTTP Headers/Responses
Mojits
Views
Logging/Testing
Addons/Libraries/Middleware
Mojito Reference
Mojito Command Line
Help
Creating Code from Archetypes
Mojito Archetypes
Custom Archetypes
Testing
Code Coverage
Starting the Server
Sanitizing Code
Documenting Code
Version Information
Build System
Build Types
html5app
Dependency Graphs (Deprecated)
Specifying Context
Troubleshooting
Issues
Solutions
Glossary
action
Action Context
addon
affinity
assets
binder
CDN
composite mojits
controller
mojit
mojitProxy
Mojito
MVC
Node.js
npm
OAuth
Shaker
template
view
view partial
YUI
Additional Resources
Presentations/Slidecasts
Screencasts/Videos
Community
Developer Forums
Twitter
Publications
Articles
Blogs
Archived Documentation
Prev
— Creating and Using a View Engine Addon
Adding CSS —
Next
Assets
ΒΆ
These examples show you how to add assets such as CSS and JavaScript to your application.
Adding CSS
Attaching Assets with HTMLFrameMojit
Dynamically Adding CSS to Different Devices
Using Global Assets
Including YUI Modules
Report an issue on this page