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. 🙂
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}};
I was pretty surprised that adding the delete friend feature didn’t take all that long this morning. I had to do two things.
The first was to get the app not to use the default friend id number as this was being assigned as the next one in the list depending on the array length. This becomes a problem when you want to delete something based on it. If you have 5 items and delete number three, based on the length alone you will have a duplicate. I manage to drop the id all together. I had to change the ng-repeat track by to the name, so I can assume I will have to add some checking to make sure the end user does not use a duplicate name. But for now this works well.
The second thing I had to do was to use the index of the list to delete from the array. Turned out to be easier that I thought. In the href I was able to simply use {{$index}}, this is scoped to the list so it passes the index that is clicked on. As the code that was already in there sets the parameter I just used that in the array splice call.
Just a note, if you have ran this before you may need to delete you local storage as the previous one still used the ID variable.
It’s been a while since I’ve posted so I thought I would share a bit of what I’ve been up to.
I’ve been working in MyEclipse using the Ionic framework. It does have a bit of a learning curve, but seems to be well worth it. I was able to modify one of the sample projects that uses their tabs, add a slider and a little data modifying to the sample. Certainly something I will focus on more in the future.
Cincyplanet 