NativeScript - Check Box (Android)

18 posts, 0 answers
  1. Hugo
    Hugo avatar
    28 posts
    Member since:
    May 2011

    Posted 18 Mar 2015 Link to this post

    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?
  2. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 19 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Mourad
    Mourad avatar
    1 posts
    Member since:
    Nov 2015

    Posted 17 Nov 2015 in reply to Vlad Link to this post

    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 ?

  4. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 18 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Paulson
    Paulson avatar
    50 posts
    Member since:
    Apr 2016

    Posted 13 Jun Link to this post

    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?

     

  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    92 posts

    Posted 13 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Paulson
    Paulson avatar
    50 posts
    Member since:
    Apr 2016

    Posted 14 Jun Link to this post

    http://nsimage.brosteins.com/

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

  8. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    66 posts

    Posted 14 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Paulson
    Paulson avatar
    50 posts
    Member since:
    Apr 2016

    Posted 14 Jun Link to this post

    {
      "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?

  10. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    66 posts

    Posted 14 Jun Link to this post

    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 hereYou 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
  11. Paulson
    Paulson avatar
    50 posts
    Member since:
    Apr 2016

    Posted 15 Jun in reply to nikolay.tsonev Link to this post

    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>

  12. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    66 posts

    Posted 15 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  13. Paulson
    Paulson avatar
    50 posts
    Member since:
    Apr 2016

    Posted 15 Jun in reply to nikolay.tsonev Link to this post

    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? 

  14. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    66 posts

    Posted 15 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  15. Paulson
    Paulson avatar
    50 posts
    Member since:
    Apr 2016

    Posted 16 Jun Link to this post

    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
  16. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    66 posts

    Posted 16 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  17. Paulson
    Paulson avatar
    50 posts
    Member since:
    Apr 2016

    Posted 16 Jun Link to this post

    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... 

     

  18. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    92 posts

    Posted 16 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top