Structure

This guide helps a developer understand how to structure their libraries and applications.

Typescript Modules

Typescript supports 2 module patterns: CommonJS and AMD. When compiling many files into 1, Typescript enforces the CommonJS pattern because AMD relies on 1 definition per file. Fayde control libraries compile as one file enforcing CommonJS. When working in a Fayde application, Fayde serves up each file individually utilizing the AMD pattern. Why is this important? The method of including dependencies varies depending on the pattern used. The method of exposing classes is also different.

Library

In a library, the exposed classes are exposed through a module that reflects the name of the library. Note that the class is exported from the module. To consume another dependency, a reference is usually declared at the top of the file.

BaseControl.ts

module Project.Controls {
    export class BaseControl extends Fayde.Controls.ContentControl {
        ...
    }
}

SomeControl.ts

/// <reference path="BaseControl.ts" />
module Project.Controls {
     export class SomeControl extends BaseControl {
        ...
     }
}

Application Class

Let's imagine that we wanted to build a view model in our application. In this example, MainViewModel depends on SubViewModel. Note that the class is not in a module. Also note the last line: export = SubViewModel.

ViewModels/SubViewModel.ts

class SubViewModel {
    Member1: number = 0;
}
export = SubViewModel;

ViewModels/MainViewModel.ts

import SubViewModel = require("ViewModels/SubViewModel");
class MainViewModel {
    Sub = new SubViewModel();
}
export = MainViewModel;

XAML Consumption

A developer consumes an object from a library different from one contained within the application project.
The syntax for declaring a namespace in XAML for a library is xmlns:<prefix>="lib:<LibraryName>". When declaring namespace for application objects, a developer declares a prefix per folder: xmlns:<prefix>="<containing folder>". The example illustrates both.

default.fap

<Application
    xmlns="http://schemas.wsick.com/fayde"
    xmlns:x="http://schemas.wsick.com/fayde/x"
    xmlns:controls="lib://fayde.controls"
    xmlns:vms="ViewModels"
    ThemeName="Default">
    <Grid>
        <Grid.DataContext>
            <vms:MainViewModel />
        </Grid.DataContext>
        <controls:TabControl>
            ...
        </controls:TabControl>
    </Grid>
</Application>