This is a migrated thread and some comments may be shown as answers.

What markup is planned for UI Elements?

6 Answers 57 Views
NativeScript Insiders
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Marko
Top achievements
Rank 1
Marko asked on 27 Jun 2014, 09:11 AM
Coming from a HTML5/CSS3/JS + PhoneGap background, I'm curious about what format the markup will be. Will it be more like XAML or HTML5?

Or is it all going to be declarative/programatically like the sample cuteness app?

6 Answers, 1 is accepted

Sort by
0
Mike Graham
Top achievements
Rank 1
answered on 27 Jun 2014, 02:51 PM
I'd like to 2nd the question.  And add that i've been retraining myself from longtime XAML/C# guy to HTML5/CSS3/JS (really TypeScript) guy.
0
Josh
Top achievements
Rank 1
answered on 27 Jun 2014, 03:58 PM
same question here, building the ui programmatically may give you control and reusability but it's certainly cumbersome. While I'm sure the answer is certainly something like "we do plan to do this of course" I guess my question would be is this something you're working on now to be the primary way to generate UI, or is it something that will be addressed at a later time, and when it is addressed, what is the most likely way you're envisioning it being done?

many thanks!
0
Valio
Top achievements
Rank 1
answered on 27 Jun 2014, 04:23 PM
Hi Mike and Marko,

The short answer to this question is that we are currently evaluating the possible options. I really would like to get input from this group what would be the preferred/ideal option. We know how important this part of the framework is and we are approaching it very carefully. Our plan is to provide a declarative way for describe the UI, but it will not be based on HTML (for HTML we have KendoUI and PhoneGap).

We are currently creating internal PoC apps and experimenting by creating core UI elements in JavaScript to be cross-platform. Things like Buttons, Labels, Pages are already implemented for iOS and Android and very soon I'll share the first concept before we start implementing them inside the framework.

Our plan is to have full set of UI elements in JavaScript and in a declarative markup for v1 so that you do not need to write os-dependent UI code ( you will still be possible to write os-specific code if you like).
Here is a list of controls we are considering to release with v1 (some will come earlier, some may not be available. Note that the list below is not a commitment - based on the feedback in this group it is likely to change.):

Label
Button
Input box
Listbox/Listview
Combobox
Checkbox
Radiobutton
Scrollviewer
Application page
Tab control
Slider
Progress bar
Message box
Password box
Media element
Context menu

We do also plan to introduce layouts:

Stack layout (horizontal, vertical)
Absolute layout

We are also thinking about Grid (table?) layout and Responsive Layout on a page level (similar to the popular adaptive layouts for web pages.)

Any third party native libraries will also be supported out of the box for v1. If you have, for example, a favorite Charting library for iOS or Android you will be able to use it inside NativeScript.


For v1 we will also have a Binding support and an MVC or MVVM-like approach for defining the UI layer. We want to be sure that with NativeScript you will be able to create clean and rich UI. Internally we are big fans of the XAML approach, but this is not so important - any suggestions will be carefully discussed. We want to appeal to JavaScript web developers and we are not sure how easy for them will be to consume XAML-based approach to describing the UI. Thoughts and feedback on this?

An important note is that the current (horrible) code for defining the UI for the sample cutenss app is not the direction we are after. It is just the current state of the framework and developers will not need to write such code to implement the UI layer.

I hope this gives you some direction for the UI layer. Do you like it? Thoughts? It is an important part of the framework and any ideas are more than welcome. Feel free to ask for specifics. 

Best Regards,
Valio Stoychev
Technical Product Manager
Telerik NativeScript


0
Valio
Top achievements
Rank 1
answered on 27 Jun 2014, 04:44 PM
@Mike - since you are writing Kendo and love Angular I think this new blog post will be interesting for you - http://developer.telerik.com/featured/announcing-support-for-kendo-ui-mobile-with-angularjs/

For NativeScript - yes AngularJS support is on our radar as well as may other JS libraries. 

Mike - can you please elaborate a little bit more about your "JSON markup data structure" ideas for building the UI markup? Do you have in mind a particular framework that is using this approach?

-V
0
Mike Graham
Top achievements
Rank 1
answered on 27 Jun 2014, 04:44 PM
Nice writeup, Valio :)

Maybe a pure JSON "markup" data structure would be cool?

We are building the first round of our HTML product on Kendo Mobile and I'm guessing the 2nd round will be based around Angular 2.  When you start digging into approaches for MVC / MVVM i think it would be worth following what those guys are up to.
0
Ben Hayat
Top achievements
Rank 2
answered on 27 Jun 2014, 07:46 PM

Hi Valio;

The thread that I had opened a while back was specifically related to this question and thank you for covering it here. I would like to make a couple of comments:

Here is a list of controls we are considering to
release with v1 (some will come earlier, some may not be available. Note
that the list below is not a commitment - based on the feedback in this
group it is likely to change.):

Label
Button
Input box
Listbox/Listview
Combobox
Checkbox
Radiobutton
Scrollviewer
Application page
Tab control
Slider
Progress bar
Message box
Password box
Media element
Context menu


My first comment is that, the team first should focus on the essential controls for getting data and showing data and triggering actions. These are the core that should be addressed first:

List A:

Input box
Combobox
Password box
Label
Listbox/Listview
Button

Once these are out
List B:
Tab control
Menu
Checkbox
Radiobutton
Scrollviewer
Application page

List C:
Layout
Stack layout (horizontal, vertical)
Absolute layout

List D:
Slider
Progress bar
Message box
Media element
Context menu

This way, we have the essentials to go forward. But if you give us a chart or progress bar or slider first, they are useless at this stage. :-)

Secondly, I'm saying to build another "Expression Blend" like product, but eventually you will need a design tool for people design killer products. So many awesome Silverlight/WPF were designed in Expression Blend. So, that's a must have to design elegant apps.

Hope this helps!

 

Tags
NativeScript Insiders
Asked by
Marko
Top achievements
Rank 1
Answers by
Mike Graham
Top achievements
Rank 1
Josh
Top achievements
Rank 1
Valio
Top achievements
Rank 1
Ben Hayat
Top achievements
Rank 2
Share this question
or