/reddit_viewer

Primary LanguageTypeScript

reddit_viewer

Reddit Viewer is a port of the Tabris.js Reddit Pets example to TypeScript.

It fetches data from the /r/petpictures subreddit and renders it in a Tabris.js CollectionView. An Action is used to switch between two display modes of the items, a list and a gallery mode.

List mode Gallery mode
List mode Gallery mode

The project uses Tabris.js Decorators on top of Tabris.js, which provides useful TypeScript decorators replacing repetetive code common in app development. Features used in the example:

  • @getById private myWidgetId: TextView;

    Sets the field to a widget (created in the class constructor) with an ID matching its name.

  • @getByType private collectionView: CollectionView;

    Sets the field to the first widget (created in the class constructor) with a matching type.

  • @property private myProperty: string;

    Makes the field a Tabris.js widget property, which can be used via the constructor and with set() and get().

  • @component

    Ensures proper component encapsulation. Widget retrieval functions operating on the widget graph like find() and children() will ignore children of this component. Also enables JSX-based one-way data binding.

  • One-way data binding  

    When using @property private myProperty: string; in conjunction with:  

     <textView
   bind-text='myProperty'
   ... />

    ... the text property of the TextView will be updated when myProperty is updated.

    * Two-way data binding is also supported using the @bind("#<id>.<property>") decorator.

Run

In the project directory, run the Tabris CLI command:

tabris serve

This will start a JavaScript app code server at a free port and print its URL to the console.

The JavaScript app code can be side-loaded in the developer app if the default config.xml was not changed. Otherwise, the JavaScript app code must be side-loaded in a debug build of this app.

Build

The app can be built using the online build service at tabrisjs.com or locally using Tabris.js CLI.

See Building a Tabris.js App for more information.

Authors

@tbuschto @dbuschtoens