Comments (3)
@rkpattanaik this is definitely not a silly question. As of right now, proteus
supports only one-way binding out-of-the-box, and forms will require two-way bindings. We are working to add forms as a feature, but we are not there yet.
If you wish to unblock yourself to continue development here is a suggested solution:
-
Make sure you have a reference to the root
ObjectValue
data
and the rootProteusView
container
passed when you calledLayoutInflater. inflate
where you have theProteusLayoutInflater.Callback
registered. -
Register the new
AttributeProcessor
foronChange
event with theEditText
. (exmple) and use theEventProcessor
(example). -
In the implementation of the
onChange
attribute set anTextWatcher
on theEditText
. -
In the implementation of the
TextWatcher
get the value of the text, and trigger an event sayonFormInputChange
usingtrigger("onFormInputChange", <config>, (ProteusView) view);
. (example). Hereconfig
is anObjectValue
which decribes the event, similar to youronClick -> action -> apiCall
-
You will get this trigger as a callback in the
ProteusLayoutInflater.Callback.onEvent()
method. (example) -
In the implementation of the
OnEvent
whenevent.equals("onFormInputChange")
injectvalue
into a data path (say@{form.data.username}
as on) and call update on the root view.
How to inject new data into a data path and update the view?
- To assign a value at a data path do
DataBinding.valueOf("some.path").assign(value, data, 0);
- Then update the
container
by callingcontainer. getViewManager().update(data)
.
Also, convert the
onClick
attributes' values to a nested binding. Note the new binding values inusername
andpassword
and how the entireonClick
is also wrapped inside an object with the binding keyword@
as a key (nested bindings).
{
"onClick": {
"@": {
"action": "apiCall",
"extras": {
"endpoint": "www.someapi.com/api/v1/login",
"method": "POST",
"body": {
"username": "@{form.data.username}",
"password": "@{form.data.password}"
}
}
}
}
}
Reference schema for config
{
"onChange": {
"@": {
"action": "change",
"changes": [
{
"path": "form.data.username",
"value": "<insert the text value from the TextWatcher before triggering the event>"
}
]
}
}
}
- Use the
path
andvalue
in theassign()
method in theonEvent
.
Hope this helps, also we will try and move this into the FAQ.
from proteus.
Thank you very much @adityasharat !!!
I was able to get it right and implemented it successfully.
Below is the code sample, if anyone needs a concrete example.
MyEditTextParser.java
public class MyEditTextParser extends EditTextParser {
@Override
protected void addAttributeProcessors() {
super.addAttributeProcessors();
addAttributeProcessor(Constants.Attribute.OnChange, new EventProcessor() {
@Override
public void setOnEventListener(View view, Value value) {
((EditText) view).addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
value.getAsObject().addProperty("text", charSequence.toString());
trigger(Constants.ViewEvent.OnFormInputChange, value, (ProteusView) view);
}
@Override
public void afterTextChanged(Editable editable) {
}
});
}
});
}
}
Inside MainActivity.java
mCallback = new ProteusLayoutInflater.Callback() {
@NonNull
@Override
public ProteusView onUnknownViewType(ProteusContext context, String type, Layout layout, ObjectValue data, int index) {
return null;
}
@Override
public void onEvent(String event, Value value, ProteusView view) {
try {
if (event.equals(Constants.ViewEvent.OnFormInputChange)) {
Binding.DataBinding.valueOf(value.getAsObject().get("path").getAsString()).assign(value.getAsObject().get("text"), mData, 0);
mProteusView.getViewManager().update(mData);
}
if (event.equals(Constants.ViewEvent.OnClick)) {
String username = value.getAsObject().get("extras").getAsObject().get("body").getAsObject().get("username").getAsString();
Toast.makeText(mProteusContext, "Hi " + username + "!", Toast.LENGTH_SHORT).show();
}
} catch (Exception e) {
e.printStackTrace();
}
}
};
mProteusBuilder = new ProteusBuilder()
.register(RecyclerViewModule.create())
.register(CardViewModule.create())
.register(DesignModule.create())
.register(new MyEditTextParser());
mProteus = mProteusBuilder.build();
mLayout = gson.fromJson(getJsonFromFile(R.raw.activity_login), Layout.class);
mData = gson.fromJson(getJsonFromFile(R.raw.data_main), ObjectValue.class);
mProteusView = mProteusLayoutInflater.inflate(mLayout, mData);
activity_login.json
{
"type": "LinearLayout",
"layout_height": "match_parent",
"layout_width": "match_parent",
"padding": "8dp",
"orientation": "vertical",
"children": [
{
"type": "EditText",
"id": "etUsername",
"layout_height": "wrap_content",
"layout_width": "match_parent",
"hint": "Username",
"onChange": {
"path": "data.loginForm.username"
}
},
{
"type": "EditText",
"id": "etPassword",
"layout_height": "wrap_content",
"layout_width": "match_parent",
"layout_marginTop": "4dp",
"hint": "Password",
"onChange": {
"path": "data.loginForm.password"
}
},
{
"type": "Button",
"id": "btnLogin",
"layout_height": "wrap_content",
"layout_width": "match_parent",
"layout_marginTop": "4dp",
"text": "Login",
"onClick": {
"@" : {
"action": "apiCall",
"extras": {
"endpoint": "www.someapi.com/api/v1/login",
"method": "POST",
"body": {
"username": "@{data.loginForm.username}",
"password": "@{data.loginForm.password}"
}
}
}
}
}
]
}
data_main.json
{
"data": {
"team": ["Kedar", "Rahul", "Alok", "Rajesh", "Sheetal", "Vipin", "Divyam", "Varad"],
"loginForm": {
"username": "",
"password": ""
}
}
}
Thanks,
Rajesh
from proteus.
Great, closing this issue.
from proteus.
Related Issues (20)
- DEMO HOT 10
- Help Wanted : ProteusInflateException HOT 2
- I'm getting ProteusInflateException HOT 3
- how to pass data and layout in proteus inflater for simple android app? HOT 1
- Issue with boolean parse. HOT 3
- Firebase rest api response cant parse json responses HOT 8
- on setting right , top or down drawable, left drawable also gets set. HOT 2
- cannot inflate json result from plugin converter proteus (please help) HOT 2
- How to create RadioButton, Spinner view? HOT 1
- minSdk 19 from 16 HOT 2
- Recyclerview with different item-layout for each index HOT 2
- ProteusInflateException
- Not able to use Constraint Layout HOT 2
- Multiple button clicks..?? HOT 1
- How does it know that is a resource if is not in the Resource types?, fails inflating the menu HOT 1
- Does it have backward compat support? HOT 1
- Horizontal Orientation in RecyclerView HOT 1
- Horizontal Orientation in RecyclerView HOT 1
- Type needs to be first key in Layout JSON. HOT 1
- Formatting not working HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from proteus.