NativeScript - Check Box (Android)

[Hugo]

Hi, is possible create checkbox in nativescript for gridlayout?

I try this but don't work:
        var savePassword = view.getViewById(page, "savePasswordGrid"); //gridlayout's view
        var cb = new android.widget.CheckBox(app.android.context); //create checkbox
        cb.setText("Save Password"); 

        var firstColumn = new layout.ItemSpec(80, layout.GridUnitType.pixel);
        var firstRow = new layout.ItemSpec(1, layout.GridUnitType.auto);
        savePassword.addColumn(firstColumn);
        savePassword.addRow(firstRow);

        savePassword.addChild(cb); // add child to gridlayout

Any solution?

[Vlad]

Hi Hugo,

You cannot add platform specific component to our cross-platform visual tree. To achieve your goal you need to create cross-platform wrapper similar to our components. 

Regards,
Vlad
Telerik

 

 

[Mourad]

Hello Vlad,

Can you please explain how ? As seen in the Grocery example project, checkboxes are images that toggle from one to another on tap (checked / unchecked). Is is the only way to draw checkboxes in our UIs using NativeScript ?

[Vlad]

Hi Mourad,

Since there is no CheckBox in iOS at all the easiest way to create something similar and cross-platform is using images. 

Regards,
Vlad
Telerik

[Paulson]

Hi, i have some question about checkbox,dropdown and action bar popup.

1.How can make a checkbox for android and ios? (include multiple checkbox)

2.Dropdown for ios and android?

3. action bar pop working on android but it is not working in ios device.

4. css Border radius is not working in ios...  I can add border radius upto 50 i can't add more than 50 WHY?

 

[Nick Iliev]

Hi Paulson,

Here are some suggestions and solutions for your questions:

1.) nativeScript does not prpovide CheckBox module so you have two options:
 - use the switch module from NativeScript - its logic is very similar to the checkbox functionality and
is easier to use in moble enviroment. Direct link to the documentation article: https://docs.nativescript.org/cookbook/ui/switch

 - use the native APIs to create a native CheckBox component. For example here is a blog article
about using the checkbox from Android https://bradmartin.net/2016/01/05/use-the-android-checkbox-with-nativescript/ (this specific example will work for Android.. you should do antoher iOS implementation in order to have loggic for both platforms)

- use images that mimics the checkbox behavior and toggle them for checked/unchecked 
For example check our sample-Groceries app from the Getting Started tutorial.

2.)  Dropdowns are again more Web then Mobile elements meaning their are not so user friendly when used within mobile enviroment.Better solutions are spinners or las called in NativeScript pickers.
You have specific pickers like date-picker, time-picker and also a one that you can customize called list-picker
Direct link to the list-picker documentation article ;  https://docs.nativescript.org/cookbook/ui/list-picker

However if pickers are not a good solution you can still create a drop-down logic.
One way to achieve it is to use this plugin for creating NativeScript drowdowns: https://www.npmjs.com/package/nativescript-drop-down

3.) To control your Actionbar visibility you can use the property actionBarHidden 
More about showing/hidin action bar and its elements you can find here: https://docs.nativescript.org/ui/action-bar#showinghiding-the-actionbar

4.) We wre unable to reproduce this issue - We will need some actual code in order to be able to recreate your issue and help you out with your specific scenario(on what element you are applying border-radius, what are the dimensions of this elements, is there a dimension restriction on the parent)
For example here is a working code for border-radius:150 in iOS:

<GridLayout width="300" height="300" backgroundColor="green" style="border-width:2; border-radius:150;">
</GridLayout>

Regards,
Nikolay Iliev
Telerik

[Paulson]

http://nsimage.brosteins.com/

what happend  this site it is showing Server Error in '/' Application. How i can convert images for ios and anroid?

[Nikolay Tsonev]

Hello,
Thank you for contacting us.

There are several option to convert  images for ios and android.
The first option is to use some of the image manipulation programs like GIMP, which is free open source program, or to use Photoshop to create the images for ios or android. You could review below attached tutorials, where has been shown how to create those images:
https://www.youtube.com/watch?v=COcp7t4dvgE&feature=youtu.be

https://www.gimp.org/tutorials/Creating_Icons/

http://graphicdesign.stackexchange.com/questions/15051/creating-graphics-for-android-ios-mobile-devices


Another option is to use this sites icon_slayer or http://ticons.fokkezb.nl/#result, which will auto  generate  icon for all ios and Android devices.

In regard to that I have try to open this http://nsimage.brosteins.com/ and it looks that the site works normally. You could check one more this site.


I hope this information would be useful. I will be glad to assist you further.
Regards,
nikolay.tsonev
Telerik

[Paulson]

{
  "studentName": "John",
  "fatherName": "Robert Galbraith",
  "motherName": "Diana",
  "Detail": {
    "schoolname": "Little Brown",
    "dateOfBirth": 2013,
    "phoneNumber": 9781408704004,
    "Language": "English",
    "adddress": 494
  },
  "SchoolDetails": [
    {
      "lastSchoolName": "Ps EM School",
      "details": "something about school"
    },
    {
      "type": "Kidle Edition",
      "price": 7.03
    }
  ]
}

 

 

I have local json like this i need this data in xml like this:

<StackLayout >        
  <Label text="Student Name" />
  <Label text="Father Name" />
  <Label text="Mother Name" />
  <Label text="School Name" />
  <Label text="Date of Birth" />
  <Label text="Phone Number" />
  <Label text="Language" />
  <Label text="Address" />
</StackLayout>

 

 

how will do?

[Nikolay Tsonev]

Hi Paulson,

For your case you could use Data Binding feature of NativeScript, which would allow you to connect application user interface  to a data object. To do that you should use Observable module, which will help you to bind all properties from the xml file. You could read more about Data Binding here and about  Observable Module here. You could also review the attached sample code below:

main-page.xml

 

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <StackLayout >
      <Label text="{{studentName}}" />
      <Label text="{{fatherName}}" />
      <Label text="{{motherName}}" />
      <Label text="{{detail.schoolName}}" />
      <Label text="{{detail.dateOfBirth}}" />
      <Label text="{{detail.phoneNumber}}" />
      <Label text="{{detail.language}}" />
      <Label text="{{detail.address}}" />
      <ListView items="{{ schoolDetails }}"  loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap">
          <ListView.itemTemplate>
              <Label text="{{lastSchoolName}}" textWrap="true" />
          </ListView.itemTemplate>
      </ListView>
</StackLayout>
</Page>

main-page.js

var observable_1 = require("data/observable"); // Event handler for Page "navigatingTo" event attached in main-page.xml function navigatingTo(args) {
    // Get the event sender
    var page = args.object;
    var observable = new observable_1.Observable({
        "studentName": "John",
        "fatherName": "Robert Galbraith",
        "motherName": "Diana",
        "detail": {
            "schoolName": "Little Brown",
            "dateOfBirth": 2013,
            "phoneNumber": 9781408704004,
            "language": "English",
            "address": 494
        },
        "schoolDetails": [
            {
                "lastSchoolName": "Ps EM School",
                "details": "something about school",
                "type": "Kidle Edition",
                "price": 7.03
            },
            {
                "lastSchoolName": "Ps EM School2",
                "details": "something about school2",
                "type": "Kidle Edition2",
                "price": 7.03
            }
        ]
    });
    page.bindingContext = observable;
}
exports.navigatingTo = navigatingTo;

Let me know whether this helps or if I can assist you further.


Regards,
nikolay.tsonev 
Telerik

[Paulson]

var jsonFile = documents.getFile('shared/studentDetails.json');

i have a separate json file like this in this model data calling i need. which u sent that directly callig data from js not like that,

 

my json structure is like this,

{
  "studentName": "John",
  "fatherName": "Robert Galbraith",
  "motherName": "Diana",
  "Detail": {
    "schoolname": "Little Brown",
    "dateOfBirth": 2013,
    "phoneNumber": 9781408704004,
    "Language": "English",
    "adddress": 494
  },
  "SchoolDetails": [
    {
      "lastSchoolName": "Ps EM School",
      "details": "something about school"
    },
    {
      "type": "Kidle Edition",
      "price": 7.03
    }
  ]
}

i need this data to this xml

<StackLayout >        
  <Label text="Student Name" />
  <Label text="Father Name" />
  <Label text="Mother Name" />
  <Label text="School Name" />
  <Label text="Date of Birth" />
  <Label text="Phone Number" />
  <Label text="Language" />
  <Label text="Address" />
</StackLayout>

[Nikolay Tsonev]

Hi Paulson,


I reviewed your sample code and found that for your project you could use FileSystem module to read the JSON file and to parse its data. In addition you should use again Observable module to bind all properties in your XML file and to load the content you need. In regard to that you could review the link below with my sample project, which could help you to understand, how FileSystem and Observable  modules work.

Sample project

Let me know whether this helps.

Regards,
nikolay.tsonev
Telerik

[Paulson]

thanks..

 

{
  "studentName": "John Darwin",
  "imge": "~/images/sizes/boy-96.png",
  "class": "Stars of Wonder Years",
  "Detail": {
    "address": "Little Brown",
    "phoneNumber": 9567622119
  },
  "reportDetails": [
    {
      "parentComent": "Ps EM School",
      "details": "something school"
    },
    {
      "parentComent": "Ps School",
      "details": "something about school"
    }
  ]
}

 

in this json i need to show reportDetails repeat more than two will there in different content this is an arrey how to show re

 

<StackLayout >
<Label text="{{info.studentName}}" />
<Label text="{{info.fatherName}}" />
<Label text="{{info.motherName}}" />
<Label text="{{info.Detail.schoolname}}" />
<Label text="{{info.Detail.dateOfBirth}}" />
<Label text="{{info.Detail.phoneNumber}}" />
<Label text="{{info.Detail.Language}}" />
<Label text="{{info.Detail.adddress}}" />
</StackLayout> up to here every thing fine after 

reportDetails this i need to show

<ListView  items="{{ reportDetails }}">
                      <ListView.itemTemplate>
                        <GridLayout cssClass="field-group" columns="auto, auto, *" rows="auto, auto, auto">
                         
                            <StackLayout col="1" colSpan="2" orientation="vertical">
                              <Label class="textName" text="{{ StudentName }}" horizontalAlignment="stretch" />
                              <Label class="className" text="{{class}}" horizontalAlignment="stretch" />
                             
                            </StackLayout>
                        </GridLayout> 
                      </ListView.itemTemplate>
                  </ListView>

i need to inject arry and object in same page arrey will come repeatedly How will do? 

[Nikolay Tsonev]

Hi Paulson,

Using ListView in your project will allow you to display array of jsons with different content . In regard to your issue I review your code ones again I found that the problem is due to incorrect name of items property of  ListView. To address the problem modify following section of your code.
 

<ListView  items="{{ info.reportDetails }}">
        <ListView.itemTemplate>
         <GridLayout cssClass="field-group" columns="auto, auto, *" rows="auto, auto, auto">
             <StackLayout col="1" colSpan="2" orientation="vertical">
                 <Label class="textName" text="{{ parentComent }}" horizontalAlignment="stretch" />
                 <Label class="className" text="{{details}}" horizontalAlignment="stretch" />
             </StackLayout>
           </GridLayout>
        </ListView.itemTemplate>
     </ListView>

Further you could review my sample project, where I made some changes to show you how to bind ListView items property.

Sample Project

I hope this information helps.


Regards,
nikolay.tsonev
Telerik

[Paulson]

can i write  Media Queries because of my app css is not looking good when my phone rotate model. how can i fix this problem

[Nikolay Tsonev]

Hi Paulson,

@media rule has  still not been supported in NativeScript, I found that such an issue  has been opened for  supporting media Queries. You could track the development of this feature here. However there are another options to set different style on different screen orientation.

The first one is to use this plugin, which will allow you to handle the screen rotation.

Another option is to  create specific XML file for different screen sizes and orientations. You could review this article - ScreenSizeQualifier, where has been shown, how to use second option. You could also review my sample app here.


I hope this helps.



Regards,
nikolay.tsonev
Telerik

[Paulson]

Thanks for your supporting

now i have another doubt concerning data filltering from json to ui

i have a local json like this.... iam using for a calender 

{
  "January": [
    {
      "resonForHoliday": "My Child was very Happy today",
      "date": "19"
    },
    {
      "resonForHoliday": "My Child was very Happy today",
      "date": "19"
    },
    {
      "resonForHoliday": "My Child was very Happy today",
      "date": "19"
    }
  ]

  "February": [
    {
      "resonForHoliday": "My Child was very Happy today",
      "date": "19"
    },
    {
      "resonForHoliday": "My Child was very Happy today",
      "date": "19"
    },
    {
      "resonForHoliday": "My Child was very Happy today",
      "date": "19"
    }
  ]
}

i need this data into a xml, in my ui i have feild like this 

<dd:DropDown items="{{ items }}" selectedIndex="{{ selectedIndex }}" row="0" colSpan="2" />

see here when i select a month from this dropdown i need to collect all data in particular month from my local separete json  and should be shown to my ui.. how will i do this?

second one is i need to make a search box when i write a month name there  details should be shown in my ui also how will do this?

if i write alphabet A in search box alphabet order should be shown... 

 

[Nick Iliev]

Hello Paulson,

What you need to do is either normalize your json data (right now you have a json which contains Objects with array of objects) or to parse the json data in a way that is suiatable for your business logic. For example if you want to use list-view to represent all the entries for specific month (let's say selected index is returning 1 which coresponds to February) then you can use similar to the following logic:

In your page.js

var months = {
  "January": [
    {
      "resonForHoliday": "My Child was very Happy today",
      "date": "14"
    },
    {
      "resonForHoliday": "John was very Happy today",
      "date": "17"
    },
    {
      "resonForHoliday": "Ann was very Happy today",
      "date": "20"
    }
  ],
  "February": [
    {
      "resonForHoliday": "Jerry was very Happy today",
      "date": "24"
    },
    {
      "resonForHoliday": "Frank was very Happy today",
      "date": "27"
    },
    {
      "resonForHoliday": "Maria was very Happy today",
      "date": "31"
    }
  ]
}

// this will parse your json to return an array of months (check json to javascript array0
var arr = Object.keys(months).map(function(k) { return months[k] });

var observableModule = require("data/observable");
var observableArrayModule = require("data/observable-array");

var viewModel = new observableModule.Observable();

function onNavigatingTo(args) {
    var page = args.object;

    // for example you already have your selectedIndex returned from the binding context
    var selectedIndex = 1;

    // use the selectedIndex value to return February as an Object (or any other month)
    var selectedMonth = arr[selectedIndex]; // selected month is an Object

    // again parse your json to return an array of events (check json to javascript array)
    // convert February to array of events (this is needed because your events do not have key)
    // when using array you can use its index to get item at this specific index
    // or as in this example you can use a list-view to bind this array and show all of its elements
    // if you simply want to show specific element again use selectedMonthArray[wantedIndex] to return the specific entry
    var selectedMonthArray = Object.keys(selectedMonth).map(function(k) { return selectedMonth[k] });

    // set the binding for the events in February
    viewModel.set("listItems", selectedMonthArray);

    // finnaly set the page binding context
    page.bindingContext = viewModel;
}
exports.onNavigatingTo = onNavigatingTo;

in your page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
  <StackLayout>
    <Label text="Ticket 917528" class="title"/>
    <ListView items="{{ listItems }}"  loaded="onLoaded" itemTap="onItemTap">
        <ListView.itemTemplate>
            <StackLayout>
                <Label text="{{ date }}" textWrap="true" />
                <Label text="{{ resonForHoliday }}" textWrap="true" />
            </StackLayout>
        </ListView.itemTemplate>
    </ListView>
  </StackLayout>
</Page>

As for your second question you should use the following logic:

- Create your ObservableArray of months (each month can be Object with different key-value pairs and one of them for example will be the month name - just like in your JSON file)
- Bind  to the search-bar with submitEvent like this (get your serachBar with getViewById)

var searchedMonth = "";

searchBar.on(searchBarModule.SearchBar.submitEvent, function (args) {

    // this way you will receive the search-bar value after it is submited by user
      searchedMonth = args.object.text; 


});

 

switch(searchedMonth.toLowerCase()) {

    case "january" :

         // do something for january

         // for example bind the January events to the list-view

         viewModel.set("listItems", selectedMonthArray);

         break;

}

Regards,
Nikolay Iliev
Telerik