#1 2015-11-11 01:55:29

johnclarke
Member
Registered: 2015-11-11
Posts: 5

Headers and Footers for Apps

Hi,
   I want to have a header and a footer on my app.  The footer will have icons that take the user to different pages.

How can I do this ?

Best Wishes

John

Offline

#2 2015-11-11 02:05:38

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,657
Website

Re: Headers and Footers for Apps

Hello Jhon,

There is not an standard way to do that. We can use a Container control and put it into the header or the bottom of app views. Such Container can contain (of course) Push buttons, Images or HTML controls with the appropiate stuff. We can also use a Dropdown button, which incorporate a menu.

In the "Click" event of any of the Push button, Image, HTML or Dropdown items, we can simply use the ShowView, ReplaceView or the ShowDialog actions to show any app view.

Maybe you want to take a look at the DecSoft app sample, which uses a Menu control. Maybe I prepare an specific sample of a possible footer and header in the near future. Other app samples may also give you some ideas about possible menus and how to navigate between the app views.

Offline

#3 2015-11-11 11:31:51

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,657
Website

Re: Headers and Footers for Apps

Hello again,

Just to say that I add right now to App Builder a new Footer app sample:

This app sample show us how to implement a kind of app footer which include various icons to navigate between the app views. This app sample show us various things like how to use the Inline CSS app option to customize various app controls with different styles. Also we can learn how to use app functions and how to take care about what specific "target id" has been clicked into an HTML control. This app sample show us a possible footer for our apps, but we can create footer using various controls too: Containers, Buttons, Images, HTML, etc.

That sample is available right now: www.getappbuilder.com

Offline

#4 2015-11-15 00:12:32

johnclarke
Member
Registered: 2015-11-11
Posts: 5

Re: Headers and Footers for Apps

Thanks for that David.  I am looking for a header and footer line the one shows in this image

IMG_1622-200x300.png

Would it be easy to implement that ?

Best Wishes

John

Offline

#5 2015-11-15 01:31:32

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,657
Website

Re: Headers and Footers for Apps

Hello John,

It's difficult if we try to imitate certain style. For example, if I am not wrong, the above image use the jQuery Mobile framework, but App Builder are based on Bootstrap CSS. Since App Builder support themes for applications, maybe we can found a similar app theme like he above one. Or maybe we can create our own theme based in the jQuery Mobile.

However, probably the best way is to use the Bootstrap CSS stuff already available in App Builder. We can use the default theme or others (even in runtime, see the DecSoft and Calculator samples) and then can prepare some interfaces like the below ones:

U3SNLdN.png TNs5HAN.png

k68hDIu.png CgChck6.png

CShYvhI.png uLH0Pac.png

The above sample application interface do not use any particular CSS, that is, we can always add more stylesheets or use the Inline CSS option or the controls CSS properties in order to customize our application.

You can download the sample application following this link.

Offline

#6 2015-12-31 01:54:26

edunt
Member
Registered: 2015-12-21
Posts: 258

Re: Headers and Footers for Apps

Hi David,

The header and footer you created for John is not working on latest version of AB. It display "Navigation error: http://127.0.0.1:9999/". What casued it?
Thanks.

Offline

#7 2015-12-31 02:01:26

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,657
Website

Re: Headers and Footers for Apps

Hello edunt,

I test it right now and works like expected, so... are you tried with other applications? They works for you?

Offline

#8 2015-12-31 02:50:30

edunt
Member
Registered: 2015-12-21
Posts: 258

Re: Headers and Footers for Apps

David wrote:

Hello edunt,

I test it right now and works like expected, so... are you tried with other applications? They works for you?

Hmm very strange. Yes, I am trying to run it with Audio component.
Also whenever I ran the AB I usually clean my PC before it run properly or closed it. It seem like cache issue from JScript.
Thanks.

Last edited by edunt (2015-12-31 02:52:46)

Offline

#9 2015-12-31 02:57:26

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,657
Website

Re: Headers and Footers for Apps

Hello,

Well. If the problem persist just post here edunt.

Offline

Board footer

Powered by FluxBB


Copyright ©2018 DecSoft. All rights reserved.