PDA

View Full Version : lzx file (solo-flash) loading time issues ?


naray
05-29-2008, 04:08 AM
hi i'm developing an webapplication with laszlo , whereas all my LZX file are embed in to my Html page in SOLO mode
okay let me come to the point !!!
Initially i was hurt B4 by the performance issues and after following some of the basic rules i'm quite satisfied
Now i gonna through Jmeter testing , my html gets loaded in a fraction of a second but the object (My lZX file - in solo mode) which is embed in the html page is
initializing only after 2 to 3 seconds to the max !!
this is totally irritating after clicking some link my html page getloaded and the size and width which is been allocated for the lzx - flash file is Blank , get loaded after 2 to 3 seconds
I think some may be many of you would suffer the same , i would greatly appreciate any ideas or tricks .

thanks
badly seeking for any kinda comments

sYnie
05-29-2008, 04:28 AM
Hey there,

have you tested the splash object?

Mario

naray
05-29-2008, 05:12 AM
hey yes for some of the heavy weight lzx file (big form)!! i have used <splash /> tag
but i don't want to give for all the lzx files !!!
actually i want to know when the HTML file is loaded is there any possiblities of loading the embed object simultaneously.. Or by default will it take some seconds ?
am i making sense here ?

rcyeager
05-29-2008, 06:22 AM
The browser controls the loading sequence of an HTML page and its contents.

Your HTML page is probably only a couple of KB, so sure it loads faster. The minimal size of an LZX app is just under 100KB. Your app may be much larger...200KB is fairly typical.

Note that the default Laszlo splash screen is around 10KB for the SWF animation...for small apps, that could mean a 10% increase in the download size.

What are you measuring? The time it takes the browser to load the SWF file (say 100KB-200KB), or the time it takes the SWF app to initialize and appear?

Have you tried measuring with a dummy test program, say one like this:

<canvas bgcolor="red"/>

There are ways to make the initialization of an LZX app quicker, by using deferred instantiation for starters. Another is to use dynamic libraries, such that the main app is as small as possible.

Robert Yeager
http://www.qrowd.com
http://www.cooqy.com

naray
05-29-2008, 06:34 AM
hey robert i'm talking abt the time taken by the browser to load the swf file

anyways i like this point Another is to use dynamic libraries, such that the
main app is as small as possible.
will try to implement this in the future


Thanks

rcyeager
05-29-2008, 07:50 AM
In that case, you will also want to remove any statically-linked resources from your app, too. Use the developer console and review the compilation statistics.

Also, note that the default Laszlo components are rather portly in terms of their size, due to the SWF images that compose them. For my apps, I use custom controls that use drawviews for rendering. Besides eliminating the linked-in image resources for the SWF runtime, resulting in around a 25% smaller download footprint, another benefit is that the controls can be colored in the DHTML runtime.

Robert Yeager
http://www.qrowd.com
http://www.cooqy.com

naray
05-30-2008, 04:41 AM
yes Robert , my swf file size exceeds 170kb,
and as you said i started using dynamic libraries guided by these links LINK 1 (http://wiki.openlaszlo.org/Dynamic_Libraries) & LINK 2 (http://wiki.openlaszlo.org/Import_Statement)

i reduced the file size up to 136Kb and the initialization time is very much impressive

the import tag does the trick ;)

anyway my happiness does not last longer .

this what i have done B4 implementing dynamic lib
see the attached sample text file sample.lzx

if i click the edit or delete inside the grid
the Handler Event call the class which extends the window and will able to see the pop up window which carries the particular row information

I have tried by using 4 library file
1. main.lzx ---- holds my grid alone
where i imported
<import name="updateview" href="update_lib.lzx" stage="defer"/> // holds my UpdateContactview class(refer sample.lzx)
<import name="editview" href="edit_lib.lzx" stage="defer"/> // holds the detailswindow class
<import name="delview" href="delete_lib.lzx" stage="defer"/> // holds the deletewindow class

2.when i click the edit/delete i could able to call the imported class file
(i.e) a new empty window opens(without any UpdateContactview information ) after closing that window if i try clicking the same no action appears

can you/someone guide me how to use the dynamic lib properly

i would be thankful if you demonstrate the same with my sample.lzx
thanks

rcyeager
05-30-2008, 05:15 AM
I don't understand your question at all.

Dynamic libraries load asynchronously, so maybe you need to wait until they load before instantiating any classes within them, via the onload event handler.

Robert Yeager
http://www.qrowd.com
http://www.cooqy.com

naray
05-30-2008, 09:36 PM
I'm learning Laszlo ,May be I'm not quite enough in explaining it technically
my problem is , i do not know whether i used the dynamic library in perfection or not
i get the error message like so
snippetLoaded loadmc= «LoadObj#10| undefined (loading)» «LzLibraryLoader#11| undefined (loading)»


contactdisplay.lzx
<canvas proxied="false">

<import name="updateview" href="update_lib.lzx" stage="defer"/>
<import name="editview" href="edit_lib.lzx" stage="defer"/>
<method event="oninit">
canvas.gridview.apply();
</method>
<dataset name="dset">
<phonebook>
<contact firstname="Mathew" lastname="Hogard" email="mathew@test.com" phoneno="324-234-2344"/>
<contact firstname="George" lastname="Fernandes" email="George@test.com" phoneno="643-244-2476"/>
<contact firstname="Michel" lastname="Bevan" email="Michel@test.com" phoneno="624-234-2344"/>
<contact firstname="John" lastname="Smith" email="John@test.com" phoneno="326-264-2344"/>
<contact firstname="David" lastname="Hussey" email="David@test.com" phoneno="324-264-2424"/>
</phonebook>
</dataset>
<state name="gridview" apply="false">
<grid sizetoheader="false"
showhlines="true" x="20" y="100" shownitems="5">
<datapath xpath="dset:/*" replication="lazy" />

<gridcolumn width="95" sortable="false" resizable="false"><b>Action</b>
<view name="fname1" x="0" layout="axis:x; spacing:1">
<text font="Verdana" fontsize="13" fgcolor="blue" x="0">Edit</text>
<datapath xpath="@firstname" replication="lazy" />
<handler name="onclick">
canvas.editview.load();
canvas.updateview.load();
// var details = new detailswindow(canvas);
// details.datapath.setFromPointer(this.datapath);
</handler>
<handler name="onload" reference="canvas.editview" >
canvas.ewindow.apply();

</handler>
<handler name="onload" reference="canvas.updateview" >
canvas.uwindow.apply();
</handler>
</view>
</gridcolumn>

<gridtext datapath="@firstname" width="150" editable="false"> <b>First Name </b> </gridtext>
<gridtext datapath="@lastname" width="160" editable="false"><b> Last Name </b> </gridtext>
<gridtext datapath="@email" width="185" editable="false"><b> Email </b> </gridtext>
<gridtext datapath="@phoneno" width="146" editable="false"><b> Phone No </b> </gridtext>

</grid>

</state>



<state name="ewindow" apply="false">
<detailsWindow />
</state>

<state name="uwindow" apply="false">
<updateContactView />
</state>




</canvas>


edit_lib.lzx


<library>

<class name="detailsWindow" extends="window" closeable="true" width="300" height="220" x="40" y="10">

<updateContactView name="updateContact">
<button x="210" y="325">
<text x="23" y="4" fgcolor="#FFFFFF"><b>Update</b></text>
<handler name="onclick">
// something
</handler>
</button>
</updateContactView>
</class>

</library>


update_lib.lzx

<library>

<class name="updateContactView" extends="view" visible="true" x="20" height="120">

<text font="Verdana" fontsize="13" fgcolor="#606060" x="10" y="20">First Name:</text>
<edittext name="firstName" datapath="@firstname" x="120" y="20" />

<text font="Verdana" fontsize="13" fgcolor="#606060" x="10" y="50">Last Name:</text>
<edittext name="lastName" datapath="@lastname" x="120" y="50" />

<text font="Verdana" fontsize="13" fgcolor="#606060" x="10" y="80">Email:</text>
<edittext name="email" datapath="@email" x="120" y="80" />

<text fgcolor="#606060" x="10" y="110">Phone No:</text>
<edittext x="120" y="110" name="phoneno" datapath="@phoneno" />

<!-- Update Method -->

<method name="updateData" args="action">
// something come's here
</method>

<!-- Delete Method -->

<method name="deleteData" args="action">
// something comes here
</method>

</class>

</library>

i know i'm wrong somewhere or totally but plz guide me
My main intention is to make this work that how my sample.lzx works

thanks for your patience

rcyeager
05-31-2008, 06:17 PM
Yes, it is evident you are a learner...that is some fairly strange code.

Anyway, the problem is that file edit_lib.lzx contains an instance of the class defined in update_lib.lzx...so you cannot load edit_lib.lzx until the load of update_lib.lzx completes first.

Since these are such trivially small classes, using dynamic libraries in this situation doesn't provide much benefit, in terms of decreasing the main app size.

Robert Yeager
http://www.qrowd.com
http://www.cooqy.com