You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by leokan23 <le...@best-web.gr> on 2017/01/12 16:02:15 UTC
FlexJS - How to use MDL?
Hi,
i am trying to learn a bit about the Flexjs in order to use it in an
upcoming project. I want to try the MDL (i have used it before in js
projects) but I can't find a tutorial on how to. I tried the <mdl: tag but
it is not found in neither 0.0.7 nor 0.0.8. Do i need an external library or
something?
Thank you.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Leo,
I just pushed fix for issue with MDL library, now it should be visible in
FDT as default. Build server now is stuck for some reason, but once it get
back nightly build will have it.
I will let you know!
Do not hesitate to share with us your feedback how is going with setup and
your project! :)
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14479.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
I'm working on changing these MDLExample application in order to have
presentation snippet of code similar to this one [1]
[1] https://getmdl.io/components/index.html#buttons-section
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14466.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Hi Leo,
It looks like FDT Team fixed issue :) ->
http://bugs.powerflasher.com/jira/browse/FDT-3716
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14623.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Ahh! Yes Josh! I forgot about that! :) In the other words with this FDT can
be quite useful :)
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14489.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by Josh Tynjala <jo...@gmail.com>.
You can also simply open the web browser's built in debugging tools if your
IDE doesn't support debugging. Browsers like Chrome and Firefox understand
source maps too, so you'll see the original ActionScript.
I wrote a couple of tutorials:
https://nextgenactionscript.com/tutorials/source-maps-chrome-debug-actionscript/
https://nextgenactionscript.com/tutorials/source-maps-firefox-debug-actionscript/
- Josh
On Jan 12, 2017 11:40 PM, "piotrz" <pi...@gmail.com> wrote:
> Hi Leo,
>
> It just came up to my mind, that if you use FTD and Material Design Library
> you probably won't be able to Fully debug your application. If I ready
> correctly support debugging at some point only on SWF sight without to much
> care about JS. We did in MDL lib only JS sigh - It means that if you use
> some native control from FlexJS let say Button - after compilation you will
> be able to launch flash and js application and this button will look
> exactly
> same.
> In case of MDL you will have only good looking application in JS.
>
> Visual Studio Code is the right choice with help of "source map" [1] plugin
> it's IDE which is capable of good debugging. You will read more in links
> provided in my previous post.
>
> [1]
> https://developers.google.com/web/tools/chrome-devtools/
> javascript/source-maps
>
> Piotr
>
>
>
> -----
> Apache Flex PMC
> piotrzarzycki21@gmail.com
> --
> View this message in context: http://apache-flex-users.
> 2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14482.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Looking forward to your progress! :)
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14486.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by leokan23 <le...@best-web.gr>.
I will be starting with the UI part, so debugging isn't too much trouble for
now. I can always use another IDE. My main IDE for Flex (AIR) is Flash
Builder and I just started with FDT for flexjs and because FB crashes all
the time .
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14485.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Hi Leo,
It just came up to my mind, that if you use FTD and Material Design Library
you probably won't be able to Fully debug your application. If I ready
correctly support debugging at some point only on SWF sight without to much
care about JS. We did in MDL lib only JS sigh - It means that if you use
some native control from FlexJS let say Button - after compilation you will
be able to launch flash and js application and this button will look exactly
same.
In case of MDL you will have only good looking application in JS.
Visual Studio Code is the right choice with help of "source map" [1] plugin
it's IDE which is capable of good debugging. You will read more in links
provided in my previous post.
[1]
https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14482.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Leo,
I was able to find what has happened in FDT, but don't know the root cause.
Please go to "Preferences" (of your project) -> "Build Path" -> "SDK
Library" Tab - Choose there "SelectSWCs..." option. - Select all library
which are not selected.
Now you will be able to use MDL.
<http://apache-flex-users.2333346.n4.nabble.com/file/n14477/fdt_build_path.png>
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14477.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Wow Cool about your app!
I will try to use FDT, but I cannot promise that I will fully help you with
this IDE.
But I can provide you some tips how to use Intellij + MAVEN for building
FlexJS application on Windows. I'm using Intellij, but this IDE is not free
and community version is not support Flex.
Another option is Visual Studio Code where Josh added support for FlexJS [1]
- you will be able to debug your code written in ActionScript compiled to
JavaScript. - I really recommend to use this solution. - In that case for
building project I also recommend Maven.
Let me know in which direction you wanted to go and in the mean time I will
try to use FDT to see what is happening.
[1]
http://apache-flex-users.2333346.n4.nabble.com/MXML-and-ActionScript-in-Visual-Studio-Code-td14266.html
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14474.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Thu, Jan 12, 2017 at 10:27 AM, leokan23 <le...@best-web.gr> wrote:
> Hi,
>
> 1st thanks for making this happen. I love flex and i want to be able to use
> it in the web again. I am on FDT because it integrates flexjs perfectly and
> i have already seen the examples and i am on the latest dev version from
> the
> installger 0.0.8.
>
> I am not sure about Maven.
>
> My goal is to learn the new framework and then build a web version of our
> tablet app [1] in order to be accessible from a browser too.
>
If you don't mind, can you please document all the things you do before you
are fully set up? That would go a long way for others following you. We
don't have a good 'Setting up FlexJS with IDEs' document and I think this
is a good opportunity to do this.
For example, here are the 'Setting up Flex SDK with IDEs' documents:
https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=33298813
Thanks,
Om
>
> [1] https://play.google.com/store/apps/details?id=co.tourismart.hotel
> <https://play.google.com/store/apps/details?id=co.tourismart.hotel>
>
>
>
>
>
> --
> View this message in context: http://apache-flex-users.
> 2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14472.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Re: FlexJS - How to use MDL?
Posted by leokan23 <le...@best-web.gr>.
Hi,
1st thanks for making this happen. I love flex and i want to be able to use
it in the web again. I am on FDT because it integrates flexjs perfectly and
i have already seen the examples and i am on the latest dev version from the
installger 0.0.8.
I am not sure about Maven.
My goal is to learn the new framework and then build a web version of our
tablet app [1] in order to be accessible from a browser too.
[1] https://play.google.com/store/apps/details?id=co.tourismart.hotel
<https://play.google.com/store/apps/details?id=co.tourismart.hotel>
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14472.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
What IDE are you using ?
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14469.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Of course It has to be nightly build of FlexJS.
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14467.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Hi Leo,
Really glad that you are trying to use! :)
You should see in downloaded FlexJS SDK library MaterialDesignLite.swc - Can
you see it ?
Are you going to build your project by Maven ?
You can find examples in following "/examples/flexjs/MDLExample/". Code is
also available on public github: [1]
[1]
https://github.com/apache/flex-asjs/tree/develop/examples/flexjs/MDLExample
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14465.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Hi Leo,
That's why I recommend you use Maven which is independent from IDE. You will
coding in IDE, build by Maven and run.
If you wanna stick with building in FDT post here your stack trace, but I
think it will end up with notifying FDT team.
In Installer you have the nevest version of build. You cane check here what
build is installer here [1]
[1] http://apacheflexbuild.cloudapp.net:8080/job/flex-asjs/
Let me know in which direction you want to go.
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14498.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Thanks Leo for reporting. I've helped them a bit in the jira comments and it
seems that will be fixed in the next release. :)
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14558.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Leo,
I think you should also add in description stack trace from your problem.
I just voted for it :)
Thanks,
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14542.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by leokan23 <le...@best-web.gr>.
Hi,
i have filed the bug [1], so please take some time voting so they can fix it
:)
[1] http://bugs.powerflasher.com/jira/browse/FDT-3716
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14540.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Leo,
I'm getting same issue as you in FDT. Maybe you should file a bug for them
[1]
[1] http://bugs.powerflasher.com/jira/secure/Dashboard.jspa
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14529.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Hi Leo,
I will give a shot and try today FDT. I will create new project with MDL and
see whether I also get same results.
In the mean time try to other options regarding build and IDE.
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14517.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by leokan23 <le...@best-web.gr>.
Hi Alex,
i tried your suggestions but i still get the same error:
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14515.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by Alex Harui <ah...@adobe.com>.
Hi,
When you say "compiling" do you mean compiling to SWF or cross-compiling
to JS?
If the latter, for MDL, you may need to add the options:
-compiler.exclude-defaults-css-files=HTML.swc:defaults.css
-html-template=${basedir}/src/main/resources/mdl-js-index-template.html
Where ${basedir} is the MDLExample project.
Thanks,
-Alex
On 1/17/17, 3:20 PM, "leokan23" <le...@best-web.gr> wrote:
>Hi,
>
>so i have been playing with flexjs and different IDEs (i am trying to
>figure
>out which is the best overall).
>
>Here are the results:
>
>In FDT, i added the missing swc, and now the mdl components appear.
>However
>when i try to build-debug, i get a general error that the build failed.
>
>
>
>This happens with 0.0.8 even if i remove the .swc so it looks there is a
>general problem with FDT.
>
>I also tried working with Flash Builder 4.7 (i am currently moving from
>flash builder to fdt). I had no problem with compiling, the debug opens in
>chrome, but MDL has no style, it looks exactly the same as js: components.
>
>
>
>--
>View this message in context:
>http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp144
>64p14512.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by leokan23 <le...@best-web.gr>.
Hi,
so i have been playing with flexjs and different IDEs (i am trying to figure
out which is the best overall).
Here are the results:
In FDT, i added the missing swc, and now the mdl components appear. However
when i try to build-debug, i get a general error that the build failed.
This happens with 0.0.8 even if i remove the .swc so it looks there is a
general problem with FDT.
I also tried working with Flash Builder 4.7 (i am currently moving from
flash builder to fdt). I had no problem with compiling, the debug opens in
chrome, but MDL has no style, it looks exactly the same as js: components.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14512.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by Alex Harui <ah...@adobe.com>.
On 1/15/17, 5:02 AM, "leokan23" <le...@best-web.gr> wrote:
>Hi,
>
>after adding the mdl swc on my project, the build fails. This happens in
>FDT, i will try in other ides too but keep that in mind.
What error are you getting?
>
>I also have a maybe, stupid question. I am using the flex installer to
>download the sdk. Is the nightly version always updated there?
>
Yes.
-Alex
Re: FlexJS - How to use MDL?
Posted by leokan23 <le...@best-web.gr>.
Hi,
after adding the mdl swc on my project, the build fails. This happens in
FDT, i will try in other ides too but keep that in mind.
I also have a maybe, stupid question. I am using the flex installer to
download the sdk. Is the nightly version always updated there?
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14497.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: FlexJS - How to use MDL?
Posted by piotrz <pi...@gmail.com>.
Hi Leo,
My fixes related to your problem are finally in the latest FlexJS nightly
build. Once you take it you will see all library in your IDE.
In this build Carlos started to work on adding support for Tables [1]
component. You can check how it looks in our example app [2] Tables tab.
[1] https://getmdl.io/components/index.html#tables-section
[2] https://goo.gl/GjGdSt
Piotr
-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/FlexJS-How-to-use-MDL-tp14464p14493.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.