Proof of Concept

OpenXML SDK currently being used in one of the POC. It is used basically to parse our Excel template file(s). We have several attempt to parse different sort of patterns of Excel spreadsheets. This POC is very crucial to us, because we do not want to use Office Interop to access the file. The use of the SDK will allow us to park the prototype using IIS (a simple Windows server with IIS is sufficient and without the need to install Microsoft Office at the server) and allowing our client to access our sites to validate. Do check our POC-001 for OpenXML SDK.

jQuery and jQueryUI will be used in PTE basically to give rich user experience. Meaning that we do not want just to render the UI. We would like to mimic a bit real life application to ensure that our clients know that the Text Box is a date picker. Also Developer can get creative when using PTE where they could do the following:

$(document).ready(function() {
    //interaction JavaScript code here
});

The following is a sample code that can be used with PTE. It illustrates a control from PteDetail 1 to control PteDetail 2 in which being encapsulate in a div id "disapprovedNew".

$(document).ready(function () {
    $("input[name$='Txt1']").focusout(function () {
        var check = $("input[name$='Txt1']").val();
        if (check != "") {
            $("#disapprovedNew").attr("style", "visibility: visible");
        } else {
            $("#disapprovedNew").attr("style", "visibility: hidden");
        }
        return false;
    });
});

PTE will generate controls on the fly (during runtime). part of PTE process, it will inject id for each controls created allowing developer to use jQuery selector to select the control to add more rich interaction experience. This process entirely not necessary to know in order to use PTE. PTE will inject necessary code on the fly for minimal user interaction, however to extreme customization, this technique can be implemented along with PTE.

Bootstrap will be at the heart of PTE. We will use Bootstrap for its' css. Most Web Developer usually when they are working on the HTML, they will be utilizing table.

<table width='100%' cellpadding='0' cellspacing='0'>
    <tr>
        <td width='150px'><asp:Label runat='server' text='Label 1' /></td>
        <td width='*'><asp:TextBox id='TextBox1' runat='server' /></td>
    </tr>
</table>

If you have a complicated form to be done, there will be a lot of indentation from right to far left. And for some reason I don't like this approach. It is simpler, but I don't like it very much. Using Bootstrap will address this issue. Since we can use its' form css to render our UI. Please refer to Bootstrap website for more detail.

POC-002.png

For POC-002, I have worked on integrating Bootstrap, jQuery and jQueryUI in the composite control. The idea basically for control(s) that we want to apply respective scripts will be rendered together. I am still looking for the best way of storing necessary templates for jQuery in the solution.

Last edited Nov 5, 2012 at 1:35 AM by alfaruq, version 5

Comments

No comments yet.