Skip to content

Commit

Permalink
finished removing all reference to Aptana IDE
Browse files Browse the repository at this point in the history
  • Loading branch information
yfain committed Nov 26, 2013
1 parent 4af2bc9 commit c33e516
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 11 deletions.
10 changes: 5 additions & 5 deletions ch11_responsive.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -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 <<FIG11-8>>. 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 <<FIG11-8>>. 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
Expand Down Expand Up @@ -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 <<FIG11-12>>. 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 <<FIG11-12>>. 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]]
Expand Down Expand Up @@ -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 <<FIG11-14>>.
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>>.

[[FIG11-14]]
.Responsive Header (width 580px+)
Expand Down Expand Up @@ -809,7 +809,7 @@ When the width shrinks to 480px, the header looks as in <<FIG11-16>>. 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]
----
Expand Down Expand Up @@ -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]
----
Expand Down
2 changes: 1 addition & 1 deletion ch14_hybrid.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -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 <<FIG14-1>> illustrates the interaction of PhoneGap, Cordova, and a Web application.
Expand Down
8 changes: 4 additions & 4 deletions ch6_ext_js.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -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_.

Expand All @@ -866,19 +866,19 @@ 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 <<Fig6-6>>) 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_.

To ensure that you did everything right, just enter in your browser the URL http://localhost:8080/extjs-4.2, and you should see the welcome screen of Ext JS.

[[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 <<FIG6-2-SSC>> 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 <<FIG6-2-SSC>> 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:

Expand Down
2 changes: 1 addition & 1 deletion ch9_websockets.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down

0 comments on commit c33e516

Please sign in to comment.