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.selectedIn
>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%2F
>>%2F
>>ns.adobe.com%2Fmxml%2F2009&data=02%7C01%7C%7Cbf1b8d82c5da4061324f08d4bf
>>c91
>>6e1%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636344317780413120&sda
>>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%2Fcwik
>>>>i
>>>>.ap
>>>>ache.org%2Fconfluence%2Fdisplay%2FFLEX%2F&data=02%7C01%7C%7Cdb3892d73
>>>>2
>>>>684
>>>>44b90b308d4bfbd1e8d%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6363
>>>>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%2F
>>>>%
>>>>2Fw
>>>>ww.youtube&data=02%7C01%7C%7Cdb3892d73268444b90b308d4bfbd1e8d%7Cfa7b1
>>>>b
>>>>5a7
>>>>b34438794aed2c178decee1%7C0%7C0%7C636344266362069929&sdata=R5ZXrvVdPa
>>>>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.
