Click Handler in Builder cannot be applied to void - litho

Question

I am working in mobile application (android) and start to learn litho framework, I write a click handler for particular widget inside component. But the error is displayed
"Builder cannot be applied to void" why this issue is came for a reason?
How to resolve that issue. I need another issue. how to retrieve the text input value Thanks for your response
package com.hotfoot.rapid.aubank.sbl.fragment.qde;
import android.graphics.Color;
import android.os.Build;
import android.text.InputType;
import android.text.Layout;
import androidx.annotation.RequiresApi;
import com.facebook.litho.Border;
import com.facebook.litho.ClickEvent;
import com.facebook.litho.Column;
import com.facebook.litho.Component;
import com.facebook.litho.ComponentContext;
import com.facebook.litho.Handle;
import com.facebook.litho.annotations.LayoutSpec;
import com.facebook.litho.annotations.OnCreateLayout;
import com.facebook.litho.annotations.OnEvent;
import com.facebook.litho.annotations.Param;
import com.facebook.litho.annotations.Prop;
import com.facebook.litho.widget.Text;
import com.facebook.litho.widget.TextInput;
import com.facebook.yoga.YogaEdge;
import com.hotfoot.rapid.au.msme.app.pojo.caf.Assessment;
import com.hotfoot.rapid.aubank.sbl.R;
import java.util.ArrayList;
import java.util.List;
#LayoutSpec
public class CAFAssessmentListItem {
#RequiresApi(api = Build.VERSION_CODES.P)
#OnCreateLayout
static Component onCreateLayout(
ComponentContext c,
CAFAssessmentFragment cafFragment,
Assessment assessment,
#Prop String n) {
List<String> districtNames = new ArrayList();
districtNames.add("Chennai");
districtNames.add("Erode");
districtNames.add("Coimbatore");
districtNames.add("Tirunelveli");
final Handle textInputHandle = new Handle();
return Column.create(c)
.child(
Text.create(c)
.text(cafFragment.getActivity().getResources().getString(R.string.ro_assessment))
.marginDip(YogaEdge.ALL, 10.0f)
.textAlignment(Layout.Alignment.ALIGN_LEFT)
.textSizeSp(18.0f)
.textStyle(1)
.textColor(
cafFragment.getActivity().getResources().getColor(R.color.input_text_color)))
.child(
Text.create(c)
.text("CUSTOMER NAME")
.marginDip(YogaEdge.ALL, 10.0f)
.textAlignment(Layout.Alignment.ALIGN_NORMAL)
.textSizeSp(12.0f)
.textColor(cafFragment.getActivity().getResources().getColor(R.color.text_color)))
.child(
TextInput.create(c)
.hint("")
.marginDip(YogaEdge.ALL, 10.0f)
.inputType(InputType.TYPE_CLASS_TEXT)
.background(
cafFragment.getActivity().getResources().getDrawable(R.drawable.ic_apply_line))
.multiline(false)
.maxLines(1))
.child(
Text.create(c)
.text("CUSTOMER ADDRESS")
.paddingDip(YogaEdge.ALL, 1.0f)
.marginDip(YogaEdge.ALL, 10.0f)
.textAlignment(Layout.Alignment.ALIGN_NORMAL)
.textSizeSp(12.0f)
.textColor(cafFragment.getActivity().getResources().getColor(R.color.text_color)))
.child(
TextInput.create(c)
.hint("")
.marginDip(YogaEdge.ALL, 10.0f)
.inputType(InputType.TYPE_CLASS_TEXT)
.multiline(true)
.maxLines(5)
.background(
cafFragment.getActivity().getResources().getDrawable(R.drawable.bg_edt_popup)))
.child(
Text.create(c)
.text("CUSTOMER CONTACT NO")
.marginDip(YogaEdge.ALL, 10.0f)
.textAlignment(Layout.Alignment.ALIGN_NORMAL)
.textSizeSp(12.0f)
.textColor(cafFragment.getActivity().getResources().getColor(R.color.text_color)))
.child(
TextInput.create(c)
.hint("")
.marginDip(YogaEdge.ALL, 10.0f)
.inputType(InputType.TYPE_CLASS_PHONE)
.background(
cafFragment.getActivity().getResources().getDrawable(R.drawable.ic_apply_line))
.multiline(false)
.maxLines(1))
.child(
Text.create(c)
.text("CUSTOMER BUSINESS")
.marginDip(YogaEdge.ALL, 10.0f)
.textAlignment(Layout.Alignment.ALIGN_NORMAL)
.textSizeSp(12.0f)
.textColor(cafFragment.getActivity().getResources().getColor(R.color.text_color)))
.child(
TextInput.create(c)
.hint("")
.marginDip(YogaEdge.ALL, 10.0f)
.inputType(InputType.TYPE_CLASS_TEXT)
.background(
cafFragment.getActivity().getResources().getDrawable(R.drawable.ic_apply_line))
.multiline(false)
.maxLines(1))
.child(
Text.create(c)
.text("LOAN AMOUNT APPLIED")
.marginDip(YogaEdge.ALL, 10.0f)
.textAlignment(Layout.Alignment.ALIGN_NORMAL)
.textSizeSp(12.0f)
.textColor(cafFragment.getActivity().getResources().getColor(R.color.text_color)))
.child(
TextInput.create(c)
.hint("")
.marginDip(YogaEdge.ALL, 10.0f)
.inputType(InputType.TYPE_CLASS_NUMBER)
.background(
cafFragment.getActivity().getResources().getDrawable(R.drawable.ic_apply_line))
.multiline(false)
.maxLines(1))
.child(
Text.create(c)
.text("TENURE")
.marginDip(YogaEdge.ALL, 10.0f)
.textAlignment(Layout.Alignment.ALIGN_NORMAL)
.textSizeSp(12.0f)
.textColor(cafFragment.getActivity().getResources().getColor(R.color.text_color)))
.child(
TextInput.create(c)
.hint("")
.marginDip(YogaEdge.ALL, 10.0f)
.inputType(InputType.TYPE_CLASS_NUMBER)
.background(
cafFragment.getActivity().getResources().getDrawable(R.drawable.ic_apply_line))
.multiline(false)
.maxLines(1))
.child(
Text.create(c)
.text("EMi")
.marginDip(YogaEdge.ALL, 10.0f)
.textAlignment(Layout.Alignment.ALIGN_NORMAL)
.textSizeSp(12.0f)
.textColor(cafFragment.getActivity().getResources().getColor(R.color.text_color)))
.child(
TextInput.create(c)
.hint("")
.marginDip(YogaEdge.ALL, 10.0f)
.inputType(InputType.TYPE_CLASS_NUMBER)
.background(
cafFragment.getActivity().getResources().getDrawable(R.drawable.ic_apply_line))
.multiline(false)
.maxLines(1))
.child(
Text.create(c)
.text("PD WITH")
.marginDip(YogaEdge.ALL, 10.0f)
.textAlignment(Layout.Alignment.ALIGN_NORMAL)
.textSizeSp(12.0f)
.textColor(cafFragment.getActivity().getResources().getColor(R.color.text_color)))
.child(
com.facebook.litho.widget.Spinner.create(c)
.marginDip(YogaEdge.ALL, 10.0f)
.options(districtNames)
.selectedOption(districtNames.get(1))
.border(
Border.create(c)
.widthDip(YogaEdge.ALL, 1)
.color(YogaEdge.ALL, Color.BLACK)
.build()))
.child(
Text.create(c)
.text("PLACE OF PD-ADDRESS")
.marginDip(YogaEdge.ALL, 10.0f)
.textAlignment(Layout.Alignment.ALIGN_NORMAL)
.textSizeSp(12.0f)
.textColor(cafFragment.getActivity().getResources().getColor(R.color.text_color)))
.child(
com.facebook.litho.widget.Spinner.create(c)
.marginDip(YogaEdge.ALL, 10.0f)
.options(districtNames)
.selectedOption(districtNames.get(1))
.border(
Border.create(c)
.widthDip(YogaEdge.ALL, 1)
.color(YogaEdge.ALL, Color.BLACK)
.build()))
.child(
Text.create(c)
.text("PURPOSE OF LOAN")
.marginDip(YogaEdge.ALL, 10.0f)
.textAlignment(Layout.Alignment.ALIGN_NORMAL)
.textSizeSp(12.0f)
.textColor(cafFragment.getActivity().getResources().getColor(R.color.text_color)))
.child(
com.facebook.litho.widget.Spinner.create(c)
.marginDip(YogaEdge.ALL, 10.0f)
.options(districtNames)
.selectedOption(districtNames.get(1))
.border(
Border.create(c)
.widthDip(YogaEdge.ALL, 1)
.color(YogaEdge.ALL, Color.BLACK)
.build()))
.child(
Text.create(c)
.text("SAVE")
.textSizeSp(14.0f)
.paddingDip(YogaEdge.ALL, 12.0f)
.textAlignment(Layout.Alignment.ALIGN_CENTER)
.marginDip(YogaEdge.ALL, 10.0f)
.backgroundColor(cafFragment.getActivity().getResources().getColor(R.color.orange))
.textColor(cafFragment.getActivity().getResources().getColor(R.color.white))
.border(
Border.create(c)
.widthDip(YogaEdge.ALL, 1)
.color(YogaEdge.ALL, Color.parseColor("#F36F21"))
.build()))
.child(
Text.create(c)
.text("NEXT")
.textSizeSp(14.0f)
.paddingDip(YogaEdge.ALL, 12.0f)
.textAlignment(Layout.Alignment.ALIGN_CENTER)
.marginDip(YogaEdge.ALL, 10.0f)
.backgroundColor(cafFragment.getActivity().getResources().getColor(R.color.purple))
.textColor(cafFragment.getActivity().getResources().getColor(R.color.white))
.border(
Border.create(c)
.widthDip(YogaEdge.ALL, 1)
.color(YogaEdge.ALL, Color.parseColor("#FFA500"))
.build()))
.clickHandler(CAFAssessmentListItem.onEditTextClick(c, textInputHandle))
.build();
}
#OnEvent(ClickEvent.class)
static void onEditTextClick(ComponentContext c, #Param Handle textInputHandle) {
String customer = TextInput.getText(c, textInputHandle).toString();
}
}

Answer 1

First of all, your LayoutSpec class's name is supposed to end with Spec and you should not ever call its methods directly.
When your Spec class will be named MyComponentSpec the compiler will generate a real Litho Component implementation named MyComponent (notice the absence of the suffix Spec). And methods of this class you are supposed to use. I.e, in your example you reference CAFAssessmentListItem.onEditTextClick(c, textInputHandle) which is Spec's method (which you wrote manually), but you should use Component's method (which will be generated by the compiler).
Second, all inputs to the component should be marked as #Prop, i.e #Prop Assessment assessment. Again, because you should not use onCreateLayout method yourself – you'll use generated ComponentBuilder. Like:
CAFAssessmentListItem.create(c)
.assessment(myAssessment)
.n(myString)
.build()
Third, you don't need your fragment to retrieve resources. There are specific methods for this, i.e
Text.create(c)
.testRes(resId)
.textColorRes(colorResId)
.backgroundColorRes(colorResId2)
Fourth, you've never bound textInputHandle with the TextInput widget to get anything on the onClick. Check out this doc: https://fblitho.com/docs/trigger-events. You need to add .handle(textInputHandle) to the TextInput.
And lastly, you don't need to parse color from string .color(Color.parseColor("#F36F21")) when you already have the value for that color – you can just use hexadecimal int .color(0xFFF36F21).
To sum it up:
Rename your class, add Spec to the end (but don't rename CAFAssessmentListItem.onEditTextClick invocation).
Add #Prop to Assessment param and remove Fragment param from onCreateLayout
Replace cafFragment.getActivity().getResources(). calls to just using resource Ids and respective methods in widgets
Add .handle(textInputHandle) to the TextInput widget
Cleanup setting color values