# Introduction

The New York Public Library App SimplyE is a great eReader app for browsing, renting and viewing any kind of book in the NYPL system.

(Script tags will be stripped)


We implemented part of the app for demonstration purposes. The areas we covered are

  • the Login page, displaying the NYPL logo and loading data in the background

  • the Catalog page, displaying all books by category

  • the Detail view, displaying details of a specific book

  • the Settings page, to demonstrate how to implement a decent settings page

Other features of the app are out of scope and may be covered at a later time.

# Create the start page

The start page displays the NYPL lion's white head while loading all the data in the background. It's relatively simple to create:

640

  1. Create the NYPL project

  • Create a new project called SimplyE (! is not a valid character, compiler complains)

  1. Add a Login page

  • Just make the background red

  • Add the lion's head from the res folder

  • All res resources are available here XXX

  1. Center the lions's head

  • Center the head

  1. Add code that you want to execute during startup, for instance preloading data


(Script tags will be stripped)


# Create the catalog browsing page

In this step, we create the overall catalog page and structure:

640


Add a grid structure containing toolbar, navigation bar and book browse area

  1. For the navigation bar, add a horizontal grid (Linear Layout - Horizontal)

  2. For the browse area, add a Grid Layout and give it another color (for demo purposes)

  3. For the toolbar, add a toolbar

  4. The toolbar **by default** fills and takes up half of the screen, so that the grid layout covers only the other half. Set **Fill Space Vertically** to false in order for the browse area to expand south

610

  1. Set the three bitmaps from the res folder. The image names are refresh.svg, NPLIcon.png and magnifying-glass.red.png

  2. Align the Bitmaps left, right and center. I used width and height of (24,24) and (32,32) and (32,32)

  3. Set Fill Space Horizontally = true

  4. To change the background color of the toolbar a. select toolbar in Outline (toolbar1) b. Switch to SVG tag c. Select rectangle d. Change color to White

(Script tags will be stripped)


# Create data classes and sample data

Lets create a data structure Book that holds the necessary information. We create a new Swift class Book.swift.

  • Make sure Book derives from EObject so that we can use the data mapping capabilities of the SDK



Furthermore, we need a BookCategory that contains the book per category



We then add a variable of type Category to the **main.page.swift**



Finally, we create some code to provide sample values for testing



The BookManager provides a list of Books together with a Book title and a JPEG image representing a book covers. The images are sourced locally for the moment being:



# Add category browsing control

We now are going to use the list control to display both the category label and a list of thumb images that represent the books that belong to the category. The list control contains

  • a label control and

  • a horizontal grid that contains the book images

(Script tags will be stripped)


Follow the following steps to create the browsing control

  1. Add list control (Containers - list view) and call it **_ctrlListBookCatalog_**

  2. Add linear layout horizontal to contain the category name and call it **_viewCategory_**

  3. Add label inside _viewCategory_

  4. Add linear layout horizontal to contain the thumb images and call it **_rowviewbooks_**

  5. For each book, add a linear horizontal layout and insert a bitmap. We use the linear horizontal layout to add a margin around the bitmap. Call the bitmap bmpbook1 (increase number for each bitmap). I added 10 linear horizontal layouts and bitmaps for this example

  6. Adjust margins of the list control

(Script tags will be stripped)


# Create binding between model and controls

Create a link between the page's class instance variables and the UI controls by using the binding editor as displayed below

1444


# Wire sample data to control

  1. load the categories using the CatalogServiceManager

  2. for each book in each category, set the book URL so that the correct thumbnail is displayed



Which results in a first iteration of our book browsing capability

(Script tags will be stripped)


# Add scrollable capability

Each grid (grid view, linear horizontal or vertical grid) can be assigned the ability to support scrolling. The scrolling is using the native scrolling functionality of the native OS, and provides the same effect.

To make a content container scrollable, enclose the elements that you want to be scrollable in a scrollable box. In our example we enclosed everything in a scrollbox, beginninig with **rowviewbooks** and its dependent elements



Lets demonstrate it here

(Script tags will be stripped)


# Add book clicked event

Let's add an event handler to each bitmap. The event handler fires whenever a specific book is clicked and passes on the book's id (ISBN number)



# Catalog data REST endpoint

We are using two REST endpoints to source the data. Our first endpoint returns a list of ISBN numbers (Unique Book IDs) and URLs for each category.

_https://s3.amazonaws.com/scade.io/demo/eReader/overview_



# Consume the catalog REST service

For a detailed discussion of consuming a REST endpoint, please see [Data services](🔗).

  1. Consume the data service. Make sure to call the service **EreaderService** and rename the data structure to **BookCategory**

  2. Create a factory to instantiate the client.


  1. Create mapping logic to map from the server's BookCategory structure to the client Category data structure

I would be faster to use the server structure directly, but using a client structure is a best practice, as it abstract the app from the server data source. The mapping logic to map from BookCategory to Book is added to the **CatalogServiceManager** class.


  1. Load the data

Finally, execute the REST service call and the mapping function to retrieve your category data from a live source:



The video shows the details. After successful consumption, we retrieve the catalog data

(Script tags will be stripped)


# Create the book detail page

Create a new page **bookdetails.page** that shows the book details. The following outline illustrates the structure of the page

(Script tags will be stripped)


The video gives a good example of how to use containers (horizontal linear layout containers mostly) to structure the page. Most notable settings

  • the description1 and description2 label are using the multiline capability

  • we wrap the bitmap in a layout container for better alignment

  • the main display area has one parent container **viewBookDetails**, so that we can easily apply scrolling

(Script tags will be stripped)


# Enhance Book class

We now add additional properties to the Book class and add logic to download the image from the internet based on the URL



The NetworkUtils class is using the SCADE SDK and making a HTTPS request using the HTTP Client.



# Bind to BookDetails page

We add a property of type BookDetails and then link it using the binding panel

  • Make sure to set contentPriority to true, causing the bitmap to source its data from the content property


(Script tags will be stripped)


# Consume endpoint for book details

The REST endpoint to retrieve book details is

https://s3.amazonaws.com/scade.io/demo/eReader/<bookId>

For instance _https://s3.amazonaws.com/scade.io/demo/eReader/0062003070_

yields


  1. We add the REST endpoint to the existing EreaderService: a. Press Add b. Call the method getBookByIsbn c. Set template to https://s3.amazonaws.com/scade.io/demo/eReader/<isbn>

1506


d. Press **Invoke Remote Request** e. Set ISBN value to **0062003070** f. Press next, review JSON and press next again g. Set name to **BookDetailResonse**

1544


After pressing the **finish** button, all the necessary data structure is generated.

  1. Write some Swift code to map from BookDetailResponse to Book


  1. Add a method retrieveBook to the BookManager to retrieve the book



# Add onEnter event handler

Whenever the user clicks on a book bitmap in the main page, the Bookdetails page is opened using the ISBN number of the book. The onEnter event parses the event object to extract the ISBN number.



The ISBN book number (bookId) is passed from the onClicked event when clicking the book's bitmap. Lets extend the function that we created in the step with the navigation!.go method:



# Add scrolling to the Book Detail page

# Create the settings page

The settings page presents a list of options for making settings. We like to demonstrate the use of the page editor to duplicate repeating UI elements using copy and paste

(Script tags will be stripped)

  1. Create navigation bar and tool bar (not shown here)

  2. Use the icon more-button-of-three-dots_red.svg for the more settings button

  3. Create the settings page as shown below

  • We use Bodoni 72 Book as the font for the **>** sign

  • We append click event handler to the rowview

  1. Add an event handler to the **main.page** to capture click event from toolbar


  1. Don't forget to register page in start.swift file

(Script tags will be stripped)