Xsemble has special considerations beyond the usual way of making a web form. Xsemble maximizes component reuse, and these considerations come from the reusability aspects of the Page component which engulfs the web form.
Xsemble fits well into the ecosystem of software development tools and technologies. It includes the features that are core to its functionality, and leaves the rest to other tools to handle. It does not attempt to reinvent the wheel where there are already some good tools / technologies doing the job. Web development is one such area. Some of them are listed in this hackr.io article. We shall use the Bluefish editor for this article.
This article can interest people interested in knowing:
- The reusability considerations for web forms in Xsemble
- The way an external tool can be used in tandem with Xsemble
What Is Special In an Xsemble Page Component?
Usually, you simply open an editor and start churning out a web page. With the Xsemble approach, you don’t do that — at least not right away.
Page Component & Its Code Template
A Page component is defined in terms of its attributes — namely the in arguments, out arguments, exit paths and parameters. (More information about these attributes can be found under the “Method Metaphor” section of the Xsemble primer). A component implementation code template is auto-generated from this definition. The template has a well defined area for writing business logic, and a bunch of comments to help the programmer who does that.
We shall be using the Bluefish editor to write this business logic outside Xsemble, so that it can be copy/pasted into the Xsemble template.
Alternatively, one may save the auto-generated Xsemble code template first, open the file in Bluefish, and then add the business logic to it. The end result would be the same.
The important point is that the Xsemble code template must be generated before we get to the editor, so that we have it handy.
Reusability Concerns
The ability to reuse components across different contexts is big power. Xsemble lets you achieve this reusability. Reusability requires that the components are isolated from one another, and are not dependent on something that is external to it. In case of a web page form, there are two scenarios where this independence could be compromised, and we need to be aware of the solution and use it.
As every web developer knows, a UI form on a web page submits its data to a URL. That URL is external to the component. Therefore, if it is hardcoded in the component code, then it creates a coupling. In other words, it makes the component dependent on the URL. If the URL changes, the component code has to change for it to work. It also means that you will not be able to use the component in two different contexts where the URLs are different. Please check out our previous blog post to understand the coupling problems in detail.
As the sequel to that blog post states, the solution to this problem is to retrieve the URL from a variable named as “externalExitpath2urlMap” which Xsemble makes available to your component implementation code. It is no more hardcoded.
In the same way, when the form submits its data to the URL, there is another possibility of component coupling in the names used. The names of the HTTP parameters have to be the same in the submitting web page code as are used while retrieving the values on the server side code hosted on the URL. Xsemble makes available another variable “externalOutarg2varnameMap” to remove this coupling from your component code.
We shall be using these variables in our Page component code so that it remains isolated and reusable.
What Is Special About Bluefish Editor
Bluefish is a lightweight, multi-platform, versatile open source editor. We like because it sports ready-to-use code templates right from its toolbar (as highlighted in the screenshot below). That makes it simple to use, saves laborious work and silly mistakes, and accelerates coding. If you haven’t used it, then you might want to give it a try.
Let’s Get Started…
Creating the Form Tag
Shown below is the form template dialog box filled. Bluefish thoughtfully gives dropdowns to simplify choices.
Look at the highlighted part entered as the form action. It is coming straight from the auto-generated comment in the Xsemble template (PHP technology implementation). One may recognize that the code uses the variable “externalExitpath2urlMap” to make the Page component isolated and reusable. Use the exit path that is relevant to your Page component in place of “exitPath”.
Click OK to create the form tag.
Creating the Input Tag
To create an input element within the form, you open the input template.
Again, the highlighted part comes from the comment in the Xsemble template. One may notice that the code uses the variable “externalOutarg2varnameMap” for component reusability. Use your exit path and out arg name as relevant in place of exitPath and outarg. Click OK to create the input tag.
These examples show how we could write the form code with the Xsemble touch in the Bluefish editor.
Taking the Code to Xsemble
Once you are done, copy-paste the code created in the Bluefish editor (highlighted below) into the Xsemble-generated code template inside the user code block.
Conclusion
The article covered how to create a web form in an external editor, for use with Xsemble. We used the Bluefish editor for this purpose. We discussed how component reusability considerations apply to web form, and how to implementation reusability without much effort.
