Posts

Showing posts with the label open source

Angular 4 - Modules, components and routing

Image
In the previous post we created a new Angular 4 project. Lets check the how to add modules, components and routing. You could check out the code from here . git checkout -b part2.0 origin/part2.0 We are going to use bootstrap styling . So lets add bootstrap in our aplication . We are going to use only styling not the components. npm install bootstrap@3 We need to add the bootstrap stylesheet in tha .angular-cli.json. "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], Our first Module Lets add a new module employee.  Inside "src/app" run ng generate module employee or ng g m employee Wait we are going to lazy load this module , so we need routing inside the module, right? So we are going to create the routing also. ng g m employee --routing Time for component It will create new employee module with its own routing.   lets add a component for listing the employee. S...

RequireJS: More with templating - Dynamic data

Find the previous  episode here . Checkout the part 3 branch git checkout -b part4.0 origin/part4.0 Lets change the templating a bit different so that we could add data to the template. Now if we click on a link other than home everything will be gone. So we will move the link list to the index before maincontent so that it will always remain there. Next we will replace the modules/home/Home.html with some dummy text. The index.html wil looks like this <div>   <ul>     <li><a href="#home">Home</a></li>     <li><a href="#employee">Employees</a></li>     <li><a href="#project">Projects</a></li>   </ul> </div> <div id="maincontent">   </div> Next we will add some more dummy content to other template html file in projects and employees . And also change the controllers to load and how the content. And also we need to...

RequireJS: More with modules - Templates

Find the previous  episode here . Checkout the part 3 branch git checkout -b part3.0 origin/part3.0 We have created the routing and added a test module to the application. Lets try to add more to module. Templating          Am going to use RequireJS "Text" plugin for templating along with  Underscore.js and Jquery Text     An AMD loader plugin for requireJS to load text resouces. We will load html using text. Underscore.js     " Underscore  is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. " underscore provides a powerfull templating option. You could try lodash also which is a fork of UnderscoreJS Let's do some coding now. First we need to create a template in html. We will extract this code from index.html and will create a new html in modules/home/templates/home.html <div> <ul> <li><a href="#home">Hom...

Building my Homeserver : Webmin administration

It’s time to install webmin .  Webmin is a web based system administration for unix based system. Webmin is accessible through any browser. For more info visit the website . But before we need to setup something  before. It’s a minimal install so it needs to install wget first. yum install wget Next we will install some other requirements for webmin yum -y install perl perl-Net-SSLeay openssl perl-IO-Tty There’s actually 2 ways to install webmin as the website states . One is using the yum repos and other is downloading the rpm. I prefer rpm that’s why i installed wget first. Next we will download the webmin rpm. wget http://prdownloads.sourceforge.net/webadmin/webmin-1.760-1.noarch.rpm Next we will install the rpm rpm -U webmin-1.760-1.noarch.rpm Once the webmin is installed it is accessible through the network using the port 10000 and also through https. But in centos we need to add the port and https in to the firewall. Run the following c...

MEAN js adding a CRUD module

Image
it's continuation of previous post . Lets try to add  a new CRUD module to the app. First create a new module using the yo generator. We will create a new module to add a company name and it's location. yo meanjs:crud-module company It will ask some questions. Need to specify angular folders. Select all those. Next it will ask about menu. whether it need to be added or not. type 'Y' so it will create those links. So the module is loaded. If you check the app folder you will find some new files in the app. Currently it had option to add the name only. We will add location also. Lets edit that. Navigate to  model app/models/ and open company.server.model.js . This file consist the model of the module 'company'. This will define the mongoose schema . Lets add properties for this schema. var mongoose = require('mongoose'), Schema = mongoose.Schema; var CompanySchema = new Schema({ name: { type: String, default: '', req...

MEAN js Application structure

It's a continuation of previous post . Lets discuss about the application structure in a MEAN.js Application. Actually MEAN follows a MVC(Model-View-Controller). There are mainly two types of application structure for MVC. 1. Horizontal Folder Structure         This type of structure follows the division on functional role rather than the feature.The files and folders will kept inside a application folder .  There will be one controller folder for all application controllers. Horizontal structure is for simple projects where the features were limited. An example for this structure is app ----controllers ----models ----routes ----views config ----env ----strategies ----config.js ----express.js public ----config ----controllers ----directives ----css ----filters ----images ----views ----services server.js package.json app folder consists of all the express.io files or the server side files. app/controllers folder holds all express controller logic. a...

Customise Combobox/DropDown in Flash

I am always wonder how to customise the Combobox component in Flash . It's easy to change the skin. Simply double click the component , enter each movieclip and change the style. But ever wonder how to change text color and it's position. I will try to point out step by step procedure for customise it. 1. First create a class which extends ComboBox. I used  DropDownComboBox for class name. 2. Second create another class for Cell render which extends  CellRenderer. I used DropDownCellRenderer; 3. Open a new flash document  and insert a combobox component in the stage. 4. Select ComboBox clip in the library. Right click on it and select Properties.   5. In the properties panel change the default Class to the custom class you wrote . ie,  DropDownComboBox  6. Inside the DropSownComboBox constructer function type this code  dropdown.setStyle('cellRenderer', DropDownCellRenderer); 7. If you need to change the Text of ComboBox...

Upload Video to Facebook Using Actionscrpt 3.0

For the last one week am searching for uploading video to Facebook using Graph Api from Flash. First challenge is to find something which will help to capture video from webcamera and convert it to ByteArray. The problem is Actionscript doesn't had any utlity to save video from webcamera. It uses Flash media server to save video. But i need something which not uses any server side acript. After searching several hours in google i found a link. http://www.zeropointnine.com/blog/updated-flv-encoder-alchem/ In this utility it uses snapshots from the webcamera which will encode it . Though it had some drawbacks and limitations, it serves my requirement for small videos. I used it for creating videos. Next i need to upload video to facebook. This is the api used to connect facebook using Actionscript. http://code.google.com/p/facebook-actionscript-api/ This API uses a different function for uploading videos to facebook . Facebook.uploadVideo(). The reason for different...

Configure PostgreSQL and phpPgAdmin in WAMP

As i told earlier am trying to switch to Flex , i am trying to learn connection between PHP and Flex. When searched i got a excellent tutorial . But the problem is that it uses PostgreSQL. As i don't have any prior experience in PostgreSQL i try to install it in my Windows 7 and configure it in WAMP . I got different errors and spend almost two days in searching and using different methods . Atlast i got it right. I will try to figure out the steps i have done. Am using PostgreSQL 9.1 WAMP Server 2.0e phpPgAdmin 5.0.2 WAMP consists 1. Apache Version :2.2.17   2. PHP Version :5.3.5  3. MySQL Version :5.5.8 First install PostgreSQL , no need to install additional plugins like phpPgAdmin. Install WAMP server where ever you need. Download PhpPgAdmin  and unzip it to WWW folder in WAMP installation. At this point if you try to access the http://localhost/phpPgAdmin/ you may get this error. Your PHP installation does not support PostgreSQL. You need to ...

Connecting Flex 4 with AMFPHP

These days am missing this blog coz am busy with learning Flex. When i tried to connect with AMFPHP i can't find anything useful. Most of them were vague .Using the default data connectivity in Flash Builder am more confused and it's code looks complex . Atlast i found someone helpfull from adobe forum . When i tried to implement it , it shows nothing and missing some files. When i checked the PHP file, though am not good in PHP , i found there is also something also missing. I tried and searched and corrected the files. Here is the MXML code: import flash.events.MouseEvent; import mx.controls.Alert; import mx.events.FlexEvent; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; protected function getAllEmployees_resultHandler(event: ResultEvent): void { dataGrid.dataProvider = event.result; } protected function getAllEmployeesByID_resultHandler(event: ResultEvent): void { dataGrid.dataProvider = event.result; } protected function createEmployees_result...

Dynamic XML/PHP driven rotating scroller using Tweenlite

Oh My god , i had a blog here. I really forgot about this. :( Now it's time to update my blog with a new thing . It's not so good one. Just tried to develop one simple scroller with rotating thumbs. You can change it to a XML/PHP driven scroller. Till now am using Adobe default tween and Tweener class . Then i found another famous one , Tweenlite .It's fast and reliable for me. I never tried it. So decide to try it and develpoed a simple scroller. You can have the source here . Requirements 1. Flash CS4 http://www.adobe.com/products/flash/ 2. TweenLite AS2.0 http://blog.greensock.com/tweenlite/ It's just another example . You can change to dynamic one by XML or PHP.