CODERECTANGLE
  • Home
  • React.js
  • Java Tutorial
    • Introduction
    • Setting up the environment : Netbeans
    • Basics
    • FirstApp
    • Classes and Objects
    • Commonly Used Packages
    • Celsius to Fahrenheit Converter App
    • Celsius to Fahrenheit Using JOptionPane
    • Exception Handling
    • TestGradeApp
  • Objective-C
  • Python-Django
  • Contact

React.js


​Optimize data rendering on webpages

Electron+REACT MUSIC APP

In simple words, React.js is a "V" in the MVC web architecture. Unlike large front end frameworks such as Angular or Backbone.js, React can render large amount of data on the webpage really fast. For example, React.js devides the webpage by components. So whenever you press like button facebook page, only that Button components gets updated on the and where everything else stays the same. So, lets get to the Tutorial. We are going to create a Music Streaming App by utilizing the electron.atom.io starterkit.
First clone the starter project from this repository
https://github.com/loftywaif002/React-Electron-MusicApp.git

Now, lets customize the package.json file for our needs.
 Copy and Paste the code below in your package.json file

​
​

    

Our Project Structure will look like this
​

Picture
So  we need to create those files and directories
​

    
In our React-Electron-MusicApp directory we now have two files. main.js which is responsible for creating the window on the screen and load index.html inside the window. Lets change the dimension of the window that will be created by main.js

    
Now, we can work on the React components.
Go to the  src/components/Track.js file and copy paste the code below that is just importing some components from react and react-soundplayer. We are creating a React Component called Track and exporting it for other components that will use this. the Code for the Track component is given below

    
And for the ProgressSoundPlayer, the code will be looking like this.

    
We will be creating a Main component  and mount the Main component on index.html. First we will import some library and necessary components. 

    
Now we need a soundcloud ID from https://www.soundcloud.com and add the cliend_id like this

    
Then you need to initialize the sound-cloud library, copy and paste the code below

    
Then we create the Main component and set some default states inside the Component

    
Here, 
​
  • query is the default search query.
  • hasResults is used for tracking whether the component currently has any results from the API or not.
  • searchResults stores the current search results.
  • isLoading is used for tracking whether the app is currently fetching results from the API or not. When this is set to true, the spinner becomes visible to indicate that there’s something going on.

Then we have handleTextChange function. ​This is used for updating the value of query in the state and also calls the search method if the Enter key is pressed.

    
Now, we have the search method, which sends the query to the SoundCloud API and processes the response. First it sets the  isLoading state to true so that the spinner becomes visible. Then it makes a GET request to the tracks endpoint of the SoundCloud API. This endpoint accepts the query as its required parameter, but we also pass in an additional embeddable_by parameter to specify that we only want to fetch tracks that are embeddable by everyone. Once we get a response back, we check if there are any errors and if there aren’t, we update the state with the search results

    
Now, its time to render something on the screen. Before we do that, we have to use bind() for the handleTextChange method and call() for the renderSearchResults and renderNoSearchResults methods. This is because methods in React aren’t automatically bound when using the ES6 class syntax.

    

    
By, default, this component gets rendered, since there are no search results.
When we have some search result renderSearchresults() method gets called.  This calls the map method in the searchResults to loop through all the results and execute the renderPlayer function for each iteration.

    
The renderPlayer function accepts the individual track object as its argument. We use it as a source for the key and resolveUrl props. If you’ve worked with React in the past, you already know that when using the map method to render a list, we always have to pass a unique key or else React will complain. The other two props: clientId and resolveUrl are required by the ProgressSoundPlayer component. The clientId is the SoundCloud API key which you defined earlier and the resolveUrl is the unique URL that refers to that specific audio track. It’s the same URL that you get when you visit the page for a specific audio track on SoundCloud.

    
Now, we can render the component

    
Copy paste this code in your css/style.css for styling this component

    
Your index.html should be looking like this

    
\n \n Electron Soundcloud Player<\/title>\n <link rel=\"stylesheet\" href=\"css\/style.css\">\n <\/head>\n <body>\n <div id=\"main\"><\/div>\n <script src=\"js\/app.js\"><\/script>\n <\/body>\n<\/html>","highlight_active_line":false,"show_gutter":false,"display_indent_guides":false,"line_wrap":false,"use_soft_tabs":true,"max_lines":30,"min_lines":1}); _Element.prototype.settings.page_element_id = "255432568914050648"; _Element.prototype.element_id = "4bf56130-efae-4566-85ca-cb6a5dc77c16"; _Element.prototype.user_id = "24800347"; _Element.prototype.site_id = "349145345889094263"; _Element.prototype.assets_path = "//marketplace.editmysite.com/uploads/b/marketplace-elements-270170748587580171-1.3.3/assets/"; new _Element({ el: '#element-4bf56130-efae-4566-85ca-cb6a5dc77c16' }); }); }); } if (typeof document.documentElement.appReady == 'undefined') { document.documentElement.appReady = 0; } if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement255432568914050648(); } else if (document.createEvent && document.addEventListener) { document.addEventListener('appReady', setupElement255432568914050648, false); } else { document.documentElement.attachEvent('onpropertychange', function(event){ if (event.propertyName == 'appReady') { setupElement255432568914050648(); } }); } </script></div></div> <h2 class="wsite-content-title">To Compile the App run</h2> <div id="896721108180367545"><div><style type="text/css"> #element-0ea4bd2c-b686-4d0a-8635-bbac7a4ce4f1 .code-editor--light { padding: 20px 0px; } #element-0ea4bd2c-b686-4d0a-8635-bbac7a4ce4f1 .code-editor--light .header { padding: 10px 20px; font-weight: bold; border-left: 1px solid #C9CDCF; border-right: 1px solid #C9CDCF; border-top: 1px solid #C9CDCF; background-color: #F8F8F8; color: #363B3E; } #element-0ea4bd2c-b686-4d0a-8635-bbac7a4ce4f1 .code-editor--light .header .paragraph { margin: 0; } #element-0ea4bd2c-b686-4d0a-8635-bbac7a4ce4f1 .code-editor--light .body-code { margin: 0; border: 1px solid #C9CDCF; background-color: #FFFFFF; color: #666C70; } #element-0ea4bd2c-b686-4d0a-8635-bbac7a4ce4f1 .code-editor--dark { padding: 20px 0px; } #element-0ea4bd2c-b686-4d0a-8635-bbac7a4ce4f1 .code-editor--dark .ace-tomorrow-night-eighties { background-color: #363B3E; } #element-0ea4bd2c-b686-4d0a-8635-bbac7a4ce4f1 .code-editor--dark .header { padding: 10px 20px; font-weight: bold; border-left: 1px solid #E0E1E2; border-right: 1px solid #E0E1E2; border-top: 1px solid #E0E1E2; background-color: #666C70; color: #FFFFFF; } #element-0ea4bd2c-b686-4d0a-8635-bbac7a4ce4f1 .code-editor--dark .header .paragraph { margin: 0; } #element-0ea4bd2c-b686-4d0a-8635-bbac7a4ce4f1 .code-editor--dark .body-code { margin: 0; border: 1px solid #E0E1E2; background-color: #363B3E; color: #F8F8F8; } </style><div id="element-0ea4bd2c-b686-4d0a-8635-bbac7a4ce4f1" data-platform-element-id="270170748587580171-1.3.3" class="platform-element-contents"> <div class="code-editor--light"> <div class="header"> <div class="paragraph"></div> </div> <div class="body-code"> <pre class="editor"></pre> </div> </div> </div> <div style="clear:both;"></div><script type="text/javascript" class="element-script">function setupElement896721108180367545() { var requireFunc = window.platformElementRequire || window.require; // Relies on a global require, specific to platform elements requireFunc([ 'w-global', 'underscore', 'jquery', 'backbone', 'util/platform/elements/PlatformElement', 'util/platform/elements/PlatformElementSettings' ], function( _W, _, $, Backbone, PlatformElement, PlatformElementSettings ) { var dependencies = ["\/\/marketplace.editmysite.com\/uploads\/b\/marketplace-elements-270170748587580171-1.3.3\/assets\/ace\/ace.js"] || []; var platform_element_id = "270170748587580171-1.3.3"; if (typeof _W.loadedPlatformDependencies === 'undefined') { _W.loadedPlatformDependencies = []; } if (typeof _W.platformElements === 'undefined') { _W.platformElements = []; } if (typeof _W.platformElements[platform_element_id] === 'undefined') { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); } if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); } if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); } _W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} */ (function() { var CodeBlock = PlatformElement.extend({ /** * PlatformElement initialization. Code to setup the * element should go here. */ initialize: function() { this.theme = this.settings.get('style') == 'light' ? 'tomorrow' : 'tomorrow_night_eighties'; /** * The script are not defined in the manifest * so that 6mb of scripts are not loaded. This * allows us to load only scripts needed for * each language and theme. */ $.when( $.getScript(this.assets_path + 'ace/mode-' + this.settings.get('syntax') + '.js'), $.getScript(this.assets_path + 'ace/theme-' + this.theme + '.js') ).done(function() { /** * After the scripts are loaded, we can * then make the call to setup the editor. */ this.setUpEditor(); }.bind(this)); this.checkIfHeader(); this.modifyStyle(); }, /** * Function to setup the editor */ setUpEditor: function() { this.editor = ace.edit(this.$el.find('.editor')[0]); this.editor.setValue(this.settings.get('code'), -1); this.editor.setTheme('ace/theme/' + this.theme); this.editor.getSession().setMode('ace/mode/' + this.settings.get('syntax')); this.editor.container.style.lineHeight = '26px'; this.editor.container.style.fontSize = '14px'; this.editor.renderer.setScrollMargin(20, 20); this.editor.renderer.setPadding(20); this.editor.setOptions({ 'highlightActiveLine': this.settings.get('highlight_active_line'), 'readOnly': true, 'showPrintMargin': false }); this.editor.renderer.setOptions({ 'showGutter': this.settings.get('show_gutter'), 'maxLines': this.settings.get('max_lines'), 'minLines': this.settings.get('min_lines'), 'displayIndentGuides': this.settings.get('display_indent_guides') }); this.editor.session.setOptions({ 'wrap': this.settings.get('line_wrap'), 'useSoftTabs': this.settings.get('use_soft_tabs'), 'useWorker': false // workers rebind window.require so we need to disable them }); }, /** * Checks settings for whether or not the header * should be displayed or not. */ checkIfHeader: function() { if(this.settings.get('display_header') == "0") { this.$el.find('.header').remove(); } }, /** * Minor style tweaks done on some elements */ modifyStyle: function() { this.$el.find('.ace_content').css({ 'margin-left': '20px' }); } }); return CodeBlock; })();; if (typeof _ElementDefinition == 'undefined' || typeof _ElementDefinition == 'null') { var _ElementDefinition = PlatformElement.extend({}); } var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don't want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$('.platform-element-child-placeholder').length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } }); _Element.prototype.settings = new PlatformElementSettings({"max_lines_each":[{"max_lines_index":0},{"max_lines_index":1},{"max_lines_index":2},{"max_lines_index":3},{"max_lines_index":4},{"max_lines_index":5},{"max_lines_index":6},{"max_lines_index":7},{"max_lines_index":8},{"max_lines_index":9},{"max_lines_index":10},{"max_lines_index":11},{"max_lines_index":12},{"max_lines_index":13},{"max_lines_index":14},{"max_lines_index":15},{"max_lines_index":16},{"max_lines_index":17},{"max_lines_index":18},{"max_lines_index":19},{"max_lines_index":20},{"max_lines_index":21},{"max_lines_index":22},{"max_lines_index":23},{"max_lines_index":24},{"max_lines_index":25},{"max_lines_index":26},{"max_lines_index":27},{"max_lines_index":28},{"max_lines_index":29}],"min_lines_each":[{"min_lines_index":0}],"style":"light","display_header":true,"syntax":"javascript","code":"npm run compile","highlight_active_line":false,"show_gutter":false,"display_indent_guides":false,"line_wrap":false,"use_soft_tabs":true,"max_lines":30,"min_lines":1}); _Element.prototype.settings.page_element_id = "896721108180367545"; _Element.prototype.element_id = "0ea4bd2c-b686-4d0a-8635-bbac7a4ce4f1"; _Element.prototype.user_id = "24800347"; _Element.prototype.site_id = "349145345889094263"; _Element.prototype.assets_path = "//marketplace.editmysite.com/uploads/b/marketplace-elements-270170748587580171-1.3.3/assets/"; new _Element({ el: '#element-0ea4bd2c-b686-4d0a-8635-bbac7a4ce4f1' }); }); }); } if (typeof document.documentElement.appReady == 'undefined') { document.documentElement.appReady = 0; } if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement896721108180367545(); } else if (document.createEvent && document.addEventListener) { document.addEventListener('appReady', setupElement896721108180367545, false); } else { document.documentElement.attachEvent('onpropertychange', function(event){ if (event.propertyName == 'appReady') { setupElement896721108180367545(); } }); } </script></div></div> <div class="paragraph">We can just to go the root of the project directory and run <font color="#dd4a68">npm start, but we can also package the app for that we need a npm module</font></div> <div id="724482260136083985"><div><style type="text/css"> #element-f11ed8a7-1512-469b-b606-e030d7462f5f .code-editor--light { padding: 20px 0px; } #element-f11ed8a7-1512-469b-b606-e030d7462f5f .code-editor--light .header { padding: 10px 20px; font-weight: bold; border-left: 1px solid #C9CDCF; border-right: 1px solid #C9CDCF; border-top: 1px solid #C9CDCF; background-color: #F8F8F8; color: #363B3E; } #element-f11ed8a7-1512-469b-b606-e030d7462f5f .code-editor--light .header .paragraph { margin: 0; } #element-f11ed8a7-1512-469b-b606-e030d7462f5f .code-editor--light .body-code { margin: 0; border: 1px solid #C9CDCF; background-color: #FFFFFF; color: #666C70; } #element-f11ed8a7-1512-469b-b606-e030d7462f5f .code-editor--dark { padding: 20px 0px; } #element-f11ed8a7-1512-469b-b606-e030d7462f5f .code-editor--dark .ace-tomorrow-night-eighties { background-color: #363B3E; } #element-f11ed8a7-1512-469b-b606-e030d7462f5f .code-editor--dark .header { padding: 10px 20px; font-weight: bold; border-left: 1px solid #E0E1E2; border-right: 1px solid #E0E1E2; border-top: 1px solid #E0E1E2; background-color: #666C70; color: #FFFFFF; } #element-f11ed8a7-1512-469b-b606-e030d7462f5f .code-editor--dark .header .paragraph { margin: 0; } #element-f11ed8a7-1512-469b-b606-e030d7462f5f .code-editor--dark .body-code { margin: 0; border: 1px solid #E0E1E2; background-color: #363B3E; color: #F8F8F8; } </style><div id="element-f11ed8a7-1512-469b-b606-e030d7462f5f" data-platform-element-id="270170748587580171-1.3.3" class="platform-element-contents"> <div class="code-editor--light"> <div class="header"> <div class="paragraph"></div> </div> <div class="body-code"> <pre class="editor"></pre> </div> </div> </div> <div style="clear:both;"></div><script type="text/javascript" class="element-script">function setupElement724482260136083985() { var requireFunc = window.platformElementRequire || window.require; // Relies on a global require, specific to platform elements requireFunc([ 'w-global', 'underscore', 'jquery', 'backbone', 'util/platform/elements/PlatformElement', 'util/platform/elements/PlatformElementSettings' ], function( _W, _, $, Backbone, PlatformElement, PlatformElementSettings ) { var dependencies = ["\/\/marketplace.editmysite.com\/uploads\/b\/marketplace-elements-270170748587580171-1.3.3\/assets\/ace\/ace.js"] || []; var platform_element_id = "270170748587580171-1.3.3"; if (typeof _W.loadedPlatformDependencies === 'undefined') { _W.loadedPlatformDependencies = []; } if (typeof _W.platformElements === 'undefined') { _W.platformElements = []; } if (typeof _W.platformElements[platform_element_id] === 'undefined') { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); } if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); } if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); } _W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} */ (function() { var CodeBlock = PlatformElement.extend({ /** * PlatformElement initialization. Code to setup the * element should go here. */ initialize: function() { this.theme = this.settings.get('style') == 'light' ? 'tomorrow' : 'tomorrow_night_eighties'; /** * The script are not defined in the manifest * so that 6mb of scripts are not loaded. This * allows us to load only scripts needed for * each language and theme. */ $.when( $.getScript(this.assets_path + 'ace/mode-' + this.settings.get('syntax') + '.js'), $.getScript(this.assets_path + 'ace/theme-' + this.theme + '.js') ).done(function() { /** * After the scripts are loaded, we can * then make the call to setup the editor. */ this.setUpEditor(); }.bind(this)); this.checkIfHeader(); this.modifyStyle(); }, /** * Function to setup the editor */ setUpEditor: function() { this.editor = ace.edit(this.$el.find('.editor')[0]); this.editor.setValue(this.settings.get('code'), -1); this.editor.setTheme('ace/theme/' + this.theme); this.editor.getSession().setMode('ace/mode/' + this.settings.get('syntax')); this.editor.container.style.lineHeight = '26px'; this.editor.container.style.fontSize = '14px'; this.editor.renderer.setScrollMargin(20, 20); this.editor.renderer.setPadding(20); this.editor.setOptions({ 'highlightActiveLine': this.settings.get('highlight_active_line'), 'readOnly': true, 'showPrintMargin': false }); this.editor.renderer.setOptions({ 'showGutter': this.settings.get('show_gutter'), 'maxLines': this.settings.get('max_lines'), 'minLines': this.settings.get('min_lines'), 'displayIndentGuides': this.settings.get('display_indent_guides') }); this.editor.session.setOptions({ 'wrap': this.settings.get('line_wrap'), 'useSoftTabs': this.settings.get('use_soft_tabs'), 'useWorker': false // workers rebind window.require so we need to disable them }); }, /** * Checks settings for whether or not the header * should be displayed or not. */ checkIfHeader: function() { if(this.settings.get('display_header') == "0") { this.$el.find('.header').remove(); } }, /** * Minor style tweaks done on some elements */ modifyStyle: function() { this.$el.find('.ace_content').css({ 'margin-left': '20px' }); } }); return CodeBlock; })();; if (typeof _ElementDefinition == 'undefined' || typeof _ElementDefinition == 'null') { var _ElementDefinition = PlatformElement.extend({}); } var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don't want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$('.platform-element-child-placeholder').length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } }); _Element.prototype.settings = new PlatformElementSettings({"max_lines_each":[{"max_lines_index":0},{"max_lines_index":1},{"max_lines_index":2},{"max_lines_index":3},{"max_lines_index":4},{"max_lines_index":5},{"max_lines_index":6},{"max_lines_index":7},{"max_lines_index":8},{"max_lines_index":9},{"max_lines_index":10},{"max_lines_index":11},{"max_lines_index":12},{"max_lines_index":13},{"max_lines_index":14},{"max_lines_index":15},{"max_lines_index":16},{"max_lines_index":17},{"max_lines_index":18},{"max_lines_index":19},{"max_lines_index":20},{"max_lines_index":21},{"max_lines_index":22},{"max_lines_index":23},{"max_lines_index":24},{"max_lines_index":25},{"max_lines_index":26},{"max_lines_index":27},{"max_lines_index":28},{"max_lines_index":29}],"min_lines_each":[{"min_lines_index":0}],"style":"light","display_header":true,"syntax":"javascript","code":"npm install electron-packager -g","highlight_active_line":false,"show_gutter":false,"display_indent_guides":false,"line_wrap":false,"use_soft_tabs":true,"max_lines":30,"min_lines":1}); _Element.prototype.settings.page_element_id = "724482260136083985"; _Element.prototype.element_id = "f11ed8a7-1512-469b-b606-e030d7462f5f"; _Element.prototype.user_id = "24800347"; _Element.prototype.site_id = "349145345889094263"; _Element.prototype.assets_path = "//marketplace.editmysite.com/uploads/b/marketplace-elements-270170748587580171-1.3.3/assets/"; new _Element({ el: '#element-f11ed8a7-1512-469b-b606-e030d7462f5f' }); }); }); } if (typeof document.documentElement.appReady == 'undefined') { document.documentElement.appReady = 0; } if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement724482260136083985(); } else if (document.createEvent && document.addEventListener) { document.addEventListener('appReady', setupElement724482260136083985, false); } else { document.documentElement.attachEvent('onpropertychange', function(event){ if (event.propertyName == 'appReady') { setupElement724482260136083985(); } }); } </script></div></div> <div class="paragraph">Then we go one level up from the root of the project and run this command</div> <div id="470715183121284840"><div><style type="text/css"> #element-8a793708-dbf5-46d2-912e-6012fa31faac .code-editor--light { padding: 20px 0px; } #element-8a793708-dbf5-46d2-912e-6012fa31faac .code-editor--light .header { padding: 10px 20px; font-weight: bold; border-left: 1px solid #C9CDCF; border-right: 1px solid #C9CDCF; border-top: 1px solid #C9CDCF; background-color: #F8F8F8; color: #363B3E; } #element-8a793708-dbf5-46d2-912e-6012fa31faac .code-editor--light .header .paragraph { margin: 0; } #element-8a793708-dbf5-46d2-912e-6012fa31faac .code-editor--light .body-code { margin: 0; border: 1px solid #C9CDCF; background-color: #FFFFFF; color: #666C70; } #element-8a793708-dbf5-46d2-912e-6012fa31faac .code-editor--dark { padding: 20px 0px; } #element-8a793708-dbf5-46d2-912e-6012fa31faac .code-editor--dark .ace-tomorrow-night-eighties { background-color: #363B3E; } #element-8a793708-dbf5-46d2-912e-6012fa31faac .code-editor--dark .header { padding: 10px 20px; font-weight: bold; border-left: 1px solid #E0E1E2; border-right: 1px solid #E0E1E2; border-top: 1px solid #E0E1E2; background-color: #666C70; color: #FFFFFF; } #element-8a793708-dbf5-46d2-912e-6012fa31faac .code-editor--dark .header .paragraph { margin: 0; } #element-8a793708-dbf5-46d2-912e-6012fa31faac .code-editor--dark .body-code { margin: 0; border: 1px solid #E0E1E2; background-color: #363B3E; color: #F8F8F8; } </style><div id="element-8a793708-dbf5-46d2-912e-6012fa31faac" data-platform-element-id="270170748587580171-1.3.3" class="platform-element-contents"> <div class="code-editor--light"> <div class="header"> <div class="paragraph"></div> </div> <div class="body-code"> <pre class="editor"></pre> </div> </div> </div> <div style="clear:both;"></div><script type="text/javascript" class="element-script">function setupElement470715183121284840() { var requireFunc = window.platformElementRequire || window.require; // Relies on a global require, specific to platform elements requireFunc([ 'w-global', 'underscore', 'jquery', 'backbone', 'util/platform/elements/PlatformElement', 'util/platform/elements/PlatformElementSettings' ], function( _W, _, $, Backbone, PlatformElement, PlatformElementSettings ) { var dependencies = ["\/\/marketplace.editmysite.com\/uploads\/b\/marketplace-elements-270170748587580171-1.3.3\/assets\/ace\/ace.js"] || []; var platform_element_id = "270170748587580171-1.3.3"; if (typeof _W.loadedPlatformDependencies === 'undefined') { _W.loadedPlatformDependencies = []; } if (typeof _W.platformElements === 'undefined') { _W.platformElements = []; } if (typeof _W.platformElements[platform_element_id] === 'undefined') { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); } if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); } if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); } _W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} */ (function() { var CodeBlock = PlatformElement.extend({ /** * PlatformElement initialization. Code to setup the * element should go here. */ initialize: function() { this.theme = this.settings.get('style') == 'light' ? 'tomorrow' : 'tomorrow_night_eighties'; /** * The script are not defined in the manifest * so that 6mb of scripts are not loaded. This * allows us to load only scripts needed for * each language and theme. */ $.when( $.getScript(this.assets_path + 'ace/mode-' + this.settings.get('syntax') + '.js'), $.getScript(this.assets_path + 'ace/theme-' + this.theme + '.js') ).done(function() { /** * After the scripts are loaded, we can * then make the call to setup the editor. */ this.setUpEditor(); }.bind(this)); this.checkIfHeader(); this.modifyStyle(); }, /** * Function to setup the editor */ setUpEditor: function() { this.editor = ace.edit(this.$el.find('.editor')[0]); this.editor.setValue(this.settings.get('code'), -1); this.editor.setTheme('ace/theme/' + this.theme); this.editor.getSession().setMode('ace/mode/' + this.settings.get('syntax')); this.editor.container.style.lineHeight = '26px'; this.editor.container.style.fontSize = '14px'; this.editor.renderer.setScrollMargin(20, 20); this.editor.renderer.setPadding(20); this.editor.setOptions({ 'highlightActiveLine': this.settings.get('highlight_active_line'), 'readOnly': true, 'showPrintMargin': false }); this.editor.renderer.setOptions({ 'showGutter': this.settings.get('show_gutter'), 'maxLines': this.settings.get('max_lines'), 'minLines': this.settings.get('min_lines'), 'displayIndentGuides': this.settings.get('display_indent_guides') }); this.editor.session.setOptions({ 'wrap': this.settings.get('line_wrap'), 'useSoftTabs': this.settings.get('use_soft_tabs'), 'useWorker': false // workers rebind window.require so we need to disable them }); }, /** * Checks settings for whether or not the header * should be displayed or not. */ checkIfHeader: function() { if(this.settings.get('display_header') == "0") { this.$el.find('.header').remove(); } }, /** * Minor style tweaks done on some elements */ modifyStyle: function() { this.$el.find('.ace_content').css({ 'margin-left': '20px' }); } }); return CodeBlock; })();; if (typeof _ElementDefinition == 'undefined' || typeof _ElementDefinition == 'null') { var _ElementDefinition = PlatformElement.extend({}); } var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don't want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$('.platform-element-child-placeholder').length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } }); _Element.prototype.settings = new PlatformElementSettings({"max_lines_each":[{"max_lines_index":0},{"max_lines_index":1},{"max_lines_index":2},{"max_lines_index":3},{"max_lines_index":4},{"max_lines_index":5},{"max_lines_index":6},{"max_lines_index":7},{"max_lines_index":8},{"max_lines_index":9},{"max_lines_index":10},{"max_lines_index":11},{"max_lines_index":12},{"max_lines_index":13},{"max_lines_index":14},{"max_lines_index":15},{"max_lines_index":16},{"max_lines_index":17},{"max_lines_index":18},{"max_lines_index":19},{"max_lines_index":20},{"max_lines_index":21},{"max_lines_index":22},{"max_lines_index":23},{"max_lines_index":24},{"max_lines_index":25},{"max_lines_index":26},{"max_lines_index":27},{"max_lines_index":28},{"max_lines_index":29}],"min_lines_each":[{"min_lines_index":0}],"style":"light","display_header":true,"syntax":"javascript","code":"electron-packager .\/soundcloud-player SoundCloudPlayer --version=1.2.4 --platform=linux --out=\/home\/jim\/Desktop --arch=all --ignore=\"(node_modules|src)\"","highlight_active_line":false,"show_gutter":false,"display_indent_guides":false,"line_wrap":false,"use_soft_tabs":true,"max_lines":30,"min_lines":1}); _Element.prototype.settings.page_element_id = "470715183121284840"; _Element.prototype.element_id = "8a793708-dbf5-46d2-912e-6012fa31faac"; _Element.prototype.user_id = "24800347"; _Element.prototype.site_id = "349145345889094263"; _Element.prototype.assets_path = "//marketplace.editmysite.com/uploads/b/marketplace-elements-270170748587580171-1.3.3/assets/"; new _Element({ el: '#element-8a793708-dbf5-46d2-912e-6012fa31faac' }); }); }); } if (typeof document.documentElement.appReady == 'undefined') { document.documentElement.appReady = 0; } if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement470715183121284840(); } else if (document.createEvent && document.addEventListener) { document.addEventListener('appReady', setupElement470715183121284840, false); } else { document.documentElement.attachEvent('onpropertychange', function(event){ if (event.propertyName == 'appReady') { setupElement470715183121284840(); } }); } </script></div></div> <div class="paragraph">Read more about the electron packager here <a href="https://github.com/electron-userland/electron-packager" target="_blank">​https://github.com/electron-userland/electron-packager</a></div> </div> </div> </div> </div> </div> </div> </div> <div class="footer-wrap"> <div class="container"> <div class="footer"> <style type="text/css"> @font-face { font-family: SQMarket-Medium; font-style: normal; font-weight: 500; src: url("//cdn2.editmysite.com/fonts/SQ_Market/sqmarket-medium.woff2") format("woff2"), url("//cdn2.editmysite.com/fonts/SQ_Market/sqmarket-medium.woff") format("woff"); } </style> <div id="weebly-footer-signup-container-v3"> <a href="https://www.weebly.com/signup?utm_source=internal&utm_medium=footer" target="_blank" class="signup-container-header" id="signup-link-href" > <div class="powered-by"> <div class="footer-published-ab-powered-by"> Powered by <span class="link weebly-icon"></span> <img class="footer-ab-published-toast-image" src="//cdn2.editmysite.com/images/site/footer/footer-toast-published-image-1.png"> <span class="footer-ab-published-toast-text">Create your own unique website with customizable templates.</span> <span class="footer-ab-published-toast-button-wrapper"> <button class="footer-published-ab-button">Get Started</button> </span> </div> </div> </a> </div> <script type="text/javascript" src="//cdn2.editmysite.com/js/site/footerSignup.js?buildTime=1680201448"></script> <script type="text/javascript"> if (document.readystate === 'complete') { Weebly.footer.setupContainer('cdn2.editmysite.com', '1680201448'); } else { document.addEventListener('DOMContentLoaded', function() { Weebly.footer.setupContainer('cdn2.editmysite.com', '1680201448'); }); } </script> </div> </div><!-- end container --> </div><!-- end footer-wrap --> </div> <div class="nav mobile-nav"> <a class="hamburger" aria-label="Menu" href="#"><span></span></a> <ul class="wsite-menu-default"> <li id="pg875484978945919971" class="wsite-menu-item-wrap"> <a href="/" class="wsite-menu-item" > Home </a> </li> <li id="active" class="wsite-menu-item-wrap"> <a href="/reactjs.html" class="wsite-menu-item" > React.js </a> </li> <li id="pg795956785239464357" class="wsite-menu-item-wrap"> <a href="/java-tutorial.html" class="wsite-menu-item" > Java Tutorial </a> <div class="wsite-menu-wrap" style="display:none"> <ul class="wsite-menu"> <li id="wsite-nav-299493513111645336" class="wsite-menu-subitem-wrap " > <a href="/introduction.html" class="wsite-menu-subitem" > <span class="wsite-menu-title"> Introduction </span> </a> </li> <li id="wsite-nav-497784237986519392" class="wsite-menu-subitem-wrap " > <a href="/setting-up-the-environment--netbeans.html" class="wsite-menu-subitem" > <span class="wsite-menu-title"> Setting up the environment : Netbeans </span> </a> </li> <li id="wsite-nav-286369804206692103" class="wsite-menu-subitem-wrap " > <a href="/basics.html" class="wsite-menu-subitem" > <span class="wsite-menu-title"> Basics </span> </a> </li> <li id="wsite-nav-525479796263085694" class="wsite-menu-subitem-wrap " > <a href="/firstapp.html" class="wsite-menu-subitem" > <span class="wsite-menu-title"> FirstApp </span> </a> </li> <li id="wsite-nav-146935850862023952" class="wsite-menu-subitem-wrap " > <a href="/classes-and-objects.html" class="wsite-menu-subitem" > <span class="wsite-menu-title"> Classes and Objects </span> </a> </li> <li id="wsite-nav-938391380630816028" class="wsite-menu-subitem-wrap " > <a href="/commonly-used-packages.html" class="wsite-menu-subitem" > <span class="wsite-menu-title"> Commonly Used Packages </span> </a> </li> <li id="wsite-nav-936696903424613062" class="wsite-menu-subitem-wrap " > <a href="/celsius-to-fahrenheit-converter-app.html" class="wsite-menu-subitem" > <span class="wsite-menu-title"> Celsius to Fahrenheit Converter App </span> </a> </li> <li id="wsite-nav-737777821939935055" class="wsite-menu-subitem-wrap " > <a href="/celsius-to-fahrenheit-using-joptionpane.html" class="wsite-menu-subitem" > <span class="wsite-menu-title"> Celsius to Fahrenheit Using JOptionPane </span> </a> </li> <li id="wsite-nav-874189456333541999" class="wsite-menu-subitem-wrap " > <a href="/exception-handling.html" class="wsite-menu-subitem" > <span class="wsite-menu-title"> Exception Handling </span> </a> </li> <li id="wsite-nav-356287340671843278" class="wsite-menu-subitem-wrap " > <a href="/testgradeapp.html" class="wsite-menu-subitem" > <span class="wsite-menu-title"> TestGradeApp </span> </a> </li> </ul> </div> </li> <li id="pg210512760434668448" class="wsite-menu-item-wrap"> <a href="/objective-c.html" class="wsite-menu-item" > Objective-C </a> </li> <li id="pg649668685461625964" class="wsite-menu-item-wrap"> <a href="/python-django.html" class="wsite-menu-item" > Python-Django </a> </li> <li id="pg121403263280500266" class="wsite-menu-item-wrap"> <a href="/contact.html" class="wsite-menu-item" > Contact </a> </li> </ul> </div> <script type="text/javascript" src="/files/theme/plugins.js?1556898826"></script> <script type="text/javascript" src="/files/theme/custom.js?1556898826"></script> <div id="customer-accounts-app"></div> <script src="//cdn2.editmysite.com/js/site/main-customer-accounts-site.js?buildTime=1592005121"></script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-7870337-1']); _gaq.push(['_setDomainName', 'none']); _gaq.push(['_setAllowLinker', true]); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; // NOTE: keep the [1] if you replace this code. Otherwise cookie banner scripts won't be first on the page var s = document.getElementsByTagName('script')[1]; s.parentNode.insertBefore(ga, s); })(); _W.Analytics = _W.Analytics || {'trackers': {}}; _W.Analytics.trackers.wGA = '_gaq'; </script> <script type="text/javascript" async=1> // NOTE: keep the getElementsByTagName(o)**[1]** if you replace this code. Otherwise cookie banner scripts won't be first on the page ;(function(p,l,o,w,i,n,g){if(!p[i]){p.GlobalSnowplowNamespace=p.GlobalSnowplowNamespace||[]; p.GlobalSnowplowNamespace.push(i);p[i]=function(){(p[i].q=p[i].q||[]).push(arguments) };p[i].q=p[i].q||[];n=l.createElement(o);g=l.getElementsByTagName(o)[1];n.async=1; n.src=w;g.parentNode.insertBefore(n,g)}}(window,document,'script','//cdn2.editmysite.com/js/wsnbn/snowday262.js','snowday')); var r = [99, 104, 101, 99, 107, 111, 117, 116, 46, 40, 119, 101, 101, 98, 108, 121, 124, 101, 100, 105, 116, 109, 121, 115, 105, 116, 101, 41, 46, 99, 111, 109]; var snPlObR = function(arr) { var s = ''; for (var i = 0 ; i < arr.length ; i++){ s = s + String.fromCharCode(arr[i]); } return s; }; var s = snPlObR(r); var regEx = new RegExp(s); _W.Analytics = _W.Analytics || {'trackers': {}}; _W.Analytics.trackers.wSP = 'snowday'; _W.Analytics.user_id = '24800347'; _W.Analytics.site_id = '349145345889094263'; var drSegmentsTag = document.getElementById('drSegments'); if (drSegmentsTag) { _W.Analytics.spContexts = _W.Analytics.spContexts || []; var segmentData = JSON.parse(drSegmentsTag.innerText); segmentData.forEach(function(test) { _W.Analytics.spContexts.push({ schema: "iglu:com.weebly/context_ab_segment/jsonschema/1-0-0", data: { test_id: test.name, segment: test.variant, } }); }); } (function(app_id, ec_hostname, discover_root_domain) { var track = window[_W.Analytics.trackers.wSP]; if (!track) return; track('newTracker', app_id, ec_hostname, { appId: app_id, post: true, platform: 'web', discoverRootDomain: discover_root_domain, cookieName: '_snow_', contexts: { webPage: true, performanceTiming: true, gaCookies: true }, crossDomainLinker: function (linkElement) { return regEx.test(linkElement.href); }, respectDoNotTrack: true }); track('trackPageView', _W.Analytics.user_id+':'+_W.Analytics.site_id, _W.Analytics.spContexts); track('crossDomainLinker', function (linkElement) { return regEx.test(linkElement.href); }); })( '_wn', 'ec.editmysite.com', true ); </script> <script> (function(jQuery) { try { if (jQuery) { jQuery('div.blog-social div.fb-like').attr('class', 'blog-social-item blog-fb-like'); var $commentFrame = jQuery('#commentArea iframe'); if ($commentFrame.length > 0) { var frameHeight = jQuery($commentFrame[0].contentWindow.document).height() + 50; $commentFrame.css('min-height', frameHeight + 'px'); } if (jQuery('.product-button').length > 0){ jQuery(document).ready(function(){ jQuery('.product-button').parent().each(function(index, product){ if(jQuery(product).attr('target') == 'paypal'){ if (!jQuery(product).find('> [name="bn"]').length){ jQuery('<input>').attr({ type: 'hidden', name: 'bn', value: 'DragAndDropBuil_SP_EC' }).appendTo(product); } } }); }); } } else { // Prototype $$('div.blog-social div.fb-like').each(function(div) { div.className = 'blog-social-item blog-fb-like'; }); $$('#commentArea iframe').each(function(iframe) { iframe.style.minHeight = '410px'; }); } } catch(ex) {} })(window._W && _W.jQuery); </script> <script> window._W.isEUUser = false; window._W.showCookieToAll = ""; </script> </body> </html>