AppStarter Documentation

Easily create native iOS apps using XML CSS and JavaScript.

Getting Started

Welcome to the AppStarter getting started guide.
AppStarter lets you develop truly native apps for iOS using JavaScript CSS and XML.

How it works?

JavaScript
CSS
XML
JSON
AppStarter Compiler
iOS Application

The Editor

Click on any of the example application in your dashboard, and open the Main file to get to the "editor" screen. On your right you can see a preview of the app screen, the preview will update every time you save the code. On the left you have 3 tabs:

  • JavaScript - Application logic
  • CSS - Components appearance
  • XML - Declaration of components

You can customize the font size and the editor theme by going into the accounts settings page using the top right navigation.

Components

Here is a list of the currently supported components.


UIScreen



 <UIScreen id="screen" style="LightContent"></UIScreen>

 #screen{
    background:#eeeeee;
 } 

 $("#screen").onload(viewDidLoad); 
Property Default Description Accepts
height DEVICE HEIGHT SIZE The current device height Integer
width DEVICE WIDTH SIZE The current device width Integer
style Default Set the status bar tint color, you can use Default or LightContent HEX color
background #ffffff The current file screen background color HEX color
Preview
Default
Light
Events & Functions
Name Description Accepts Type
onload Runs when the view is loaded EVENT

UITextField



 <UITextField id="username" placeholder="...">Hello!</UITextField>

 #username{ top:100px;left:center; } 

 $("#username").text; // Hello! 
Property Default Description Accepts
x 0 Object X position, can also be defined using left or right Double
y 0 Object Y position, can also be defined using top or bottom Double
width 200 Object width in pixel or percentage or percentage Double
height 30 Object height in pixel or percentage Double
alpha 1 Object opacity, can also be defined using opacity Double
hidden False Object visibility Boolean
cornerRadius 0 Object corner radius Double
fontSize 17 input text font size in pixels Integer
text Input text String
placeholder Input placeholder text String
autocapitalizationType None Set input text capitalization preference.
  • None
  • Words
  • AllCharacters
clearButtonMode Never Show input clear button
  • Never
  • WhileEditing
  • UnlessEditing
autocorrectionType No Use input auto correction
  • Yes
  • No
returnKeyType Default Input return key type
  • Default
  • Go
  • Done
  • EmergencyCall
  • Google
  • Join
  • Next
textAlignment Left Input text alignment
  • Center
  • Right
  • Left
borderStyle RoundedRect Input border style
  • Line
  • Bezel
  • None
  • RoundedRect
keyboardType Default Input keyboard type
  • Default
  • ASCIICapable
  • NumbersAndPunctuation
  • NumberPad
  • PhonePad
  • NamePhonePad
  • EmailAddress
  • DecimalPad
  • Twitter
  • WebSearch
keyboardAppearance Default Input keyboard style
  • Light
  • Dark
  • Default
secureTextEntry False Password input Boolean
background #ffffff The input background color HEX color
color #000000 The text color of the input HEX color
Events & Functions
Name Description Accepts Type
change Runs when the input text changes String of the input text EVENT
blur Runs when the input lost focus EVENT
becomeFirstResponder Focus on the input FUNCTION
resignFirstResponder Resign focus on the current input FUNCTION

UISegmentedControl



 <UISegmentedControl id="currencies" items="USD,EUR,GBP" ></UISegmentedControl>

 #currencies{ top:100px;left:100px; } 

 $("#currencies").change(currencyDidChanged);
Property Default Description Accepts
x 0 Object X position, can also be defined using left or right Double
y 0 Object Y position, can also be defined using top or bottom Double
width 200 Object width in pixel or percentage or percentage Double
height 30 Object height in pixel or percentage Double
alpha 1 Object opacity, can also be defined using opacity Double
hidden False Object visibility Boolean
cornerRadius 5 Object corner radius Double
selectedSegmentIndex 0 Highlight the selected item can also be defined using selected Integer
fontSize 17 input text font size in pixels Integer
background background color HEX color
color #207ef7 text color HEX color
items comma separated strings String
Events & Functions
Name Description Accepts Type
change Runs when item selection changes function EVENT
getItems() returns an array of all the items FUNCTION

UIWebView



 <UIWebView id="webview" src="https://google.com" ></UIWebView>

 #UIWebView{ top:0px;left:0px;width:100%;height:100%; } 

 $("#webview").didFinishLoad(webPageLoaded);
Property Default Description Accepts
x 0 Object X position, can also be defined using left or right Double
y 0 Object Y position, can also be defined using top or bottom Double
width 200 Object width in pixel or percentage or percentage Double
height 30 Object height in pixel or percentage Double
alpha 1 Object opacity, can also be defined using opacity Double
hidden False Object visibility Boolean
url Webpage url can also be defined using src String
Events & Functions
Name Description Accepts Type
didFinishLoad Runs when webpage has finish loading EVENT
didStartLoad Runs when webpage is started loading EVENT
navigate navigate to a webpage String $url FUNCTION
eval Run javascript on the current webpage String $code FUNCTION
loadHTMLString load html to the current webpage String $html FUNCTION

UISwitch



 <UISwitch id="rememberme" on="true"></UISwitch>

 #rememberme{ top:100px;left:100px; } 

 $("#rememberme").change(switchDidChanged);
Property Default Description Accepts
x 0 Object X position, can also be defined using left or right Double
y 0 Object Y position, can also be defined using top or bottom Double
width 200 Object width in pixel or percentage or percentage Double
height 30 Object height in pixel or percentage Double
alpha 1 Object opacity, can also be defined using opacity Double
hidden False Object visibility Boolean
on False The current switch state Boolean
Events & Functions
Name Description Accepts Type
change Runs when switch state changes EVENT

UINavigationBar



 <UINavigationBar id="nav" left-button-icon="Compose" right-button-icon="Trash"></UINavigationBar>

 #nav{ background:#000000;color:#ffffff; } 

 $("#nav").rightButtonClicked(trashClicked); 
 $("#nav").leftButtonClicked(composeClicked); 
Property Default Description Accepts
title Title text String
backgroundColor #f7f7f7 background color in hex HEX Color
rightButtonText right button text String
leftButtonText left button text String
rightButtonIcon none right side button icon
  • Add
  • Bookmarks
  • Camera
  • Cancel
  • Compose
  • Done
  • Edit
  • FastForward
  • FixedSpace
  • Organize
  • Pause
  • Play
  • Redo
  • Refresh
  • Reply
  • Rewind
  • Save
  • Search
  • Stop
  • Trash
  • Undo
leftButtonIcon none left side button icon
  • Add
  • Bookmarks
  • Camera
  • Cancel
  • Compose
  • Done
  • Edit
  • FastForward
  • FixedSpace
  • Organize
  • Pause
  • Play
  • Redo
  • Refresh
  • Reply
  • Rewind
  • Save
  • Search
  • Stop
  • Trash
  • Undo
Icons Preivew

Button

Name

image: ../Art/UIBarButtonAction_2x.png

Action

image: ../Art/UIBarButtonCamera_2x.png

Camera

image: ../Art/UIBarButtonCompose_2x.png

Compose

image: ../Art/UIBarButtonBookmarks_2x.png

Bookmarks

image: ../Art/UIBarButtonSearch_2x.png

Search

image: ../Art/UIBarButtonAdd_2x.png

Add

image: ../Art/UIBarButtonTrash_2x.png

Trash

image: ../Art/UIBarButtonOrganize_2x.png

Organize

image: ../Art/UIBarButtonReply_2x.png

Reply

image: ../Art/UIBarButtonRefresh_2x.png

Refresh

image: ../Art/UIBarButtonPlay_2x.png

Play

image: ../Art/UIBarButtonFastForward_2x.png

Fast Forward

image: ../Art/UIBarButtonPause_2x.png

Pause

image: ../Art/UIBarButtonRewind_2x.png

Rewind

Events & Functions
Name Description Accepts Type
rightButtonClicked right button clicked FUNCTION
leftButtonClicked left button clicked FUNCTION

UITableView



 <UITableView id="list" ></UITableView>

 #list{
	top: 0px;
  	left: 0px;
  	width: 414px;
  	height: 671px;
  	row-height: 100px;
} 

var $list = new TableViewController($('#list'));

function TableViewController($tableView) {

    var that = this;

    this.data = [{title: 'testing 1'},{title: 'testing 2'}];

    this.cells = [];

    this.init = function() {
      	this.reloadData();
    };

    this.reloadData = function() {
      	this.cells = [];
      	var layout = this.layoutCell();

      	for(var i in this.data) {
            var cell = this.prepareCell(layout,this.data[i]);
            this.cells.push(cell.export());
      	}

      	$tableView.reloadData(this.cells);
    };

    this.didSelectRowAtIndex = function(index) {
      	var selected = that.data[index];
      	alert("You have selected " + selected.title);
    };

    this.layoutCell = function(){
    	return {
            title: new UILabel({noInit: true,x:25,y:25,width: 325,textAlignment: "Left",fontSize: 14}),
        };
    };

    this.prepareCell = function($layout,$data){
      var $cell = new UICell($layout,{accessoryType: "DisclosureIndicator"});
      $cell.title.text = $data.title;
      return $cell;
    };

    this.init();

    $tableView.click(this.didSelectRowAtIndex);
} 
Property Default Description Accepts
title Title text String
alpha 1 Object opacity, can also be defined using opacity Double
backgroundColor #f7f7f7 background color in hex HEX Color
separatorColor #cccccc separator line color HEX Color
separatorStyle SingleLine separator style
  • None
  • SingleLine
  • SingleLineEtched
rowHeight 40.0 list cell height Double
Events & Functions
Name Description Accepts Type
click detect when a cell was clicked $index EVENT
reloadData update the table list cells array $cells FUNCTION

MKMapView



 <MKMapView id="map" xcoordinate="40.7033127" ycoordinate="-73.979681"></MKMapView>

#map{
  width: 100%;
  height:100%;
  left:0px;
  top:0px;
}
Property Default Description Accepts
x 0 Object X position, can also be defined using left or right Double
y 0 Object Y position, can also be defined using top or bottom Double
width 200 Object width in pixel or percentage or percentage Double
height 200 Object height in pixel or percentage Double
alpha 1 Object opacity, can also be defined using opacity Double
hidden False Object visibility Boolean
zoomEnabled True allow zoom on map Boolean
scrollEnabled True allow scroll on map Boolean
xcoordinate 0 map x coordinate Double
ycoordinate 0 map y coordinate Double
mapType Standard map style type
  • Hybrid
  • Satellite
  • Standard

UIActivityIndicatorView



 <UIActivityIndicatorView id="loader"></UIActivityIndicatorView>

#loader{left: 150px;top:150px;}

 $("#loader").start(); 
Property Default Description Accepts
x 100 Object X position, can also be defined using left or right Double
y 100 Object Y position, can also be defined using top or bottom Double
alpha 1 Object opacity, can also be defined using opacity Double
hidden False Object visibility Boolean
hidesWhenStopped True hide the loader when it's stops animated Boolean
activityIndicatorViewStyle Gray activity indicator view Style
  • White
  • WhiteLarge
  • Gray
Events & Functions
Name Description Accepts Type
start start animating FUNCTION
stop stop animating FUNCTION

UIView



 <UIView id="view"></UIView>

 #view{
    top:100px;
    left:100px;
    width:100px;
    height:100px;
    background:#000000;
 } 
Property Default Description Accepts
x 0 Object X position, can also be defined using left or right Double
y 0 Object Y position, can also be defined using top or bottom Double
width 200 Object width in pixel or percentage or percentage Double
height 30 Object height in pixel or percentage Double
alpha 1 Object opacity, can also be defined using opacity Double
hidden False Object visibility Boolean
cornerRadius 0 Object corner radius Double
background #ffffff background color in hex color HEX COLOR

UIImageView



 <UIImageView
  id="img"
  src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg">
  </UIImageView>

 #img{ top:100px;left:100px; } 
Property Default Description Accepts
x 0 Object X position, can also be defined using left or right Double
y 0 Object Y position, can also be defined using top or bottom Double
width 200 Object width in pixel or percentage or percentage Double
height 30 Object height in pixel or percentage Double
alpha 1 Object opacity, can also be defined using opacity Double
hidden False Object visibility Boolean
cornerRadius 0 Object corner radius Double
background none background color in hex color HEX COLOR
url none image url to load, you can also use the src attribute. String
contentMode ScaleAspectFit image content mode
  • ScaleAspectFill
  • Right
  • TopRight
  • BottomRight
  • ScaleToFill
  • Center
  • Left
  • TopLeft
  • BottomLeft
  • ScaleAspectFit

UIButton



 <UIButton id="btn">Click Me Please</UIButton>

 #btn{ top:100px;left:100px; } 
Property Default Description Accepts
x 0 Object X position, can also be defined using left or right Double
y 0 Object Y position, can also be defined using top or bottom Double
width 200 Object width in pixel or percentage or percentage Double
height 30 Object height in pixel or percentage Double
alpha 1 Object opacity, can also be defined using opacity Double
hidden False Object visibility Boolean
cornerRadius 0 Object corner radius Double
background none background color in hex color HEX COLOR
color #207ef7 button text color HEX COLOR
fontSize 17 button text font size in pixels Integer
textAlignment Center button text alignment
  • Center
  • Right
  • Left
Events & Functions
Name Description Accepts Type
click button clicked EVENT

UILabel



 <UILabel id="label">Click Me Please</UILabel>

 #label{ top:100px;left:100px; } 
Property Default Description Accepts
x 0 Object X position, can also be defined using left or right Double
y 0 Object Y position, can also be defined using top or bottom Double
width 200 Object width in pixel or percentage or percentage Double
height 30 Object height in pixel or percentage Double
alpha 1 Object opacity, can also be defined using opacity Double
hidden False Object visibility Boolean
cornerRadius 0 Object corner radius Double
background none background color in hex color HEX COLOR
color #207ef7 button text color HEX COLOR
fontSize 17 button text font size in pixels Integer
textAlignment Center button text alignment
  • Center
  • Right
  • Left

Helpers

Globals

You can set and get a global var using the following functions

Set
setGlobal('my_global_key','my global value!');
Get
var global_value = getGlobal('my_global_key');

Vibrate

A simple function to make the device vibrate

vibrate();

Clipboard

Get and set the device clipboard data.

Get
var dataFromClipboard = getClipboard();
Set
setClipboard('new clipboard data!');

Timers

You can use the following function to create timers/delay.

Create a delay of 1 second.
setTimeout(function (){
// ...
},1000);
Create a timer that repeats every 1 second.
timer(function (){
// ...
},1000);

Import

Important! You can not use more than 3 imports in one file.
You can import external JavaScript code using following command:

// @import  "http://appstarter.io/application.js"

The external code will execute on the main application thread, in opposed to the other code running in the background.
it was design that way to allow developers to generate elements in real time, the external code will be executed before the app is loaded
in the order of the import commands.

If you want to use background functions like alert or confirm in an external file you will need to use the ready function

ready(function (){
    alert("Hello");
});

Alerts

Basic

You can create a basic alert using the JavaScript function alert

alert("Hello World!");
Confirm

You can create a confirm alert using the following code

confirm({
    title: "Confirm",
    message: "Are you sure you want to send a friend request?",
    buttons: ['Yes','No'],
    callback: function(buttonIndex) {
            ready(function (){
          switch(buttonIndex){
            case 0:
              // Yes
              break;
            default:
              // No
              break;
          }
        });
    }
});

Web Service

You can use get or post requests to communicate with an external web service.
The current function supports only JSON response anything else will be treated as an error.

$http.get('https://api.com/users',function (response){
// Response
},function(error){
// HTTP error
});
$http.post('https://api.com/users',{name: 'Danny',email: [email protected]'},function (response){
// Response
},function(error){
// HTTP error
});

pushView

Push a view to the current navigationController

function buttonClicked() {
    var args = {
        state: "Second", // The name of the file
        title: "Second Page!", // The navigationBar title text's
        params: {x:1,y:2} // Pass any data you might need at the second view
    };

    pushView(args);

}

setView

Set present view the current view, this function will open a new view on top of the current one.

function buttonClicked() {
    setView('Second'); // The name of the file
}

dismissView

dismiss the present view, this function can be used to dismiss an alert or a view that was opened using the setview function.

function buttonClicked() {
    dismissView(true); // send false to disable the animation
}

popViewControllerAnimated

This function can be used to pop the current view on your navigation controller after using the pushView function.

function buttonClicked() {
    popviewcontrolleranimated(true); // send false to disable the animation
}

popToRootViewControllerAnimated

This function can be used to pop the root view of your navigation controller after using the pushView function multiple times.

function buttonClicked() {
    popviewcontrolleranimated(true); // send false to disable the animation
}

APIS

UIImagePicker

Image picker API allows you to read images from the user library or camera.

Read Image from library
var picker = new UIImagePicker();


$("btn").click(function (){
	picker.pink(function (encodedImage){
    	alert("Image length " + encodedImage.length);
    });
});
Read Image from Camera
var picker = new UIImagePicker();

$("btn").click(function (){
	picker.pink(function (encodedImage){
    	alert("Image length " + encodedImage.length);
    },'Camera');
});
Load selected image to an UIImageView
Get image from library
var picker = new UIImagePicker();

$("btn").click(function (){
	picker.pinkToImage($("#img"),function (encodedImage){
    	//...
    });
});
Get image from Camera
var picker = new UIImagePicker();

$("btn").click(function (){
	picker.pinkToImage($("#img"),function (encodedImage){
    	//...
    },'Camera');
});

Data

The following functions allows you to write data to the device.
This data can not be shared between prototypes and can only be retrieved from the app it was written on.

Write Object
setObject('user',{name: 'Danny',session: '1d22ccf8bd5c7b3427e681077ed70f85'});
Read Object
var user = getObject('user');
alert(user.name);
                    
Delete Object
deleteObject('user');

UIDevice

hostName

Get the current device name.

var name = UIDevice.hostName(); // Ron's iPhone
batteryLevel

Get the current device battery level.

var level = UIDevice.batteryLevel(); // 0.9
onShake

Detect shake gesture

UIDevice.onShake = function(){

    alert("Shake!");

};

Network

Type

Get the current network type.

var type = Network.type(); // wifi,cellular,none
SSID

Get the current network SSID (Get be used only when the network type is wifi.)

var ssid = Network.ssid(); // Bob's Network

AddressBook

Pick

Open the address book picker view, and allow the user to pick a contact.

AddressBook.pick();
Change

Detect when a contact has been picked.

AddressBook.change(function (contactData){
//contactData.firstName,contactData.lastName,contactData.phone,contactData.email
});

URL

has

Can the requested url be open.

 if (URL.has('waze://?q=test'))
Open

Open a webiste or application.

 URL.open('https://google.co.il'); 
 URL.open('waze://?q=test'); 

Social

SMS

Open SMS sharing view.

Social.sms(['1800500600','1900300200'],'Share this text');

Share text

Facebook

Open Facebook sharing alert

var fbSupported = Social.facebook(true);
Twitter

Open Twitter sharing alert

var trSupported = Social.twitter('Share this text.',true);

Touch ID

Authenticate

Biometric authentication

TouchID.authenticate("Message to the user",function(valid,info){
    if (valid){
       // OK!
       return;
    }
    alert(info); // Invalid
});

Compass

Change

Detect when device orientation changes.

Compass.change(function (orientation){
    $("label").text = orientation; // 1.888569
});