flex - Performance issues when creating custom components. Need TIPS -
i in process of converting excel desktop application flex. excel has far better grid functionality looks better trying recreate manually versus using spark advanceddatagrid/datagrid. creating ton of groups , representing each cell bordercontainer label embedded in it. looks great takes while draw drawing each component iterate through arraycollection.
the code looks similar this
for each(var factor:factor in this._model.assessment.factors) { //draw factor header var factorheaderbackground:bordercontainer = new bordercontainer(); factorheaderbackground.setstyle("backgroundcolor", "0x2d4a6c"); factorheaderbackground.width = 1370; factorheaderbackground.height = 30; var factornamelabel:label = new label(); factornamelabel.percentwidth = 100; factornamelabel.setstyle("verticalalign", "middle"); factornamelabel.setstyle("horizontalalign", "middle"); factornamelabel.setstyle("textalign", "center"); factornamelabel.setstyle("fontsize", "18"); factornamelabel.setstyle("color", "white"); factornamelabel.text = factor.name; factornamelabel.verticalcenter = 1; factorheaderbackground.addelement(factornamelabel) this.chart.addelement(factorheaderbackground); each (var metric:metric in factor.children) { var headergroup:hgroup = new hgroup(); headergroup.gap = 0; /** * adds first section of header (far left) * */ var criteriacolumn:vgroup = new vgroup(); criteriacolumn.gap = 0; var topcriteriaheader:hgroup = new hgroup(); topcriteriaheader.gap = 0; var bottomcriteriaheader:hgroup = new hgroup(); bottomcriteriaheader.gap = 0; //draw top section of criteria header var metricnumberbackground:bordercontainer = new bordercontainer(); metricnumberbackground.setstyle("backgroundcolor", "0x6699cc"); metricnumberbackground.width = 70; metricnumberbackground.height = 30; var metricnumberlabel:label = new label(); metricnumberlabel.percentwidth = 100; metricnumberlabel.setstyle("verticalalign", "middle"); metricnumberlabel.setstyle("horizontalalign", "middle"); metricnumberlabel.setstyle("textalign", "center"); metricnumberlabel.text = 'metric ' + metric.measurenumber; metricnumberlabel.verticalcenter = 1; metricnumberbackground.addelement(metricnumberlabel); var metricnamebackground:bordercontainer = new bordercontainer(); metricnamebackground.setstyle("backgroundcolor", "0x6699cc"); metricnamebackground.width = 300; metricnamebackground.height = 30; var metricnamelabel:label = new label(); metricnamelabel.percentwidth = 100; metricnamelabel.setstyle("verticalalign", "middle"); metricnamelabel.setstyle("horizontalalign", "middle"); metricnamelabel.setstyle("textalign", "center"); metricnamelabel.setstyle("fontsize", "16"); metricnamelabel.setstyle("fontweight", "bold"); metricnamelabel.text = metric.name; metricnamelabel.verticalcenter = 1; metricnamebackground.addelement(metricnamelabel); topcriteriaheader.addelement(metricnumberbackground); topcriteriaheader.addelement(metricnamebackground); criteriacolumn.addelement(topcriteriaheader); //draw bottom section of criteria header var blankbackground:bordercontainer = new bordercontainer(); blankbackground.setstyle("backgroundcolor", "0x6699cc"); blankbackground.width = 70; blankbackground.height = 30; var criterianamebackground:bordercontainer = new bordercontainer(); criterianamebackground.setstyle("backgroundcolor", "0x6699cc"); criterianamebackground.width = 300; criterianamebackground.height = 30; var criterianamelabel:label = new label(); criterianamelabel.percentwidth = 100; criterianamelabel.setstyle("verticalalign", "middle"); criterianamelabel.setstyle("horizontalalign", "middle"); criterianamelabel.setstyle("textalign", "center"); criterianamelabel.setstyle("fontsize", "14"); criterianamelabel.setstyle("fontweight", "bold"); criterianamelabel.text = "criteria"; criterianamelabel.verticalcenter = 1; criterianamebackground.addelement(criterianamelabel); bottomcriteriaheader.addelement(blankbackground); bottomcriteriaheader.addelement(criterianamebackground); criteriacolumn.addelement(bottomcriteriaheader); /** * adds second section of header * */ var currentcolumn:vgroup = new vgroup(); currentcolumn.gap = 0; var bottomcurrentheader:hgroup = new hgroup(); bottomcurrentheader.gap = 0; //draw top section of current header var currentbackground:bordercontainer = new bordercontainer(); currentbackground.setstyle("backgroundcolor", "0x6699cc"); currentbackground.width = 300; currentbackground.height = 30; var currentlabel:label = new label(); currentlabel.percentwidth = 100; currentlabel.setstyle("verticalalign", "middle"); currentlabel.setstyle("horizontalalign", "middle"); currentlabel.setstyle("textalign", "center"); currentlabel.setstyle("fontsize", "18"); currentlabel.setstyle("fontweight", "bold"); currentlabel.text = 'current'; currentlabel.verticalcenter = 1; currentbackground.addelement(currentlabel); currentcolumn.addelement(currentbackground); //draw bottom section of current header var ratingbackground:bordercontainer = new bordercontainer(); ratingbackground.setstyle("backgroundcolor", "0x6699cc"); ratingbackground.width = 60; ratingbackground.height = 30; var ratinglabel:label = new label(); ratinglabel.percentwidth = 100; ratinglabel.setstyle("verticalalign", "middle"); ratinglabel.setstyle("horizontalalign", "middle"); ratinglabel.setstyle("textalign", "center"); ratinglabel.setstyle("fontsize", "10"); ratinglabel.setstyle("fontweight", "bold"); ratinglabel.text = "rating"; ratinglabel.verticalcenter = 1; ratingbackground.addelement(ratinglabel); bottomcurrentheader.addelement(ratingbackground); var manualupdownbackground:bordercontainer = new bordercontainer(); manualupdownbackground.setstyle("backgroundcolor", "0x6699cc"); manualupdownbackground.width = 60; manualupdownbackground.height = 30; var manualupdownlabel:label = new label(); manualupdownlabel.percentwidth = 100; manualupdownlabel.height = 30; manualupdownlabel.setstyle("verticalalign", "top"); manualupdownlabel.setstyle("horizontalalign", "middle"); manualupdownlabel.setstyle("textalign", "center"); manualupdownlabel.setstyle("fontsize", "10"); manualupdownlabel.setstyle("fontweight", "bold"); manualupdownlabel.text = "manual" + "\nup/down"; manualupdownlabel.verticalcenter = -6; manualupdownbackground.addelement(manualupdownlabel); bottomcurrentheader.addelement(manualupdownbackground); var standardweightingbackground:bordercontainer = new bordercontainer(); standardweightingbackground.setstyle("backgroundcolor", "0x6699cc"); standardweightingbackground.width = 60; standardweightingbackground.height = 30; var standardweightinglabel:label = new label(); standardweightinglabel.percentwidth = 100; standardweightinglabel.height = 30 standardweightinglabel.setstyle("verticalalign", "top"); standardweightinglabel.setstyle("horizontalalign", "middle"); standardweightinglabel.setstyle("textalign", "center"); standardweightinglabel.setstyle("fontsize", "10"); standardweightinglabel.setstyle("fontweight", "bold"); standardweightinglabel.text = "standard" + "\nweighting"; standardweightinglabel.verticalcenter = -6; standardweightingbackground.addelement(standardweightinglabel); bottomcurrentheader.addelement(standardweightingbackground); var customweightingbackground:bordercontainer = new bordercontainer(); customweightingbackground.setstyle("backgroundcolor", "0x6699cc"); customweightingbackground.width = 60; customweightingbackground.height = 30; var customweightinglabel:label = new label(); customweightinglabel.percentwidth = 100; customweightinglabel.height = 30; customweightinglabel.setstyle("verticalalign", "top"); customweightinglabel.setstyle("horizontalalign", "middle"); customweightinglabel.setstyle("textalign", "center"); customweightinglabel.setstyle("fontsize", "10"); customweightinglabel.setstyle("fontweight", "bold"); customweightinglabel.text = "custom" + "\nweighting"; customweightinglabel.verticalcenter = -6; customweightingbackground.addelement(customweightinglabel); bottomcurrentheader.addelement(customweightingbackground); var scorebackground:bordercontainer = new bordercontainer(); scorebackground.setstyle("backgroundcolor", "0x6699cc"); scorebackground.width = 60; scorebackground.height = 30; var scorelabel:label = new label(); scorelabel.percentwidth = 100; scorelabel.setstyle("verticalalign", "middle"); scorelabel.setstyle("horizontalalign", "middle"); scorelabel.setstyle("textalign", "center"); scorelabel.setstyle("fontsize", "10"); scorelabel.setstyle("fontweight", "bold"); scorelabel.text = "score"; scorelabel.verticalcenter = 1; scorebackground.addelement(scorelabel); bottomcurrentheader.addelement(scorebackground); currentcolumn.addelement(bottomcurrentheader); headergroup.addelement(criteriacolumn); headergroup.addelement(currentcolumn); headergroup.addelement(rationalecolumn); headergroup.addelement(futurecolumn); headergroup.addelement(futurerationalecolumn); this.chart.addelement(headergroup); var criterialength:int = metric.children.length; var criterioncounter:int = 0; each (var criterion:criterion in metric.children) { criterioncounter += 1; var criteriagroup:hgroup = new hgroup(); criteriagroup.gap = 0; //adds name column var criterionnumberbackground:bordercontainer = new bordercontainer(); criterionnumberbackground.setstyle("backgroundcolor", criterion.iscritical ? "0xff9933" : "0xffffff"); criterionnumberbackground.width = 70; criterionnumberbackground.height = 60; var criterionnumberlabel:label = new label(); criterionnumberlabel.percentwidth = 100; criterionnumberlabel.setstyle("textalign", "center"); criterionnumberlabel.setstyle("horizontalalign", "middle"); criterionnumberlabel.setstyle("verticalalign", "middle"); criterionnumberlabel.setstyle("fontsize", "12"); criterionnumberlabel.text = criterion.measurenumber; criterionnumberlabel.verticalcenter = 1; criterionnumberbackground.addelement(criterionnumberlabel); criteriagroup.addelement(criterionnumberbackground); //adds criteria description column var criteriondescriptionbackground:bordercontainer = new bordercontainer(); criteriondescriptionbackground.width = 300; criteriondescriptionbackground.height = 60; var criteriondescriptionlabel:label = new label(); criteriondescriptionlabel.percentwidth = 100; criteriondescriptionlabel.setstyle("textalign", "left"); criteriondescriptionlabel.setstyle("horizontalalign", "middle"); criteriondescriptionlabel.setstyle("verticalalign", "middle"); criteriondescriptionlabel.setstyle("fontsize", "12"); criteriondescriptionlabel.text = criterion.description; criteriondescriptionlabel.verticalcenter = 1; criteriondescriptionbackground.addelement(criteriondescriptionlabel); criteriagroup.addelement(criteriondescriptionbackground); //add current standard rating column var criterioncurrentstandardratingbackground:bordercontainer = new bordercontainer(); criterioncurrentstandardratingbackground.setstyle("backgroundcolor", criterion.score.currentstandardratingtype.color().tostring()); criterioncurrentstandardratingbackground.width = 60; criterioncurrentstandardratingbackground.height = 60; var criterioncurrentstandardratinglabel:label = new label(); criterioncurrentstandardratinglabel.percentwidth = 100; criterioncurrentstandardratinglabel.setstyle("verticalalign", "middle"); criterioncurrentstandardratinglabel.setstyle("horizontalalign", "middle"); criterioncurrentstandardratinglabel.setstyle("textalign", "center"); criterioncurrentstandardratinglabel.setstyle("fontsize", "12"); criterioncurrentstandardratinglabel.text = criterion.score.currentstandardratingtype.tostring(); criterioncurrentstandardratinglabel.verticalcenter = 1; criterioncurrentstandardratingbackground.addelement(criterioncurrentstandardratinglabel); criteriagroup.addelement(criterioncurrentstandardratingbackground); //add current manual/upgrade combobox column var criterioncurrentmanualupgradedowngradecombobox:combobox = new combobox(); criterioncurrentmanualupgradedowngradecombobox.width = 60; criterioncurrentmanualupgradedowngradecombobox.height = 60; criterioncurrentmanualupgradedowngradecombobox.dataprovider = ratetypecomboboxitems; bindingutils.bindproperty(criterioncurrentmanualupgradedowngradecombobox, "selecteditem", criterion.score, "currentupgradedowngraderatingtype"); bindingutils.bindproperty(criterion.score, "currentupgradedowngraderatingtypefromcombobox", criterioncurrentmanualupgradedowngradecombobox, "selecteditem"); criterioncurrentmanualupgradedowngradecombobox.verticalcenter = 1; criterioncurrentmanualupgradedowngradecombobox.labelfield = "text"; criteriagroup.addelement(criterioncurrentmanualupgradedowngradecombobox); var totalgroup:hgroup = new hgroup(); totalgroup.gap = 0; //draw last row each criterion if(criterioncounter == criterialength) { //stores weights current / future var totalcurrentstandardweight:number = metric.aggregateweights(true, true); var totalcurrentcustomweight:number = metric.aggregateweights(true, false); var totalfuturestandardweight:number = metric.aggregateweights(false, true); var totalfuturecustomweight:number = metric.aggregateweights(false, false); //adds total column var criteriontotalbackground:bordercontainer = new bordercontainer(); criteriontotalbackground.setstyle("backgroundcolor", "0xa6a6a6"); criteriontotalbackground.width = 370; criteriontotalbackground.height = 15; var criteriontotallabel:label = new label(); criteriontotallabel.percentwidth = 100; criteriontotallabel.setstyle("textalign", "center"); criteriontotallabel.setstyle("horizontalalign", "middle"); criteriontotallabel.setstyle("verticalalign", "middle"); criteriontotallabel.setstyle("fontsize", "12"); criteriontotallabel.setstyle("fontweight", "bold"); criteriontotallabel.text = metric.name + "criteria total"; criteriontotallabel.verticalcenter = 1; criteriontotalbackground.addelement(criteriontotallabel); totalgroup.addelement(criteriontotalbackground); //add rating dummy column var criterionratingfillerbackground:bordercontainer = new bordercontainer(); criterionratingfillerbackground.setstyle("backgroundcolor", "0xa6a6a6"); criterionratingfillerbackground.width = 60; criterionratingfillerbackground.height = 15; totalgroup.addelement(criterionratingfillerbackground); //add manual up/down dummy column var criterionupdownfillerbackground:bordercontainer = new bordercontainer(); criterionupdownfillerbackground.setstyle("backgroundcolor", "0xa6a6a6"); criterionupdownfillerbackground.width = 60; criterionupdownfillerbackground.height = 15; totalgroup.addelement(criterionupdownfillerbackground); //add current standard weight column var criterioncurrentstandardweightingtotalbackground:bordercontainer = new bordercontainer(); criterioncurrentstandardweightingtotalbackground.setstyle("backgroundcolor", totalcurrentstandardweight < 100 ? "0xf4f120" : "0xa6a6a6"); criterioncurrentstandardweightingtotalbackground.width = 60; criterioncurrentstandardweightingtotalbackground.height = 15; var criterioncurrentstandardweightingtotallabel:label = new label(); criterioncurrentstandardweightingtotallabel.percentwidth = 100; criterioncurrentstandardweightingtotallabel.setstyle("verticalalign", "middle"); criterioncurrentstandardweightingtotallabel.setstyle("horizontalalign", "middle"); criterioncurrentstandardweightingtotallabel.setstyle("textalign", "center"); criterioncurrentstandardweightingtotallabel.setstyle("fontsize", "12"); criterioncurrentstandardweightingtotallabel.text = totalcurrentstandardweight.tostring(); criterioncurrentstandardweightingtotallabel.verticalcenter = 1; criterioncurrentstandardweightingtotalbackground.addelement(criterioncurrentstandardweightingtotallabel); totalgroup.addelement(criterioncurrentstandardweightingtotalbackground); } this.chart.addelement(criteriagroup); this.chart.addelement(totalgroup); } } } it ends looking after iterating through data. approx 150 - 200 rows. enter link description here
i took out of code more readable , didn't have scroll far gist of doing here. there better way this? possible perform faster since creating ton of components per iteration? tips appreciated, in terms of ui couldn't happier performance ridiculous.
i suggest using 2 following tricks:
put things can combined single separate component (for example each row component). have experienced speed things bit.
create illusion of fast rendering creating first 10-20 rows (to fill visible screen), , create 1 row each 5-10 ms (numbers give idea, , depend on situation). way webpage stay responsive , appear fast.
hope helps!
Comments
Post a Comment