Adding support for textarea widget - what's involved?

[sfinnie]

Hello all

I've found mobl to be a very useful tool for wireframing. Perhaps not
it's intended usage, but handy nonetheless.

However, not having a textarea control (multi-line edit) is a pretty
serious limitation. There's a feature request for this on yellowgrass
(http://yellowgrass.org/issue/mobl/251) however no responses.

I'd be willing to have a crack at adding it; however I'd like to
understand size/complexity of task beforehand. Would appreciate any
pointers/suggestions on what's involved, where to look for examples,
etc.

Many thanks,
Scott.

[Eelco Visser]

Hi Scott,

I would think that should be a matter of defining a new control,
combining the html textarea with mobl's databinding.

cheers,

-- Eelco

--

Associate Professor at Delft University of Technology

Group: Software Language Design and Engineering
Email: e.vi...@tudelft.nl
Homepage: http://eelcovisser.org
Publications: http://researchr.org/profile/eelcovisser
News: http://twitter.com/eelcovisser

[Chris Melman]

hello Scott,
 
The hardest part is to find a good representation how to represent this field on mobile devices.
The best approach is to take the single line input and addapt it for multilines. 
 
you can find in this file https://github.com/mobl/mobl-lib/blob/master/mobl/ui/generic.mobl under control textField
the easiest would be to just change the input html tag however it could be that is is not really easy use one mobile devices.
 
Greetings Chris 
 

> Date: Wed, 16 Jan 2013 05:45:03 -0800
> Subject: [mobl] Adding support for textarea widget - what's involved?
> From: scott....@gmail.com
> To: mo...@googlegroups.com

[Eelco Visser]

But it sounds like Scott is not really concerned with applications for
mobile devices.

-- Eelco

[Chris Melman]

If that is indeed the case then the solution I described should be almost not work at all.

> From: E.Vi...@tudelft.nl
> Date: Wed, 16 Jan 2013 15:04:37 +0100
> Subject: Re: [mobl] Adding support for textarea widget - what's involved?
> To: mo...@googlegroups.com

[Zef Hemel]

I'd say the most trivial definition of a textarea would simply be (untested):

control textArea(s : String) {

   <textarea databind=s/>

}

-- Zef

[sfinnie]

wow - that's a lot easier than I expected.  Thanks folks.

Just tried it quickly by adding control to generic.mobl (source below).  It works in the editor but still shows up as a single line text box on the generated page rather than multiline.  Presume I need to add a style and/or mixin, something akin to textFieldStyle / textFieldStyleMixin?

As an aside: when I look at the source of the generated page, there don't seem to be any html elements corresponding to the controls in the moblpage definition: so no textArea, input, etc.  I'm guessing they're injected by the following call:

mobl.call("j21Complaints.root", [mobl.ref(false), mobl.ref("none")], function() {});

Is that correct?  If so, is there any way to debug what html code is generated for each mobl control?  If not where do they come from?

Thanks,
Scott.
 
extension to generic.mobl as follows:

control textArea(s : String, placeholder : String = null, label : String = null, rows: String = "4", cols: String="50", style : Style = textFieldStyle, onchange : Callback = null, onkeyup : Callback = null) {

  when(label) {
    mobl::label(label, style=textFieldLabelStyle)
  }
  <textArea rows=rows cols=cols class=style placeholder=placeholder databind=s onchange=onchange onkeyup=onkeyup onblur={ scrollUp(); }/>
}

[Chris Melman]

Hi Scott,
 
 
The style would be indeed the most logical anwser why it's a on one line.

The controls are generated js functions that you can find in the js file eqaully named to the file where you define the control
and they are indirectly called by the screen/control, however i guess it's not that line:

mobl.call("j21Complaints.root", [mobl.ref(false), mobl.ref("none")], function() {});
 

Some tools also show the current HTML instead of the raw one that could also help debug the html.
 
greetings Chris

 

 

 

---

Date: Wed, 16 Jan 2013 14:34:42 -0800
From: scott....@gmail.com
To: mo...@googlegroups.com
CC: z...@zef.me
Subject: Re: [mobl] Adding support for textarea widget - what's involved?

[Scott Finnie]

Hi Chris, thanks for the reply.

Creating a new style sorted it as suspected.  What a pleasantly simple experience :-)

Do you want me to submit a patch against the feature on yellowgrass?

- Scott.

[Chris Melman]

 Hi Scott,
 
it is nice that it is working out that easily,
could you create a pull request on github?
 
greetings Chris

---

Date: Thu, 17 Jan 2013 17:00:22 +0000
Subject: RE: [mobl] Adding support for textarea widget - what's involved?

[Zef Hemel]

This may be obvious, but there's technically no need to define the textArea control in generic.mobl, right, you can put it anywhere (although it would indeed be nice to have it available to everybody).

-- Zef

[sfinnie]

no worries, should get done over the weekend.

 - S.

[sfinnie]

yeah, wondered about that Zef.  I'm toying with creating some styles specifically for wireframing: very plain black & white, "style-less" really.  To take attention away from styling and focus on content and behaviour.  Had considered that textArea may not be generally applicable so it could conceivably go in the wireframes module.  But that's probably not the right place either.  I'll post the patch anyway & you can decide if/where to incorporate.

 - S.