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

Button Press event - transition to a view

1 Answer 192 Views
AppBuilder in-browser client
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Iram
Top achievements
Rank 2
Iram asked on 17 Apr 2015, 08:32 AM
Hello,

I am trying to create a mobile app using the Telerik AppBuilder and its going decent so far. I have a login screen where the user enters his/her credentials and then I allow the user to view further screen and information. I am quite new to this App Builder and I would like to navigate to different views, come back to them etc. When I try to open my login screen it gives me an error: invalid children of html tag detected.

Could you suggest as to how I can hook events on to button presses? I want the user to click on the login button and when successfully logged in, show a popover or a popup window specifying successfully logged in and then transition him/her to another view. Could you suggest me a way to fix these two issues please?

Cheers.

1 Answer, 1 is accepted

Sort by
0
Martin Yankov
Telerik team
answered on 21 Apr 2015, 10:40 AM
Hello Iram,

I have just noticed you have started a forum thread identical to the support ticket you submitted. I will just repeat my answer here:

Firstly, let me clarify that Telerik AppBuilder is only a IDE for mobile app development. In your case, I guess you want to develop a hybrid mobile app. To do this, you will need a Mobile JS framework like Angular JS or jQuery Mobile etc. Each mobile framework has its own rules and handles the event hooks and view navigation in different ways. Telerik also provides such a mobile framework. It's called Kendo UI Mobile. You can find the docs Kendo UI Mobile Introduction. There is a quick tutorial for beginners in the Introduction. However, what you really need is the Kendo UI Mobile MVVM Integration to see how you can create a model and bind it to a view. You can then bind functions from the view model to elements in the view. When you create a new AppBuilder project, you can choose to start from a template. I suggest you take a look at these templates.

I should warn you that MVVM binding can be confusing and if you are completely new, it can be difficult at first. That is why we recently released a new way of building or at least starting developing a mobile app - Telerik Screen Builder. It is currently in Beta testing stage, but you can try it out. The docs are located here. The idea behind this product is that you can start your project in it and create your views and navigation and connect it to data and later continue to develop it in AppBuilder where you can customize and polish it.

I see from the image you attached, that you wanted to use the AppBuilder designer to build your app. The visual designer is currently an experimental feature and currently, has a lot of problems. The error you are receiving means that the html file you try to edit does not have some of the mandatory html elements an html should have. An html file should always contain an html tag, a head tag and a body tag. I guess your file does not have these. Probably, it's not your fault since we are aware our own template projects are currently not compatible with the AppBuilder Visual Designer. However, the Designer itself is very similar to our ScreenBuilder solution, so I suggest you go and try it out.

Regarding your concrete question, you have to create login view and add a model to it. Have a function in the model that logs in the user, displays the popup and then navigate the user to some other view. The navigation itself can be done via the Kendo Application's navigate function. For the popups you have two choices - you can use a simple JS alert or use the native OS dialog popups. To use the latter, you have to enable the Cordova Notification plugin from your Project Properties -> Plugins -> set Notifications to ON. Once it is enabled you can use the plugin through it's API. It is described in detail in its Readme on GitHub here.

This is a lot of information and I hope it's not confusing. Do not hesitate to ask any questions that might arise.

Regards,
Martin Yankov
Telerik
 

Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

 
Tags
AppBuilder in-browser client
Asked by
Iram
Top achievements
Rank 2
Answers by
Martin Yankov
Telerik team
Share this question
or