Introduction

TypeScript UI is a user-interface library for the web. It is written in the TypeScript language and aims to provide an easy-to-use, fast to develop with, Windows 8 style UI.

However, TypeScript UI is more than just a UI library. It provides a complete structure for app development so you can develop large scale apps with little hassle. The main aim is for all the UI handling to be done client side, thus increasing performance and animation smoothness and reducing server load. The server should only be for data delivery/handling.

So TypeScript UI provides a basic structure where you have an App class that acts as a Main method for your app within the browser and an App Starter, which is included within the main body of the target page to start your app and give it a container. You need at least one app starter per each app you create. These app starters can then easily be switched in/out of pages by the server simply by changing the JS reference included within the page. You can have one or more app starters for one app which can pass in different arguments to the app resulting in different functionality. App starters can also perform some pre-checks for compatibility etc. to allow fall-back if the developer wishes.

The app class contains a Run method which accepts two parameters:
  • Args: A list of arguments as start parameters. These can be used by app starters to specify different start conditions.
  • Container: This specifies the main container for the app – all windows and controls with be created within this container.

From the Run method you can then create your splash screen and show it. After showing the splash screen, you can then move onto creating and initialising more substantial windows (often a Startup window or a login window) which take a few seconds to create. A splash screen is advisable since large windows can take up to 10 seconds to create on mobile devices.

The Run method also initialises static UI values such as whether to use HTML2Canvas in animation and a variable to indicate if it is a mobile app. Such information is useful for tailoring your app to different screens and situations.

Look over the sample MyApp app and examine the pattern. For more information, see the other tutorials/sample apps.

Last edited Sep 8, 2013 at 1:34 PM by EdwardNutting, version 1

Comments

No comments yet.