SlideShare a Scribd company logo
1 of 29
Download to read offline
Apache FlexJS Web Application
Development with Visual Studio Code
ApacheCon North America
May 18, 2017 • Miami, Florida
Code Intelligence
• Syntax highlighting
• Completion / IntelliSense
• Function signature help
• Realtime errors/warnings
• Symbol information on hover
• Goto definition with Ctrl+click
• List symbols in document
• Search symbols in workspace
• Find all references
• Rename symbol
• Automatically import classes
Debugging
• Add breakpoints
• Automatically stop at uncaught exceptions
• Pause, step in/out/over, restart, and stop
• See function call stack
• Inspect an object’s variables/properties
• Print to debug console with trace()
• Run JS in web browsers, but see original
ActionScript and MXML in debugger
• Also supports Adobe AIR/Flash debugging
Installation
Apache FlexJS web application development with Visual Studio Code
Available for Windows, macOS and Linux
https://code.visualstudio.com
Open Extensions view and search for “actionscript”
How to install the NextGen ActionScript extension
Choose between NPM or the Flex SDK Installer
How to download Apache FlexJS
• Set the FLEX_HOME environment variable
• Add executables in js/bin to PATH environment
variable
• Set nextgenas.sdk.editor in Visual Studio Code
Open Settings, switch to Workspace Settings:


{

"nextgenas.sdk.editor": "/path/to/flexjs"

}
How to add FlexJS to Visual Studio Code
Create a new project
Apache FlexJS web application development with Visual Studio Code
• Launch Visual Studio Code
• Click Open folder…
• Create a new empty folder for your project and open it
• Go to the Explorer view on the left
• Create a new file named asconfig.json
• Create a new folder named src
• Inside src, create a new file named MyFirstProject.mxml
How to create a project
asconfig.json
{

"compilerOptions": {

"targets": [

"JSFlex"

]

},

"files": [

"src/MyFirstProject.mxml"

]

}
MyFirstProject.mxml
<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/flexjs/express">
<js:initialView>
<js:View>
<js:TextButton text="Click Me"/>
</js:View>
</js:initialView>
<fx:Script>
<![CDATA[
]]>
</fx:Script>
</js:Application>
Code Intelligence
<js:TextButton text="Click Me"

click="onButtonClick(event)"/>

<fx:Script>

<![CDATA[

import org.apache.flex.events.MouseEvent; //automatic imports

import org.apache.flex.html.Alert;



private function onButtonClick(event:MouseEvent):void

{

var a:Number = 2; //completion/intellisense

var b:Number = 5; //try right-click, then rename symbol

var sum:Number = a + b; //try ctrl+click to goto definition

Alert.show("The sum is: " + sum, this); //signature help

}
]]>

</fx:Script>
Build a project with tasks.json
Apache FlexJS web application development with Visual Studio Code
Compiles a project configured with asconfig.json
Download asconfigc from NPM
• Open the Command Palette from the View menu
• Choose Tasks: Configure Task Runner (ActionScript - asconfig.json)
tasks.json
{

"version": "0.1.0",

"command": "asconfigc",

"isShellCommand": true,

"args": [

"--debug=true",

//"--flexHome=/path/to/sdk"

],

"showOutput": "always",

}
Press Ctrl+Shift+B to build with
command from tasks.json
Debugging with launch.json
Apache FlexJS web application development with Visual Studio Code
Where can I debug FlexJS applications?
• VSCode extensions for major browsers, including…
• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Apple Safari on connected iOS device
• Built-in debuggers:
• Node.js
• Adobe AIR and Flash Player
Open Extensions view and search for "chrome debug"
How to install the Debugger for Chrome
Debugging with source maps
• Associates the generated JavaScript with its original ActionScript or MXML.
• Even displays ActionScript or MXML in web browser’s own native JavaScript
debugging tools.
• Use the -source-map=true compiler option.
{

"compilerOptions": {
"targets": [

"JSFlex"

]

"source-map": true 

},

"files": [

"src/MyFirstProject.mxml"

]

}
launch.json
{

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"name": "Debug FlexJS Project",

"request": "launch",

"file": "${workspaceRoot}/bin/js-debug/index.html",

"sourceMaps": true,

"preLaunchTask": "asconfigc"

}

],



}
Press F5 key to debug with selected
configuration in launch.json
Links
• Visual Studio Code

https://code.visualstudio.com/
• Apache Flex SDK Installer

https://flex.apache.org/installer.html
• ActionScript and MXML extension for VSCode

https://nextgenactionscript.com/vscode/
• Extension documentation

https://github.com/BowlerHatLLC/vscode-nextgenas/wiki
• asconfigc

https://www.npmjs.com/package/asconfigc

More Related Content

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 

Featured

Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Featured (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

Apache FlexJS Web Application Development with Visual Studio Code

  • 1. Apache FlexJS Web Application Development with Visual Studio Code ApacheCon North America May 18, 2017 • Miami, Florida
  • 2.
  • 3.
  • 4.
  • 5. Code Intelligence • Syntax highlighting • Completion / IntelliSense • Function signature help • Realtime errors/warnings • Symbol information on hover • Goto definition with Ctrl+click • List symbols in document • Search symbols in workspace • Find all references • Rename symbol • Automatically import classes
  • 6. Debugging • Add breakpoints • Automatically stop at uncaught exceptions • Pause, step in/out/over, restart, and stop • See function call stack • Inspect an object’s variables/properties • Print to debug console with trace() • Run JS in web browsers, but see original ActionScript and MXML in debugger • Also supports Adobe AIR/Flash debugging
  • 7. Installation Apache FlexJS web application development with Visual Studio Code
  • 8. Available for Windows, macOS and Linux https://code.visualstudio.com
  • 9. Open Extensions view and search for “actionscript” How to install the NextGen ActionScript extension
  • 10. Choose between NPM or the Flex SDK Installer How to download Apache FlexJS
  • 11. • Set the FLEX_HOME environment variable • Add executables in js/bin to PATH environment variable • Set nextgenas.sdk.editor in Visual Studio Code Open Settings, switch to Workspace Settings: 
 {
 "nextgenas.sdk.editor": "/path/to/flexjs"
 } How to add FlexJS to Visual Studio Code
  • 12. Create a new project Apache FlexJS web application development with Visual Studio Code
  • 13. • Launch Visual Studio Code • Click Open folder… • Create a new empty folder for your project and open it • Go to the Explorer view on the left • Create a new file named asconfig.json • Create a new folder named src • Inside src, create a new file named MyFirstProject.mxml How to create a project
  • 14.
  • 16. MyFirstProject.mxml <?xml version="1.0" encoding="utf-8"?> <js:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:js="library://ns.apache.org/flexjs/express"> <js:initialView> <js:View> <js:TextButton text="Click Me"/> </js:View> </js:initialView> <fx:Script> <![CDATA[ ]]> </fx:Script> </js:Application>
  • 17. Code Intelligence <js:TextButton text="Click Me"
 click="onButtonClick(event)"/>
 <fx:Script>
 <![CDATA[
 import org.apache.flex.events.MouseEvent; //automatic imports
 import org.apache.flex.html.Alert;
 
 private function onButtonClick(event:MouseEvent):void
 {
 var a:Number = 2; //completion/intellisense
 var b:Number = 5; //try right-click, then rename symbol
 var sum:Number = a + b; //try ctrl+click to goto definition
 Alert.show("The sum is: " + sum, this); //signature help
 } ]]>
 </fx:Script>
  • 18. Build a project with tasks.json Apache FlexJS web application development with Visual Studio Code
  • 19. Compiles a project configured with asconfig.json Download asconfigc from NPM
  • 20. • Open the Command Palette from the View menu • Choose Tasks: Configure Task Runner (ActionScript - asconfig.json)
  • 21. tasks.json {
 "version": "0.1.0",
 "command": "asconfigc",
 "isShellCommand": true,
 "args": [
 "--debug=true",
 //"--flexHome=/path/to/sdk"
 ],
 "showOutput": "always",
 }
  • 22. Press Ctrl+Shift+B to build with command from tasks.json
  • 23. Debugging with launch.json Apache FlexJS web application development with Visual Studio Code
  • 24. Where can I debug FlexJS applications? • VSCode extensions for major browsers, including… • Google Chrome • Mozilla Firefox • Microsoft Edge • Apple Safari on connected iOS device • Built-in debuggers: • Node.js • Adobe AIR and Flash Player
  • 25. Open Extensions view and search for "chrome debug" How to install the Debugger for Chrome
  • 26. Debugging with source maps • Associates the generated JavaScript with its original ActionScript or MXML. • Even displays ActionScript or MXML in web browser’s own native JavaScript debugging tools. • Use the -source-map=true compiler option. {
 "compilerOptions": { "targets": [
 "JSFlex"
 ]
 "source-map": true 
 },
 "files": [
 "src/MyFirstProject.mxml"
 ]
 }
  • 27. launch.json {
 "version": "0.2.0",
 "configurations": [
 {
 "type": "chrome",
 "name": "Debug FlexJS Project",
 "request": "launch",
 "file": "${workspaceRoot}/bin/js-debug/index.html",
 "sourceMaps": true,
 "preLaunchTask": "asconfigc"
 }
 ],
 
 }
  • 28. Press F5 key to debug with selected configuration in launch.json
  • 29. Links • Visual Studio Code
 https://code.visualstudio.com/ • Apache Flex SDK Installer
 https://flex.apache.org/installer.html • ActionScript and MXML extension for VSCode
 https://nextgenactionscript.com/vscode/ • Extension documentation
 https://github.com/BowlerHatLLC/vscode-nextgenas/wiki • asconfigc
 https://www.npmjs.com/package/asconfigc