Multiple questions about creating NS app

Question

I am really new to NativeScript, and Brad Martin (https://stackoverflow.com/users/1893557/brad-martin) advised at Slack channel to ask from here. So please don't answer to ask from Slack.

I am creating a small radio app, where you can add songs to your favourites, and see history of earlier played songs. I am not using Angular, because they said at Slack to me that it is not needed.

Question 1: http://s31.postimg.org/rg36kmnnf/favo.png When pressing that F-button, how can I move that card with its content to Favourites tab?

Question 2: When there is two cards put vertically with StackLayout, and phone is turned to horizontal, the lower card shrinks to screen size. I have not found solution how to add scrolling.

Question 3: How do I get a list visible, add content & control it? All solutions have been just for Angular, and I need non-Angular solution for this. Just a simple sample, nothing fancy.

Question 4: How can I get the song information from local (for now for testing) JSON-file?

Really big thank you for helping me.

score 3 · Answer 1 · edited Sep 16 '17 at 15:43

Hello to SO and NativeScript. As an initial advice, you should consider not just asking a bunch of questions but also showing your approach and what you have achieved so far. Use this guide and if you want to receive answers that will really help you with your project, follow the guidelines. Now, let me try to answer to some of your questions.

1.) Not sure if you are asking about how to visually move the element or for example if you need to create the logic to add items to and array of favoriteItems. I assume the first case: You need to move the element from x and y coordinates to your top corner. Animations

page.js

var view = page.getViewById(""my-f-view"); 
view.animate({
    translate: { x: 100, y: -100},
    duration: 3000
});

You can probably triger this animation when the item is tapped.

2.) You can wrap it in ScrollView

<Page>
 <ScrollView>
   <StackLayout height="1600">
     // some content
   </StackLayout>
 </ScrollView>
</Page>

3.) To display a list of data you can use ListView or Repeater. Example: page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <ListView items="{{ myItems }}" itemTap="listViewItemTap">
      <ListView.itemTemplate>
        <Label text="{{ title || 'Downloading...' }}" textWrap="true" class="title" />
      </ListView.itemTemplate>
  </ListView>
</Page>

page.ts (note this is TypeScript project example)

import { EventData, Observable } from "data/observable";
import { ObservableArray } from "data/observable-array";
import { Page } from "ui/page";
import { ItemEventData } from "ui/list-view";

import frameModule = require("ui/frame");

let viewModel = new Observable();
let myItems = new ObservableArray(  {title: "Core Concepts"}, 
                                    {title: "User Interface"}, 
                                    {title: "Plugins"}, 
                                    {title: "Cookbook"}, 
                                    {title: "Tutorials"}  );

export function navigatingTo(args: EventData) {

    var page = <Page>args.object;
    viewModel.set("myItems", myItems);

    // ListView will be updated automatically when new item is pushed.
    myItems.push({title:"Publishing"});

    page.bindingContext = viewModel;
}

export function listViewItemTap(args:ItemEventData) {
    var itemIndex = args.index;

    // example how to navigate details-page & pass the tapped item context
    // frameModule.topmost().navigate({
    //     moduleName: "./details-page",
    //     context: myItems.getItem(itemIndex);
    // });
}

4.) Simply import your JSON file and parse it to the kind of data you are expected to pass in your context. Refer to this SO thread where similar discussion is present

Multiple questions about creating NS app

1 Answers1