Hi everyone,
I am moving to a new blog site (http://beadeveloper.ninja/blog/), I hope everyone will follow me over there. Make sure you register as I will be providing some sample projects (some full apps!) and more to registered users that the visitors will not be able to see.
Also feel free to send any requests on posts or info you would like to see on the new blog!
Thanks and take care.
See you there!
Blog
http://beadeveloper.ninja/blog/
Main Page: http://beadeveloper.ninja/
So, i decided to try a background image for one of my Ionic apps. Not sure if this is the best way, but using the css it seems to work well in testing, I plan to test it later today on a real device and see what happens…
<style type=”text/css”>
.pane {
background: url(imageURL) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
</style>
So, I have this app Im working on and each time I come back to a page it reloads the whole controller, normally this is fine. However, in this case, I only want it to load one time, unless something else happens. My solution, which may not be the best but seems to work well for this prototype, is to use a root scoped variable.
if (!$rootScope.loaded)
{
//load this on startup then set to loaded
alert(‘This is the first loading’)
$rootScope.loaded = true;
}
Now, when I use the Back button it does not reload that part. But, in another page I can always set the $rootScope.loaded to false and recall the loading.
I would love to know if there is another way, or better way, to do this.
So playing around today I decided to test embedding a youtube video using a card layout. I found some code online, but it didn’t do what I wanted so I modified it a bit. It works out pretty well, I may use it in a test project.
The CSS:
<style>
.my-video {
position: relative;
padding-bottom: 55%;
padding-top: 10px; height: 0; overflow: hidden;
}
.my-video iframe,
.my-video object,
.my-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
The Ionic Card and iFrame:
<div class=”card”>
<div class=”item item-divider”>
This is the video
</div>
<div class=”my-video”>
<!– add leading and ending < > below –>
iframe src=”http://www.youtube.com/embed/7lw6ySxgKks” width=”100%”></iframe
</div>
<div class=”item item-divider”>
What did you think?
</div>
</div>
Well its been a while since Ive posted anything, been really busy but I hope to get back to posting more soon.
I’ve been helping with the process, as the visually designer MobiOne is retired, of getting projects into MyEclipse and building them using the PhoneGap service. We finally got a initial release out, though it does have some issues we still need to take care of with the audio and video widgets.
Ive done a little more on my social app, but not a bunch. I do think its ready for some serious testing though. It seems to work well on my Android and iOS. So, I am hoping to release it before too long.
I’ve still been playing around with the Ionic Creator, and I’m much less impressed by it now. It is very buggy, even for beta version. I’ve had it delete projects I started, it doesn’t always show the place the element will be dropping into, when using the tabs layout on every change it jumps back to the main tab, and you can’t really export effectively without some major work.
Another serious issue is I’m working on an enterprise app that has a mobile and desktop or iPad version, the creator only shows a fixed size so its had to do anything responsive with it and make is look good. I still have a lot of hope for it as there is nothing for the Ionic developers like it, but for now it’s just not there.
Stay tuned for a new post looking at the MyEclipse 2015 latest CI release!
Ionic released a beta version of their creator platform. This allows visual development with drag and drop components. It seems decent, with a lot of potential, but at this time but still has a way to go before (it is still in Beta) it could be of real value in production setting.
It does have some good potential, it has about 21 components, the ability to create new pages and link buttons and other components to them. It does still lack some much needed properties and possible directives though. As an example you can drop an image on to the screen and set the source, but if the image is larger than the screen (which doesn’t appear customizable right now), it will be actual size. A simple width property that defaults to 100% would take care of this.
Another issue I ran into is it didn’t seem to like Safari. I could use it, but could not scroll down after adding components like cards (the scrolling toggle didn’t seem to help). This issue was not apparent in Chrome. I could add several cards and scroll down and modify them easily.
I have not tried the exported source code as of yet, though I suspect, the properties could be added later. That just seems to defeat the purpose of the designer though.
So, as I said, it looks promising and I will certainly keep an eye on it as they develop it further. With my love of Ionic/AngularJS it could be a great tool in the future.
Note: As I was writing this and taking the screen shot I notices the Tap me! button was small, this is after setting the property to block, which should be full width. I tried setting it several more times, but it goes back to the inline setting. Welcome to beta software. 🙂
Well, I finally got my search and my sorting figured out in the Firebase data. So, not I can show the latest info and allow searching that info as well.
My other concern is that the OpenFB doesn’t seem to be working on devices, only in the simulator as well as on the PhoneGap dev app, which I believe uses the local address which is why it could be working. My best guess at this point is that its an issue with the Auth Urls on the Facebook site, but as the buttons don’t seem to respond at all it certainly could be something in the code. As I am using Firebase anyway I will be looking at the Facebook integration there as well…
I have been looking for a backend for my app development and have come to the conclusion that Firebase is going to be the best choice for cost and features.
I have implemented Firebase in a social media style app I am doing and it is working very well using angularFire samples. I had a bit of an issue working with the database in separate views of the app but I think I have that figured out now. I actually had to ref the firebase database in each controller. Not sure if this is the best way to do it, but its working well.
I am using the OpenFB js to implement the sharing features, it seems to be working very well on my test device. I will probably touch more on OpenFB in a future post as it seems pretty easy to use and I think a lot of people would like to learn more about it.
Stay tuned for when I announce the app!
As I work on several projects I figured maybe a timer app that I could add new projects, put in a time and have it alert me when its over. So I started with the very good sample code here: http://goo.gl/DJR0En from siddii and was easily able to adapt the array of jobs to include a bit of editing as well as adding a stop and remove button. I bumped up the interface a bit using Ionic Cards. But, I feel the interface could be better. Maybe swipe cards for each timer, a little animation etc. Not too bad for the few hours I put in to learn Ionic and AngularJS.
The video of the app in action can be seen here: http://youtu.be/8KX8pa-dtZs
So I recently found this timer for angular: https://github.com/siddii/angular-timer
I decided to play around with it with some of the samples and it looks very intriguing if you need a timer function. Here are a couple of the samples:
http://siddii.github.io/angular-timer/
Why do I bring this up? Being an independent developer I thought it might be neat to create a simple count down timer to split my time on my current projects. So my idea is to just implement this into a project timer. Ok, I know there are tons of timers out there that I could probably use. And, I have even done timers in Javascript that would probably be just as easy. But, as I focus on learning more Ionic and AngularJS I thought this would be a good opportunity to do that.
After all learning how to do the same things in different ways can expand our knowledge base on the technologies and I think focusing on implementing something you have a good understanding of, like in this case how to create a timer, will make it easier to learn. To paraphrase the old saying, who wants to learn just one way to skin a cat.
var brandon.mood = {{happy.coder}};
Cincyplanet 