Source language: Translate to:

Multiple Resolution App

General questions about NeoAppBuilder - our rapid application development tool for building HTML5, web and mobile apps.

Moderator: Neosoft Support

Multiple Resolution App

Postby luishp » Sat Jul 09, 2016 10:51 am

I have not found (yet) a way to create a really responsive WebApp in NeoAppBuilder, but it is possible to create a multiple-resolution App.
That is, an App capable to detect screen resolution and show the appropiate design to that resolution.
This is a complete sample App. Take a close look at:

Project -> Properties -> Styles
Project ->Events
Project -> Subroutines

Download link:
http://sinlios.com/neoappbuilder/resolutions.zip
Last edited by luishp on Tue Jul 12, 2016 1:10 am, edited 1 time in total.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Multiple Resolution App

Postby gusgusl » Sat Jul 09, 2016 1:00 pm

Al intentar ejecutar me da un error, me tira el error en la sentencia "if" ubicada en "Eventos" al comienzo que veo esta incompleta
Otra cosa no veo el código de la subrutina "changeResolution" que es llamada en la línea:

Watch [NAB.ClientWidth] "changeResolution"
gusgusl
 
Posts: 254
Joined: Fri Mar 12, 2010 12:44 pm

Re: Multiple Resolution App

Postby luishp » Sat Jul 09, 2016 2:13 pm

Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Multiple Resolution App

Postby gusgusl » Sun Jul 10, 2016 11:33 am

Estuve probando y la verdad que el resultado es muy bueno
Si bien hay cosas que desde mi poco conocimiento no entiendo como el código que pusiste en Estilos

Ahora bien, siendo un poco soñador y trasladando mi pregunta a "Neosoftware" , seria muy complicado implementar algo como lo que tu hiciste en la misma aplicación?
que tenga la opción de diseñar una pagina determinada en varios tamaños, la verdad seria un éxito total en el diseño de aplicaciones orientadas a la web.
Algo que ninguna aplicación tiene aun y le daría un valor agregado a "Neoapp"


sult is very good
While there are things from my little knowledge do not understand how the code you put in Styles

Now, being a little dreamer and moving my question to " Neosoftware " would be very complicated to implement something like what you did in the same application ?
you have the option to design a given page in various sizes, the truth would be a success in designing web-oriented applications.
Something that no application has even and give an added value to " Neoapp "
gusgusl
 
Posts: 254
Joined: Fri Mar 12, 2010 12:44 pm

Re: Multiple Resolution App

Postby luishp » Tue Jul 12, 2016 12:53 am

gusgusl, disculpa que lo explique sólo en inglés, pero escribir cada vez en dos idiomas es agotador. Si te pierdes algún detalle me preguntas ¿ok?
gusgusl, sorry for writing in english only. If you have any doubt just ask. ok?

The code is very simple.
Let's start with the styles (Project -> Properties -> Styles):

Code: Select all
#res1{
  overflow:hidden;
  width:480px;
  height:320px;
}
#res2{
  overflow:hidden;
  width:800px;
  height:600px;
}
#res3{
  overflow:hidden;
  width:1024px;
  height:768px;
}


In CSS you can add a style to any html object with a name (ID) using the symbol "#"
In this case we have three different pages: res1, res2 and res3.
So, if i want to style res1 I should include this code:

Code: Select all
#res1{
    /*----CSS Styles come here------*/
}


The styles I have added are just three. Two of them to change the with and height of the page itself. NeoAppBuilder will recognize it and will change the desktop area accordingly:
Code: Select all
width:480px;
height:320px;


The other one is to avoid showing scrollbars when content is outside the page area (this is a personal choice):
Code: Select all
overflow:hidden;


Let's go now to: Project -> Events (start-up)
Here I have added this code:
Code: Select all
slAppBackgroundColor "#000000"
Watch [NAB.ClientWidth] "changeResolution"
If [NAB.ClientWidth] < 800
  GotoPage "res1"
Else
  If [NAB.ClientWidth] < 1024
    GotoPage "res2"
  Else
    GotoPage "res3"
  EndIf
EndIf


First line is a Power App plugin action to change the background color to black in the area surrounding each page:
Code: Select all
slAppBackgroundColor "#000000"


Next line is very important as it tells NeoAppBuilder to watch for any change in the [NAB.ClientWidth] variable. This variable stores the width of the browser internal space, and any change would mean the browser is now more big or small than it was. This line of code tells exactly this:
Watch for any change in the internal space browser width and, if there is any change, go to execute the "changeResolution" subroutine.

Code: Select all
Watch [NAB.ClientWidth] "changeResolution"


Then we have the code that controls wich page will show at start-up depending on [NAB.ClientWidth] current value.
I have decided to use three different resolutions so, if the browser internal area width is less than 800 pixels the browser will show the "res1" page.
Else, if the resolution is less than 1024, the browser will show the "res2" page and, for any other possibility it will show the "res3" page.
Code: Select all
If [NAB.ClientWidth] < 800
  GotoPage "res1"
Else
  If [NAB.ClientWidth] < 1024
    GotoPage "res2"
  Else
    GotoPage "res3"
  EndIf
EndIf


Finally we have the "changeResolution" subroutine. (Project -> Soubroutines -> changeResolution)
This is the subroutine wich will be executed each time the browser internal with changes.
The code is exactly the same as the one we have used at start-up to point the browser to the correct page depending of the actual resolution in the device.
Code: Select all
If [NAB.ClientWidth] < 800
  GotoPage "res1"
Else
  If [NAB.ClientWidth] < 1024
    GotoPage "res2"
  Else
    GotoPage "res3"
  EndIf
EndIf


There is also one line of code on each Page (select each page in the top right menu and choose the code tab on desktop area)
On res1 page you will find:
Code: Select all
slCenterApp 480 320

This code is also a call to a Power App Plugin action. It centers the page on the stage taking the width and height as parameters.
There is a similar one for the to other pages "res2" and "res3".

As you see it is really simple to implement this and, even if NeoAppBuilder does not include something similar as a core functionality, it is possible to create a template to start over each time we need or want a multiple resolution app.

Regards.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain


Return to General NeoAppBuilder Discussion

Who is online

Users browsing this forum: No registered users and 1 guest

cron