In this post, we'll look at the steps to use the Sencha ExtJS library to create a Web Client to connect and get data from our RAD Studio’s RAD Server (also available with Delphi and/or C++ Builder)!
Before We Get Started:
- In this previous post, I showed how RAD Studio 10.2.2 introduced adding a new component to the FireDAC BatchMove architecture to support generating JSON data from database tables, in an easy and flexible way. We will use code from that post to complete the JSON Employee data object and model later in this example, so grab the source code here.
- You can use RAD Studio, Delphi, or C++Builder 10.2.3 or later, including the 30-Day Free Trial
- We will use the free trial version of Sencha Ext JS.
With the RAD Server and a Sencha EXT JS web client we will:
- Expose JSON in the RAD Server Server Methods, and make direct AJAX calls.
- Export data, define a matching data model and build the Web Client UI.
Step 1: Create the Web Client App
Let’s first start with creating a EXT JS Web client that can connect to our RAD Server and call the RAD Server endpoint : http://localhost:8080/version that returns the JSON object: {"version":"3.0","server":"Embarcadero EMS"}
Using Sencha Architect 4.2.2 IDE
1. File | New | Blank Project | Select New Project
2. Choose the EXT JS 6.5.x Classic framework.
3. Click Create. This creates a new Sencha EXT JS 6.5.x Classic project that looks like this that we will allow us to create our Web App.
4. To the app, add a TAB Panel. Use the Toolbox search and search for Tab.
5. Double-click the TAB Panel component from the Toolbox, and it gets added to our Web Application.
The TAB Panel gives us a Layout with multiple tabs.
On the Tab 1, let’s add a button.
6. Select Tab1 on the Designer, search for “Button” drag and drop Button onto TAB1 and the Button gets added onto Tab 1, like this, with Text that says “MyButton”.
Next, let's add an event to the Button for what we want the Web App to do when someone clicks the button.
7. Right-Click on the Button and select “Add Event Binding”.
8. On the “Create View Controller Event Binding”, for the Event, select “click” for clicking or on the button, and this gives us a Function Name = onButtonClick
9. Click the Create Binding.
10. Next, select the Code tab, and we can add code to the onButtonClick function(button, e, eOpts) for what we want to happen when the user clicks the MyButton.
11. Notice the onButtionClick function makes one object available, the button object, which is kind of like the Sender for an Event Handler in C++ Builder and/or Delphi.
For example, if we wanted to change the text of the button, when the button is clicked we can code that like this. Set the button’s text to be the current Text of the button + “ was clicked”;
button.setText (button.getText() + ‘ was clicked’);
You can also click the Add Comment icon, and add a comment like “Set the button’s text to be the current Text of the button + ‘ was clicked’;”
Note: setText and getText need to be code like this, lowercase and uppercase since JS is a case-sensitive language.
12. Click SAVE. To save the application.
13. Save the app in folder: C:UsersamannDocumentsSenchaWebApps
Project Name = EMSWebClient
App Name = EMSWebApp.
Note: Project will be saved as C:UsersamannDocumentsSenchaWebAppsEMSWebClientEMSWebClient.xds
14. Click Save.
15. Next, we can click the Preview App icon, to see what our app looks like running as a Web app:
Note, when you Preview Project, Sencha Architect gives you the option to select your URL Prefix, else Architect will preview the application using its own default URL.
16. Click Preview.
Here we see our EMSWebClient app running in your default web browser.
17. Click the MyButton, and we see the Text of the button changes to “MyButton was clicked”. Excellent!
Step 2: Test Web Client Connection To RAD Server
1. Now that we have out ButtonClick Event Handler working correctly, let's replace the event handler code with some code that can connect to our RAD Server and call the http://localhost:8080/version endpoint, like this code:
Ext.Ajax.request({
url: ‘http://192.168.1.20:8080/version’,
cors: true,
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
console.dir(obj);
button.setText (‘RAD Server returns ‘ + obj.server);
}
});
}
Basically, we are using the global Ajax library (Ext.Ajax) from Sencha Ext Library, and issue a request (Ext.Ajax.Request) and pass in the URL we need to execute: http:// 192.168.1.20:8008/version
And on success, we are using this anonymous method or closure, depending if you wish to use the RAD Studio term or the JS term. The success action is a function where we define a JS object based on the decoding of the JSON response text that represents an object: function(response, opts) { var obj = Ext.decode(response.responseText
And we can optionally log the output locally to the console using console.dir(obj); And we’ll add the response, the server value, of the JSON object to the text of our button: button.setText(‘RAD Server returns ‘ + obj.server); With your emsdevserver running, the url: ‘http://192.168.1.20:8080/version’ returns this: "server":"Embarcadero EMS". Running the Sencha web client in Preview and clicking on the button, shows this also!
Excellent! We were able to connect to our RAD Server EMS REST Server and send a REST request, and get a JSON object returned to the web client, and we were able to parse the JSON object and display the server value of the JSON object: “Embarcadero EMS”.
So, this is a simple, direct way to return data from a RAD Studio RAD Server REST Server, connect to that data and display the data on a Sencha Ext JS Web Client! This would be difficult if you had to do it manually, requiring a lot of low-level coding. But by using Sencha EXT JS libraries, we are able to do this fast and easy!
Step 3: JSON EMPLOYEE data object and data model
Next, let’s see what we need to do to return a complex JSON EMPLOYEE data object and create the data model on the Web Client to be able to display the data on the web client.
From our RAD Server that we created in the previous post, the REST Endpoint http:// 192.168.1.20:8080/EmployeeData, returns these columns from the EMPLOYEE table:
select * from Employee
And the returned JSON array looks like this:
[{"EMP_NO":2,"FIRST_NAME":"Robert","LAST_NAME":"Nelson","PHONE_EXT":"250","HIRE_DATE":"2007-12-29T00:00:00.000-05:00","DEPT_NO":"600","JOB_CODE":"VP","JOB_GRADE":2,"JOB_COUNTRY":"USA","SALARY":105900,"FULL_NAME":"Nelson, Robert"},
With Sencha EXT JS IDE, we need to create a data model that matches the JSON data returned from the server and display the data on a Grid on the Sencha Web Client.
In Sencha Architect, create a new model:
1. Select Models from the Project Inspector.
2. On the Project Inspector, select + and select Model. This will add a MyModel Tab to the Project.
3. Select the Code tab, to see the MyModel code in the IDE.
4. For the name of the model, on the Config panel, select useClassName = Employees
Next, we need to define the fields for our model:
5. Search for the fields property for our Employees Model.
6. Click on the + icon, so that we can type all of our needed columns (fields) separated by a comma, on a single line: EMP_NO, FIRST_NAME, LAST_NAME, PHONE_EXT, HIRE_DATE, DEPT_NO, JOB_CODE, JOB_GRADE, JOB_COUNTRY, SALARY, FULL_NAME
7. Click Finish.
In the Sencha IDE, in code, our Data Model for Employees definition looks like this:
This list of fields gets created with no specific data types.
So this is the first step needed, to define the model for the data.
Next, we need to define a STORE. There are many different types of data stores like we see here, you can have an Array Store, Virtual Store, JSON Store, XML Store, etc:
We want to use a JSON Store, based on an Ajax request.
8. Select JSON Store.
In code, we see this MyJsonStore created:
Ext.define('EMSWebApp.store.MyJsonStore', {
extend: 'Ext.data.Store',
requires: [
'EMSWebApp.model.Employees',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json',
'Ext.util.Filter'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MyJsonStore',
autoLoad: true,
model: 'EMSWebApp.model.Employees',
proxy: {
type: 'ajax',
url: 'http://192.168.1.20:8080/EmployeeData',
reader: {
type: 'json'
}
},
filters: {
}
}, cfg)]);
}
});
Now, there are a few items we need to add to our MyJsonStore.
First, we need to provide a proxy. We need to provide the actual URL for the data.
9. On the Config panel, select MyAjaxProxy, search for URL, under MyAjaxProxy, and set the URL to your REST endpoint to return Customers data: http://192.168.1.20:8080/EmployeeData
The URL gets added to the proxy in code:
10. Next, in the Project Inspector, select the MyJsonReader.
In code we see:
reader: {
type: 'json'For the Reader, since the JSON does not have any RootProperty, we do NOT need to provide any RootProperty value.
So our JSON store looks like this for our JSON:
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MyJsonStore',
autoLoad: true,
model: 'EMSWebApp.model.Employees',
proxy: {
type: 'ajax',
url: 'http://192.168.1.20:8080/EmployeeData',
reader: {
type: 'json'
}
},
filters: {
}
}, cfg)]);In the Sencha IDE, you may see some error indicators about the Store and Proxy settings.
One of the MyJsonStore error reminds us to: “Please associate a Model with the store, or add one or more Fields to the store.” So this is something we need to do.
11. Select MyJsonStore, select the model property, and search for the model property.
12. Clicking on the model property, allows us to select our Employees model from the dropdown list.
So we are saying that our JSON Store has information that matches our Employees structure.
13. We can now right-click on our MyJsonStore node, and select Load Data, to see at Design Time, what our data looks like.
You may get data returned, or the store may be empty if no data is returned.
14. Right-click on our MyJsonStore node, and select Load Data. We see 42 records get returned, that is the JSON Array returned from our RAD Server endpoint: http://192.168.1.20:8080/EmployeeData
With the RAD Server (EMS) Server running, we see we have our EmployeeData Resource, so we see this data preview from the Sencha IDE.
15. Click to view response.
And the Sencha IDE displays this Response Data:
We see that the JSON data values get returned correctly! That’s great!
Step 5: Update the Web Client UI and Test Final App
Next, let’s go back to our UI with the multi-tabs, and add a Grid on Tab2 to display our Employee Data.
16. Select Tab2 from the MyTabPanel.
On this Tab2, we will add a Grid.
17. Select Grid Panel.
As you see, the Grid has its own columns that we may or may not need. For example, we do not need the Number, Date and Boolean columns, so we can delete those columns:
18. Select My Grid Panel, and select the Columns Property. Expand the Columns property, and delete the Number, Date and Boolean columns.
19. Add 10 more plain String Columns to the Grid, for our EmployeeData columns for the Grid.
Now we have our 11 columns to display our Employee Data: EMP_NO, FIRST_NAME, LAST_NAME, PHONE_EXT, HIRE_DATE, DEPT_NO, JOB_CODE, JOB_GRADE, JOB_COUNTRY, SALARY, FULL_NAME.
Next, let’s associate the Grid with the datastore that’s providing the data:
20. Select the My Grid Panel, select the Grid Panel, search for ‘store’. Select ‘MyJsonStore’ for the store.
Now that we have done this, we can select each column, and for each column, you can indicate the field from the JASON data. Search for ‘data’, and for the dataIndex property, select the field for the column.
21. And for DisplayName property, give it the same Column name.
22. Do the same for the other 10 fields.
23. And next, you can set the TEXT property for each Column to the text of the data.
24. Next, to display data at runtime, select the Store (MyJsonStore) and select autoLoad for the data.
25. Now if you look at the Grid, in Design Mode, you should see your Employee Data.
26. Save All.
27. Click the Preview App icon.
28. The MyButton click should return the Version endpoint, like this: RAD Server returns Embarcadero EMS
29. And Tab 2, should display your live RAD Server (EMS) Employee data!, like this:
30. And you have Full Grid control on the Columns (Sort, etc.). Congratulations!
And that’s how easy it is to create a Sencha Web Client to display your RAD Server (EMS) data!
New in 10.2.2 is the inclusion of a RAD Server Single-Site Deployment License in Enterprise & Architect Editions of Delphi, C++Builder and RAD Studio.
Start your RAD Studio free 30-Day trial today.
Download the Sencha Architect IDE free trial to try this project yourself.