Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex, Open Source Cloud

Adobe Flex: Article

Adobe Flex: Flexstore on Rails Tutorial

Flexstore is a traditional Shopping Cart application. In this tutorial, we create two modules

Flexstore is a traditional Shopping Cart application. In this tutorial, we create two modules:

  1. The administration module is an internal application used to maintain the product database. You use the administration module to create, update, and delete products.
  2. The store module is a customer-facing application. Customers use the store module to browse and filter the product catalog.
In the administration module, we use Rails' simple scaffolding feature to automatically provide the default infrastructure to list, view, create, edit, and delete products. In the store module, we experiment with additional features:
  • Templates
  • Filtering using AJAX
  • Partial Page Templates
  • Builder Templates
  • Putting a Flex front-end on top of a Ruby on Rails application
This tutorial uses a MySQL database. It is assumed that you already have MySQL up and running.

Create the Flexstore Database
1.  Create a database called "flexstore"
Open a command prompt, navigate to the bin directory of your MySQL Server installation, and type the following command:

mysqladmin -uroot create flexstore

2.  Import the data

Install Ruby and Rails
1.  Install Ruby2.  Install Rails
Type the following command in the c:\ruby directory:

gem install rails --remote --include-dependencies

Create the Administration Module
1.  Create the Flexstore application

  • Create a directory called Rails in c:\
  • Type the following command in c:\rails:

rails flexstore

2.  Configure the database for the flexstore application

  • Edit database.yml in c:\rails\flexstore\config
  • Set the database parameter to flexstore in the development, test, and production sections
3.  Create a controller for the administration module
Type the following command in c:\rails\flexstore

ruby script\generate controller
Admin

4.  Create a model for the products
Type the following command in c:\rails\flexstore:

ruby script\generate model Product

5.  Modify the admin controller to enable Rails' scaffolding

  • Edit admin_controller.rb in c:\rails\flexstore\app\controllers
  • Modify the class as shown in Figure 1.
6.  Test the application
  • Start the WEBrick web server installed with Rails
    Type the following command in c:\rails\flexstore:

    ruby script\server

  • Open a browser and access the following URL:

    http://localhost:3000/admin

Rails' scaffolding defined in the Admin controller automatically provides default actions and views to list, view, create, edit and delete products. Each of these actions and views can be overwritten. We overwrite the default index action in the next steps.

7.  Define a custom index action

  • Edit admin_controller.rb in c:\rails\flexstore\app\controllers
  • Define an index action as shown in Figure 2.
8.  Create the view for the index action
  • Create a file name index.rhtml in c:\rails\flexstore\app\views\admin
  • Edit index.rhtml as follows:

<html>
<head>
<title>Product List</title>
</head>
<body>
<table>
<tr>
<td>Name</td>
<td>Price</td>
</tr>
<% @products.each do |product| %>
<tr>
<td><%= link_to product.name, :action => "show", :id => product.id %></td>
<td align="right"><%= sprintf("$%0.2f", product.price) %></td>
</tr>
<% end %>
</table>
<p><%= link_to "Create new product", :action => "new" %></p>
</body>
</html>

9.  Test the application. Open a browser and access the following URL:

http://localhost:3000/admin

10.  Validation

  • Edit product.rb in c:\rails\flexstore\app\models
  • Modify the class as shown in Figure 3.
11.  Test the application again. Try to add a product without a name or with a non numeric price value.

Create the Store Module
1. Deploy the product images and the flexstore stylesheet

2.  Create a controller for the administration module
Type the following command in c:\rails\flexstore:

ruby script\generate controller Store

3.  Define an index action in the Store controller

  • Edit store_controller.rb in c:\rails\flexstore\app\controllers
  • Define an index action as shown in Figure 4.
4.  Create the view for the index action
  • Create a file name index.rhtml in c:\rails\flexstore\app\views\store
  • Edit index.rhtml as follows:

<html>
<head>
<title>Flexstore on Rails</title>
<%= stylesheet_link_tag "flexstore", :media => "all" %>
</head>
<body>
<!-- begin catalog -->
<div id="catalog">
<% for product in @products %>
<!-- begin thumbnail -->
<div class="thumbnail">
<strong><%= product.name %></strong>
<img src="<%= product.image %>"/>
<div>
<font color="#CC6600"><b><%= sprintf("$%0.2f", product.price) %></b></font>
<p>
<%= product.camera==1?'Camera<br />':'' %>
<%= product.video==1?'Video<br />':'' %>
<%= product.triband==1?'Triband':'' %>
</p>
</div>
</div>
<!-- end thumbnail -->
<% end %>
</div>
<!-- end catalog -->
</body>
</html>

5.  Test the application
Open a browser and access the following URL:

http://localhost:3000/store


More Stories By Christophe Coenraets

Christophe Coenraets currently works as a Senior Technical Evangelist at Adobe. Before joining Adobe, Christophe was an evangelist at Macromedia, focusing on Rich Internet Applications and Enterprise integration. Prior to Macromedia, Christophe was the head of Java and J2EE Technical Evangelism at Sybase, where he started working on Java Enterprise projects in 1996. Before joining Sybase in the US, Christophe held different positions at Powersoft in Belgium, including Principal Consultant for PowerBuilder, and Manager of the Professional Services organization. Before joining Powersoft, Christophe worked as a developer and architect on several retail and BPM projects. Christophe has been a regular speaker at conferences worldwide for the last 10 years.

Comments (12) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
newgen315 09/09/08 01:42:18 PM EDT

Hi,
Where would be the sql files mentioned in the article. I look all over for them and would appreciate a link

SYS-CON Australia News Desk 07/20/06 02:45:34 PM EDT

Flexstore is a traditional Shopping Cart application. In this tutorial, we create two modules: The administration module is an internal application used to maintain the product database. You use the administration module to create, update, and delete products. The store module is a customer-facing application. Customers use the store module to browse and filter the product catalog.

Web Developer's & Designer's Journal 07/20/06 02:00:15 PM EDT

Flexstore is a traditional Shopping Cart application. In this tutorial, we create two modules: The administration module is an internal application used to maintain the product database. You use the administration module to create, update, and delete products. The store module is a customer-facing application. Customers use the store module to browse and filter the product catalog.

SYS-CON Australia News Desk 07/11/06 05:06:58 PM EDT

Flexstore is a traditional Shopping Cart application. In this tutorial, we create two modules: The administration module is an internal application used to maintain the product database. You use the administration module to create, update, and delete products. The store module is a customer-facing application. Customers use the store module to browse and filter the product catalog.

SYS-CON Brazil News Desk 07/11/06 04:53:01 PM EDT

Flexstore is a traditional Shopping Cart application. In this tutorial, we create two modules: The administration module is an internal application used to maintain the product database. You use the administration module to create, update, and delete products. The store module is a customer-facing application. Customers use the store module to browse and filter the product catalog.

Paul Blackburn 07/11/06 04:08:45 PM EDT

I enjoyed your tutorial, but have a little problem with it. Everything worked until the Flex part. I get an error msessage like this: "Error: 'FABridge.store' is null or not an object"

Thanks

Web Developer's & Designer's Journal 05/22/06 04:19:09 PM EDT

Flexstore is a traditional Shopping Cart application. In this tutorial, we create two modules: The administration module is an internal application used to maintain the product database. You use the administration module to create, update, and delete products. The store module is a customer-facing application. Customers use the store module to browse and filter the product catalog.

SYS-CON Italy News Desk 05/19/06 10:54:06 AM EDT

Flexstore is a traditional Shopping Cart application. In this tutorial, we create two modules: The administration module is an internal application used to maintain the product database. You use the administration module to create, update, and delete products. The store module is a customer-facing application. Customers use the store module to browse and filter the product catalog.

SYS-CON Australia News Desk 05/19/06 07:46:21 AM EDT

Flexstore is a traditional Shopping Cart application. In this tutorial, we create two modules: The administration module is an internal application used to maintain the product database. You use the administration module to create, update, and delete products. The store module is a customer-facing application. Customers use the store module to browse and filter the product catalog.

AJAX News Desk 05/18/06 06:42:12 PM EDT

Flexstore is a traditional Shopping Cart application. In this tutorial, we create two modules: The administration module is an internal application used to maintain the product database. You use the administration module to create, update, and delete products. The store module is a customer-facing application. Customers use the store module to browse and filter the product catalog.

SYS-CON India News Desk 05/18/06 06:18:23 PM EDT

Flexstore is a traditional Shopping Cart application. In this tutorial, we create two modules: The administration module is an internal application used to maintain the product database. You use the administration module to create, update, and delete products. The store module is a customer-facing application. Customers use the store module to browse and filter the product catalog.

SYS-CON News Desk 05/18/06 05:36:13 PM EDT

Flexstore is a traditional Shopping Cart application. In this tutorial, we create two modules: The administration module is an internal application used to maintain the product database. You use the administration module to create, update, and delete products. The store module is a customer-facing application. Customers use the store module to browse and filter the product catalog.

@ThingsExpo Stories
Bert Loomis was a visionary. This general session will highlight how Bert Loomis and people like him inspire us to build great things with small inventions. In their general session at 19th Cloud Expo, Harold Hannon, Architect at IBM Bluemix, and Michael O'Neill, Strategic Business Development at Nvidia, discussed the accelerating pace of AI development and how IBM Cloud and NVIDIA are partnering to bring AI capabilities to "every day," on-demand. They also reviewed two "free infrastructure" pr...
The explosion of new web/cloud/IoT-based applications and the data they generate are transforming our world right before our eyes. In this rush to adopt these new technologies, organizations are often ignoring fundamental questions concerning who owns the data and failing to ask for permission to conduct invasive surveillance of their customers. Organizations that are not transparent about how their systems gather data telemetry without offering shared data ownership risk product rejection, regu...
The Internet of Things is clearly many things: data collection and analytics, wearables, Smart Grids and Smart Cities, the Industrial Internet, and more. Cool platforms like Arduino, Raspberry Pi, Intel's Galileo and Edison, and a diverse world of sensors are making the IoT a great toy box for developers in all these areas. In this Power Panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists discussed what things are the most important, which will have the most profound e...
@ThingsExpo has been named the Most Influential ‘Smart Cities - IIoT' Account and @BigDataExpo has been named fourteenth by Right Relevance (RR), which provides curated information and intelligence on approximately 50,000 topics. In addition, Right Relevance provides an Insights offering that combines the above Topics and Influencers information with real time conversations to provide actionable intelligence with visualizations to enable decision making. The Insights service is applicable to eve...
SYS-CON Events announced today that Grape Up will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct. 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Grape Up is a software company specializing in cloud native application development and professional services related to Cloud Foundry PaaS. With five expert teams that operate in various sectors of the market across the U.S. and Europe, Grape Up works with a variety of customers from emergi...
SYS-CON Events announced today that Hitachi, the leading provider the Internet of Things and Digital Transformation, will exhibit at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Hitachi Data Systems, a wholly owned subsidiary of Hitachi, Ltd., offers an integrated portfolio of services and solutions that enable digital transformation through enhanced data management, governance, mobility and analytics. We help globa...
In his keynote at @ThingsExpo, Chris Matthieu, Director of IoT Engineering at Citrix and co-founder and CTO of Octoblu, focused on building an IoT platform and company. He provided a behind-the-scenes look at Octoblu’s platform, business, and pivots along the way (including the Citrix acquisition of Octoblu).
SYS-CON Events announced today that SoftLayer, an IBM Company, has been named “Gold Sponsor” of SYS-CON's 18th Cloud Expo, which will take place on June 7-9, 2016, at the Javits Center in New York, New York. SoftLayer, an IBM Company, provides cloud infrastructure as a service from a growing number of data centers and network points of presence around the world. SoftLayer’s customers range from Web startups to global enterprises.
Multiple data types are pouring into IoT deployments. Data is coming in small packages as well as enormous files and data streams of many sizes. Widespread use of mobile devices adds to the total. In this power panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists will look at the tools and environments that are being put to use in IoT deployments, as well as the team skills a modern enterprise IT shop needs to keep things running, get a handle on all this data, and deli...
20th Cloud Expo, taking place June 6-8, 2017, at the Javits Center in New York City, NY, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud strategy.
SYS-CON Events announced today that Super Micro Computer, Inc., a global leader in compute, storage and networking technologies, will exhibit at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Supermicro (NASDAQ: SMCI), the leading innovator in high-performance, high-efficiency server technology, is a premier provider of advanced server Building Block Solutions® for Data Center, Cloud Computing, Enterprise IT, Hadoop/...
Amazon has gradually rolled out parts of its IoT offerings in the last year, but these are just the tip of the iceberg. In addition to optimizing their back-end AWS offerings, Amazon is laying the ground work to be a major force in IoT – especially in the connected home and office. Amazon is extending its reach by building on its dominant Cloud IoT platform, its Dash Button strategy, recently announced Replenishment Services, the Echo/Alexa voice recognition control platform, the 6-7 strategic...
Judith Hurwitz is president and CEO of Hurwitz & Associates, a Needham, Mass., research and consulting firm focused on emerging technology, including big data, cognitive computing and governance. She is co-author of the book Cognitive Computing and Big Data Analytics, published in 2015. Her Cloud Expo session, "What Is the Business Imperative for Cognitive Computing?" is scheduled for Wednesday, June 8, at 8:40 a.m. In it, she puts cognitive computing into perspective with its value to the busin...
Cognitive Computing is becoming the foundation for a new generation of solutions that have the potential to transform business. Unlike traditional approaches to building solutions, a cognitive computing approach allows the data to help determine the way applications are designed. This contrasts with conventional software development that begins with defining logic based on the current way a business operates. In her session at 18th Cloud Expo, Judith S. Hurwitz, President and CEO of Hurwitz & ...
Financial Technology has become a topic of intense interest throughout the cloud developer and enterprise IT communities. Accordingly, attendees at the upcoming 20th Cloud Expo at the Javits Center in New York, June 6-8, 2017, will find fresh new content in a new track called FinTech.
SYS-CON Events announced today that Interoute, owner-operator of one of Europe's largest networks and a global cloud services platform, has been named “Bronze Sponsor” of SYS-CON's 20th Cloud Expo, which will take place on June 6-8, 2017 at the Javits Center in New York, New York. Interoute is the owner-operator of one of Europe's largest networks and a global cloud services platform which encompasses 12 data centers, 14 virtual data centers and 31 colocation centers, with connections to 195 add...
The age of Digital Disruption is evolving into the next era – Digital Cohesion, an age in which applications securely self-assemble and deliver predictive services that continuously adapt to user behavior. Information from devices, sensors and applications around us will drive services seamlessly across mobile and fixed devices/infrastructure. This evolution is happening now in software defined services and secure networking. Four key drivers – Performance, Economics, Interoperability and Trust ...
Grape Up is a software company, specialized in cloud native application development and professional services related to Cloud Foundry PaaS. With five expert teams that operate in various sectors of the market across the USA and Europe, we work with a variety of customers from emerging startups to Fortune 1000 companies.
Cybersecurity is a critical component of software development in many industries including medical devices. However, code is not always written to be robust or secure from the unknown or the unexpected. This gap can make medical devices susceptible to cybersecurity attacks ranging from compromised personal health information to life-sustaining treatment. In his session at @ThingsExpo, Clark Fortney, Software Engineer at Battelle, will discuss how programming oversight using key methods can incre...
SYS-CON Events announced today that Super Micro Computer, Inc., a global leader in compute, storage and networking technologies, will exhibit at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Supermicro (NASDAQ: SMCI), the leading innovator in high-performance, high-efficiency server technology, is a premier provider of advanced server Building Block Solutions® for Data Center, Cloud Computing, Enterprise IT, Hadoop/...