RichInputText
From OpenLaszlo
Proposal to add a richinputtext tag to the laszlo foundation classes
Contents |
Rationale
Currently, though lzx has a lot of support for styleing static text, there is little support for styleing input text. That is, you can style an entire textbox, but not individual sections of text. This is a vestigial effect of having used the Flash5 player until recently. In order to support things like content management systems, a finer grained text styling method is needed for input text.
There are two different ways that this could be done. We could edit the existing LzText6 (the text tag) and LzInput6 (the inputtext tag) classes to support additional calls to support rich lnput text. Or we could create a new Laszlo Foundation Class to cover rich input text.
After attempting the first approach for a couple of weeks it seems to me to be a good idea to try the second approach. Text is so key to everything throughout the platform and it has just gone through some major changes. It's tough to make changes to the text classes without creating ripple effects and since editable html text hasn't been officially supported before, it seems like a good place to set up a clean break from the past in order to keep things simple.
I think it will probably also reduce confusion to seperate this into it's own class. Currently a <text> field won't be an html text field but will use html tags to style it's appearance at the implementation level. An input text field similarly uses it's parent' text field's html tags to style it, but is not an html input text field. The underlying html tags (formattting) are applied to the entire field at once to style it after any change. Thus the underlying html and input properties of an underlying textfield can both be true and yet it's still not supposed to be an html input textfield. Thus far, that's not really very confusing, it's just an implementation detail But adding, say, an htmlinput property or a richinput property to flag that this field should now be rich input text, seems to me to invite a little confusion.
This Proposal
This proposal is for a new class LzRichEditText (with a richedittext tag) and a LzTextStyle support class that should at least allow the styleing of text with as many traditional rich text syles as possible as a build in feature, with the possible additional capability of allowing folk to create their own tags and attributes if time allows or in the future.
So what do we need? We need a field with an api that we can use to style individual sections of text independently from one another, and to allow selecting blocks of text based on mouse movements, the cursor position or an api call.
A set of styles that we can support out of the box would be encapsulated in the LzTextStyle Class
LzTextStyle Class
- Attributes
- bold (bool)
- underline (bool)
- italic (bool)
- fontface (string)
- textcolor (color)
- textsize (int)
- listitem (bool)
- leftmargin (int)
- align (string: "left" | "right" | "center")
- href (string: "a url")
- target (string: "_blank", "_self", "_parent", "_top")
The RichInputField might inherit from LzText or LzInputText or it might not
there are some questions to consider like will it make the LFC
unnecessarily bigger to have it on it's own and yet duplicating some
functionality. But "first do no harm", so it will be created first as
independent and later on it might be good for someone with a better brain
and more experience with LFC than me to use them.
LzRichInputText Class
- Attributes
- resizable
- embedfonts
- label
- maxlength
- multiline
- selectable
- richtext
- plaintext
- Methods
- parseRichText(rich text document)
- textstyle <= getDefaultTextStyle()
- setDefaultTextStyle( textstyle )
- textstyle <= getTextStyle(int)
- setTextStyle(int, int, textstyle)
- setSelection(int, int)
- insertImg(path to swf or jpg, int)
- int <= getSelectionPosition()
- int <= getSelectionSize()
- int <= getRangeStart(int, a list of one or more textstyle properties) *see "Note:" below
- int <= getRangeEnd( int, a list of one or more textstyle properties) *see "Note:" below
- richtext <= updateData()
Question: Is there a way for updateData to update both richtext and plaintext simultaneously so different folk can bind to different purposes? Does that even make sense?
What would be nice?
It would be nice if a user could create his or her own custom tags and attributes to their text. We are still limited to what we can display in a textbox visually by what the flash player can display, but we can greatly enhance the usefullness of the field by also allowing tags to be added that are not visual, but semantic. So a user could essentially create his or her own tags and then just assign the style attribute of the tag to a textstyle objects as with css. To do this we would want a dictionary of textStyle objects, a dictionary of tag types that you can add and subtract from and add attributes to, and the ability to wrap a selection with a tag.
Note:
The idea here is for an abstract way to select an innermost area of interest. So if the user's selection position is in a block of text and they click on a button to align the block to the left or the right, the programmer can use this to select the innermost block that the align=right tag would affect. So if the internal representation of the text field contains the equivalent of...
dogs frogs and
polyw|ogs
...and the caret is right after the 'w' of polywog, calling getRangeStart(getSelectionPosition,"bold") would give us the index of the p in polywogs.getRangeStart(getSelectionPosition,"align")would give us the index of the d of dogs. If there are two or more attributes listed, it gives us the innermost consistent selection.
I still need to map out how that would get sent out as a document, would it be ... <p align="right"> dogs frogs and <b>polyw|ogs</b> </p>
Any thoughts?
