[Seaside] Grid like entry with autosave

[Johan Brichau]

Hi Sanjay,

Mind that a Seaside brush only determines the html element that gets rendered. If you want to render a date, there is no html element that is ‘best’ to use (and hence no brush that is best to use).
Most of the time, a date will be rendered as text, but possibly you want to render some more markup to allow styling via css (i.e. adding css classes). If you want to render the date in an input field, mind that html5 does define a ‘date’ type, but the state of the implementation in current browsers is limited [1]. 

A word of advice: if you manipulate financial data, do not use Floats but Fractions (or ScaledDecimal). Even if the customer says it should not be that precise, do not use Floats.

If you want to get going, try to render all textInputs in the table.
Next, use jQuery and add the serialization of the text input field on change:

html textInput
	onChange: (html jQuery this serializeThis);
	callback: [:val | … ];
	with: value

Set anchors for adding lines, removing lines, etc.. 
This will give you a functional page.

Now, once the table becomes large or you want snappier client-side behaviour, you will need to step into more javascript and ajax for adding lines, removing lines.
Eventually, you will need to use event delegation rather than add a change script to every text input (because the page will become too large).

Just go in steps. Iterate and learn new things.

Hope this helps
Johan

[1] http://caniuse.com/#search=date


> On 08 Jan 2015, at 18:06, Sanjay Minni <sm at planage.com> wrote:
> 
> I have some basic questions while trying to code for a UI below
> 
> 	html table: [  
> 		self transactions dataLines do: [ :tr |
> 			html tableRow: [
> 				html tableData: <code here for date>
> 				html tableData: <code here for receipt / payout indicator >
> 				html tableData: [  
> 					html textInput value: [:value | tr amount: value]; with: tr amount. ].
> 				html tableData: [ 
> 					html anchor callback: [ self removeTransaction: tr ]; with: 'delete'. 
> ].
> 				]. 
> 			]. 
> 		].
> 
> Questions given the display will be as per below :
> 1. which is the best brush to use for date in this case
> 2. which brush to use for amount - this is financial amount usually 2 or 3
> decimals, right justified and the digits are comma ',' separated and should
> I use a float in the model (Using Pharo 4)
> 3. what is the usual method to get empty lines below - else I will have to
> code for an 'add' button
> 4. most important - ... so far ... this is not part of a form - what brushes
> / tags should I use if the parent will be a form (there will be other parts
> in the screen above, below and aside the part below
> 
> thanks
> Sanjay
> 
> 
> 
> 
> 
> 
> Sanjay Minni wrote
>> Hi,
>> 
>> I want to make a grid like entry widget on a collection with auto save
>> (say like excel / google sheets behaves). pls advice on how to go about
>> the UI. I looked as the examples - Forms where to add / delete a separate
>> sub screen comes on - that is not what I am looking for.
>> 
>> Simply put it has a date, a symbol / text  and an amount
>> i should be able to edit inline, keep adding at end, or delete a link /
>> button at end of each line
> <http://forum.world.st/file/n4798280/GridScreenMockup.jpg> 
>> 
>> thanks
>> Sanjay
> 
> 
> 
> 
> 
> -----
> ---
> Regards, Sanjay
> --
> View this message in context: http://forum.world.st/Grid-like-entry-with-autosave-tp4798280p4798406.html <http://forum.world.st/Grid-like-entry-with-autosave-tp4798280p4798406.html>
> Sent from the Seaside General mailing list archive at Nabble.com <http://nabble.com/>.
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org <mailto:seaside at lists.squeakfoundation.org>
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside <http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20150109/1c324cfb/attachment-0001.htm