Skip to content

Commit 07733f1

Browse files
authored
Update README.md
add Quick start section #2 some code examples add Reporting Issue section
1 parent 538d6eb commit 07733f1

File tree

1 file changed

+137
-0
lines changed

1 file changed

+137
-0
lines changed

README.md

+137
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,142 @@ This will run the application
2525
## Quick start
2626
Using SF Java UI is simple. Follow the steps below to get your first screen.
2727

28+
### Backend
29+
30+
First, add the SF Java UI library to your java web project:
31+
32+
```xml
33+
<dependency>
34+
<groupId>io.sfjava.ui</groupId>
35+
<artifactId>sf-java-ui</artifactId>
36+
<version>RELEASE</version>
37+
</dependency>
38+
```
39+
Create a new Rest Web Service. (example using spring)
40+
41+
```Java
42+
import com.fasterxml.jackson.databind.JsonMappingException;
43+
44+
import io.asfjava.ui.core.schema.UiFormSchemaGenerator;
45+
import io.asfjava.ui.dto.UiForm;
46+
47+
/**
48+
* REST controller for managing Ui.
49+
* The rest controller handle the JsonSchemaForm request. It call the SF JAVA UI library to
50+
* generate the json schema and the form definition
51+
*/
52+
@RestController
53+
@RequestMapping("/api")
54+
public class DemoRestService {
55+
56+
public DemoRestService() {
57+
}
58+
59+
@RequestMapping("/ui")
60+
public UiForm renderUI() throws JsonMappingException {
61+
return UiFormSchemaGenerator.get().generate(DemoForm.class);
62+
}
63+
}
64+
```
65+
Then create the DemoForm class:
66+
67+
```Java
68+
import java.io.Serializable;
69+
70+
import io.asfjava.ui.core.form.ComboBox;
71+
import io.asfjava.ui.core.form.TextArea;
72+
import io.asfjava.ui.core.form.TextField;
73+
74+
/**
75+
* Pojo represent the view to display. It must implement java.io.Serializable.
76+
* We are using SF JAVA UI Annotations to define the different fields layout
77+
*/
78+
public class DemoForm implements Serializable {
79+
80+
@TextField(title = "First Name", placeHolder = "Your first name", description="This is a description for your first name field")
81+
private String firstName;
82+
83+
@TextField(title = "Last Name", placeHolder = "Your last name")
84+
private String lastName;
85+
86+
@ComboBox(title = "Gender", values = { "Male", "Female" })
87+
private String gender;
88+
89+
@TextArea(title = "Address", placeHolder = "Fill your address please", description = "This is a textarea")
90+
private String address;
91+
92+
public String getFirstName() {
93+
return firstName;
94+
}
95+
96+
public void setFirstName(String firstName) {
97+
this.firstName = firstName;
98+
}
99+
100+
public String getLastName() {
101+
return lastName;
102+
}
103+
104+
public void setLastName(String lastName) {
105+
this.lastName = lastName;
106+
}
107+
108+
public String getGender() {
109+
return gender;
110+
}
111+
112+
public String getAddress() {
113+
return address;
114+
}
115+
116+
public void setAddress(String address) {
117+
this.address = address;
118+
}
119+
120+
}
121+
```
122+
### Front
123+
124+
First, add to your java web project the required client side library in order to use [json schema form](https://github.com/json-schema-form).
125+
After, inject the json schema form into your html page and add your Js controller to call the backend.
126+
127+
For the example below we will use [Angular schema form](https://github.com/json-schema-form/angular-schema-form). You can follow the official [documentation](https://github.com/json-schema-form/angular-schema-form#documentation).
128+
129+
Put the code below into your view.html:
130+
131+
```HTML
132+
<div ng-controller="FormController">
133+
<form sf-schema="schema" sf-form="form" sf-model="model"></form>
134+
</div>
135+
```
136+
Add the angular controller below:
137+
138+
```javascript
139+
angular.module('demoApp', ["schemaForm"]).controller('DemoAppController', function($scope,$http) {
140+
$http.get('/api/ui').then(successCallback, errorCallback);
141+
function successCallback(response){
142+
$scope.schema = response.data.schema;
143+
$scope.form = response.data.form;
144+
$scope.model = {};
145+
}
146+
function errorCallback(error){
147+
//error code
148+
}
149+
});
150+
```
151+
152+
Run your app and go to your screen. Enjoy :)
153+
154+
## Reporting Issue
155+
SF Java UI uses GitHub’s integrated issue tracking system to record bugs and feature requests. If you want to raise an issue, please follow the recommendations below:
156+
157+
- Before you log a bug, please [search the issue tracker](https://github.com/JsonSchema-JavaUI/sf-java-ui/search?type=Issues) to see if someone has already reported the problem.
158+
159+
- If the issue doesn’t already exist, [create a new issue](https://github.com/JsonSchema-JavaUI/sf-java-ui/issues/new).
160+
161+
- Please provide as much information as possible with the issue report, we like to know the version of Spring Boot that you are using, as well as your Operating System and JVM version.
162+
163+
- If you need to paste code, or include a stack trace use Markdown \``` escapes before and after your text.
164+
28165
## Contributing
29166
Contributions are welcome! Please see [Contributing.md](CONTRIBUTING.md) for more info.

0 commit comments

Comments
 (0)