• Stars
    star
    177
  • Rank 215,985 (Top 5 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created almost 13 years ago
  • Updated about 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Simple Backbone extension library providing alternative mechanism to navigate/route between application views.

What is BackStack?

BackStack is a JavaScript component/extension for Backbone.js that allows you to create nice view transitions in your HTML5 apps. By default it comes with an implementation of mobile-style slide transitions, fade transitions, and no-effect transitions.

It is conceptually based on the ViewNavigator API from the mobile SDK of the Apache Flex framework. It enables developers to manage a stack of views that can be pushed, popped, or replaced.

<h3>Why should I use it?</h3>
<p>Although you can use it for web development (as I did to create <a href='http://pwalczyszyn.github.com/backstack/' target='_blank'>this</a> site) it is especially useful when building mobile apps with PhoneGap/Cordova framework.
    Of course, if you are using one of the dozen or so available mobile UI frameworks like <a href="http://jquerymobile.com/" target="_blank">jQuery Mobile</a>,
    <a href="http://www.sencha.com/products/touch/" target="_blank">Sencha Touch</a>, or <a href="http://www.jqtouch.com/" target="_blank">jQTouch</a> you don't need it.
</p>

<h3>Are there other alternatives?</h3>
<p>You can use the ViewNavigator implementation from the <a href="http://triceam.github.com/app-UI/" target="_blank">app-UI</a> framework built by fellow Adobe Evangelist
    <a href="http://tricedesigns.com/" target="_blank">Andy Trice</a>. Alternatively, you can build the transitions yourself; it is not really hard! Or, use one of the frameworks mentioned above.
</p>

<h3>How was it built?</h3>
<p>This may not be particularly interesting to everyone but I used the <a href="https://github.com/jrburke/almond" target="_blank">almond</a> library to develop/package BackStack. Almond is a replacement AMD loader for RequireJS. It is a smaller "shim" loader, providing a minimal AMD API footprint that includes loader plugin support.</p>

Where can I find more info about it?

Here is a demo site that is actually built with BackStack. Be aware of a disclaimer that I only tested it with WebKit based browsers as I mainly used it for mobile apps development. So if you are on IE this site many not work for you, sorry for that ;)

You can also checkout this simple example that is available on jsFiddle.

Watch an intro on YouTube with step-by-step instructions how to get started: http://www.youtube.com/watch?v=sm5DI-iYark

BackStack.StackNavigator class API

Constructor

<ul>
    <li><strong>options</strong> - Backbone view options hash.
        <ul>
            <li><strong>options.popTransition</strong> - default transition effect object to be used during pop operations.</li>
            <li><strong>options.pushTransition</strong> - default transition effect object to be used during push operations.</li>
        </ul>
    </li>
</ul>


<h3>Events</h3>
<p>
    BackStack.StackNavigator eventing model is based on Backbone's events implementation.
    <ul>
        <li><strong>StackNavigator#viewChanging</strong> - It's triggered just before view on the stack is changed. This event is cancelable and the view change can be stopped using <code>event.preventDefault()</code> function.
            <h4>Event object properties:</h4>
            <ul>
                <li><strong>action</strong> - this property can have following values: push, pop, popAll, replace and replaceAll.</li>
                <li><strong>fromViewClass</strong> - class of a from view.</li>
                <li><strong>fromView</strong> - instance of a from view.</li>
                <li><strong>toViewClass</strong> - class of a to view.</li>
                <li><strong>toView</strong> - instance of a to view.</li>
            </ul>
        </li>

        <li><strong>StackNavigator#viewChanged</strong> - It's triggered after view on the stack is changed. This event cannot be canceled.
            <h4>Event object properties:</h4>
            <ul>
                <li><strong>target</strong> - Instance of BackStack.StackNavigator that triggered this event.</li>
            </ul>
        </li>
        <li><strong>Backbone.View#viewActivate</strong> - This event is triggered when view is activated on the stack.
            <h4>Event object properties:</h4>
            <ul>
                <li><strong>target</strong> - Instance of a view that was activated.</li>
            </ul>
        </li>
        <li><strong>Backbone.View#viewDeactivate</strong> - This event is triggered when view is deactivated on the stack. Either it was popped or it was covered by another view.
            <h4>Event object properties:</h4>
            <ul>
                <li><strong>target</strong> - Instance of a view that was deactivated.</li>
            </ul>
        </li>
    </ul>
</p>

<h3>Fields</h3>
<ul>
    <li><strong>StackNavigator.viewsStack</strong> - An array with all the view refs on the stack.</li>
    <li><strong>StackNavigator.activeView</strong> - View on top of the stack.</li>
    <li><strong>StackNavigator.defaultPushTransition</strong> - Default push transition effect.</li>
    <li><strong>StackNavigator.defaultPopTransition</strong> - Default pop transition effect.</li>
</ul>

<h3>Functions</h3>
<ul>
    <li><strong>StackNavigator.popAll(transition)</strong> - Pops all views from a stack and leaves empty stack.
        <h4>Parameters:</h4>
        <ul>
            <li>{Effect} <strong>transition</strong> Transition effect to be played when popping views.</li>
        </ul>
    </li>

    <li><strong>StackNavigator.popView(transition)</strong> - Pops an active view from a stack and displays one below.
        <h4>Parameters:</h4>
        <ul>
            <li>{Effect} <strong>transition</strong> Transition effect to be played when popping new view.</li>
        </ul>
    </li>

    <li><strong>StackNavigator.pushView(view, viewOptions, transition)</strong> - Pushes new view to the stack.
        <h4>Parameters:</h4>
        <ul>
            <li>{Backbone.View || Backbone.ViewClass} <strong>view</strong> View class or view instance to be pushed on top of the stack.</li>
            <li>{Object} <strong>viewOptions</strong> Options to be passed if view is constructed by StackNavigator.</li>
            <li>{Effect} <strong>transition</strong> Transition effect to be played when pushing new view.</li>
        </ul>
    </li>

    <li><strong>StackNavigator.replaceAll(view, viewOptions, transition)</strong> - Replaces all of the views on the stack, with the one passed as a view param.
        <h4>Parameters:</h4>
        <ul>
            <li>{Backbone.View || Backbone.ViewClass} <strong>view</strong> View class or view instance to be pushed on top of the stack.</li>
            <li>{Object} <strong>viewOptions</strong> Options to be passed if view is constructed by StackNavigator.</li>
            <li>{Effect} <strong>transition</strong> Transition effect to be played when replacing views.</li>
        </ul>
    </li>

    <li><strong>StackNavigator.replaceView(view, viewOptions, transition)</strong> - Replaces view on top of the stack, with the one passed as a view param.
        <h4>Parameters:</h4>
        <ul>
            <li>{Backbone.View || Backbone.ViewClass} <strong>view</strong> View class or view instance to be pushed on top of the stack instead of current one.</li>
            <li>{Object} <strong>viewOptions</strong> Options to be passed if view is constructed by StackNavigator.</li>
            <li>{Effect} <strong>transition</strong> Transition effect to be played when replacing view.</li>
        </ul>
    </li>
</ul>

More Repositories

1

as3c2dm

Adobe AIR Native Extension for C2DM (Android Cloud to Device Messaging Framework)
Java
41
star
2

express-myconnection

Connect/Express middleware that auto provides mysql connections
JavaScript
34
star
3

brackets-livereload

Livereload extension for Brackets
JavaScript
33
star
4

grunt-slack-hook

JavaScript
25
star
5

as3viewnavigator

This is a simple as3 library giving functionality similar to ViewNavigator that comes with Flex Hero to your pure flash/as3 projects.
ActionScript
24
star
6

scroll2play

Simple JS lib that mimics video playback while scrolling browser window
JavaScript
23
star
7

Backbone.Force

Backbone.Force is a plugin for Backbone.js library that enables Force.com connectivity.
JavaScript
22
star
8

GapForce

Demo app that uses Backbone.Force extension
JavaScript
18
star
9

jqmNavigator

This is an extension library for jQuery Mobile and Backbone.js frameworks
JavaScript
17
star
10

GeeksNearby

It's a simple mobile app to exchange contacts between people in near distance
Objective-C
13
star
11

MAX-2010-Projects

My MAX 2010 presentation projects
ActionScript
12
star
12

BlueChips

Flex 4.6 demo app (showing: SplitViewNavigator, CalloutButton, SpinnerList, DateSpinner components in action)
11
star
13

forcetk.ui

This library is an extension for forcetk.js library that provides simple UI for Salesforce OAuth mechanism.
JavaScript
11
star
14

npm-onupdate

CLI for npm.onupdate.info service
JavaScript
11
star
15

amf-message-deserializer

This is an AS3 library that can deserialize AMF messages sent by Flash/Flex apps.
ActionScript
9
star
16

examples

Examples built by Piotr Walczyszyn
ActionScript
9
star
17

AS3TextArea

AS3 coloring TextArea component
ActionScript
9
star
18

un-framework

UnFramework is a set of simple Flex helpers that let you getaway without any frameworks
ActionScript
9
star
19

npm-onupdate-server

Source code of npm-onupdate.info service
JavaScript
6
star
20

NoteIn

This is a simple notes editor for mobile devices, it is a PhoneGap/HTML5/CSS3/JavaScript/Backbone/RequireJS technologies demo.
JavaScript
6
star
21

responsive-inspector

Simple extension for Google Chrome that allows inspecting visited page media queries.
JavaScript
6
star
22

nativeapplicationupdater

This provides simple mechanizm to update Adobe AIR applications packaged with native installer
5
star
23

CALjs

CALjs is a iCal/Outlook like calendar component built for HTML5/JavaScript applications. It is also fully touch enabled so it can run on devices.
JavaScript
5
star
24

resicon

This is an icons batch resizing utility application. Allows resizing icon images to predefined set of sizes 16x16, 32x32, 36x36...
JavaScript
4
star
25

GapBook

PhoneGap/Cordova/jQuery/jQuery Mobile workshop materials
JavaScript
4
star
26

GapBookBuild

A version of GapBook app that is PhoneGap Build enabled
JavaScript
4
star
27

detager-desktop

Social bookmarking and tagging desktop application. Powered by Adobe AIR/Flex and Zend Framework.
ActionScript
4
star
28

GeeksNearby-www

Repository with source code of GeeksNearby application
JavaScript
4
star
29

detager-mobile

Mobile application for detager.com bookmarking service
ActionScript
2
star
30

brackets-executor

Brackets extension that allows executing shell commands
JavaScript
1
star
31

pwalczyszyn.github.com

1
star
32

GeeksNearbyDemoTopcoat

GeeksNearby demo with Topcoat UI framework
JavaScript
1
star
33

detager-server

Detager server source code
PHP
1
star
34

presentations

This is a repository of my HTML5-based presentations
1
star