what it better practices for creating web forms, using tables or lists ?
Regards
Javi
Neither.
A form is just a form. It might consist of paragraphs, simple blocks (divs), or something else.
Sometimes that forms are tabular or lists, but not often.
There is no such a rule :-) You should use tables for tabular content, you shouldn't use it for you page layout since it's a bad html practice.
You'll find a lot about it on google. Tables vs DIV
It depends on your context. If we're speaking about web forms with labels and input fields, then having a structure using divs is most comfortable for a concept of composition
<div>
<label... for="..">
<input type="text"...>
</div>
<subcontrol...>
<div>
<label... for="..">
<input type="text"...>
</div>
This is then properly formatted by using CSS s.t. the things are well aligned in the form
Label: input field
Label2: input field
Composition therefore because as you see in the "HTML" above "subcontrol" may be an arbitrary reference to a control containing again the same div structure and the finally produced page would just look nicely.
The same may apply to tables, but the concept of composition already gets messier since you get nested tables as the result. Moreover some screenreaders often have problems with those nested tables (as many argue, have never tried it though).
Conclusion: It really depends on how you're accustomed to it. Personally I prefer divs and CSS because you can control it better once you have defined your overall layout.
Related
I was assigned the task to rewrite our home-made templates with Perl Template Toolkit.
Our templates have the possibility to extract a fragment of the template (and then make HTML from it) instead of using the entire template.
How to do it with Template Toolkit?
The best solution I came with is the following:
Let we have a template x.html with fragment A.
The fragment should be extracted into new file. (I am to name it like x/A.html for consistency.) In the original template x.html it should be replaced with [% INCLUDE 'x/A.html' %]. So I could be able to use either the entire template x.html or its fragment x/A.html. Probably we may have several levels of inclusion like x/A/B.html.
Are there other ways to do it? (I don't like to idea to split it in subdirectories as described above, but haven't come up with a better solution.)
Are you asking whether there's a better way to extract the fragment from the parent template?
(Answer is: no, that's probably the best way.)
Or are you asking is there a better way to organize the extracted fragements?
(Answer is: no real best answer, everywhere will have their own house style - you aren't going to go too far wrong by picking any convention.)
Most common conventions for naming I've seen are subdirectories x/A.html and prefixes x_A.html. Whether you use the name of the parent template for x or you choose to group by functionality as simbabque suggested is another matter of taste: grouping by functionality scales better on larger and more complicated layouts where you have a great deal of reuse of components, but grouping by use case is conceptually simpler in smaller use cases with little or no component reuse.
I am using AEM6.0 and in one of sightly scripts, i am having two variables
${currentPage.path} -? /content/geometrixx/en/tools
${pageHref} -> /content/geometrixx/en/tools.html
Now i need to compare these two but as ${currentPage.path} does not have .html, it will fail. Is there any way i can append .html to it to compare it successfully.
No. There is no direct way to do it. The following excerpt from the Sightly docs tells you why
Separation of Concerns: The expressiveness of the Sightly template language is purposely limited, in order to make sure that a real programming language is used to express the corresponding presentation logic. This optional logic is invoked from Sightly expressions with the Use-API pattern, making it easy to understand what is called for a given view, and to potentially have different logic for different views of the same resource.
I would suggest either using a Java / JavaScript Use API to achieve the same.
However if it is inevitable that you need to do this in Sightly itself, then you can use the following dirty hack, though I wouldn't recommend it.
<sly data-sly-test.pagePath = "${currentPage.path}.html"></sly>
<sly data-sly-test = "${pageHref == pagePath}">
<!--/** Your HTML here */-->
</sly>
A similar kind of question has been answered here.
Help! In carefully stepping through irb to control a browser (Firefox and Chrome) using the Watir library, it seems the xpath addresses are too shifty to rely on. Eg. one moment, the xpath for one's balance seems consistent, so I use that address in my script. Sometimes it works, but too often crashing with "element not found" although every time I manually step through, the webpage data is there (firebug inspect to confirm).
Yes, using Ajax-reliant sites, but not that changing....bank websites that pretty much remain the same across visits.
So question....is there some way watir-webdriver can simply give me a long, verbose dump of everything it sees in the DOM at the moment, in the form of an xpath tree? Would help me troubleshoot.
The big answer is to not use xpath, but instead use watir as the UI is intended to be used.
When it comes to a means to specify elements in browser automation, by and large Xpath is evil, it is SLOW, the code it creates is often (as you are finding) very very brittle, and it's nearly impossible to read and make sense of. Use it only as a means of last resort when nothing else will work.
If you are using a Watir API (as with Watir or Watir-webdriver) then you want to identify the element based on it's own attributes, such as class, name, id, text, etc If that doesn't work, then identify based on the closest container that wraps the element which has a way to find it uniquely. If that doesn't work identify by a sibling or sub-element and use the .parent method as a way to walk 'up' the dom to the 'parent container element.
To the point of being brittle and difficult readability, compare the following taken from the comments and consider the code using element_by_xpath on this:
/html/body/form/div[6]/div/table/tbody/tr[2]/td[2]/table/tbody/tr[2]/td/p/table[2]/tbody/tr/td[2]/p/table/tbody/tr[3]/td[2]
and then compare to this (where the entire code is shorter than just the xpath alone)
browser.cell(:text => "Total Funds Avail. for Trading").parent.cell(:index => 1).text
or to be a bit less brittle replace index by some attribute of the cell who's text you want
browser.cell(:text => "Total Funds Avail. for Trading").parent.cell(:class => "balanceSnapShotCellRight").text
The xpath example is very difficult to make any sense of, no idea what element you are after or why the code might be selecting that element. And since there are so many index values, any change to the page design or just extra rows in the table above the one you want will break that code.
The second is much easier to make sense of, I can tell just by reading it what the script is trying to find on the page, and how it is locating it. Extra rows in the table, or other changes to page layout will not break the code. (with the exception of re-arranging the columns in the table, and even that could be avoided if I was to make use of class or some other characteristic of the target cell (as did an example in the comments below)
For that matter, if the use of the class is unique to that element on the page then
browser.cell(:class => 'balanceSnapShotCellRight').text
Would work just fine as long as there is only one cell with that class in the table.
Now to be fair I know there are ways to use xpath more elegantly to do something similar to what we are doing in the Watir code above, but while this is true, it's still not as easy to read and work with, and is not how most people commonly (mis)use xpath to select objects, especially if they have used recorders that create brittle cryptic xpath code similar to the sample above)
The answers to this SO question describe the three basic approaches to identifying elements in Watir. Each answer covers an approach, which one you would use depends on what works best in a given situation.
If you are finding a challenge on a given page, start a question here about it and include a sample of the HTML before/after/around the element you are trying to work with, and the folks here can generally point you the way.
If you've not done so, work through some of the tutorials in the Watir wiki, notice how seldom xpath is used.
Lastly, you mention Firewatir. Don't use Firewatir, it's out of date and no longer being developed and will not work with any recent version of FF. Instead use Watir-Webdriver to driver Firefox or Chrome (or IE).
You just need to output the "innerXml" (I don't know Watir) of the node selected by this XPath expression:
/
Update:
In case that by "dump" you mean something different, such as a set of the XPath expressions each selecting a node, then have a look at the answer of this question:
https://stackoverflow.com/a/4747858/36305
I have about 6 forms to design with UIBinder that look almost the same, the difference is two or three fields. I was thinking about building one form with all the possible fields and hide or show fields depending on the case.
What do you think about this method?
It can work well. You can define a BaseForm class with UiBinder that implements HasWidgets, and then define SpecificForm1.ui.xml with something like
<custom:BaseForm>
<g:TextBox ui:field="componentSpecificToThisForm" />
<g:Button>A button!</g:button>
</custom:BaseForm>
and SpecificForm2.ui.xml with something like
<custom:BaseForm>
<g:Label>Something totally different</g:Label>
<g:Button>A button!</g:button>
</custom:BaseForm>
it works great!
I've tried something similar, and building one form where I hid/show the appropriate fields was the most simple solution. Another idea would be create a factory, which then builds your form according to your needs.
So, you basically create the components your form is composed of, and the factory wires them together via constructor dependency injection. Worked very well for me, and also has the added benefit that it is very easy to extend your form.
(I'll add an example later).
When I'm coding a form I find myself doing some very repetitive typing. For example, if I'm lining up a number of <input>s in a table, I might write
<tr>
<td><label for="repeat">Repeat:</label></td>
<td><input id="repeat" name="repeat"></td>
</tr>
where the third "repeat" is needed for GET/PUT form submission, the first and third are associated with each other, the third is for DOM access, and the second is for the (human) reader.
If I avoid lining up the various inputs the need for the first goes away:
<p><label>Repeat: <input id="repeat" name="repeat"></label></p>
but usually I'm asked to make them line up.
Generally, I think of duplications in code (DRY) as a bad thing, so even minor as this is I thought I'd ask to see if there was a better way. As it stands, I have four opportunities for typos, three of which are user-facing and two which would cause programmatic issues if mistyped.
How about lining up using CSS (width or something) and keep using your code instead of tables and tds.
Well, obviously you are right about the wordiness of html, which doesn't always conform with the DRY-principle. And the next repetition comes in the server side code, that processes the form. But, as you put it correctly, each of these "repetitions" has its own meaning and could as well contain a different string.
Usually I try to take DRY to a higher level by not coding html forms by hand but using a web framework (in my case Django) which generates the html form automatically. That makes your question to a non-issue for me.