• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 2 posts ] 
Author Message
 Post subject: CMSMS News Webapp 2.0 for iOS and Android
PostPosted: Sun May 11, 2014 9:20 pm 
Offline
Power Poster
Power Poster

Joined: Sat May 05, 2012 7:29 pm
Posts: 404
Location: India
Have made a (quick'n dirty) translation of a nice howto find in the netherland section (no, I'm not a native)

viewtopic.php?f=52&t=69729&p=310404

Have fun!

\$1:
I've made a new version of the News webapp for CMSMS.

Link: http://pmkmedia.nl/tips-trucs/cmsms-webapp-sjabloon-2

Example: http://webapp.pmkmedia.nl/webapp2

Zip archive (containing all files): http://webapp.pmkmedia.nl/webapp-cmsms-v2.1.zip

What's to do?

Download the zip archive and unpack it. Now you will see two folders:

folder 1: sjablonen
folder 2: root

To the first we goint into folder 1:

Create 4 new templates with the following names:

webapp
(copy the HTML content from webapp.html file in and save)

webapppages
(copy the HTML content from webapppages.html file in and save)

webappsearch
(copy the HTML content from webappsearch.html file in and save)

webappresults
(copy the HTML content from webappresults.html file in and save)

Create a new stylesheet with the following name (attach the stylesheet to all five templates):

webapp
(copy the css content from webapp.css file in and save)

Create a new menu template in Menu Manager called "webapp"

\$1:
{if $count > 0}

<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul>' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->current == true}
<li><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li><a href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<li><a class="sub">{$node->menutext}</a>

{elseif $node->type == 'separator'}
<li>

{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}


Adjust the search template (Search module) to this:

\$1:
{$startform}
<input type="text" class="search-input" id="{$search_actionid}searchinput" name="{$search_actionid}searchinput" value="{$searchtext}" {$hogan}/>
<input class="search-button search-hidden" name="submit" value="{$submittext}" type="submit" />
{if isset($hidden)}{$hidden}{/if}
{$endform}


Customize the search result template (Search module) to this:

\$1:
<h3>{$searchresultsfor} &quot;{$phrase}&quot;</h3>
{if $itemcount > 0}
<ul>
{foreach from=$results item=entry}
{if $entry->module == 'News'}
<li><span class="displaynone">{$entry->title} - </span><a href="{$entry->url}"><div class="searchblock"><p>{$entry->urltxt}</p></div></a><span class="displaynone"> ({$entry->weight}%)</span></li>
{else}
<li><span class="displaynone">{$entry->title} - </span><a href="{$entry->url}"><div class="searchblock"><p>{$entry->urltxt}</p></div></a><span class="displaynone"> ({$entry->weight}%)</span></li>
{/if}
{/foreach}
</ul>
<p>{$timetaken}: {$timetook}</p>
{else}
<p><strong>{$noresultsfound}</strong></p>
{/if}


Create a summary template (News module) named webapp:

\$1:
{foreach from=$items item=entry}

<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">
<div class="listblock">

<div class="imgbox">
{if $entry->fields.Foto->value}
<img src="{$entry->file_location}/{$entry->fields.Foto->value}" />
{else}
<img src="{root_url}/webapp/images/news-blank.jpg" />
{/if}
</div>

<div class="listtxt"><p>{$entry->title|cms_escape|truncate:65}</p></div>
</div>
</a>

{/foreach}


Create a detail template (News module) named webapp:

\$1:
{if isset($entry->canonical)}
  {assign var='canonical' value=$entry->canonical}
{/if}

<div id="content">

    {if $entry->fields.Foto->value}
    <img src="{$entry->file_location}/{$entry->fields.Foto->value}" />
    {else}
    <img src="{root_url}/webapp/images/news-blank.jpg" />
    {/if}

   <h1>{$entry->title|cms_escape:htmlall}</h1>

   <h5>{$category_label} {$entry->category}  |  Datum: {$entry->postdate|cms_date_format}  | Auteur: {$entry->Auteur}</h5>

   {eval var=$entry->content}

</div>
   
<div id="share" class="hidden">
        <img src="{root_url}/webapp/images/facebook.png" alt="facebook"><a href="http://www.facebook.com/sharer.php?u={$canonical}">Share with Facebook</a>
        <img src="{root_url}/webapp/images/twitter.png" alt="twitter"><a href="http://twitter.com/home?status={$canonical}">Share with Twitter</a>
</div>
   
{assign var='alt_title' value=$entry->title}


Define now 2 extra fields in News module:

Field 1
Name: author
Type: text input / public

Field 2
Name: photo
Type: file / public

Now all templates are created and we can start creating pages.

Create 5 new pages with the following names and properties:

Page 1: webapp / (not shown in menu)
Type: internal link to page "Home"

Children:

Page 2: Home
Type: content
Template: webapp
Content:
\$1:
{news number="20" summarytemplate="webapp" detailtemplate="webapp" detailpage="webappresults"}


Page 3: Info
Type: content
Template: webapppages
Content: "Information about the web app"

Page 4: webappresults / (not shown in menu)
Type: content
Template: webappresults
Content: "empty"

Page 5: webappsearch / (not shown in menu)
Type: content
Template: webappsearch
Content: "empty"

Next step is to modify the files in the uploaded root directory:

Inside folder root/webapp/images is an image called touch-icon.png you can replace your own "web app" icon (144x144 pixels). They'll shown on your iOS or Android device like a real app.

Inside folder root/webapp/js is a file named webbanner.js. This file allows to show an app banner on the main website at the bottom of this file. You have to modify the data to your site (look for "An Android app making: the url the android app"). If done you have to add the following line between the <head> </ head> tags of your main website:

\$1:
<__script__ src="{root_url}/webapp/js/webbanner.js" type="text/javascript"></__script>


You will see a nice banner for your web app on your website.

Upload the entire content of the root folder to the root of your website.

Now your web app should work properly on iOS and Android devices.

When you have finished modifying webbanner.js you get on an iPhone web app the join and on a android phone the link to your app or if you want to use the web app itself (the webapp url you can use in Chrome for Android to make an associate link on your home screen).

How to create an Android app:

Visit http://www.appsgeyser.com/ and create an account.

After you are logged in into http://www.appsgeyser.com/ click in the upper right corner on "CREATE APP".

Choose the option "ENTER WEBSITE URL" and enter the fields as follows:

Website URL: http://www.website.nl/webapp (change it to YOUR correct url)

App name: the name for your web app

Description: Description (do not if you do not want)

Icon: Custom icon (upload your "touch-icon.png" here you've made it)

Screen Orientation: Auto

Category: News (if you use it for your blog then you can choose)

Then press "CREATE APP" and download it to your computer.

You can handle the link to the app in webbanner.js (the Android url).

iOS: Get linked directly to the Web App with whether you want to put it on your home screen.
Android: now asks whether you want to download you just created, or if you've a link to the webapp the app you can see the webapp.

Example of use:

Surf on your mobile to http://peeponline.nl and see a working version.


Special thanks goes to @pasmaskas for creating the howto and to Google for advanced translation help!


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: CMSMS News Webapp 2.0 for iOS and Android
PostPosted: Mon May 12, 2014 12:54 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Nov 29, 2011 10:42 am
Posts: 509
Thanks chandra I appreciate you doing this for me!

The link has changed to: http://pmkmedia.nl/news/5/88/CMSMS-Webapp-Sjabloon-2-0

The only thing is that the names in the templates for the new module should be.

Field 1
Name: author (Auteur)
Type: text input / public

Field 2
Name: photo (Foto)
Type: file / public

These are the News templates in English with right names.

Create a summary template (News module) named webapp:

\$1:
{foreach from=$items item=entry}

<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">
<div class="listblock">

<div class="imgbox">
{if $entry->fields.photo->value}
<img src="{$entry->file_location}/{$entry->fields.photo->value}" />
{else}
<img src="{root_url}/webapp/images/news-blank.jpg" />
{/if}
</div>

<div class="listtxt"><p>{$entry->title|cms_escape|truncate:65}</p></div>
</div>
</a>

{/foreach}



Create a detail template (News module) named webapp:

\$1:
{if isset($entry->canonical)}
  {assign var='canonical' value=$entry->canonical}
{/if}

<div id="content">

    {if $entry->fields.photo->value}
    <img src="{$entry->file_location}/{$entry->fields.photo->value}" />
    {else}
    <img src="{root_url}/webapp/images/news-blank.jpg" />
    {/if}

   <h1>{$entry->title|cms_escape:htmlall}</h1>

   <h5>{$category_label} {$entry->category}  |  Date: {$entry->postdate|cms_date_format}  | Author: {$entry->author}</h5>

   {eval var=$entry->content}

</div>
   
<div id="share" class="hidden">
        <img src="{root_url}/webapp/images/facebook.png" alt="facebook"><a href="http://www.facebook.com/sharer.php?u={$canonical}">Share with Facebook</a>
        <img src="{root_url}/webapp/images/twitter.png" alt="twitter"><a href="http://twitter.com/home?status={$canonical}">Share with Twitter</a>
</div>
   
{assign var='alt_title' value=$entry->title}



Gr PasMasKas

I also wonder if people have already used the web app and how it looks! So if you've already used him show it here!

_________________
CMSMS Tips en Trucs klik hier

GRID1200 / Single1200 / BLOG1200 / Template1200


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 2 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting