[Seaside] Re: Grid like entry with autosave

[Sanjay Minni]

Thanks Johan,

let me digest this ... My focus was input fields

- Date input if possible templated as 'dd/mm/yyyy' (a picker only to popup
when the field is in focus)
- an amount input field as 999,999,999.00 right justified 
(in India we also have 99,99,999.00) and in some countries / currencies /
inventory quantities etc 3 digits after the decimal is required and should
stop at that i.e. no inputs on overflow

regards  
Sanjay


Johan Brichau-2 wrote
> 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@

> > 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
>> &lt;http://forum.world.st/file/n4798280/GridScreenMockup.jpg&gt; 
>>> 
>>> thanks
>>> Sanjay
>> 
>> 
>> 
>> 
>> 
>> -----
>> ---
>> Regards, Sanjay
>> --
>> View this message in context:
>> http://forum.world.st/Grid-like-entry-with-autosave-tp4798280p4798406.html
>> &lt;http://forum.world.st/Grid-like-entry-with-autosave-tp4798280p4798406.html&gt;
>> Sent from the Seaside General mailing list archive at Nabble.com
>> &lt;http://nabble.com/&gt;.
>> _______________________________________________
>> seaside mailing list
>> 

> seaside at .squeakfoundation

>  &lt;mailto:

> seaside at .squeakfoundation

> &gt;
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> &lt;http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside&gt;
> 
> _______________________________________________
> seaside mailing list

> seaside at .squeakfoundation

> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside





-----
---
Regards, Sanjay
--
View this message in context: http://forum.world.st/Grid-like-entry-with-autosave-tp4798280p4798756.html
Sent from the Seaside General mailing list archive at Nabble.com.