UI Framework
Appercode — mobile cross-platform managment system (mCMS)
Main Products UI Framework

UI Framework

Appercode characterized by many advantages:

  • XAML markup language
  • Native interface
  • MVVM design pattern
  • Up to 100% of shared code between platforms

XAML with styles and resources support is used for UI markup. Appercode elements are displayed using native controls of each of the mobile platforms, thus ensuring high performance and quality of the native interface.

Appercode contains more than 30 controls ported from Windows Phone starting from TextBlock and Button to Grid and WebBrowser. Apart from them the platform provides some additional cross-platform controls such as Fly-out menu and Tabs control. On top of that developers can create their own controls and enlarge the platform.

Appercode was created to reduce the entry level requirements for new developers familiar with Windows Phone. Therefore, by using it you get the tools, very similar to those in Windows Phone. To create cross-platform applications you do not have to learn iOS or Android.

All the following platforms are supported:

  • XAML
  • Data Bindings
  • Navigation mechanisms
  • Management elements similar to Windows Phone

 

The following steps explain how to create cross-platform applications on Appercode UI Framework. As shown in the diagram, the whole process can be divided into 3 stages:

 

Development stage

Nearly every mobile application can be separated into several layers:

  1. Data Layer – data storage and access to it, for example SQLite or XML Serialization;
  2. Business Logic – object model and its behaviour;
  3. Service Access Layer – provides access to external network services (REST, WCF, JSON, XML…);
  4. Application Layer - describes the logic of the application;
  5. User Interface (UI Layer) – includes applications’ interfaces.


The first three layer may have a common code technology Xamarin, and it is usually 50-60% of the entire code of the application.

The fourth layer, the Application Layer, depends on platform in Xamarin and carries platform-dependent code exploiting C#-wrappers around the native controls (screen navigation, camera, GPS, etc.)

The last, UI Layer, is very similar, but should be developed using native tools (Android XML and iOS Storyboards), rather than C#.

This not only reduces the proportion of possible common code, but also imposes limitations on the developer in the form of requiring knowledge of the native SDK. Appercode helps c # developers share common code cross-platform mobile applications up to 100%.

So, during the application development stage, the developer implements the first three C# - Layers for all platforms. Thanks to Appercode and the libraries like Xamarin.Mobile, filtering platform-dependants, the Application Layer can also be created common.

This is an example of the new screen navigation display on different platforms.

 

On Xamarin.Android:

var page2 = new Intent (this, typeof(Page2));
page2.PutExtra ("arg1", "Data from first screen");
StartActivity (page2);

On iOS:

var page2 = new Page2();
page2.Property = "Data from first screen";
this.NavigationController.PushViewController(page2, true);

Appercode (Android, iOS, Windows Phone, Windows 8):

this.NavigationService.Navigate(typeof(Page2), "Data from first screen");

Besides C# code, developer creates the view on XAML for all platforms as well.

Appercode (XAML):

<StackPanel>
    <TextBlock Foreground="Green">Lorem ipsum dolor sit amet, consectetur adipiscing elitTextBlock>     <Button Width="200" Content="Click me"/> StackPanel>

Here is the example of how it is done without Appercode:

Android (XML Layouts):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:textColor="@color/green"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit"/>
    <Button
        android:layout_height="wrap_content"
        android:layout_width="200dip"
        android:text="Click me!"/>
LinearLayout> 

Xamarin.iOS (Imperative UI C#):

UIView panel = new UIView();
UILabel label = new UILabel(new RectangleF(0,0, this.View.Frame.Width, float.MaxValue));
label.Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
label.TextColor = UIColor.Green;
label.Lines = 0;
label.SizeToFit();
 
UIButton button = new UIButton(UIButtonType.System);
button.SetTitle("Click me", UIControlState.Normal);
button.Frame = new RectangleF((this.View.Frame.Width - 200) / 2, l.Frame.Bottom, 200, 30);
 
panel.AddSubview(label);
panel.AddSubview(button);
panel.Frame = new RectangleF(0, 0, this.View.Frame.Width, b.Frame.Bottom);

Application compile

Before the compilation itself, XAML automatically translates into C# by means of Appercode plugin to Visual Studio.

XAML into C# Translation

Each Appercode screen consists of 3 files:

  • FirstPage.xaml – file with XAML markup. The layout of visual elements.The developer edits the file.
  • FirstPage.cs – file with behind-code in C#, similar to WPF or Silverlight.
  • FirstPage.Designer.cs – file with automatically generated markup code in C#. This exact file contains imperative statements from FirstPage.xaml.

Let's look at real example. Let's take the part of the layout of the screen in XAML:

<StackPanel>
    <TextBlock>User nameTextBlock>     <TextBox Text="info@appercode.com" />     <TextBlock>PasswordTextBlock>     <PasswordBox Password="secret" />     <Button Width="200">LoginButton> StackPanel>

This part will match following C# -code:

Appercode.UI.Controls.StackPanel stackPanel1 = new Appercode.UI.Controls.StackPanel();
Appercode.UI.Controls.TextBlock textBlock2 = new Appercode.UI.Controls.TextBlock();
Appercode.UI.Controls.TextBox textBox3 = new Appercode.UI.Controls.TextBox();
Appercode.UI.Controls.TextBlock textBlock4 = new Appercode.UI.Controls.TextBlock();
Appercode.UI.Controls.Button button5 = new Appercode.UI.Controls.Button();
Appercode.UI.Controls.UserControl userControl6 = new Appercode.UI.Controls.UserControl();
Appercode.UI.Controls.UserControl userControl7 = new Appercode.UI.Controls.UserControl();
 
textBlock2.Text = "User name";
textBox3.Text = "info@appercode.com";
textBlock4.Text = "Password";
button5.Width = 200D;
button5.Content = "Login";
stackPanel1.Children.Add(textBlock2);
stackPanel1.Children.Add(textBox3);
stackPanel1.Children.Add(textBlock4);
stackPanel1.Children.Add(button5);

As you can see, first elements are installed, then required properties are set up and visual tree is generated. Despite the fact that both of these codes do the same thing, the XAML code looks much cleaner and easier to understand.

Every time you save the XAML file extension Appercode for c #, Visual Studio generates the designer.cs file. To do this, the xaml files must have the Custom Tool property set to AppercodeTranslator, as shown in the picture:

Compilation

Then comes the compilation itself, which differs depending on the platform:

iOS

Xamarin extension for Visual Studio connects to a remote computer with OS X and starts compilation straight to the native code for Apple processors. AOT compiler is used as the use of JIT compiler and dynamic code generation is restricted on iOS.

Android

C#-code is compiled to IL-code for Android, virtual engine Mono is added to the compilation, which works in conjunction with Java (Dalvik) during application streaming.

Windows Phone and Windows 8

Compilation for Windows Phone and Windows 8 is run by native sources in IL code for Silverlight and WinRT.

Introduction

When compilation is complete, the developer gets his original (native) application build (.app, .apk, .xap or .exe depending on the platform). This application can be now spread on App Stores as applications created with native tools.

 

Резидент Фонда «Сколково»