Introdução à UI do NativeScript

O conteúdo a seguir vem de uma versão simplificada da documentação oficial, consulte
http://docs.nativescript.org/tutorial/chapter-2

---

Ver resultados em tempo real

tns livesync android --watch

Estrutura de diretórios

└── sample-Groceries
    ├── app
    │   └── ...
    ├── node_modules
    │   └── tns-core-modules
    ├── package.json
    └── platforms
        ├── android
        └── ios

Explique a seguinte estrutura de diretórios:

• app: esta pasta contém todos os recursos de desenvolvimento necessários para criar o aplicativo. Você passará a maior parte do tempo editando arquivos aqui.
• node_modules: esta pasta contém dependências do módulo npm do aplicativo. Todos os novos projetos NativeScript começam com uma única dependência em tns-core-modules.
• node_modules / tns-core-modules : esta pasta contém o módulo NativeScript do seu aplicativo, que é um módulo JavaScript fornecido pelo NativeScript, que você usará para criar seu aplicativo. Cada módulo contém código específico da plataforma necessário para implementar determinadas funções (câmera, chamada http, sistema de arquivos etc.) por meio de APIs independentes da plataforma (como camera.takePicture ()). Veremos alguns exemplos mais tarde.
• package.json: este arquivo contém os detalhes de configuração do aplicativo, como seu ID do aplicativo, a versão do NativeScript que você está usando e o módulo npm usado pelo seu aplicativo. Quando usamos o módulo npm, veremos mais de perto como usar esse arquivo.

• plataformas: esta pasta contém código específico da plataforma que o NativeScript precisa para criar aplicativos nativos para iOS e Android. Por exemplo, na pasta Android, você encontrará os arquivos executáveis ​​AndroidManifest.xml e .apk, como o seu projeto. Da mesma forma, a pasta ios contém o projeto Xcode do Groceries e o arquivo executável .ipa. Observe que os usuários em máquinas Windows e Linux não terão a pasta ios.

  Veja o diretório do aplicativo novamente:

└── sample-Groceries
    ├── app
    │   ├── App_Resources
    │   │   ├── Android
    │   │   └── iOS
    │   ├── shared
    │   │   └── ...
    │   ├── views
    │   │   └── login
    │   │       ├── login.js
    │   │       └── login.xml
    │   ├── app.css
    │   ├── app.js
    │   └── ...
    └── ...

• App_Resources : Esta pasta contém recursos específicos da plataforma, como ícones, telas de inicialização e arquivos de configuração. Ao executar a execução do tns, a CLI do NativeScript injeta esses recursos no local apropriado na pasta da plataforma.
• shared: Esta pasta é específica ao aplicativo Groceries e contém todos os arquivos que você precisa compartilhar na visualização em seu aplicativo. No aplicativo Groceries, você encontrará alguns objetos de modelo de exibição e um arquivo config.js para compartilhar variáveis ​​de configuração (como chaves de API).
• visualizações: esta pasta contém o código para criar as visualizações do aplicativo e há uma subpasta em cada visualização. Cada visualização consiste em um arquivo XML, um arquivo JavaScript e um arquivo CSS opcional. O aplicativo de compras contém três pastas para suas três visualizações.
• app.css : este arquivo contém o estilo global do aplicativo. Discutiremos o estilo do aplicativo mais tarde.

• app.js: esse arquivo define o módulo de inicialização do aplicativo e inicializa o aplicativo.

  Começamos com app.js:

var applicationModule = require("application");
applicationModule.start({ moduleName: "views/login/login" });

Essas duas linhas de código são a entrada para todo o programa.Utilize require para referenciar o módulo do aplicativo (equivalente a importação) e, em seguida, inicie a interface de logon.Este logon é um arquivo xml, que será descrito mais adiante.

Interface de construção

Adicione elementos ao login.xml:

<Page>
    <Label text="hello jimo" />
    <TextField hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none" />
    <TextField hint="Password" secure="true" />

    <Button text="Sign in" />
    <Button text="Sign up for Groceries" />
</Page>

Mas agora você só pode ver que o botão ocupa a página inteira.Vejamos o layout abaixo.

Layout

Layout absoluto : o layout absoluto permite que os elementos sejam posicionados usando coordenadas x e y explícitas. Esse recurso é útil quando você precisa colocar o elemento na posição exata (por exemplo, exibindo o widget indicador de atividade no canto superior esquerdo do aplicativo).

Layout da doca : O layout da doca é usado para colocar elementos da interface do usuário na borda externa do aplicativo. Por exemplo, um contêiner ancorado na parte inferior da tela é um bom local para anúncios.

Layout da grade : o layout da grade permite dividir a interface em uma série de linhas e colunas, muito semelhantes às das tags HTML <table>.

Layout da pilha : o layout da pilha permite empilhar os componentes da interface do usuário filho na vertical ou na horizontal.

Layout de disposição : o layout de disposição permite que os componentes da sub-interface do usuário fluam de uma linha ou coluna para a próxima ao preencher espaço.

Na página de login, usamos um simples statcklayout:

<Page>
    <StackLayout orientation="vertical">
        <Label text="hello jimo" />
        <TextField hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none" />
        <TextField hint="Password" secure="true" />

        <Button text="Sign in" />
        <Button text="Sign up for Groceries" />
    </StackLayout>
</Page>

Estilo CSS

Podemos criar estilos globais e estilos de página especiais, iguais às páginas da web.

O estilo global está em app.css, escrevemos um:

Page {
    background-color: white;
    font-size: 17;
}
TextField {
    margin: 10;
    padding: 10;
}
Image {
    margin-top: 20;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 80;
}
Button {
    margin: 10;
    padding: 10;
}

Adicione na cabeça do app.css para fazer referência a outros arquivos css

@import url('~/platform.css');

Em platform.android.css:

.link {
    background-color: transparent;
}

Nós adicionamos um atributo de classe ao botão:

<Button text="Sign up for Groceries" class="link" />

O efeito acima:

Imagens

Imagens online

<Image src="https://www.nativescript.org/images/default-source/landingpages/logo.png" />

Imagens locais, em app / images

<Image src="~/images/logo.png" />

Há fotos na plataforma, em app / App_Resources:

<Image src="res://logo" stretch="none" horizontalAlignment="center" />