4.3 Coffee Shops App Template

Create an Android, iOS or Kindle app for your Coffee Shop, Restaurant or Bar.

Find nearest to you coffee shop. See locations on the map.

 

coffe-shop-template-image

Find nearest to you coffee shop. See locations on the map.

This template uses 4 new pages type:

 

 

1-32 Grid MENU type page

tuto1

1. To change the background color for each menu item in Grid MENU please set it in Background Color Item field:

tuto3

2. Also you are able to change the text color in Text Item Color field:

tuto2

3. transparence in Opacity field using values from 0 to 1:

tuto4

4. Add (+), Delete (), Move( tuto5 )  menu items:

tuto6

5.  Each item has some properties ( item name, item image and item link to another page), that you can customize:

tuto7

2-32 LOC Finder type page

tuto8

NOTE: This page type requires CreaTusApps App v.2.9

"Location Finder" is a native page type that has an XML source (see example below) with locations and 3 predefined search fields:

NAME – text field – filters against the name of the location

TYPE – choose value from a list – filters against the type of the location

WHERE – pick a location on the map – orders the results so that the closest location is at top of the list and the furthest is at the bottom

As an input source it uses an XML that can be either stored locally on device or can be pulled from a URL. The source xml (filename or URL) is specified on CreaTusApps website.

tuto9

Pressing the “FIND” button will filter the source XML based on searchable data. The resulted list is displayed is displayed in a native table.

tuto10

Choosing any item in the table will show it on the map.

There is also a “Show all on Map” button below the list that will show all locations on the map simultaneously.

tuto11

Each location on the map can be pressed and some additional data about the location will appear.

tuto12

Sample XML
<document>
    <location>
        <name>Paris</name>
        <latitude>2.350987</latitude>
        <longitude>48.856667</longitude>
        <target></target>
        <type>capital city</type>

        <imageurl></imageurl>


        <description>France</description>

    </location>
    <location>
        <name>Moskow</name>
        <latitude>55.755786</latitude>
        <longitude>37.617633</longitude>
        <target></target>
        <type>capital city</type>
        <imageurl></imageurl>


        <description>Russia</description>
    </location>
    <location>
        <name>Tokio</name>
        <latitude>35.689488</latitude>
        <longitude>139.691706</longitude>
        <target></target>
        <type>capital city</type>
        <imageurl></imageurl>


        <description>Japan</description>
    </location>
    <location>
        <name>New York</name>
        <latitude>40.714353</latitude>
        <longitude>-74.005973</longitude>
        <target></target>
        <type>big city</type>
        <imageurl></imageurl>


        <description>US</description>
    </location>
    <location>
        <name>Sydney</name>
        <latitude>-33.868901</latitude>
        <longitude>151.207091</longitude>
        <target></target>
        <type>city</type>
        <imageurl></imageurl>


        <description>Australia</description>
    </location>
</document>

– It can NOT be used on a TAB

– The searchable fields are hardcoded, i.e. name, type and location are the only 3 fields that can be used, NO field can be either added or removed.

3-32 Magazine MENU page type

tuto13

1. To add (+), to delete (), to move (tuto5) items please use Magazine

Menu Items window:

tuto14

2. Similar to Grid MENU page each item has some properties with some new added properties (  item image, item title, item link to another page and item short description), that you can customize:

tuto15

3. To change the general style for this page (background-color, text-color, link-color), please use the link above Save button:

tuto16

4-32 Stripes MENU page type

tuto17

1. To add (+), to delete (), to move (tuto5) items please use Strips

Menu Items window:

tuto18

2. Each item has some properties ( item image, item title and item link to another page), that you can customize:

tuto19

3. To change the some general style for this page (background-color, text-color, link-color), please use the link above Save button:

tuto16

4. To set a page title, please enter in HTML edit mode and delete the HTML comment <!– and –> after that write a page title:

tuto20

5. If you want to change more properties (item background color, opacity, line height, text-color, font size ) for this page, please do it in style.css

tuto21

via Design Properties and make all changes in  .StyleWebKitPanel classes.

 

 

 

 

Avatar of CreaTusApps

CreaTusApps has written 103 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>