Solved

Expanding Flex area without scrollbars

Posted on 2008-06-11
16
2,369 Views
Last Modified: 2012-08-14
I have an application with a Flex DataGrid component.  When the user clicks a button it adds five visible rows to the DataGrid.  That works well.

When the datagrid expands the flex application adds scroll bars to allow the user to scroll down to view the additional rows.

How can I make the application expand vertically to allow the rows to be shown without scrolling without reloading the swf?
0
Comment
Question by:donjon56
  • 9
  • 7
16 Comments
 
LVL 23

Expert Comment

by:Siva Prasanna Kumar
ID: 21761049
It depends on your layout, if you were using a Vbox whose width and height are 100% and the DataGrid is inside that with out any explicit height and width or with width and height of 100% when the Vbox expands dataGrid expands.

you may like to follow this

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000517.html
0
 
LVL 4

Author Comment

by:donjon56
ID: 21763630
Hmm...  Look at this contrived example.

I want the flex application to expand within the cell and continue using the html scrollbar to scroll up and down.
### HTML ################

<!-- saved from url=(0014)about:internet -->

<html lang="en">
 

<!-- 

Smart developers always View Source. 
 

This application was built using Adobe Flex, an open source framework

for building rich Internet applications that get delivered via the

Flash Player or to desktops via Adobe AIR. 
 

Learn more about Flex at http://flex.org 

// -->
 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 

<!--  BEGIN Browser History required section -->

<link rel="stylesheet" type="text/css" href="history/history.css" />

<!--  END Browser History required section -->
 

<title>${title}</title>

<script src="AC_OETags.js" language="javascript"></script>
 

<!--  BEGIN Browser History required section -->

<script src="history/history.js" language="javascript"></script>

<!--  END Browser History required section -->
 

<style>

body { margin: 0px;}

</style>

<script language="JavaScript" type="text/javascript">

<!--

// -----------------------------------------------------------------------------

// Globals

// Major version of Flash required

var requiredMajorVersion = ${version_major};

// Minor version of Flash required

var requiredMinorVersion = ${version_minor};

// Minor version of Flash required

var requiredRevision = ${version_revision};

// -----------------------------------------------------------------------------

// -->

</script>

</head>
 

<body>
 

<table border=1>

<tr>

<td>LogoImg</td><td style="height: 100"><H1>Header Bar</H1></td>

</tr><tr>

<td style="width: 100">Left Navigation</td>

<td>

<script language="JavaScript" type="text/javascript">

<!--

// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)

var hasProductInstall = DetectFlashVer(6, 0, 65);
 

// Version check based upon the values defined in globals

var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
 

if ( hasProductInstall && !hasRequestedVersion ) {

	// DO NOT MODIFY THE FOLLOWING FOUR LINES

	// Location visited after installation is complete if installation is required

	var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";

	var MMredirectURL = window.location;

    document.title = document.title.slice(0, 47) + " - Flash Player Installation";

    var MMdoctitle = document.title;
 

	AC_FL_RunContent(

		"src", "playerProductInstall",

		"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",

		"width", "${width}",

		"height", "${height}",

		"align", "middle",

		"id", "${application}",

		"quality", "high",

		"bgcolor", "${bgcolor}",

		"name", "${application}",

		"allowScriptAccess","sameDomain",

		"type", "application/x-shockwave-flash",

		"pluginspage", "http://www.adobe.com/go/getflashplayer"

	);

} else if (hasRequestedVersion) {

	// if we've detected an acceptable version

	// embed the Flash Content SWF when all tests are passed

	AC_FL_RunContent(

			"src", "${swf}",

			"width", "${width}",

			"height", "${height}",

			"align", "middle",

			"id", "${application}",

			"quality", "high",

			"bgcolor", "${bgcolor}",

			"name", "${application}",

			"allowScriptAccess","sameDomain",

			"type", "application/x-shockwave-flash",

			"pluginspage", "http://www.adobe.com/go/getflashplayer"

	);

  } else {  // flash is too old or we can't detect the plugin

    var alternateContent = 'Alternate HTML content should be placed here. '

  	+ 'This content requires the Adobe Flash Player. '

   	+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';

    document.write(alternateContent);  // insert non-flash content

  }

// -->

</script>

<noscript>

  	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

			id="${application}" width="${width}" height="${height}"

			codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">

			<param name="movie" value="${swf}.swf" />

			<param name="quality" value="high" />

			<param name="bgcolor" value="${bgcolor}" />

			<param name="allowScriptAccess" value="sameDomain" />

			<embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"

				width="${width}" height="${height}" name="${application}" align="middle"

				play="true"

				loop="false"

				quality="high"

				allowScriptAccess="sameDomain"

				type="application/x-shockwave-flash"

				pluginspage="http://www.adobe.com/go/getflashplayer">

			</embed>

	</object>

</noscript>

</td></tr></table>

</body>

</html>
 
 

### MXML #########################

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="600" viewSourceURL="srcview/index.html">

	<mx:VBox height="100%" width="100%">

		<mx:Button label="Add 5 Rows" click="dg.rowCount = dg.rowCount+5"/>

		<mx:DataGrid id="dg" rowCount="5">

			

		</mx:DataGrid>

	</mx:VBox>

		

</mx:Application>

Open in new window

0
 
LVL 23

Expert Comment

by:Siva Prasanna Kumar
ID: 21765387
Why you want the user to use HTML scroll bar and not Flex scroll bar after full expansion?? how will this differ?
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="10%">

        <mx:VBox height="100%" width="100%">

                <mx:Button label="Add 5 Rows" click="dg.rowCount = dg.rowCount+5"/>

                <mx:DataGrid id="dg" rowCount="5">

                </mx:DataGrid>

        </mx:VBox>

                

</mx:Application>

Open in new window

0
 
LVL 4

Author Comment

by:donjon56
ID: 21773604
I tried using your code, but the Flex application does not load when the Application height and/or width are a percentage value.

The HTML page will be longer than the typical screen resolution.
As the user scrolls, the entire html page will need to scroll.  A second scroll bar in the flex will be confusing to the user..
0
 
LVL 23

Expert Comment

by:Siva Prasanna Kumar
ID: 21773705
Sorry in the above code by mistake height was 10%, make it 100% try this and let me know, you will never get a html scroll bar when the application is exact 100%, can you show me a screen shot if you are getting so.
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">

        <mx:VBox height="100%" width="100%">

                <mx:Button label="Add 5 Rows" click="dg.rowCount = dg.rowCount+5"/>

                <mx:DataGrid id="dg" rowCount="5">

                </mx:DataGrid>

        </mx:VBox>

                

</mx:Application>

Open in new window

0
 
LVL 4

Author Comment

by:donjon56
ID: 21773872
I had already corrected that.

However.  Attached is what I get when I used your code.
Capture.JPG
0
 
LVL 23

Expert Comment

by:Siva Prasanna Kumar
ID: 21774200
I didn't notice your HTML code,

by the way how are you passing these $ parmas?

     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                        id="${application}" width="${width}" height="${height}"
                        codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
                        <param name="movie" value="${swf}.swf" />

also one more question why don't u do the whole thing in flex instead of half HTML and half flash?
0
 
LVL 4

Author Comment

by:donjon56
ID: 21774281
Via Flex Builder.

Same result when I replace placeholders with with actual values.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 23

Expert Comment

by:Siva Prasanna Kumar
ID: 21774484
ok let me explain you a little clearly,

you are just embedding a swf file in html and if you want the html to show the scroll bar based on the height and width of your growing flash file (data Grid) the height of that TD must also increase proportionally. I am not sure if you can use flash object to increase the size of the TD may be you need to use some java script function to which you will pass the new height and width of the datagrid and which updates the TD height accordingly.

Instead of depending on Java script you can put you logo and header bad completely in to flex app and no need of any HTML code at all. you can do the whole thing in flex it self, if you still want to go with html approach let me know.
0
 
LVL 23

Expert Comment

by:Siva Prasanna Kumar
ID: 21774513
0
 
LVL 4

Author Comment

by:donjon56
ID: 21774868
Actually this is a contrived example.  The flash file must reside in an existing Sharepoint Template.  If I can make it work in the example HTML.  I can make it work in the template.
0
 
LVL 23

Accepted Solution

by:
Siva Prasanna Kumar earned 500 total points
ID: 21775205
Awesome, here is the perfectly working code :)
#################### dataGrid.html #########################

<!-- saved from url=(0014)about:internet -->

<html lang="en">
 

<!-- 

Smart developers always View Source. 
 

This application was built using Adobe Flex, an open source framework

for building rich Internet applications that get delivered via the

Flash Player or to desktops via Adobe AIR. 
 

Learn more about Flex at http://flex.org 

// -->
 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 

<!--  BEGIN Browser History required section -->

<link rel="stylesheet" type="text/css" href="history/history.css" />

<!--  END Browser History required section -->
 

<title></title>

<script src="AC_OETags.js" language="javascript"></script>
 

<!--  BEGIN Browser History required section -->

<script src="history/history.js" language="javascript"></script>

<!--  END Browser History required section -->
 

<style>

body { margin: 0px; }

</style>

<script language="JavaScript" type="text/javascript">

<!--

// -----------------------------------------------------------------------------

// Globals

// Major version of Flash required

var requiredMajorVersion = 9;

// Minor version of Flash required

var requiredMinorVersion = 0;

// Minor version of Flash required

var requiredRevision = 28;

// -----------------------------------------------------------------------------

// -->

</script>

</head>
 

<body>

 

<table border=1 id="myFlashTD" height="100%" width= "100%" >

<tr>

<td>LogoImg</td><td style="height: 100"><H1>Header Bar</H1></td>

</tr><tr>

<td style="width: 100">Left Navigation</td>

<td >

<script language="JavaScript" type="text/javascript">

<!--

// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)

var hasProductInstall = DetectFlashVer(6, 0, 65);
 

// Version check based upon the values defined in globals

var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
 

if ( hasProductInstall && !hasRequestedVersion ) {

	// DO NOT MODIFY THE FOLLOWING FOUR LINES

	// Location visited after installation is complete if installation is required

	var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";

	var MMredirectURL = window.location;

    document.title = document.title.slice(0, 47) + " - Flash Player Installation";

    var MMdoctitle = document.title;
 

	AC_FL_RunContent(

		"src", "playerProductInstall",

		"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",

		"width", "100%",

		"height", "100%",

		"align", "middle",

		"id", "dataGrid",

		"quality", "high",

		"bgcolor", "#869ca7",

		"name", "dataGrid",

		"allowScriptAccess","sameDomain",

		"type", "application/x-shockwave-flash",

		"pluginspage", "http://www.adobe.com/go/getflashplayer"

	);

} else if (hasRequestedVersion) {

	// if we've detected an acceptable version

	// embed the Flash Content SWF when all tests are passed

	AC_FL_RunContent(

			"src", "dataGrid",

			"width", "100%",

			"height", "100%",

			"align", "middle",

			"id", "dataGrid",

			"quality", "high",

			"bgcolor", "#869ca7",

			"name", "dataGrid",

			"allowScriptAccess","sameDomain",

			"type", "application/x-shockwave-flash",

			"pluginspage", "http://www.adobe.com/go/getflashplayer"

	);

  } else {  // flash is too old or we can't detect the plugin

    var alternateContent = 'Alternate HTML content should be placed here. '

  	+ 'This content requires the Adobe Flash Player. '

   	+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';

    document.write(alternateContent);  // insert non-flash content

  }

  

  function increaseTableHeight(value) 

{ 

document.getElementById("myFlashTD").style.height= value+150;

}

// -->

</script>

<noscript>

  	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

			id="dataGrid" width="100%" height="100%"

			codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">

			<param name="movie" value="dataGrid.swf" />

			<param name="quality" value="high" />

			<param name="bgcolor" value="#869ca7" />

			<param name="allowScriptAccess" value="sameDomain" />

			<embed src="dataGrid.swf" quality="high" bgcolor="#869ca7"

				width="100%" height="100%" name="dataGrid" align="middle"

				play="true"

				loop="false"

				quality="high"

				allowScriptAccess="sameDomain"

				type="application/x-shockwave-flash"

				pluginspage="http://www.adobe.com/go/getflashplayer">

			</embed>

	</object>

</noscript>

</td></tr></table>

</body>
 

</html>
 
 
 

############################# dataGrid.mxml ########################
 

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off">

<mx:Script>

	<![CDATA[

		 import flash.external.*;

    

        public function callWrapper():void {

            var f:String = "increaseTableHeight";

            var m:String = ExternalInterface.call(f,this.height);

        }

        

        public function addRows():void

        {

        	dg.rowCount = dg.rowCount+5;

        	callWrapper();

        }

	]]>

</mx:Script>

        <mx:VBox height="100%" width="100%">

                <mx:Button label="Add 5 Rows" click="addRows()"/>

                <mx:DataGrid id="dg" rowCount="5">

                </mx:DataGrid>

        </mx:VBox>

                

</mx:Application>

Open in new window

0
 
LVL 4

Author Comment

by:donjon56
ID: 21794681
At first, it seemed to work pretty well.

After 5 clicks of the Add Rows button the datagrid went off the bottom of the grid.

Any ideas why it is doing that?
Capture.JPG
0
 
LVL 23

Expert Comment

by:Siva Prasanna Kumar
ID: 21794814
>>datagrid went off the bottom of the grid.

couldn't get u, can u explain a little more of whats happening?
0
 
LVL 4

Author Comment

by:donjon56
ID: 21795016
After 5 clicks of the button the VBox the data grid was in was larger than the HTML div.
0
 
LVL 23

Expert Comment

by:Siva Prasanna Kumar
ID: 21795353
if u see my code I am increasing the size of complete table no just that TD, are you getting your HTML scroll bar?
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction This article is primarily concerned with ActionScript 3 and generally specific to AVM2.  Most suggestions would apply to ActionScript 2 as well, and I've noted those tips that differ between AS2 and AS3. With the advent of ActionS…
Sometimes you know that one object has a specific child in it, but you can't find the child. This happened to me when I was trying to code some actionScript to make a toolbar work with its embedded buttons.  My partner had created the toolbar usi…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user how to use the auto adjust feature and what the different options do. When your video is not working right you can choose the auto adjust feature to help choose your settings.

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now