This is Radzen – a desktop application forvisually designing and creating Angular 2 applications.
It’s available for both Mac OS and Windows.
Let me show you how it works.
Tо get started click the “New” button.
Select from the “Dawn” or “Dusk” themes.
You can also change this later by adjustingthe project settings.
Give your application a name and select alogo for your application.
The “Directory” button lets you specifywhere the project that Radzen creates will be stored.
This folder is what you will eventually pushto source control and production.
Now that the app has been created, we needto define the data source that Radzen will connect to.
Radzen currently supports both OData and plainRESTful endpoints as well as OAuth compliant authentication.
I will use the sample OData data source forthis demonstration which includes authentication.
Radzen will then query the OData service toretrieve the schema and display that for inspection.
Now that the data source is defined, I cancreate the first page of the application and set it as the starter page.
I want to display the products in a grid onthis page so I'll drag a grid component onto the design surface.
Radzen uses bootstrap and a 12-column layoutso by default all components are full-width but can easily be resized simply by dragging.
When the page loads I want to invoke the ODataendpoint so I'll choose the “invoke” command and getProducts.
Once the data is returned I will then storeit in a property so that it can be bound to the grid.
I'll call that property “Products” andset it to result.
Value The result.
Value is a standard for OData sothat we don't have to guess at where in the response we’ll find the data.
The grid is then automatically populated withthe columns based on the products data source.
We can override these default columns by creatinga few of our own.
We can also specify templates for those columnsto format the values as required.
At this point we can run the application byclicking the “Run” button.
The application loads in the browser and afterlogging in the data is then displayed in the grid.
The application is fully responsive and includesa collapsible side panel by default.
Let's add a second page to this applicationfor creating a new product.
First, I'll add a new page and name it “Newproduct”.
Next, I'll drag a button on to the home pagethat will allow us to navigate to the new product page.
On its click event I'll select the “navigate”action and enter the name of the new product page.
On the new page I want a form for creatinga new product.
So instead of creating that for manually ican just drag a new “Form” component onto the page.
The form is then automatically populated withthe data items.
Notice that we are including ID here and IDis auto-generated so let's just go ahead and delete that form field.
Next, we need to instruct this form on howto save the data.
To do that will invoke the “createProduct”method and we need to pass in the correct parameters as well.
Radzen allows you to pass in an event objectand Radzen is smart enough to know that the event object contains all the parameters andknows how to map those parameters to the “Post” method which creates the product.
Lastly, we want to redirect after we createthis product back to the Products’ homepage.
We can do that by tying into the “navigate”method and specifying the homepage.
If we run the application again we can navigateto the new form page and fill it out for a new product.
Notice that Radzen knows what data types arepresent in the data source and provides the correct input controls.
It also knows which fields are required andwill not submit the form if those fields don't pass validation.
Once validation passes the new product iscreated in the database and we are returned to the home page with the grid and there'sthe new product.
Radzen makes it simple to create stunningapplications with full CRUD operations, data management and data visualization.
For more information check out Radzen at radzen.