FlexJS - How to use MDL?

classic Classic list List threaded Threaded
28 messages Options
12
Reply | Threaded
Open this post in threaded view
|

FlexJS - How to use MDL?

leokan23
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.
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

piotrz
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
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

piotrz
In reply to this post by leokan23
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
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

piotrz
In reply to this post by leokan23
Of course It has to be nightly build of FlexJS.
Apache Flex PMC
piotrzarzycki21@gmail.com
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

piotrz
In reply to this post by leokan23
What IDE are you using ?
Apache Flex PMC
piotrzarzycki21@gmail.com
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

leokan23
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

Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

piotrz
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
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

OmPrakash Muppirala
In reply to this post by leokan23
On Thu, Jan 12, 2017 at 10:27 AM, leokan23 <[hidden email]> 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.
>
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

piotrz
In reply to this post by leokan23
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.



Piotr
Apache Flex PMC
piotrzarzycki21@gmail.com
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

piotrz
In reply to this post by leokan23
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
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

piotrz
In reply to this post by leokan23
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
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

leokan23
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  .
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

piotrz
Looking forward to your progress! :)

Piotr
Apache Flex PMC
piotrzarzycki21@gmail.com
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

Josh Tynjala
In reply to this post by piotrz
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" <[hidden email]> 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
> [hidden email]
> --
> 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.
>
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

piotrz
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
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

piotrz
In reply to this post by leokan23
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
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

leokan23
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?
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

piotrz
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
Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

Alex Harui
In reply to this post by leokan23


On 1/15/17, 5:02 AM, "leokan23" <[hidden email]> 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

Reply | Threaded
Open this post in threaded view
|

Re: FlexJS - How to use MDL?

leokan23
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.

Could not create file C:\Users\leo_s\fdt_workspace\flexjs_mat_test.
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.
12