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.selectedIndex);
}
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.
