HtmlTemplate no longer available?

Nov 25, 2008 at 3:39 PM
Hi there,
I "needed" to upgrade to version 2 beta, because on some machines the file-dialog did not open.

but now i got the problem, that HtmlTemplate seems to be no longer available to fit the control in my website-style :-(.
The sample-video still shows that element...

Especially the dhtml-drown-box gives me headache, because I use more than one flajaxian control on one page and the drop down box does not overlay those...

the style-sheet gave me some elements to make the file-box visible at the beginning, but after one upload it diosappears... (?)

thank you for your help

regards.
Christian
Coordinator
Nov 25, 2008 at 4:13 PM
We have changed UI model in 2.0. In the video we don't have HtmlTemplate. Where did you see that?

If you have different file boxes on the same page and you want to apply different CSS styles - that is quite unusual because your UI will not be consistant but you can still do it with no problem.

You have to override: JsFunc_GenerateBaseHtml, JsFunc_GenerateFileRow, JsFunc_DisposeFileRow this is their defaule content, change it from here:

        <script type="text/javascript">
        function GenerateBaseHtml(uploader) {
            // !!!the last argument is the CSS name!!!
            var box = Flajaxian.createElement("div", uploader.get_id() + "_FileBox", "Flajaxian_FileBox");
            uploader.set_fileBoxUI(box); // setting File Box

            var header = Flajaxian.createElement("div", uploader.get_id() + "_FileBoxHeader", "Flajaxian_FileBoxHeader");
            box.appendChild(header); // file box header

            var headerTxt = Flajaxian.createElement("div", uploader.get_id() + "_FileBoxHeaderText", "Flajaxian_FileBoxHeaderText");
            header.appendChild(headerTxt); // header text

            var percTxt = Flajaxian.createElement("span", uploader.get_id() + "_FileBoxHeaderPercentage", "Flajaxian_FileBoxHeaderPercentage");
            headerTxt.appendChild(percTxt);
            uploader.set_percentageUI(percTxt); // setting percentage holder

            headerTxt.appendChild(document.createTextNode("   "));

            var headerArrow = Flajaxian.createElement("div", uploader.get_id() + "_FileBoxHeaderArrowHolder", "Flajaxian_FileBoxHeaderArrowHolder");
            header.appendChild(headerArrow);

            var arrow = Flajaxian.createElement("img", uploader.get_id() + "_FileBoxHeaderArrowImg", "Flajaxian_FileBoxHeaderArrowImg");
            arrow.src = uploader.get_openedArrowUrl();
            arrow.border = "0";
            headerArrow.appendChild(arrow);
            uploader.set_arrowUI(arrow); // setting arrow image

            var fileList = Flajaxian.createElement("div", uploader.get_id() + "_FileBoxFileList", "Flajaxian_FileBoxFileList");
            box.appendChild(fileList);
            uploader.set_fileListUI(fileList); // setting file list

        }
        function GenerateFileRow(uploader, row, container) {
            if (!container) { return; }
            var div = Flajaxian.createElement("div", uploader.get_id()+"_FileBoxFileListRow_"+row.id, Flajaxian.rowClassByState(row.state));
            row.ui = div;

            var closeImg = Flajaxian.createElement("img", uploader.get_id()+"_FileBoxFileListRowCloseBtn_"+row.id, "Flajaxian_FileBoxFileListRowCloseBtn");
            row.btnUI = closeImg;
            closeImg.src = uploader.get_closeBtnUrl();
            div.appendChild(closeImg);

            var span = Flajaxian.createElement("span", uploader.get_id()+"_FileBoxFileListRowText_"+row.id, "Flajaxian_FileBoxFileListRowText");
            row.textUI = span;
            Flajaxian.setElementText(span, Flajaxian.ensureWordLength(row.name, 22));
            div.appendChild(span);

            container.appendChild(div);
        }
        function DisposeFileRow(uploader, row){
            // if your design requires to dispose something you can do it here
            // for example if you have event listeners attachad to the elements of the row
        }
        </script>
        <fjx:FileUploader ID="FileUploader1"
            JsFunc_GenerateBaseHtml="GenerateBaseHtml"
            JsFunc_GenerateFileRow="GenerateFileRow"
            JsFunc_DisposeFileRow="DisposeFileRow" runat="server" >
            <Adapters>
                <fjx:FileSaverAdapter Runat="server" FolderName="UploadFolder" />
            </Adapters>
        </fjx:FileUploader>

To make the list stay after the upload set ClearListWhenQueueEnds="false"

Nov 27, 2008 at 10:23 AM
Thank you very much for your response.
Maybe I did not make clear what I wanted to archive, but with your code-sample I waa able to reach my goal :).

I did not want to use different style-sheet- files for each upload-element, but wanted to change the behavior of
all upload-elements on my page to get a look and feel of my page like it was using Version 1.

Btw. is there a way to use no pictures, but plain text for upload, select, abort etc?
Maybe I should open a new thread for this.

regards,
Christian

Coordinator
Nov 27, 2008 at 4:59 PM
Edited Nov 28, 2008 at 5:50 AM
The reason I use pictures is that Flash has many issues with text, especially if it is not English. And it must be within a Flash because otherwise flash player 10 would not allow to initiate browsing.

Creating those buttons should not be a problem even for a cheep designer.
Nov 27, 2008 at 6:26 PM
that's a good reason to use images ;-)
everything is fine here now.

What I forgot to mention: I LOVE YOUR CONTROL :-). Good work.
Coordinator
Nov 27, 2008 at 6:51 PM
Thanks