Tip:
Highlight text to annotate it
X
In this video, you’ll learn how to create an HTML JavaScript application using the DevExtreme
framework. Since DevExtreme integrates into Visual Studio I’ve already opened the IDE
so I’m ready to create a DevExtreme application. To create a new project, I’ll select the
DevExtreme Basic Application project template. The generated solution includes one DevExtreme
project and includes the required JavaScript libraries – jQuery, Knockout and PhoneJS//
predefined style sheets - for android, desktop, iOS, tizen, windows phone 8 and a generic
theme// and layouts, including predefined navigation templates.
In addition, two sample views are supplied with this project template. Here is an HTML
template for the “home” view. It is opened in a View Designer. This template, together
with the applied css classes, is a View in terms of the MVVM pattern. According to this
pattern, Views should be bound to the corresponding ViewModels. The ViewModel is basically your
custom JavaScript code, which is responsible for providing data from the Model to the View
taking into account different user interactions. The Model is represented by the data that
you obtain from virtually anywhere. For example, you can choose to connect to remote data sources
via AJAX requests, bind to JavaScript objects or even use HTML5 local storage.
Let’s look at the “about” view. I’ll change its file extension to DxView so we
can see this view in the View Designer as well. Because I’ve renamed it, I have to
change the link to this file in the application page. Here it is. As you can see, this page
contains references to all the resources included in the application as well as in the “home”
and “about” views. Now let’s open the about view. You can see this view is pretty
simple and does not require any JavaScript code behind.
Now, Let’s run the application. The application opens in the DevExtreme simulator. You can
switch between different devices here and the appropriate stylesheets are applied so
that the application looks and behaves natively on each emulated device. As you can see, a
navigation bar is used for navigating between views. This is because the “navbar” navigation
type is applied by default. Here is the HtmlApplication object. It is
created with some specific configuration options. The navigation type is specified in the configuration
file as well as the “navigation” object. In addition, a format for the application’s
router is registered. And you can see that the “home” view is navigated to by default
when starting the application. Now let’s open the HTML template of the
“home” view and implement something new. For this purpose, I’ll remove all of the
predefined content. Let’s instead add an “h1” element and write “Welcome” in
it. The view designer’s simulator displays our updated view. Rather than hard-coding
it in the HTML, let’s instead bind this element to a field in the ViewModel.
I’m using Knockout’s text binding to do this. The ViewModel object of the “home”
view is returned by the function with the same name that is declared in the same namespace.
I’ll add the “message” property to it. Let’s start the application and look at
our home view on a running device. Okay. Now let’s add the dxTextBox widget and bind
its ‘value’ option to the ViewModel’s “name” field. I’ll make this field observable
so that it is updated when an end-user changes the value. Now I’ll add a button and bind
its click action to the ViewModel’s “sayHello” function.
In this function I’ll add the name entered into the text box to the message field. I’ll
make this field observable so that the HTML element bound to this filed is updated when
this field is changed. Let’s improve this view a bit and run the application to see
the result. Now let’s add one more view to our application
and try to navigate to it in the application. I invoke the Add New Item dialog, specify
a name for the new view and click Add. The dxview and JS files are created and automatically
referenced in the application page. In addition, the new view is added to the application’s
navigation. I don’t want to see this view in the global navigation, so I ‘ll delete
it from here. Instead, I’ll add a button to the “home” view and call the “navigate”
method of the HtmlApplication object within the clickAction callback function. I’ll
specify the view’s name as a parameter. Let’s run the application to see how my
navigation works. And it works great. Even the Back button is added automatically where
needed. Now, let’s remove the default content from
the greeting view and add the “h1” element bound to the ”message” field of the ViewModel.
Let’s pass the name entered for the text box in the home view to the greeting view
and concatenate it to the message field value. For this purpose, I’ll check that the application’s
routing format allows me to pass a parameter. And it does have the second “id” parameter.
So, I’ll change the ”navigate” method call in the home view and use this parameter
in the greeting view. Finally, let’s take a look at the result. And everything is working
properly. Thanks for watching and thank you for choosing DevExpress.