Posts by DecSoft

Hello Donald,

If you added a "redwhite.png" image using the app's file's manager (under the Images tab!) then the below code must work:

Are you sure you put that code for the entire app, or, in other words, are you sure you add the code in the right app's view?

Can you provide (attach it here if you wanted) a sample application in order to try here.

Hello,

App Builder produces applications are HTML5 applications ready to be deployed in desktop and mobile browsers. This is why I recommend to use the App Builder's integrated debugger, and, also, the Firefox browser, since their developer console (just press "F12" when you are in Firefox) is absolutely amazing and can help us too much.

Apache Cordova, on the other hand, allow us to build such HTML5 applications in order to be deployed in various platforms, one of them Android, but also others like iOS, for example. But, in my opinion, we must debug and test the application before build for that possible platforms, using the integrated debugger and other browsers like Firefox.

Of course certain things cannot work in browsers. For example, if we plain to use the "Files" Cordova's plugin in order to write and read text files from our applications, the FileWrite, FileAppend and FileRead actions can't work until our application are build using Cordova. But we know (using the [App.Cordova] global variable) if our application is running in a browser or builded with Cordova.

Then we can prepare a "workaround" to that actions, again, in order to continue debugging our application using the integrated debugger and Firefox, for example. In few words, trying to made something like this can save our time since the integrated debugger is faster that any emulator nor bridge. Of course we must to test our application in a real device, but we must do that in any other environment.

That's the idea.

Hello Donald,

It's more easy than appear. Taking a look first at the compiled app's directory tree:

When we use the app's file's manager to choose an image (to later use it as the background) such image is copied into the "app/images" directory when the application is compiled. The app's stylesheets, however, are placed in the "app/styles" directory. Then, when we must to refer to an app's image file from an app's stylesheet, we must "up to the parent directory", and this is what is we are doing below in the code:

Such code are placed in an stylesheet in the "app/styles" directory, so we "up to the parent directory" (using the "../") and then enter in the "images" directory to finally choose the "Background.jpg" image file.

Hello Ade,

Yes; fortunatelly we are both in home. However she requires lot of cares. Hopefully with their rehabilitation and the sufficient time she can recover their mobility. :)

You're welcome! :)

Hello to all,

PS

This broswer in AB is read only in the forum. At least for me it is, Anyway to make it so we can copy code samples from the forum views?

Donald, update your App Builder copy. The current release allow us to use the contextual menu and also to select text from the welcome page browser.

www.getappbuilder.com

Hello to all,

Ok. The current App Builder release include a new feature based in certain class added to the BODY of our applications. Please, take a look at the also new Themes2 app sample, which show us how we can, thanks to this new feature, hack certain application's themes and not others. In a few words we can apply certain CSS rules only for certain views, controls, etc., only if the application use certain theme, so that CSS rules are not applied for other themes.

Hello to all,

We are in home! After more than a week into the hospital we are back to home. Of course we need to continue with their rehabilitation, but this is the first day in an entire week that I can touch my development computer and I feel good. Thanks ya'll for the good whishes and kindly words. :)

Hello,

PS

This broswer in AB is read only in the forum. At least for me it is, Anyway to make it so we can copy code samples from the forum views?

The next App Buidler release allows you to copy text from the welcome page browser. I guarantee you Donald. :)

Hello Donald,

What we need to put into the "BackgroundImage" editbox is just this:

As you can see, the path must be relative to the CSS file. Please, take a look at this sample application I prepared for you. In this case, the background is applied to the entire application. Download the sample from the below link:

Background.zip

Hello to all,

Thanks Ade. Some advances these days. Tomorrow, if everything is OK, my mom come back to home. They are not fine, of course (just a few days ago they suffer a surgery) and can't stay up, but, hopefully with my brother and my own help she come more or less fine with sometime.

More tomorrow. :)

Hello Asley,

Thanks for sharing! And please, continue sharing with us your AB created apps! :)

Hello,

Something I want to do as quickly as possible is to add the right stuff into the debug BAT file in order to directly run the application in our devices, if they are connected to an USB cable. Anyway, the idea of App Builder is we can test almost everything in the program's debugger browsers. Of course we can't use the Cordova Camera plugin in the debug browser, for example, but, we can act like if the plugin are ready to use, or simply know our application is running from the debugger and act in consecuence. Anyway, the point is we can do almost all the debug without leave App Builder and the system installed browsers, then we need to test it in our devices as little as possible.

Hello Donald,

The CSS style which every control exposes correspond with the appropiate CSS rule. Assigning values to that CSS properties are valid for the specific control and no others. About the "background-attachment", please, take a look at this article in W3Schools. Also in that article you can see the syntax for the "background-image", which is something like this:

That is, what we need to put in the "background-image" editbox is "url('w3css.gif')" (without double quotes) and, in the case of our applications, something like this, if we previously added the image for the background using the app's file's manager:

If you use the CSS properties of an app's view, then such CSS properties are applied to such view only. If you use the app's CSS properties, then the background appear in all app's views.

Let me to say that W3Shools is a good site in order to learn about CSS and their rules. However, if you have any further question, you know, don't hesitate to post it here Donald.

Hello Donald,

Few more on this subect:

Are the css files from a library of css files that you used? I'm assuming you did not create them yourself. (nobody has that much time)

The default app's theme is Bootstrap CSS with very little modifications. The other includes themes are downloaded from Bootswatch.com and used again with very little modifications. These modifications are basically changing the icon's fonts location.

Is there certain criteria involved with using a public or purchased css file? Would any that claim to be a bootstrap based css file work?

I think that depends on the CSS author. Both Bootstrap CSS and themes from Bootswatch.com exists under the MIT license, and open source license which also allow us to use it in commercial projects, for example.

The better choice is to maintain all the required stuff in just one CSS file, just like the default Bootstrap CSS theme and also the Bootswatch.com includes themes. Other projects like "templates" can contains stuff we really don't need.

Which is higher on the list for final results, the css file or inlinecss? I assume the latter.

For little modifications, hacks, media queries (to react on different screen sizes) I think "Inline CSS" can be good. In fact there is a problem with that name. "Inline CSS" is not placed "inline" in the app's index.html file, but in a CSS file, just like if we include one of them. So we can use "Inline CSS" without space limitations or something like that.

If we plain, however, to modify a theme not only for one application, or just want to use certain complete CSS file(s), well, we can do it without problems. And therefore both options are not exclusives, then we can include CSS files and also write some specific "hacks" in the "Inline CSS" app's option.

Also it appears the Bootstrap customizer allows you to create your own css file. Is that how you created them? Can a current theme be uploaded and modified?

About the first question the answer is no: for App Builder I use the Bootstrap CSS the Bootswatch.com themes with very little modifications as I mentioned above. Honestly I don't know if we can upload a theme to be modified: probably not, since the tools works in the contrary way: they produces themes from certain code/variables, but probably the generator can't parse an already produced theme to obtain their sources/variables. Really I don't know.

I see there there are bootstrap themes available on the web. Most look like they are for websites, do they still work with the apps?

Yes, in principle, it's no reason to use it. However, CSS is very powerful, in the sense that CSS can change enterily the apparence of a control, etc. Then some themes can be more "usables" in applications. I think we can play with the fact that we can add CSS files as themes in the AB's themes directory, then we can take a look at the results very quickly. But a site like Bootswatch.com is appreciated, since they include in the website the final apparence of the available themes.

Also I did find the ones included as well. Very nice ones and would make a good link:

https://bootswatch.com/

Thanks

Yes; certainly we need certain "don" to produce these kind of stuff. I means that when I start a webpage, commonly, I start with "black and white" or maybe some "gray scale". Why? Because my "don" to play with colors, etc., is very limited, I recognize that. The guy beyond bootswatch.com can play with colors, etc., then can provide various useful themes ready to be used in our applications.