About Ammy
Ammy is a UI language that compiles to XAML. Any XAML construct can be directly translated to Ammy syntax, but not vise versa, since Ammy has unique features specific to it. The goal is to create a concise, readable syntax and get rid of unnecessary clutter.
Basics
Window "MainWindow" { Width: 200 Height: 100 TextBlock { Text: "Hello, World!" } }
As you can see, Ammy syntax resembles JSON, but takes shortcuts to make it more human readable.
One important distinction is the fact that comma is optional if you define properties on different lines.
Width: 100 Height: 100, Background: Red
If your properties are defined on the same line though, comma is mandatory.
Width: 100, Height: 200, Background: Red // Error will be given, if comma is omitted
Other distinction is support for C-style comments. Both //
and /* */
work as intended.
Mixins
Ammy allows you to create reusable components called mixins. Once defined they can be used anyplace in the same scope.
// Definition mixin Header() for TextBlock { FontSize: 18 FontFamily: "Segoe UI" } // Usage TextBlock { #Header "Chapter 1" }
In this case we have defined a mixin called Header. Applied to any TextBlock it will add FontSize and FontFamily properties to that element. You can apply multiple mixins to any given element, unlike native XAML Styles that can’t be mixed. Mixins can also define zero or more parameters to use as attribute values.
// Definition mixin Square(side) for Border { Width: $side Height: $side } // Usage Border { #Square(16) }
Realtime update
If you are using Visual Studio as an IDE for Ammy development you can update UI on live application.
- Start debugging
- Change something in
ammy
file - Hit
Control + S
- UI is updated without application restart, while Viewmodel state and everything else stays the same
So, for example, you have an application that displays a twitter feed. You have defined a Tweet control as following:
UserControl "Tweet" { TextBlock { Text: bind tweet_text } }
You run this application and see that avatar is missing. So naturally, you
decide to fix it:
UserControl "Tweet" { Grid { Image { Source: bind tweet_avatar } TextBlock { Text: bind tweet_text, Margin: "40, 0, 0, 0" } } }
Now you just save the file and watch as all loaded tweets are updated to a new look.
There are some restrictions though. For example you can’t add new ammy
file and expect it be used without restarting your application. You also can’t change root node type. Although using UserControl
as a root object basically negates this problem.
IDE support
We have intellisense, realtime error checking, syntax coloring and a lot more!
Demonstration
Watch the development of a simple data entry application. Note that application was always running during the development, never needing to restart. Also note how window structure and presentation are separated. Structure being in MainWindow.ammy file, while all presentation resides in MainWindowMixins.ammy.
Skip to 24:30 if you want to see resulting code and application.
Try it!
Write install-package Ammy
in your Visual Studio package manager and hit Enter
.
After that install Visual Studio extension called Ammy
from extension gallery. Without this extension you won’t have syntax coloring or realtime update support. Extension also adds new item templates to Add -> New Item...
dialog.
Now go to syntax documentation and discover more great features!