# Train Catalog App

This sample app is a train catalog which displaying the types trains towards Tokaido and Tohoku areas.

## Demo

[**Import Train Catalog App to your Monaca Account**](https://monaca.mobi/ja/directimport?pid=640814c8e78885661368f94f)

**Tested Environment**

* Android 11.0
* iOS 14.3

![](/files/-Mfaty3ty2rs_vQfL2L1)

## File Components

![](/files/-Mfau0ZIOK9A7ergAiix)

| File            | Description                             |
| --------------- | --------------------------------------- |
| `index.html`    | The startup page                        |
| `css/style.css` | The stylesheet file for the application |
| `images/*.jpg`  | Image files used in this application    |

## Required JS/CSS Components

* `jQuery Mobile`   

## HTML Explanation

This sample uses the native function of Monaca. Therefore, there are multiple HTML pages. First, here is the body of the `index.html`.

```markup
<div data-role="content">
  <ul data-role="listview">
    <li data-role="list-divider">Tokaido Shinkansen Trains</li>
    <li><a href="#" onclick="showDetail('0kei', 'Series 0')">Series 0</a></li>
    <li><a href="#" onclick="showDetail('300kei', 'Series 300')">Series 300</a></li>
    <li><a href="#" onclick="showDetail('700kei', 'Series 700')">Series 700</a></li>
    <li><a href="#" onclick="showDetail('n700kei', 'Series N700')">Series N700</a></li>
  </ul>
  <p id="attribution">Photos by <a href="#" onclick="monaca.invokeBrowser('http://www.flickr.com/photos/kimuchi583/')">kimuchi583</a></p>
</div>
```

This sample uses jQuery Mobile to display the list screen. Once you tap each column, `showDetail` function is called. This function will transit to the next page, which will be described later. Also `a` tag uses `monaca.invokeBrowser` function in `onclick` attributes. This function is used to launch the browser and display the specified URL.

## JavaScript Explanation

The JavaScript code of the Top Screen is not long.

```javascript
function showDetail(filename, trainname) {
  monaca.pushPage("detail.html", {}, {filename : filename, trainname : trainname})
}
```

As mentioned before, `showDetail` is called when the column in the list is tapped. Take 2 arguments and assign them to`filename` variable and `trqinname` variable.

Display the next page with `monaca.pushPage` function. This function will open a new page natively by using Monaca native functions and the variable passed to the next page is defined in its third argument. The passed value can be obtained by `monaca.queryParams` variable.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://en.docs.monaca.io/sampleapp/samples/shinkansen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.