nativescript/nativescript-marketplace-demo

NativeScript kitchen sink demo. All of NativeScript’s functionality in one app.

Archived ⚠️

This repository has been archived. It is outdated, and will no longer receive updates.

---

Old README

See the NativeScript framework in Action!

This is an app created by the NativeScript team to show the NativeScript framework in action. Run the app on your phone to explore the UX and performance that are delivered using cross platform JavaScript code.

The app is currently in Beta state, so there maybe some rough edges during execution, please report them to us if you hit one.

You will find here the most common mobile use cases implemented - Data visualization, Data entry, Charting and native API access. The app contains samples that shows different nuts and bolts from the core NativeScript framework like layouts, buttons, animations and more.

The application also serves as a demo for the paid UI components created by Telerik called "UI for NativeScript".

You can use the application to see NativeScript in action, but also as a learning purpose since the entire source code is available in this repo.

Install the app on your device directly from the store

Run the app from source code

As a prerequisite you should setup the NativeScript CLI with its dependencies.

1.Get the source code of the app on your machine:

git clone --depth 1 https://github.com/NativeScript/nativescript-marketplace-demo.git

2.Build and run using the NativeScript CLI commands like:

tns run android|ios

If you have any questions or feedback, please open an issue.

Want to see more samples like this one? Check our NativeScript samples list.

For more news about NativeScript, please follow our Twitter account.

Performance

Start for latest version published on GooglePlay and AppStore.

App Size

Android APK: ~27.8 MB

First start

Android (Nexus 5x): ~1.4s

nativescript-marketplace-demo's Issues

Code behind preview

Tested on TestFlight.

There is preview only for xml, no code behind.

QSF: next steps

• Android version polish
• More examples:
  • Chart
  • ListView
  • SideDrawer
  • Calendar
• Animations to be interrupted without glitches
• Transition between fullscreen mode and view example info and vise versa
• Animations in the example info polish: except translate, we can add rotate and blurring to imitate depth, and the object can be slightly animated while the user is on the screen
• Animations in the example info polish: different particles in different controls
• Landscape mode
• Different layouts depending on the form factor and orientation (portrait/landscape mode)
• Sidedrawer transition to not go under the AppBar, but either over it (slide on top) or pushing the main content (with the AppBar)
• Analytics
• Feedback implementation
• Home screen maximized-minimized AppBar transition

On home page the tab bar is not handling left/right swipes

Add a link for the souce code of the QSF in the side bar

to point to the github sample.

Add "performance" example to show the performance of {N}

Probably a ListView with load on demand and 1M records?

Polish the about page content

.

Chart Examples: Going through all the samples makes them appear blank

Tested on TestFlight.

Going through all samples breaks them - they start to appear blank or even cause the application to crash.

In order to reproduce it go through all the samples of Bar series (also reproducible with Line, Area and Pie).

Examples should have no navigation bar

This seems done for android, but the navigation bar appears in iOS.

User Profile Example: Cancel and Done buttons does not work

Tested on TestFlight.

Nothing happens when tap on Cancel/Done button.

Show the back button above the keyboard

Some examples show keyboard, and the keyboard can not be hidden until an entry is typed in. This is annoying. Consider moving the back button over the keyboard when the keyboard is present on the example pages.

Change AccentColor per control on control specific pages.

The color should be defined in the model per control group.
The accent color is present on:

• Foreground color for text
• ActionBar color on pages that have such
• Background stripes
• Background particles

Add "plugins" link in the sidebar to point to the marketplace

probably open the plugins list inside the app. We have to check how this can look like, or if we can consume the marketplace API.

In the CoreUI list of examples the ListView is not showing the default native UI when it is pulled down

.

Add the SideBar to all pages

now it is not present in examples

Polish 01

1. Chart examples: remove the NavBar and Trial version text from the chart @deyan.ginev
2. The SysTray: if it isn't the color of the nav bar it is better to be black with white foreground (moved down in the comment)
3. The bg image with the stripes (bg_main): there is something wrong with the rendering of the image, it is not as clear as the original
4. Change the corner radius of the images to a smaller value - let's try and see
5. Where is the navigation drawer?

Example info screen:​

1. The text should be left aligned to the Back to all button (the label itself not the arrow)
2. The proper font size, colors, The margin between buttons Documentation and View code We've reviewed these, should be fine now.
3. Background should be updated per control (images here: R:\xPlatCore\Design\Demo_iOS\assets)
4. The color of the nav bar should be the same as the design (if possible). Do you refer to the status bar? The NavigationBar is good to go.
5. All colors of the interactive elements should be updated accordingly

Control screen:

1. Show only new/show all: the height is not 44pt
2. Info screen: the same as the Example info screen, text font size and text color, proper margins

Home:​

1. Spacing between list items should be 1pt (now it seem to be 2)

Examples:​

1. Tabbar design in Layouts Most of the designs ar eapplied. I only couldn't figure out how to set the "non-selected" icon color.
2. Title size in the Navbar in all examples
3. All examples and controls descriptions

View Code​

1. There should be a small arrow next to the file picker. And the file picker should be on white background with foreground color the same as the control tint color. I've allready put white strips behind the file picker. It should be fine this versin.
2. The nav bar should be with the control tint color.

Polishing details:

1. The exit fullscreen mode button slight animation: may be scaling to grab the attention every time the user opens the example
2. Transition between fullscreen mode and view example info and vise versa (if possible) (moved down in the comment)
3. Animation of example info bg visual elements (if possible)

SideDrawer examples

Add content to the SideDrawer

Do not register some page navigations to the history

Steps to reproduce:

1. tap on side drawer,
2. tap on Home,
3. Repeat 1. and 2. "x" times.
   Result: In the history you will have "x" times opening of the home page which makes no sense.

and

1. Go to the page with animated background,
2. Open any example,
3. Repeat 1. ans 2. "y" times.
   Result: In the history you will have "y" times opening of some example, so if you want to go back from the page with animations to the home page you will have to tap "y" times on the Back to all button.

Send Feedback

The side drawer will have "Send Feedback" button for sending feedback. The native suites have a feedback control that have to be integrated there.

Telerik ImagePicker examples

Charting Examples

Welcome message

Display a welcome card/message on first start of the application.

Animation touches

Animations can be added on some places:

• When showing example - the example page can grow out from the image. When hiding - fade out to the image.
• ...

Performance

• Loading time should be lightning fast
• Scrolling experience on the home should be without micro interruptions

Analytics

Should we ask user to agree on startup?
Should it collect data in offline mode?

List/Wrap layout toggle switch

[iOS] The button to open/close side drawer multiplies on tap

Tested on TestFlight - version 1.4.0.9.

Steps to reproduce:

• open the side drawer,
• tap on Home.

Result: A new button appears in the navigation bar which opens/closes the side drawer. The old one acts as the back button.

SideBar to open on top of the tab bar.

.

When sidebar is open it doesnt't stop the back button navigation

Idea: Add search by tag?

@myninka what do you think?

Telerik DataForm examples

[Android] Chart series icons do not show on the screen with animations

Tested http://nsbuild01:8080/build/view/TestApps-Stable/job/tns-stable-build-testapps-QSF-Android/77/ on our Galaxy S4 devices.

Add getting started link in the side drawer

Marketplace collateral

Android Use TabBar on Main Page

Currently it is implemented with segmented control so it can be reused with iOS, but tab bar has better animations for Android.

Update Open source repo description

About NativeScript page

Core UI examples design

Loading time optimizations

Its 6 seconds on my S4 (android 5). On second run.

Right after that everything is displayed at once. Can we make a lazy loader and show something in the 1st second and then gradually load all the rest?

Android Collapsing Toolbars on Main Page

Implement collapsible header and action bar on the main page:
Collapsing Toolbars.

Slideout

We have to integrate the TelerikUI plugin for NativeScript.

NativeScript core UI examples

1. Conference Agenda example
2. User profile example
3. Layouts example

Add animations example with a slick scenario

@myninka we should think of a scenario here that will put the cherry on the cake.

iOS9 support

User profile example

[ ] Show password is not working all the time. Probably a problem with the touch area?

Chart: more examples

Optimize page transitions

to use more appealing native transitions @myninka

Telerik ListView examples

In the All Controls ListView template lets add description for the items

Now when only left with titles, I'm not sure if CoreUI is descriptive enough

Example groups - support examples that have multiple variants

For example the Chart control have multiple variants with different chart series, that can be displayed with separate thumbnails in a tab, and have multiple sub examples that can be displayed.