7 Replies Latest reply on Dec 2, 2009 4:03 PM by mike_morales

    Can you use a flex application as part of a whole web page?

    mike_morales Level 2

      Hello all,

       

      Have a quick question. I am coming over from a flash developing background, and I commonly used smaller flash files as 'part' of a entire web page.  For example, a small flash video player section with a combo box to select the video to play; this swf file would be sized at about 600px wide by 400px high. Then I would just put that in a div tag and add it to my web page.  I am trying to do this with flex, but I am running into issues. It seems that the actual published swf wants to run at 100% of the browser window size. I tried adjusting these dimensions; first trying within flex in the <application> height and width props, but that didnt do the trick; then tried to just use the published .swf file in the web page, and set its <object> properties to my required height and width, which 'almost' works but still falls apart when the video player's full screen button is pressed.

       

      So, is it possible to use a flex 'app' as part of a web page, or was flex intended to run on its own and 'not' as part of a web page? Thanks in advance!

        • 1. Re: Can you use a flex application as part of a whole web page?
          oldMster Level 3

          I don't know for sure, but you probably need to set the appropriate size in the app.xml descriptor file - there are initial window size/feature settings there.

           

          Mark

          1 person found this helpful
          • 2. Re: Can you use a flex application as part of a whole web page?
            =VA=FyreHeart

            You definitely can. I typically drop the Flash/Flex app into a "mainContent" div within my larger page structure, so my page would look something like this:

             

            <html>

            <style type="text/css">

                 #mainContent {height: 600px; width: 900px;}

            </style>

            <body>

            <div id="topNav">BLAH</div>

            <div id="sideNav">BLAH</div>

            <div id="mainContent">

             

            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                        id="MyFlashApp" width="100%" height="768"
                        codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
                        <param name="movie" value="MyFlashApp.swf" />
                        <param name="quality" value="high" />
                        <param name="bgcolor" value="#FFFFFF" />
                        <param name="allowScriptAccess" value="sameDomain" />
                        <embed src="MyFlashApp.swf" quality="high" bgcolor="#FFFFFF
                            width="100%" height="100%" name="MyFlashApp" align="middle"
                            play="true"
                            loop="false"
                            quality="high"
                            allowScriptAccess="sameDomain"
                            type="application/x-shockwave-flash"
                            pluginspage="http://www.adobe.com/go/getflashplayer">
                        </embed>
                </object>

             

            </div><!-- close mainContent -->

            </body>

            </html>

             

            Note that I'm only using the HTML approach, but the Javascript should work just as well. With the flash set to width=100% and height=100%, it will fill the enclosing div, but that's it. So, if you wanted to make this expand vertically but not horizontally, just set your CSS style to height: 100% and leave width a px or em value. Note that the enclosing divs (i.e. if you had a wrapper div around the navs and mainContent) would also have to expand/contract.

             

            I don't know about the effects of going full screen, though.

            • 3. Re: Can you use a flex application as part of a whole web page?
              cheftimo Level 2

              Yes, you can use the Flex app as part of a web page. You can see one here: http://www.timos.com/timos/severn/SevernVideo.cfm; the video you see is a Flex project. I tried to do this the simplest way I could think of; of course, someone really experienced might do it differently. Here, my main mxml file specifies height="700" plus background and color attributes, that's it.

               

              I use FlexBuilder. This is what I have been doing:

               

              ·        I build the app with its HTML wrapper, just the way FlexBuilder generates it.

              ·        I modify the HTML page (the wrapper) to look like the rest of the pages in the site (in my case, I just apply a Dreamwaeaver template).

              ·        I rename it from say, Wrapper.html to Wrapper.cfm because my site is ColdFusion.

               

              That's all. It works for me.

               

              I hope this helps. If you have other questions, just holler.

               

              Carlos

              1 person found this helpful
              • 4. Re: Can you use a flex application as part of a whole web page?
                mike_morales Level 2

                Thanks for the quick replies! I will give it a try with setting my div height and width properties to my required size and place the swf object within that div, and leave the swf object tag as 100% like mentioned, it should take up the size of my wrapping div.  Thanks again guys, much appreciated!

                • 5. Re: Can you use a flex application as part of a whole web page?
                  mike_morales Level 2

                  Hi Carlos, I tried that method as well, and even though I set my flex app to <application height="400" width="600"> . . . . </application> it still ran at 100% the browser window.  I was able to add some content to the html page, but the swf file pushed it way down the page and didnt run at 600px X 400px.  I'll give it another try.  Thanks for sharing.

                   

                  Mike

                  • 6. Re: Can you use a flex application as part of a whole web page?
                    =VA=FyreHeart Level 2

                    Oh, I should point out that I left height and width off the <mx:Application> tag entirely, and if I set a height/width in any of my application objects (e.g. canvas or datagrid) I set them as percentage values.

                    • 7. Re: Can you use a flex application as part of a whole web page?
                      mike_morales Level 2

                      Cool, I got it to work, but I am now getting a wierd artifact in the lower left of my web page when viewed in explorer (a box with 'false') written inside of it; suspect its a javascript return;  As suggested, I just wrapped the published swf file into a div;  Here is my testing page (see link below) and thanks again for all the very helpful posts!  PS to put a bandaid over the full screen issue, I temporarily disabled the full screen button till I can figure it out.

                       

                      http://216.97.238.61/temp/flex/lamcCardiSunset/vPlayer/