Finestra di dialogo personalizzata in NativeScript

Question

Sto imparando NativeScript. Come parte di questo sforzo, sto tentando di creare una pagina che mostri una finestra di dialogo per l'utente. Quando l'utente fa clic su un pulsante, ho bisogno di mostrare loro una finestra di dialogo che consente loro di inserire due valori (nome e cognome).

Lo dialogs module in NativeScript offre diverse opzioni integrate. Tuttavia, da quello che posso dire, nessuna di queste opzioni ti consente di creare una finestra di dialogo che mostra due campi. Come posso creare una finestra di dialogo in NativeScript che mi consentirà di chiedere a un utente di inserire un nome e un cognome? Attualmente, la mia pagina simile a questa:

page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded"> 
    <GridLayout rows="auto, *"> 
     <Border borderWidth="1" borderColor="#000" width="28" height="28" cornerRadius="14" tap="addPersonButton_Tap"> 
     <Label text="add person" /> 
     </Border>  
    </GridLayout> 
</Page> 

page.js

var viewModel = new MyPageViewModel(); 
function pageLoaded(args) { 
    var page = args.object; 
    page.bindingContext = viewModel;   
} 
exports.pageLoaded = pageLoaded; 

function addPersonButton_Tap(args) { 
    console.log('new person'); 
    /* 
    * Dialog open code goes here. Yet, the following definitaly is not correct. 
    dialogs.prompt({ 
     title: "Add New Person", 
     message: "First Name", 
     okButtonText: "Save", 
     cancelButtonText: "Cancel", 
     inputType: dialogs.inputType.text 
    }). 
    then(function (r) { 
     if (r.result) { 
      console.log('User clicked "Save"!'); 
     } 
    }); 
    */ 
} 
exports.addPersonButton_Tap = addPersonButton_Tap; 

Answer 1

Supportiamo già le pagine modali. Qui puoi vedere una demo: https://github.com/NativeScript/NativeScript/blob/7c13db6bc241c48d5897d556f2973944b8b750d6/apps/app/ui-tests-app/modal-view/modal-view.ts.

Inoltre, si possono anche trovare le informazioni necessarie in documentazione:

• http://docs.nativescript.org/ui-dialogs#prompt
• http://docs.nativescript.org/api-reference/classes/_ui_page_.page.html#showmodal

Volevo solo parlare di un'altra cosa. Ho visto che stai usando il tag Border. Ora puoi usare invece lo stile CSS.

Answer 2

non ho mai visto prima, ma solo NativeScript lanciando attraverso la documentazione I non pensare che ti stai avvicinando a questo nel modo giusto. Nei documenti, "NativeScript ti consente di creare finestre di dialogo nella tua app in modo simile al browser Web. Puoi creare avvisi, conferme, prompt, accessi e finestre di dialogo che richiedono un'azione". e in un browser web non c'è un modo per fare ciò che stai chiedendo (richiama una finestra di dialogo con due piccoli campi di testo). In un browser Web si otterrebbe ciò creando un modulo usando html. Sembra l'esempio 2 qui: http://developer.telerik.com/featured/getting-started-nativescript/ è più simile a quello che stai cercando.

Answer 3

Chiunque atterra qui mentre cerca la finestra di dialogo personalizzata di visualizzazione. Si prega di fare riferimento a this

Qui è correttamente documentato come visualizzare una finestra di dialogo personalizzata in nativescript. In particolare, cerca la funzione showModal nella parte inferiore della pagina. In questa funzione l'utente può passare in moduleName (inizia dalla root dell'applicazione), context, closeCallBack e boolean per mostrare modal a schermo intero.