tag:blogger.com,1999:blog-46297282327785970472024-03-13T12:16:45.068-07:00Making redui.netArtemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.comBlogger17125tag:blogger.com,1999:blog-4629728232778597047.post-81502588124327440082014-05-07T14:19:00.005-07:002014-05-07T14:20:00.990-07:00Important change in the databinding mechanism<br />
Imagine you have an object:<br />
<br />
<pre style="background-color: rgb(236, 236, 236) !important; border: 1px solid rgb(211, 211, 211) !important; font-family: Consolas, 'Courier New', Courier, monospace !important; font-size: 13px; height: auto; line-height: 19.017696380615234px; outline: 0px; overflow: hidden; padding: 0.5em; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">var</span> customerData = {
_id: 1,
getId: <span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">function</span> () { <span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">return</span> 1; },
getActualId: <span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">function</span> () { <span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">return</span> <span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">this</span>._id; }
}</pre>
<br />
If you want to bind the textbox to it, previously you had 2 options:<br />
<br />
1. <b>Trivial case:</b> bind to <i>_id </i>property<br />
<br />
<pre style="background-color: rgb(236, 236, 236) !important; border: 1px solid rgb(211, 211, 211) !important; font-family: Consolas, 'Courier New', Courier, monospace !important; font-size: 13px; height: auto; line-height: 19.017696380615234px; outline: 0px; overflow: hidden; padding: 0.5em; vertical-align: baseline; white-space: pre-wrap;">{
<span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"type"</span>: <span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"textbox"</span>,
<span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"name"</span>: <span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"idTextBox"</span>,
<span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"label"</span>: <span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"Id"</span>,
<span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"bindsTo"</span>: <span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"_id"</span>
}</pre>
<br />
2. <b>More interesting:</b> bind to <i>getid </i>property<br />
<br />
<pre style="background-color: rgb(236, 236, 236) !important; border: 1px solid rgb(211, 211, 211) !important; font-family: Consolas, 'Courier New', Courier, monospace !important; font-size: 13px; height: auto; line-height: 19.017696380615234px; outline: 0px; overflow: hidden; padding: 0.5em; vertical-align: baseline; white-space: pre-wrap;">{
<span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"type"</span>: <span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"textbox"</span>,
<span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"name"</span>: <span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"idTextBox"</span>,
<span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"label"</span>: <span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"Id"</span>,
<span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"bindsTo"</span>: <span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"getId"</span>
}</pre>
<br />
Support for binding to functions was added to support ko.observables. And since <i>getId </i>returns the constant value, it worked. However, binding to <i>getActualId </i>was not useful, because it is using '<b>this</b>', but was called as a function.<br />
<br />
Now you have an option number 3:<br />
<br />
<pre style="background-color: rgb(236, 236, 236) !important; border: 1px solid rgb(211, 211, 211) !important; font-family: Consolas, 'Courier New', Courier, monospace !important; font-size: 13px; height: auto; line-height: 19.017696380615234px; outline: 0px; overflow: hidden; padding: 0.5em; vertical-align: baseline; white-space: pre-wrap;">{
<span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"type"</span>: <span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"textbox"</span>,
<span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"name"</span>: <span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"idTextBox"</span>,
<span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"label"</span>: <span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"Id"</span>,
<span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"bindsTo"</span>: <span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"getActualId"</span>
}</pre>
<br />
Because now to retrieve the value <i>getActualId </i>will be called as a method of <i>customerData </i>object.<br />
<br />
<br />
As a reminder, <b>only the last property the control binds to can be a function</b>.<br />
<br />
So given the object like this:<br />
<br />
<pre style="background-color: rgb(236, 236, 236) !important; border: 1px solid rgb(211, 211, 211) !important; font-family: Consolas, 'Courier New', Courier, monospace !important; font-size: 13px; height: auto; line-height: 19.017696380615234px; outline: 0px; overflow: hidden; padding: 0.5em; vertical-align: baseline; white-space: pre-wrap;"><span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">var</span> customerData = {
_id: 1,
getId: <span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">function</span> () { <span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">return</span> <span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">this</span>._id; },
_address: {
_street: <span style="background-color: transparent; border: 0px; color: #a31515; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">"Via Roma"</span>,
getStreet: <span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">function</span> () { <span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">return</span> <span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">this</span>._street; },
}
getAddress: <span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">function</span> () { <span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">return</span> <span style="background-color: transparent; border: 0px; color: blue; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">this</span>._address; },
};</pre>
<br />
You can bind to "<i>_address.getStreet</i>", but you cannot bind to "<i>getAddress.getStreet</i>"<br />
<br />
Hope it helps.Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-39175679625391078752014-05-04T04:26:00.000-07:002014-05-04T04:26:47.802-07:00Monthly Update: April<div class="separator" style="clear: both; text-align: left;">
So, in April I got 115 visitors.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-iaDOcEpbhM4/U2YhYa6NlPI/AAAAAAAAF8g/Msl1h9lo6oI/s1600/visitors4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-iaDOcEpbhM4/U2YhYa6NlPI/AAAAAAAAF8g/Msl1h9lo6oI/s1600/visitors4.png" /></a></div>
<br />
This is less than in March end even in February, however, I have a very good ratio of people staying on my site for longer than 30 seconds:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-v-D6q8_6qAQ/U2YiNSmRfwI/AAAAAAAAF8o/0pw5FwxpBsY/s1600/ratio4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-v-D6q8_6qAQ/U2YiNSmRfwI/AAAAAAAAF8o/0pw5FwxpBsY/s1600/ratio4.png" /></a></div>
<br />
This means there were 48 people who actually were curious enough to go over the examples and understand a bit more about the library.<br />
<br />
<br />
<ul>
<li>What did make you interested?</li>
<li>What is missing?</li>
</ul>
<br />
<br />
It would be great to hear from you, 48 people who stayed over 30 seconds.Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-37801962589801733352014-04-28T13:35:00.000-07:002014-04-28T13:35:03.754-07:00RedUI Goes in BetaAfter 1 and half year of work, RedUI reaches it's BETA!<br />
<br />
See the complete list of changes <a href="https://redui.codeplex.com/wikipage?title=Release%20Notes">here</a>.Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-46476057614662782442014-04-26T14:30:00.002-07:002014-04-26T14:30:45.240-07:00Some important internal methodsIn case anyone is interested in creating new controls for redui, here is the description of the most important internal methods that the controls rely upon.<br />
<b><br /></b>
<b>initializeControlFromModel</b><br />
<br />
Creates and initializes any redui control from model.<br />
Internally calls 'create' and 'initializeFromModel' control-specific handlers.<br />
It's only necessary to directly call this method from the parent control that is not a generic container (i.e. does not extend IContainerControl), like ContextMenu, that does not allow to add any control type as a child, thus does not extend IContainerControl interface.<br />
For the controls that are generic controls, like GroupBox, AccordionPanel etc, it's enough to call initializeInnerControls.<br />
<br />
<b>initializeInnerControls</b><br />
<br />
Creates and initializes inner controls of a given control from model.<br />
Used by container controls (GroupBox, AccordionPanel etc) to initialize the controls collection.<br />
<br />
<b>toHtml</b><br />
<br />
Returns the HTML for a given control.<br />
Relies on mustache template engine to render the HTML.<br />
Templates are retrieved once and cached on the _templates object.<br />
Templates are retrieved with redui version as a url query parameter, that forces the new version of template to be loaded.<br />
<br />
<b>localize</b><br />
<br />
Localizes the label.<br />
This function is used called from templates to localize every label/text defined in the model.<br />
Localization only happens in Globalize.js is found.<br />
<br />
<b>bind</b><br />
<br />
Standard behavior for data binding that is attached to every databound redui control.<br />
Should only be called as a method of a redui control (requires 'this').<br />
<br />
<b>bindRecursively</b><br />
<br />
Walks through the hierarchy of controls and binds them to the data.<br />
Makes the data object (or it's property, in case the control is inside container that changes the context)<br />
accessible from the bindingContext property.<br />
If the property that the control is bound to is a function, calles the function.<br />
If the function has a property 'subscribe' it is considered to be ko.observable, in which case the control<br />
automatically subscribes to changes.<br />
Also binds all the inner controls to the data. Normally it is not required to call this method directly.<br />
<br />
<b>updateElementValue</b><br />
<br />
Updates the value of the rendered element, the value that is seen by user.<br />
For that, relies to the control-specific handler.<br />
Normally it is not required to call this method directly.<br />
<br />
<b>validateControl</b><br />
<br />
Performs the control validation.<br />
In the current implementation is aware of the control internal structure, so walks the inner controls on its own.<br />
<br />
<b>activateControl</b><br />
<br />
Helper to call the control-specific activation handler.<br />
Generic containers (GroupBox, AccordionPanel etc) don't have to call this method directly<br />
and can activate their children by calling activateInnerControls.<br />
<br />
<b>activateInnerControls</b><br />
<br />
Activates inner controls of the given control.<br />
<br />
<b>subscribeToChange</b><br />
<br />
Subscribes the databound control to change event.<br />
Change triggers binding update.<br />
<br />
<br />Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-52613516250353808642014-04-24T15:02:00.004-07:002014-04-24T15:04:40.786-07:00How to create a pager in javascript<h3>
1. Take a piece of paper and draw</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ElOoJ9DaNTU/U1mHz935SUI/AAAAAAAAF7w/je8T-4s_06Q/s1600/req.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-ElOoJ9DaNTU/U1mHz935SUI/AAAAAAAAF7w/je8T-4s_06Q/s1600/req.jpg" /></a></div>
<div>
<br /></div>
<h3>
2. Test it on paper</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-BpybyTayHlU/U1mH7eCA08I/AAAAAAAAF74/RBON2Ftj2oA/s1600/test.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-BpybyTayHlU/U1mH7eCA08I/AAAAAAAAF74/RBON2Ftj2oA/s1600/test.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both; text-align: left;">
3. Pseudo-code</h3>
<div>
<pre><span style="color: green;">// Check if there are pages at all</span>
<span style="color: blue;">if</span> (pagesTotal < 1) {
<span style="color: blue;">return</span>;
}
<span style="color: green;">// First visible page</span>
firstVisiblePageNo = pageNo - visiblePositions / 2 + 1 = 12
<span style="color: green;">// Adjsut first visible page</span>
<span style="color: blue;">if</span> (firstVisiblePageNo < 1) {
firstVisiblePageNo = 1
}
<span style="color: green;">// Number of pages in sequence</span>
sequentialPages = visiblePositions
lastPageNoInSequence = firstVisiblePageNo + visiblePositions - 1 = 17
<span style="color: green;">// Adjust last page in sequence</span>
<span style="color: blue;">if</span> (lastPageNoInSequence > pagesTotal) {
lastPageNoInSequence = pagesTotal
<span style="color: green;">// If reached the last pages on the right, get more pages from the left</span>
<span style="color: blue;">if</span> (lastPageNoInSequence - firstVisiblePageNo + 1 < visiblePositions) {
firstVisiblePageNo = lastPageNoInSequence - visiblePositions + 1;
}
<span style="color: green;">// Adjsut first visible page</span>
<span style="color: blue;">if</span> (firstVisiblePageNo < 1) {
firstVisiblePageNo = 1
}
}
<span style="color: blue;">if</span> (lastPageNoInSequence < pagesTotal) {
sequentialPages -= 2;
showEllipsis = <span style="color: blue;">true</span>
}
<span style="color: blue;">for</span> (currentPageNo = firstVisiblePageNo; currentPageNo <= lastPageNoInSequence; currentPageNo++) {
render page(currentPageNo)
}
<span style="color: blue;">if</span> (showEllipsis) {
render ellipsis
render page(pagesTotal)
}
</pre>
<br /></div>
<div>
<h3>
4. Debug it on paper (or in notepad)</h3>
</div>
<div>
<pre>1 2 {3 4 [5] 6} 7 8 9 10 11 12 13 14 15
{1 [2] 3 4 5 6} 7 8 9 10 11 12 13 14 15
{1 [2] 3 4}
1 2 3 4 5 6 7 8 9 {10 11 12 13 [14] 15}
1 2 3 [4] 5 6 7
<span style="color: green;">// Const</span>
visiblePositions = 6
<span style="color: green;">// Given</span>
pageNo = 14
pagesTotal = 15
</pre>
<br /></div>
<div>
<h3>
5. Code it</h3>
</div>
<div>
<h3>
6. Test it</h3>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-RolYzJ0H8po/U1mJOgYk_gI/AAAAAAAAF8E/XVUX0XYQdho/s1600/test.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-RolYzJ0H8po/U1mJOgYk_gI/AAAAAAAAF8E/XVUX0XYQdho/s1600/test.png" /></a></div>
<br />
<h3>
7. Enjoy</h3>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-r4dEjbtJ6kQ/U1mJlM7KB4I/AAAAAAAAF8M/8Wk91gaSHm8/s1600/result.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-r4dEjbtJ6kQ/U1mJlM7KB4I/AAAAAAAAF8M/8Wk91gaSHm8/s1600/result.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both; text-align: left;">
Do you like the result?</h3>
<div>
Feedback appreciated!</div>
Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-50517145294683153422014-04-23T14:52:00.000-07:002014-04-23T14:52:06.591-07:00Anatomy of a Control TemplateIn this post I will explain some rules I use to create a template for a control.<br />
Let's look at the template for a TextBox control.<br />
<br />
<pre><span style="color: blue;"><</span><span style="color: #a31515;">div</span> <span style="color: red;">id</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">{{id}}_template</span><span style="color: black;">"</span> <span style="color: red;">class</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">redui-textbox-outer redui-valid{{#model.cssClass}} {{model.cssClass}}{{/model.cssClass}}{{#model.isHidden}} redui-hidden{{/model.isHidden}}</span><span style="color: black;">"</span><span style="color: blue;">></span>
{{#model.label}}<span style="color: blue;"><</span><span style="color: #a31515;">label</span> <span style="color: red;">for</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">{{id}}</span><span style="color: black;">"</span> <span style="color: red;">class</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">redui-textbox-label</span><span style="color: black;">"</span><span style="color: blue;">></span>
<span style="color: blue;"><</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>{{#_localize}}{{model.label}}{{/_localize}}: {{#model.isRequired}}*{{/model.isRequired}}<span style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
<span style="color: blue;"></</span><span style="color: #a31515;">label</span><span style="color: blue;">></span>{{/model.label}}
<span style="color: blue;"><</span><span style="color: #a31515;">input</span> <span style="color: red;">id</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">{{id}}</span><span style="color: black;">"</span> <span style="color: red;">name</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">{{name}}</span><span style="color: black;">"</span> <span style="color: red;">data-name</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">{{name}}</span><span style="color: black;">"</span> <span style="color: red;">class</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">redui-textbox redui-focusable</span><span style="color: black;">"</span> <span style="color: red;">type</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">{{model.inputType}}</span><span style="color: black;">"</span> <span style="color: blue;">/></span>
<span style="color: blue;"><</span><span style="color: #a31515;">div</span> <span style="color: red;">id</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">{{id}}_validationerrorbox</span><span style="color: black;">"</span> <span style="color: red;">class</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">redui-validation-errorbox</span><span style="color: black;">"</span><span style="color: blue;">></span><span style="color: blue;"></</span><span style="color: #a31515;">div</span><span style="color: blue;">></span>
{{#contextMenu}}{{{_toHtml}}}{{/contextMenu}}<span style="color: blue;"></</span><span style="color: #a31515;">div</span><span style="color: blue;">></span>
</pre>
<br />
<br />
What we see here?<br />
<br />
<h4>
1. Main tag</h4>
Every control has an HTML tag that it is build around. For the TextBox it is, natuarally, the input tag.<br />
<br />
<pre><span style="color: blue;"><</span><span style="color: #a31515;">input</span> <span style="color: red;">id</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">{{id}}</span><span style="color: black;">"</span> <span style="color: red;">name</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">{{name}}</span><span style="color: black;">"</span> <span style="color: red;">data-name</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">{{name}}</span><span style="color: black;">"</span> <span style="color: red;">class</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">redui-textbox redui-focusable</span><span style="color: black;">"</span> <span style="color: red;">type</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">{{model.inputType}}</span><span style="color: black;">"</span> <span style="color: blue;">/></span>
</pre>
<br />
This is the most important part of the template.<br />
<br />
<b>id</b> - stores the unique id of the control, something like 'redui_control_123'. Unique id are assigned to every control upon its creation.<br />
<br />
<b>name</b> - the name of the control, that you provide in the model.<br />
<br />
for example, if you defined you TextBox as follows:<br />
<br />
<pre>{
<span style="color: #a31515;">"name"</span>: <span style="color: #a31515;">"firstNameTextBox"</span>,
<span style="color: #a31515;">"type"</span>: <span style="color: #a31515;">"textbox"</span>,
<span style="color: #a31515;">"label"</span>: <span style="color: #a31515;">"First Name"</span>,
<span style="color: #a31515;">"bindsTo"</span>: <span style="color: #a31515;">"firstName"</span>
}
</pre>
<br />
<br />
the <b>name </b>attribute will be filled with '<b>firstNameTextBox</b>'.<br />
<br />
<b>data-name</b> - the same as name attribute. Not every HTML tag allows name attribute, but data-name attribute is always available.<br />
<br />
<b>class </b>- here we put the class that reflects the control type. It has prefix 'redui-' followed by the type that you use in the model. For instance, for TextBox it is '<b>redui-textbox</b>'.<br />
<br />
<h4>
2. Label</h4>
Most of the controls have label<br />
<br />
<pre>{{#model.label}}<span style="color: blue;"><</span><span style="color: #a31515;">label</span> <span style="color: red;">for</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">{{id}}</span><span style="color: black;">"</span> <span style="color: red;">class</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">redui-textbox-label</span><span style="color: black;">"</span><span style="color: blue;">></span>
<span style="color: blue;"><</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>{{#_localize}}{{model.label}}{{/_localize}}: {{#model.isRequired}}*{{/model.isRequired}}<span style="color: blue;"></</span><span style="color: #a31515;">span</span><span style="color: blue;">></span>
<span style="color: blue;"></</span><span style="color: #a31515;">label</span><span style="color: blue;">></span>{{/model.label}}
</pre>
<br />
Label is optional, so when it is not set, this part of the template is not rendered. This part of the template is almost identical for every control, only class is different.<br />
<br />
<h4>
3. Outer div</h4>
One HTML tag is not enough even for the simplest control. In case of TextBox, it requires at least 2: input and label. To make it easier to target various tags with CSS-selectors they all are wrapped in one outer div.<br />
<br />
<pre><span style="color: blue;"><</span><span style="color: #a31515;">div</span> <span style="color: red;">id</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">{{id}}_template</span><span style="color: black;">"</span> <span style="color: red;">class</span><span style="color: blue;">=</span><span style="color: black;">"</span><span style="color: blue;">redui-textbox-outer redui-valid{{#model.cssClass}} {{model.cssClass}}{{/model.cssClass}}{{#model.isHidden}} redui-hidden{{/model.isHidden}}</span><span style="color: black;">"</span><span style="color: blue;">></span>
</pre>
<br />
By convention, this div has an id that matches the control id with suffix '_template'.<br />
Second, it has class that matches the control class with suffix '-outer', in our case, 'redui-textbox-outer'.<br />
<br />
The most important, <b>when you apply the custom CSS class in the model, it is set on this outer element</b>.<br />
<br />
So for example, if apply class 'myControl',<br />
<br />
<pre>{
<span style="color: #a31515;">"name"</span>: <span style="color: #a31515;">"firstNameTextBox"</span>,
<span style="color: #a31515;">"type"</span>: <span style="color: #a31515;">"textbox"</span>,
<span style="color: #a31515;">"label"</span>: <span style="color: #a31515;">"First Name"</span>,
<span style="color: #a31515;">"bindsTo"</span>: <span style="color: #a31515;">"firstName"</span>,
<b><span style="color: #a31515;">"cssClass"</span>: <span style="color: #a31515;">"myControl"</span></b>
}
</pre>
<br />
It will be set on the outer div.<br />
<br />
Naturally, visibility ('redui-hidden' class) is also applied to the outer div.<br />
<br />
<h4>
4. Validation div</h4>
<br />
By convention, this div has an id that matches the control id with suffix '_validationerrorbox'.<br />
For controls that support validation this div is used to show the validation message.<br />
<br />
<h4>
5. Context menu</h4>
<br />
Every control can have a context menu attached to it. To show it you need to add this section:<br />
<br />
<pre>{{#contextMenu}}{{{_toHtml}}}{{/contextMenu}}
</pre>
<br />
<h4>
6. Inner controls</h4>
<br />
For the container controls you need to render inner controls. The following section takes care of it:<br />
<br />
<pre>{{#controls}}
{{{_toHtml}}}
{{/controls}}
</pre>
<br />
<br />
<h4>
Finally, some important classes used in templates:</h4>
<br />
<b>redui-hidden</b><br />
Hides the control<br />
<br />
<b>redui-focusable</b><br />
When the window is open, the focus goes to the first control that has redui-focusable class<br />
<br />
<b>redui-valid</b><br />
Controls whether validation div should be visible<br />
<br />
<b>redui-activated</b><br />
For some controls the special behavior is enabled upon activation. For example, GridViewColumn subscribes to click event to allow sorting. To avoid the double activation, the class redui-activated is set on such a control after the behavior is activated<br />
<br />
<b>redui-disabled</b><br />
This class is used together with commands. When the command is not available (canExecute returns false), controls that are bound to this command get the class redui-disabledArtemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-44974591942933864832014-04-21T14:50:00.001-07:002014-04-24T08:32:29.621-07:00GridView Customization: chosen approachVisual decision I made in the end:<br>
<br>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-PXegtXc0ApQ/U1WRODpLHmI/AAAAAAAAF7g/dfWduJx7rWc/s1600/customize.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-PXegtXc0ApQ/U1WRODpLHmI/AAAAAAAAF7g/dfWduJx7rWc/s1600/customize.png"></a></div>
<br>
From the programming point of view, the standard context menu can be overriden. It will only be used if left empty, otherwise, the context menu that you explicitly specified will be used.<br>
<br>
In addition to that, I will make <b>customizeGridView </b>the method of the IGridView interface, so it will be overridable too. (<b>customizeGridView</b> is called by the command bound to the "Select Columns..." menu item).<br>
<br>
I feel that this gives a developer enough freedom and in the same time, if you don't do anything, it all just works.Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-17966573062328522372014-04-18T12:44:00.001-07:002014-04-24T08:29:51.301-07:00GridView customization: choosing the approachWhat I want to do is to allow user to choose which columns are visible and in which order they should be shown. For that I am going to create a window with a ListBuilder, like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-vYtWm5Cpy5U/U1F_kBMcO_I/AAAAAAAAF6o/arKzFtnPIKI/s1600/SelectColumns.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-vYtWm5Cpy5U/U1F_kBMcO_I/AAAAAAAAF6o/arKzFtnPIKI/s1600/SelectColumns.png" /></a></div>
<br />
<br />
The question is how to activate this functionality?<br />
<br />
The options I have:<br />
<br />
<h4>
1. Add some visual element to the template</h4>
This could be nice, if I could find an elegant way to fit it into the current visual design (I am not saying it is amazing design now, I am saying that I might make it even worse).<br />
<br />
This is something that I see in the Windows Explorer<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-H6V9PPysmPA/U1F_v7njs_I/AAAAAAAAF6w/FX2zIR6knXg/s1600/explorer_way.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-H6V9PPysmPA/U1F_v7njs_I/AAAAAAAAF6w/FX2zIR6knXg/s1600/explorer_way.png" /></a></div>
<br />
<br />
The problem is, triggering this functionality should be as easy on touch screens as with the keyboard/mouse.<br />
Second problem, it becomes an integrated part of the GridView and it is more difficult to make it optional.<br />
<br />
<h4>
2. Add the context menu to every GridView column</h4>
This is one of the possible answers for the previous item. Instead of adding the completely new visual element, I could just add a context menu, which already exists.<br />
<br />
This works in Windows Explorer too, and this is something you can find in many other applications, like VisualStudio or MS Outlook.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-b6u_QKLReJM/U1GAk0FIFDI/AAAAAAAAF7M/v69mShOEbVY/s1600/vs_way.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-b6u_QKLReJM/U1GAk0FIFDI/AAAAAAAAF7M/v69mShOEbVY/s1600/vs_way.png" /></a></div>
<br />
<br />
While it solves the "design problem", it doesn't completely solves other issues.<br />
<br />
<h4>
3. Move this functionality completely out of the GridView and force developer to trigger it</h4>
In this case I simply implement the method that creates a window allowing to select/reorder columns, add it to the GridView and allow developer to call it when it is required.<br />
<br />
You can see this approach in Windows services console or task manager.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Xpq1sJBWRVk/U1GABKaLU5I/AAAAAAAAF7A/EIbdB_lYAhk/s1600/services_way.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-Xpq1sJBWRVk/U1GABKaLU5I/AAAAAAAAF7A/EIbdB_lYAhk/s1600/services_way.png" /></a></div>
<br />
<br />
This gives a developer a freedom to enable/disable this feature, implement it differently and choose how it is triggered.<br />
Of course, you don't get this feature for free anymore.<br />
<br />
Something that I noticed, for the task manager in Windows 8, they moved this feature out of the main manu and now it is accessible through the context menu.<br />
<br />
<h4>
4. Do not implement this functionality at all.</h4>
This is also an option. I can simply create an example code that demonstrates how to do it, and that's it.<br />
<br />
The good thing, I spare myself a lot of problems, like localization of that window. The bad thing... Well, I don't think anyone will ever get that far to even see this example.<br />
<br />
<br />
So I am still choosing. Any suggestions, anyone?Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-72515881229880029562014-04-15T13:36:00.000-07:002014-04-15T13:36:17.601-07:00Control's Life<div class="separator" style="clear: both; text-align: left;">
Today I will explain the life cycle of the redui control.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-lf73IPdLINE/U02Qo5eVzeI/AAAAAAAAF6Q/4i1dab2YOfg/s1600/lifecycle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-lf73IPdLINE/U02Qo5eVzeI/AAAAAAAAF6Q/4i1dab2YOfg/s1600/lifecycle.png" /></a></div>
<h3>
Create</h3>
At this stage control gets all the properties and methods.<br />
Most of the properties will be still empty, but the most important ones: <b>id</b> and the <b>type</b> should be set.<br />
<br />
<h3>
Initialize from model</h3>
At this point control model is validated and normalized.<br />
Optional model properties that were not provided are set to their default values. For example, TextBox label, if not provided, is set to "".<br />
<br />
Also at this point has a chance to pre-calculate some values. For example, ComboBox options will be retrieved at this moment, packed into objects, stocked into the array and saved on the options property.<br />
<br />
At last, it is a moment (and responsibility) of a control to create and initialize its inner controls.<br />
<br />
<h3>
Render to HTML</h3>
All the rendering logic is inside the template. If a control has inner controls, they should be rendered through the template.<br />
<br />
<h3>
Activate</h3>
This is a time to subscribe to DOM events.<br />
One of the most important events is change, which allows databound control to update the object it is bound to.<br />
<br />
As with the other stages, the control is responsible to activate every inner control!<br />
<br />
<h3>
Set Value</h3>
This will only happen for databound controls.<br />
All control has to do is to apply the passed value to the DOM element. For example, TextBox needs to set the value of its INPUT element.<br />
<br />
<h3>
Get Value</h3>
This will only happen for databound controls. Control needs to return the updated value from the DOM element.Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-37978502595180610692014-04-15T12:47:00.001-07:002014-04-15T12:47:16.736-07:00Welcome BackIt's been a while since I wrote to this blog.<br />
<br />
So what happened since the last post?<br />
<br />
<ol>
<li>Now I have a website: <a href="http://redui.net/">redui.net</a></li>
<li>I have a big section with <a href="http://redui.net/examples/">examples</a> which explain almost every feature of the library</li>
<li>I have a <a href="http://redui.net/mailclientdemo/">demo application</a> which shows what you can do</li>
<li>I recorded couple of videos that no one is watching</li>
<li>I have a <a href="https://www.nuget.org/packages/redui/">nuget package</a> that allows you to start development immediately</li>
<li>I have people who come to my site:<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-S1d9c3iMHBQ/U02Lt2gKxOI/AAAAAAAAF6A/IgImnBtB830/s1600/visitors.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-S1d9c3iMHBQ/U02Lt2gKxOI/AAAAAAAAF6A/IgImnBtB830/s1600/visitors.png" /></a></div>
</li>
<li>I have 8 people following me on <a href="https://redui.codeplex.com/">codeplex</a></li>
</ol>
<div>
This is a incredibly motivating to see people coming, even for the short visit. So thank you all!</div>
<div>
<br /></div>
<div>
But I think it was a big mistake to stop blogging.</div>
<div>
I will try to fix it.</div>
Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-31208261340867270422012-09-16T13:57:00.001-07:002014-04-15T12:33:11.810-07:00Data Binding<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-UrSiUDuz9qQ/UFY9Gde_gHI/AAAAAAAABiY/c9VBZlNMLgc/s1600/redui_databind.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-UrSiUDuz9qQ/UFY9Gde_gHI/AAAAAAAABiY/c9VBZlNMLgc/s640/redui_databind.png" /></a></div>
<br />Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-27451855345753534512012-09-16T03:57:00.000-07:002014-04-15T12:33:06.497-07:00Event Registration<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-pM3Od_GmOT4/UFWwaVTvB_I/AAAAAAAABeY/sfmOBVEEQmA/s1600/redui_events.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-pM3Od_GmOT4/UFWwaVTvB_I/AAAAAAAABeY/sfmOBVEEQmA/s640/redui_events.png" /></a></div>
<br />Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-88953820922020276272012-09-14T15:57:00.002-07:002014-04-15T12:32:59.987-07:00Xml VS Json<div class="separator" style="clear: both; text-align: left;">
Question still to be answered: Xml or Json as a UI modeling language?</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-oKeTkLRj95E/UFO2GWwlH2I/AAAAAAAABeI/ScN3skBmnn0/s1600/xml_vs_json.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-oKeTkLRj95E/UFO2GWwlH2I/AAAAAAAABeI/ScN3skBmnn0/s640/xml_vs_json.png" /></a></div>
<br />Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-22876975177582220862012-09-14T15:54:00.002-07:002014-04-15T12:32:50.895-07:00Control Rendering From Templates<div class="separator" style="clear: both; text-align: left;">
I din't want to hardcode the rendering part, so I decided to use html templates instead. Templates will be delivered as a part of the library, but it is a standard html which can be easily adjusted.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-zeHnyZluvBI/UFO1KdopaYI/AAAAAAAABeA/a4ng9_x8Sp8/s1600/redui_templates.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-zeHnyZluvBI/UFO1KdopaYI/AAAAAAAABeA/a4ng9_x8Sp8/s640/redui_templates.png" /></a></div>
Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-62880861758236337412012-09-11T15:45:00.001-07:002014-04-15T12:32:42.210-07:00The Very First Draft<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-4HCXNMHiYJo/UE-6itGwq9I/AAAAAAAABdw/crGre96qfho/s1600/redui_initial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-4HCXNMHiYJo/UE-6itGwq9I/AAAAAAAABdw/crGre96qfho/s640/redui_initial.png" /></a></div>
<br />
The idea should be clear enough from the screenshot, but I will add couple of remarks.<br />
<br />
As I said, all UI will be rendered on the client by the library. Still you should be able to tell the library what to render. Options are:<br />
- give it an html, which will be 'animated' by js. This will work only in the simplest scenarios. Once we get to the gridview, for example, we will have to generate the rows dynamically, based on the data received from the server.<br />
- give it some kind of html templates, that then be completed by js. But it cannot be just any html. Js will be too dependent on what is exactly in this html to be able to process it correctly.<br />
- use properties and parameters and set everything through the code. This is kind of java way, which has 4 IDE's and not a single one with the visual form editor. WinForms also use this appoach generating tons of ugly code in partial classes. For me it's just too much code that does not do anything.<br />
- and finally, it could be some new markup (xml or json), that describes a UI in terms of windows and controls, similar to XAML.<br />
<br />
I like this option because:<br />
- this seems like the right abstraction level. If I am describing the treeview, why should I describe it as a bunch of divs and not call it treeview?<br />
- this makes the markup independent of implementation.<br />
- there is no data in this markup - only presentation. You will need to bind the data to the control before it is rendered.<br />
- customers can customize UI, say, by adding they own fields<br />
- this markup is easy to generate with the tools<br />
<br />
Maybe it's too much words, but, as I said, the picture should be enough already.Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-16173449021681684472012-09-10T15:19:00.002-07:002014-04-15T12:32:33.737-07:00The Future Web ApplicationIs it over? Is the battle between smart windows client and stupid web client over? Is it the smart web client who won it?<br />
<br />
Let's face it: no one want rich client anymore, if it is a Windows client. Even Microsoft. Everyone wants to access applications from iPads, Samsung tablets and integrate them with their wikis and confluence pages.<br />
<br />
It's time to bite the bullet. Say goodbye to the bad guy. Embrace the web.<br />
<br />
OK, web. What does it mean, exactly? ASP.NET? ASP.NET MVC? Yes, I am a Microsoft-oriented developer, cannot really think of anything else.<br />
<br />
This is what we have today.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-XcncVh5zKqA/UE5h3ZeEqRI/AAAAAAAABdQ/veRZ4Str7n0/s1600/web_today.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-XcncVh5zKqA/UE5h3ZeEqRI/AAAAAAAABdQ/veRZ4Str7n0/s640/web_today.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The topmost layer of your application server tier (here for simplicity called 'MVC') generates HTML, spits it out to the client where js libraries ensure 'progressive enhancement'.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
To hell with progressive enhancement. We are talking now about full-blown enterprise application, say, ERP system, in the web. There is no progressive enhancement, if you don't have javaScript, too bad, you have no ERP.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I must admit, ASP.NET MVC does a pretty good job helping me to produce the HTML out of my C# classes. But then the fairy tale ends and we enter the gates of hell: namely, model-view-controller paradigm going along with the stateless nature of the web so well. Actions are fine, but there is no road back, it's only forward. The whole UI lifecycle is a constant movement forward, from point A to B then to C and never, never back to A. </div>
<div class="separator" style="clear: both; text-align: left;">
You are on the customers list page, then you go to the next page to add a new customer, then you go to the list of customers. Not back to the list of customers, but to yet another list of customers. Drag along all your filter state, you'll never return to pick them up.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Want to save data? Postback the form. Oh, you are updating the grid? Put all your stuff in the form hidden field. No, honestly, I cannot live like this.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This is the future:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-dKF0xGl5ziI/UE5mVq-oQQI/AAAAAAAABdg/l1M5PhV_F2M/s1600/web_tomorrow.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-dKF0xGl5ziI/UE5mVq-oQQI/AAAAAAAABdg/l1M5PhV_F2M/s640/web_tomorrow.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
All the server calls are requests for the data, not the UI. REST is the protocol, JSON is a data format. Do I hear someone saying 'oData"?</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
And what do you know, we have a stateful client, in the web.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Missing piece, apparently, is a library, UI framework that could render the UI completely on the client and make the development easy. Guess what I am working on.</div>
Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0tag:blogger.com,1999:blog-4629728232778597047.post-88004372686003631622012-09-09T07:47:00.002-07:002012-09-09T11:25:16.642-07:00RedUI First PostThis is a blog dedicated to the RedUI project: rich UI client library written in js.<br />
<br />
Why do we need one more UI framework?<br />
<br />
Simply because no other framework is good enough. Honestly, I am a bit shocked that in our times there is still no gridview html tag. Or treeview, or listview, or datepicker. Coming from desktop applications world, this sounds like a stone age.<br />
<br />
Surprisingly, this doesn't concern web developers much, neither does loosely typed syntax of js, the lingua franca of the web, for some reason. Neither the fact that there is no other choice, really.<br />
<br />
But I don't want to spend so much time on UI as they do. I want to be able to ask for the treeview, bind it to the datasource and go on with implementing business features.<br />
<br />
<a href="http://jqueryui.com/">jQuery UI</a> might be a solution sometime.<br />
<a href="http://www.kendoui.com/">KendoUI</a> looks great, but is ridiculously expensive.<br />
<a href="http://www.sencha.com/products/extjs/">Ext JS</a> looks amazing, but also not cheap.<br />
<br />
And there are billions of others, and most of them are crap. I need something of my own.Artemhttp://www.blogger.com/profile/08844811973973825279noreply@blogger.com0