From c33e51632a375c38f1f7b14456c4179232ab3edd Mon Sep 17 00:00:00 2001 From: Yakov Fain Date: Tue, 26 Nov 2013 08:21:57 -0500 Subject: [PATCH] finished removing all reference to Aptana IDE --- ch11_responsive.asciidoc | 10 +++++----- ch14_hybrid.asciidoc | 2 +- ch6_ext_js.asciidoc | 8 ++++---- ch9_websockets.asciidoc | 2 +- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/ch11_responsive.asciidoc b/ch11_responsive.asciidoc index 97d53e7f..098082a9 100644 --- a/ch11_responsive.asciidoc +++ b/ch11_responsive.asciidoc @@ -145,7 +145,7 @@ If need be, you can ask Jerry to create mockups for the real devices with the wi === CSS Media Queries -First, let's see the CSS media queries in action, and then we'll explain how this magic was done. Run Aptana's project titled Responsive_basic_media_queries, and it'll look as in <>. This is a desktop version for the desktops (or some tablets in the landscape mode). The section chart, map, and video divide the window into three imaginary columns. +First, let's see the CSS media queries in action, and then we'll explain how this magic was done. Run the project titled Responsive_basic_media_queries, and it'll look as in <>. This is a desktop version for the desktops (or some tablets in the landscape mode). The section chart, map, and video divide the window into three imaginary columns. [[FIG11-8]] .The tesktop layout implemented @@ -440,7 +440,7 @@ Now imagine that you'll overlay the entire window with an invisible grid contain } ---- -Now let's see the fluid grid in action. Run the Aptana's project Responsive Fluid Grid and you'll see the Web page that looks similar to <>. This example changes the grid layout if the viewport width falls under one of the following width breakpoints: 768px, 640px, and 480px. In this context the term _breakpoints_ here has nothing to do with debugging - we just want the content of the Web page to be rearranged when the width of the viewport passes one of these values. +Now let's see the fluid grid in action. Run the project Responsive Fluid Grid and you'll see the Web page that looks similar to <>. This example changes the grid layout if the viewport width falls under one of the following width breakpoints: 768px, 640px, and 480px. In this context the term _breakpoints_ here has nothing to do with debugging - we just want the content of the Web page to be rearranged when the width of the viewport passes one of these values. [[FIG11-12]] @@ -718,7 +718,7 @@ TIP: There are several responsive frameworks that offer CSS, typography and some === Making Save The Child Responsive First, run any of the previous versions of the Save The Child application to make sure it was not responsive. Just make the browser window narrower, and you won't see some of the page content on the right. -We'll make the page responsive gradually - the first version will make the header responsive, then the donation section, and, finally the entire page will become fluid. Run the Aptana's project named Responsive Header and you'll see a page similar to <>. +We'll make the page responsive gradually - the first version will make the header responsive, then the donation section, and, finally the entire page will become fluid. Run the project named Responsive Header and you'll see a page similar to <>. [[FIG11-14]] .Responsive Header (width 580px+) @@ -809,7 +809,7 @@ When the width shrinks to 480px, the header looks as in <>. Once again .Responsive Header (width below 480px) image::images/fig_11_16.png[] -The next version of the Aptana project to try is called Responsive Donation. This version make the donation section fluid. The donation section contains the Lorem Ipsum text and the form, which is revealed when the user clicks the button Donate. First, let's look at the HTML. The index.html contains the following fragment (some of the content that irrelevant for layout was removed for better readability): +The next project to try is called Responsive Donation. This version make the donation section fluid. The donation section contains the Lorem Ipsum text and the form, which is revealed when the user clicks the button Donate. First, let's look at the HTML. The index.html contains the following fragment (some of the content that irrelevant for layout was removed for better readability): [source, html] ---- @@ -914,7 +914,7 @@ But when the width become less then 480px, there is no room for two background i .Responsive Donate Section under 480px image::images/fig_11_18.png[] -The Aptana project Responsive Final includes the charts, maps, and video. Each of these sections uses `four-column` style, which is defined in styles.css as 33.332% of the container's width. +The project Responsive Final includes the charts, maps, and video. Each of these sections uses `four-column` style, which is defined in styles.css as 33.332% of the container's width. [source, html] ---- diff --git a/ch14_hybrid.asciidoc b/ch14_hybrid.asciidoc index 39c8b56a..eb05b30d 100644 --- a/ch14_hybrid.asciidoc +++ b/ch14_hybrid.asciidoc @@ -36,7 +36,7 @@ The publisher of New York magazine is heavily investing into their native applic === Hybrid Applications -_Hybrid applications_ promise you to have the best of both worlds. Develop a Web application in HTML/JavaScript, but access the native API of the mobile device via third-party solutions such as http://phonegap.com/[PhoneGap] from Adobe or http://www.appcelerator.com/platform/titanium-platform/[Titanium] from Appcelerator (the company behind Aptana Studio). Let's see what tools are available for creating hybrids. +_Hybrid applications_ promise you to have the best of both worlds. Develop a Web application in HTML/JavaScript, but access the native API of the mobile device via third-party solutions such as http://phonegap.com/[PhoneGap] from Adobe or http://www.appcelerator.com/platform/titanium-platform/[Titanium] from Appcelerator. Let's see what tools are available for creating hybrids. http://cordova.apache.org/[Cordova] is a library (and a build tool) that serves as a bridge between JavaScript and native API. Cordova started from the code donated by Adobe to Apache Software Foundation. Cordova is an open source platform created for building mobile applications with HTML5, but packaged as native ones. PhoneGap is a brand own by Adobe. Besides the Cordova library it offers developers a remote server, where they can package their applications for various mobile platforms. If the role of Cordova library in the PhoneGap product is not clear to you, think of a similar situation when the same software library is used in different products. For example, the rendering engine Webkit, is used in Chrome and Safari browsers. Figure <> illustrates the interaction of PhoneGap, Cordova, and a Web application. diff --git a/ch6_ext_js.asciidoc b/ch6_ext_js.asciidoc index 66474b4f..f155ab24 100644 --- a/ch6_ext_js.asciidoc +++ b/ch6_ext_js.asciidoc @@ -850,7 +850,7 @@ To create such a project select Eclipse menu File | New | Other | Web | Dynamic [[FIG6-4]] .Creating Dynamic Web Project in Eclipse -image::fig_06_04.png[image] +image::images/fig_06_04.png[image] Upon creation, this project will include several directories, and one of them will be called _WebContent_. This directory it serves as a document root of the Web server in Eclipse Dymamic Web Projects . This is the place to put your index.html and one of possible places to keep the Ext JS framework.Create a subdirectory _ext_ under _WebContent_ and copy there all files from the Ext JS distribution. The _app_ directory should also go under _WebContent_. @@ -866,7 +866,7 @@ To implement the first solution, right click on the properties of your project a [[FIG6-5]] .Solution 1: Excluding folders in Eclipse -image::fig_06_05.png[image] +image::images/fig_06_05.png[image] For the second solution, you'll need to add your Ext JS folder as a static Tomcat module. Double-click at the Tomcat name in the Servers view and then click on the bottom tab Modules. Then Click on Add External Web Module. In the popup window find the folder where your Ext JS is (in my computer it's inside the Library folder as in <>) and give it a name (e.g. /extjs-4.2). Now Tomcat will know that on each start it has to load year another static Web module known as /extjs-4.2. If you're interested in details of such deployment, open up the file server.xml located in your Eclipse workspace in the hidden directory _.metadata/.plugins/org.eclipse.wst.server.core/tmp0/conf_. @@ -874,11 +874,11 @@ To ensure that you did everything right, just enter in your browser the URL http [[FIG6-6]] .Solution 2: Adding Ext JS to Tomcat as a static module -image::fig_06_06.png[image] +image::images/fig_06_06.png[image] In both of these solutions you'll lose the Ext JS context sensitive help, but at least you will eliminate the long pauses caused by Eclipse internal indexing processes. Developing with ExtJS in WebStorm IDE or IntelliJ IDEA IDEs would spare you from all these issues because these IDE's are smart enough to produce context-sensitive help from an external JavaScript library. -Note: If you decided to stick to WebStorm IDE, you can skip Eclipse-related instructions below and just open in browser index.html located in the WebContent directory of the SSC_Top_ExtJS project. In any case the browser will render the page that looks as in <> below. +NOTE: If you decided to stick to WebStorm IDE, you can skip Eclipse-related instructions below and just open in browser index.html located in the WebContent directory of the SSC_Top_ExtJS project. In any case the browser will render the page that looks as in <> below. In this section we brought together three pieces of software: Eclipse IDE, Apache Tomcat server, and Ext JS framework. Let's bring one more program to the mix: Sencha CMD. We already went through the initial code generation of Ext JS applications. If you already have a Dynamic Web Project in Eclipse workspace, run Sencha CMD specifying the _WebContent_ directory of your project as the output folder, where the generated project will reside. For example, if the name of your Dynamic Web Project is hello2, the Sencha CMD command can look as follows: diff --git a/ch9_websockets.asciidoc b/ch9_websockets.asciidoc index f9b485c4..436adea2 100644 --- a/ch9_websockets.asciidoc +++ b/ch9_websockets.asciidoc @@ -552,7 +552,7 @@ This book is about development of the user interface and client side of the Web TIP: Authors of this book are Java developers and we have recorded a screencast (see the readme.asciidoc at https://github.com/Farata/EnterpriseWebBook for the URL) highlighting WebSocket server API. If you are not a Java developer, you may want to learn on your own which WebSocket servers exist for your favorite programming language or platform. -In Chapter 7 you had a chance to see how a Web application can be sliced (see Aptana's project-15-dynamic-modules) into several modules using Require.js framework. We'll take this project as a base and will create a new one: project-16-websocket-auction adding to it the new modules supporting the auction. +In Chapter 6 you had a chance to see how a Web application can be sliced into several modules using Require.js framework. We'll take this project as a base and will create a new one: project-16-websocket-auction adding to it the new modules supporting the auction. .Way To Give module (+js/modules/way-to-give.js+) [source,javascript]