Snippets for Uppsala JS

Snippets.txt

DEMO 1

 <StackLayout orientation="vertical">
  <Button text="one"/>
  <Button text="two"/>
  <Button text="three"/>
  <Button text="four"/>
  <Button text="five"/>
</StackLayout>


DEMO 2

<GridLayout rows="auto,auto" columns="auto,auto">
	<Label text="four" row="0" col="0"/>
	<Label text="one" row="0" col="1"/>
	<Label text="two" row="1" col="0"/>
	<Label text="three" row="1" col="1"/>
</GridLayout>


DEMO 3

label {
    margin: 5;
    background-color: red;
}


DEMO 4

<AbsoluteLayout>
  <Label cssClass="standout" top="20" left="30" width="100" height="100" text="Hi there!" />
</AbsoluteLayout>


DEMO 5

  <StackLayout>
    <Label text="Hi!"/>
  </StackLayout>


DEMO 6.1
function pageLoaded(args) {
  var page = args.object;
  page.bindingContext = {
		title: 'Nice title',
	  myItems: [
		  {
			  name: 'Emil'
		  },
		  {
			  name: 'Peter'
		  },
		  {
			  name: 'Anna'
		  }
	  ]
  };
}
exports.pageLoaded = pageLoaded;

DEMO 6.2
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
	<StackLayout>
	  <Label text="{{ title }}" />
	  <ListView items="{{ myItems }}">
		<ListView.itemTemplate>
		  <Label text="{{ name }}" />
		</ListView.itemTemplate>
	  </ListView>
	</StackLayout>
</Page>


DEMO 7
setTimeout(function() {
	bindingContext.myItems.push({
		name: 'Johanna'
	});
}, 1000)


DEMO 8
function loadReddit() {
    http.getJSON("https://www.reddit.com/.json")
    .then(function (r) {
        bindingContext.title = 'Reddit loaded';
    });
}


DEMO 9
r.data.children.map(function(item) {
	bindingContext.myItems.push(item.data)
});


DEMO 10
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
    <StackLayout>
        <Label text="This is the details view" />
    </StackLayout>
</Page>


DEMO 11
  <Page.actionBar>
    <ActionBar title="RedditReader">
    </ActionBar>
  </Page.actionBar>

DEMO 12.1
function pageLoaded(args) {
	var page = args.object;
	page.bindingContext = page.navigationContext;
}

exports.pageLoaded = pageLoaded;

DEMO 12.2
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
    <StackLayout>
        <Label text="{{ url }}" textWrap="true" />
    </StackLayout>
</Page>



DEMO 13:
<ActionBar.actionItems>
    <ActionItem text="pop" ios.position="right" android.position="popup"/>
</ActionBar.actionItems>


DEMO 14:
var socialShare = require("nativescript-social-share");

function pageLoaded(args) {
	var page = args.object;
	page.bindingContext = page.navigationContext;
}

function share() {
	socialShare.shareText("I love NativeScript!");
}

exports.pageLoaded = pageLoaded;
exports.share = share;


DEMO 15:
var gestures = require('ui/gestures');
var frameModule = require('ui/frame');
exports.swipe = function(args) {
	if (args.direction === gestures.SwipeDirection.right) {
		frameModule.topmost().goBack();
	}
};



DEMO 16:


    if (page.ios) {
        var navigationBar = frameModule.topmost().ios.controller.navigationBar;
        navigationBar.barTintColor = UIColor.colorWithRedGreenBlueAlpha(0.011, 0.278, 0.576, 1);
        navigationBar.titleTextAttributes = new NSDictionary([UIColor.whiteColor()], [NSForegroundColorAttributeName]);
        navigationBar.barStyle = 1;
        navigationBar.tintColor = UIColor.whiteColor();
    }