Hi Alex, Thanks. I will look into the custom title bar for a Panel in the FlexJSStore example. Just did a grep on my MXML files; there are quite a few files with TitleWindow:-) Best Regards, Allen
-----Original Message----- From: Alex Harui [mailto:aha...@adobe.com.INVALID] Sent: Saturday, July 01, 2017 11:54 AM To: dev@flex.apache.org Subject: Re: [FlexJS] question about porting an Adobe Flex 3 project to HTML+JS HI Allen, In theory, you can popup a Panel and customize the title bar. And maybe you or someone else will wrap all that up and call it TitleWindow. It depends a bit on what you needed out of TitleWindow and PopUpManager. There isn't a PopUpManager in FlexJS yet because nobody has really needed overlapping floating windows. It turns out you don't need a PopUpManager if there is only one popup on screen at a time. Someday someone will need floating windows and someone will volunteer a PopUpManager. That's the PAYG (pay as you go ) and DAYG (do as you go) nature of FlexJS right now. We are working our way towards better feature parity with Flex and implementing it via incremental functionality in beads. I know Peter is on vacation for a week or so, so maybe someone else will find time to work on a TitleWindow or help you work through it. There is a custom title bar for a Panel in the FlexJSStore example that may be of help. HTH, -Alex On 7/1/17, 8:43 AM, "Allen YANG" <allen.y...@raritan.com> wrote: >Hi Alex, >Hope you are enjoying the holiday weekend! Thank you for the tips; I >will try it later today. Now I am doing some experiment to >convert/rewrite one MXML file in my Flex 3 project just to see how >difficult it is. I picked a pretty small MXML file. It's content is as >below. Immediately I could see mx:TitleWindow is flagged as a problem. >I did replace the xmlns:mx= portion by what you suggested. It appears >that I need to find a replacement for pop-up window. Any tips to help >me convert/rewrite this MXML file will be appreciated. >Best Regards, >Allen > >UpdateCompetitor.mxml file contents: > ><?xml version="1.0" encoding="utf-8"?> ><!-- Simple custom MXML TitleWindow component. > The TitleWindowApp application displays this component. > You cannot run it independently. --> > ><mx:TitleWindow xmlns:fx="library://ns.apache.org/flexjs/express" > xmlns:mx="library://ns.adobe.com/flex/mx" > title="Update Competitor" x="168" y="86" >close="PopUpManager.removePopUp(this);" > borderAlpha="0.75" width="422" height="223" fontSize="11" >color="#000304"> > > <mx:Script> > <![CDATA[ > import mx.managers.PopUpManager; > import org.apache.flex.express.Text; > import org.apache.flex.express.Alert; > > // Event handler for the OK button. > private function func_saveCompetitor():void { > parentApplication.saveUpdateCompetitor(); > PopUpManager.removePopUp(this); > } > > private function func_addcompetitor(event:MouseEvent):void >{ if (competitorlist1.selectedIndex < 0) { Alert.show ("Please select a >competitor to be added.", "Error (Add Competitor)"); return; } > > var name:String = competitorlist1.selectedItem.text; > if ( name == 'Other' ) { > mx.core.Application.application.func_AddOtherCompetitor(); > } > else { > trace ("competitor:" + competitorlist1.selectedIndex + ', ' + >competitorlist1.selectedItem.text); > mx.core.Application.application.acDealCompetitor.addItem(name); > } >} > >private function func_removecompetitor(event:MouseEvent):void { if >(DealCompetitor1.selectedIndex < 0) { Alert.show ("Please select a >competitor record to be removed.", "Error (Remove Competitor)"); >return; } > >parentApplication.acDealCompetitor.removeItemAt(DealCompetitor1.selecte >dIn >dex); >} > >private function func_cancelUpdate():void { >parentApplication.cancelUpdateCompetitor(); >PopUpManager.removePopUp(this); >} > > ]]> > </mx:Script> > <mx:Canvas width="100%" height="100%" backgroundColor="#DCD3D3" >fontSize="9"> > <mx:Label x="10" y="10" text="Competitor list:" fontSize="10"/> > <mx:HBox x="10" y="28" horizontalGap="2" > > <mx:List x="0.5" y="49" height="95" >dataProvider="{parentApplication.acCompetitor}" > labelField="text" id="competitorlist1" doubleClickEnabled="true" > doubleClick="func_addcompetitor(event)" > fontWeight="normal" width="160" fontSize="10"> > </mx:List> > <mx:VBox verticalGap="2"> > <mx:Button label=">" width="46" x="170.5" y="52" >click="func_addcompetitor(event)" toolTip="Add"> > </mx:Button> > <mx:Button label="<" width="46" x="170.5" y="73" >click="func_removecompetitor(event)" toolTip="Remove"> > </mx:Button> > </mx:VBox> > <mx:List x="215" y="51" height="95" >dataProvider="{parentApplication.acDealCompetitor}" > id="DealCompetitor1" fontWeight="normal" width="160" > doubleClickEnabled="true" doubleClick="func_removecompetitor(event)" >fontSize="10"> > </mx:List> > </mx:HBox> > <mx:Label x="219" y="10" text="Selected Competitor(s):" >fontSize="10"/> > <mx:Button label="Cancel" click="func_cancelUpdate();" x="59" >y="131"/> > <mx:Button label="OK" click="func_saveCompetitor();" x="10" y="131"/> > </mx:Canvas> > ></mx:TitleWindow> > >-----Original Message----- >From: Alex Harui [mailto:aha...@adobe.com.INVALID] >Sent: Friday, June 30, 2017 11:20 AM >To: dev@flex.apache.org >Subject: Re: [FlexJS] question about porting an Adobe Flex 3 project to >HTML+JS > >Hi Allen, > >Unlike Flex 3, where the only set of framework components was the MX >components, in FlexJS 0.8.0 we introduced a new set called Express. >Sounds like you've read about beads and strands. The "Basic" set of >components that is the foundation of FlexJS and what Harbs and Yishay >are using is an "assemble-it-yourself" collection of beads and strands. >The "Express" set comes pre-assembled. This should make it much easier >to use although the tradeoff is that your app will be fatter for any >bead that comes pre-packaged that you don't end up using. > >There isn't much documentation explicitly written for Express. It will >just require less adding of beads than using the Basic set. But that >does remind me to correct one thing I said earlier. You will want to >replace: > > import mx.controls > >With: > > import org.apache.flex.express > >Good luck, >-Alex > > >On 6/30/17, 8:02 AM, "Allen YANG" <allen.y...@raritan.com> wrote: > >>Hi Alex and Josh, >>Sorry for my dumb question below: I immediately googled FlexJS >>Express when I saw Josh's answer; but I didn't find something can >>explains what Express is. Could you give me an URL where I can learn about >>it? >>Best Regards, >>Allen >> >>-----Original Message----- >>From: Alex Harui [mailto:aha...@adobe.com.INVALID] >>Sent: Friday, June 30, 2017 10:58 AM >>To: dev@flex.apache.org >>Subject: Re: [FlexJS] question about porting an Adobe Flex 3 project >>to >>HTML+JS >> >>That's a great suggestion. It would be great to see what the learning >>curve is when using Express. >> >>In theory, Allen should be able to replace: >> >> xmlns:mx="http://www.adobe.com/2006/mxml"; >> >> >>With these two lines: >> >> >>xmlns:fx="https://na01.safelinks.protection.outlook.com/?url=http%3A%2 >>F >>%2F >>ns.adobe.com%2Fmxml%2F2009&data=02%7C01%7C%7Cbf1b8d82c5da4061324f08d4b >>f >>c91 >>6e1%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636344317780413120&sd >>a ta= vvq%2BasFtKQg3jZuUxH1gsRR2%2FQzQv7PCvWg3qNHpuCU%3D&reserved=0" >> xmlns:mx="library://ns.apache.org/flexjs/express" >> >> >>And replace: >> >> mx:Script >> >>With: >> >> fx:Script >> >>Same for any mx:Styles. >>And also replace: >> >> import mx.controls >> >>With: >> >> import org.apache.flex.html >> >>Then just try to compile it. There might be a lot of errors, but then >>we can discuss how to migrate to resolve those errors. >> >>-Alex >> >>On 6/30/17, 6:36 AM, "Josh Tynjala" <joshtynj...@gmail.com> wrote: >> >>>If you use the new Express components in FlexJS 0.8, binding beads >>>should be added automatically, so that's one place where things might >>>not necessarily be too different! >>> >>>- Josh >>> >>>On Fri, Jun 30, 2017 at 5:48 AM, Harbs <harbs.li...@gmail.com> wrote: >>> >>>> I suggest you watch the getting started video by Yishay and the VS >>>> Code video by Josh. >>>> >>>> Don’t try to port to Flex 4 first. It should not be significantly >>>>different porting from Flex 3 or Flex 4. If anything, porting from >>>>Flex >>>>3 >>>> should be more straight-forward because the architecture is simpler. >>>> >>>> To set some expectations: >>>> >>>> You cannot expect to just copy your UI code as-is. You will need to >>>>rewrite your view using FlexJS components. Many of them will be >>>>simple replacements (i.e. <js:Label/> instead of <mx:Label/> etc. >>>>but the event subsystem is different, and binding is different (you >>>>need to declare which kind of binding you need), skinning is >>>>different and much of the functionality is different. Layout is >>>>definitely different. >>>> >>>> You will need to wrap your head around strands and beads. >>>>(Basically, you have a list of beads which defines what look and >>>>behavior your components >>>> have.) >>>> >>>> We’re here to help. >>>> >>>> Good luck! >>>> Harbs >>>> >>>> > On Jun 30, 2017, at 3:19 PM, Allen YANG <allen.y...@raritan.com> >>>>wrote: >>>> > >>>> > Hi Team, >>>> > I have a Flex 3 project that was built on Adobe Flash Builder 3.6 >>>> > (SDK >>>> Flex 3.6A); it needs to be ported to support a non-flash environment. >>>>This >>>> program was not originally written by me; but I have software >>>>development experience. >>>> > I installed a trial version of Flash Builder 4.7 on my Windows 7 >>>> machine, then installed JDK 1.8.0_131 and replaced the Flash >>>>Builder's JRE with the new JRE version; installed FlexJS 0.8.0 >>>>using FlexFlex SDK installer, and successfully built and ran the >>>>example project, thanks to Alex Harui's [Using FlexJS with Adobe >>>>Flash Builder]< >>>> >>>>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcwi >>>>k >>>>i >>>>.ap >>>>ache.org%2Fconfluence%2Fdisplay%2FFLEX%2F&data=02%7C01%7C%7Cdb3892d7 >>>>3 >>>>2 >>>>684 >>>>44b90b308d4bfbd1e8d%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636 >>>>3 >>>>4 >>>>426 >>>>6362069929&sdata=IQRMFcTFZ6aF5jO1OXvH8%2F7DDniLk18oZflTZ%2FZ4ZJ8%3D& >>>>r >>>>e >>>>ser >>>>ved=0 >>>> Using+FlexJS+with+Adobe+Flash+Builder> wiki page. I have also gone >>>> Using+FlexJS+with+Adobe+Flash+Builder> over >>>> the Youtube video of [Migrating from Flex to >>>>FlexJS<https://na01.safelinks.protection.outlook.com/?url=https%3A%2 >>>>F >>>>% >>>>2Fw >>>>ww.youtube&data=02%7C01%7C%7Cdb3892d73268444b90b308d4bfbd1e8d%7Cfa7b >>>>1 >>>>b >>>>5a7 >>>>b34438794aed2c178decee1%7C0%7C0%7C636344266362069929&sdata=R5ZXrvVdP >>>>a U Uxy WrUYHXyVB5xpWpq1qPlmdUEUW3%2Fek%3D&reserved=0. >>>> com/watch?v=-FcLs0O-BWQ&list=PLbzoR-pLrL6pLDCyPxByWQwYT>] by Harbs >>>>(I have to admit that video is a bit over my head now) >>>> > >>>> > I am looking for advices what will be the best approach for me to >>>> > do >>>>the >>>> porting. Questions I have are: >>>> > >>>> > (a) Should I start by converting the project from Flex 3 to Flex >>>>4 >>>> first using Flash Builder 4.7's own Flex 4.6.0 SDK; and if it is >>>>successful, then convert the Flex 4 project to HTML+JS using FlexJS >>>>SDK? >>>> Or it is better to directly migrate from Flex 3 to HTML+JS using >>>>FlexJS SDK? >>>> > >>>> > (b) If I convert to Flex 4 first, then I am trying to prepare my >>>> browsers for debugging in a Flash environment. My most frequently >>>> used browser is Google Chrome. I found that there is no easy way >>>> to replace Chrome's flash player, starting Chrome version 57, by >>>> the debug version downloadable from Adobe. Could anyone advise me >>>> how to set that up for debugging? >>>> > >>>> > (c) Could someone recommend the URLs that will help me to get >>>> prepared and educated about porting an existing Flex project by >>>> FlexJS, especially regarding the name spaces and comboBox. >>>> > >>>> > One of my MXML files looks like: >>>> > <?xml version="1.0" encoding="utf-8"?> <mx:Application >>>> > xmlns:mx="http://www.adobe.com/2006/mxml"; >>>> > xmlns:net="flash.net.*" >>>> > verticalAlign="middle" horizontalAlign="center" >>>>layout="absolute" >>>> > xmlns:dropdown="components.*" >>>> > xmlns:controls="com.iwobanas.controls.*" >>>> > xmlns:local="*" >>>> > xmlns:dataGridClasses="com.iwobanas.controls.dataGridClasses.*" >>>> > applicationComplete="appInit();"> >>>> > >>>> > <mx:Script > >>>> > <![CDATA[ >>>> > import mx.effects.RemoveItemAction; >>>> > import mx.collections.ICollectionView; >>>> > include "deallist.as"; >>>> > >>>> > ]]> >>>> > </mx:Script> >>>> > ... >>>> > >>>> > Thanks and Regards, >>>> > Allen >>>> > >>>> > Allen Yang >>>> > Raritan, Inc. >>>> > >>>> > >>>> > >>>> > >>>> > >>>> > ________________________________ >>>> > >>>> > Ce message, ainsi que tous les fichiers joints ? ce message, >>>> > peuvent >>>> contenir des informations sensibles et/ ou confidentielles ne >>>>devant pas ?tre divulgu?es. Si vous n'?tes pas le destinataire de >>>>ce message (ou que vous recevez ce message par erreur), nous vous >>>>remercions de le notifier imm?diatement ? son exp?diteur, et de >>>>d?truire ce message. Toute copie, divulgation, modification, >>>>utilisation ou diffusion, non autoris?e, directe ou indirecte, de >>>>tout ou partie de ce message, est strictement interdite. >>>> > >>>> > >>>> > This e-mail, and any document attached hereby, may contain >>>>confidential >>>> and/or privileged information. If you are not the intended >>>>recipient (or have received this e-mail in error) please notify the >>>>sender immediately and destroy this e-mail. Any unauthorized, >>>>direct or indirect, copying, disclosure, distribution or other use >>>>of the material or parts thereof is strictly forbidden. >>>> >>>> >> >> >>________________________________ >> >>Ce message, ainsi que tous les fichiers joints à ce message, peuvent >>contenir des informations sensibles et/ ou confidentielles ne devant >>pas être divulguées. Si vous n'êtes pas le destinataire de ce message >>(ou que vous recevez ce message par erreur), nous vous remercions de >>le notifier immédiatement à son expéditeur, et de détruire ce message. >>Toute copie, divulgation, modification, utilisation ou diffusion, non >>autorisée, directe ou indirecte, de tout ou partie de ce message, est >>strictement interdite. >> >> >>This e-mail, and any document attached hereby, may contain >>confidential and/or privileged information. If you are not the >>intended recipient (or have received this e-mail in error) please >>notify the sender immediately and destroy this e-mail. Any >>unauthorized, direct or indirect, copying, disclosure, distribution or >>other use of the material or parts thereof is strictly forbidden. > > >________________________________ > >Ce message, ainsi que tous les fichiers joints à ce message, peuvent >contenir des informations sensibles et/ ou confidentielles ne devant >pas être divulguées. Si vous n'êtes pas le destinataire de ce message >(ou que vous recevez ce message par erreur), nous vous remercions de le >notifier immédiatement à son expéditeur, et de détruire ce message. >Toute copie, divulgation, modification, utilisation ou diffusion, non >autorisée, directe ou indirecte, de tout ou partie de ce message, est >strictement interdite. > > >This e-mail, and any document attached hereby, may contain confidential >and/or privileged information. If you are not the intended recipient >(or have received this e-mail in error) please notify the sender >immediately and destroy this e-mail. Any unauthorized, direct or >indirect, copying, disclosure, distribution or other use of the >material or parts thereof is strictly forbidden. ________________________________ Ce message, ainsi que tous les fichiers joints à ce message, peuvent contenir des informations sensibles et/ ou confidentielles ne devant pas être divulguées. Si vous n'êtes pas le destinataire de ce message (ou que vous recevez ce message par erreur), nous vous remercions de le notifier immédiatement à son expéditeur, et de détruire ce message. Toute copie, divulgation, modification, utilisation ou diffusion, non autorisée, directe ou indirecte, de tout ou partie de ce message, est strictement interdite. This e-mail, and any document attached hereby, may contain confidential and/or privileged information. If you are not the intended recipient (or have received this e-mail in error) please notify the sender immediately and destroy this e-mail. Any unauthorized, direct or indirect, copying, disclosure, distribution or other use of the material or parts thereof is strictly forbidden.
