Posts tagged ‘Flex’

Adobe AIR - local SQL database queries

Below you can find examples of SQL statements(SELECT, INSERT, UPDATE, DELETE).

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    creationComplete="init()" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            private var sqlConn:SQLConnection;
            private var sqlFile:File;
            private var categories:ArrayCollection;

            private function init():void
            {
                sqlFile = File.applicationStorageDirectory.resolvePath("DBSample.db");
                sqlConn = new SQLConnection();
                sqlConn.open(sqlFile, SQLMode.CREATE);
            }

            private function createCategories():void
            {
                var stmt:SQLStatement = new SQLStatement();
                stmt.sqlConnection = sqlConn;
                stmt.text = "CREATE TABLE IF NOT EXISTS categories(" +
                                    "categoryid INTEGER PRIMARY KEY AUTOINCREMENT," +
                                    "name TEXT)";

                stmt.execute();
                var result:SQLResult = stmt.getResult();

                categories = new ArrayCollection(result.data);
            }

            private function getCategories():void
            {
                var stmt:SQLStatement = new SQLStatement();
                stmt.sqlConnection = sqlConn;
                stmt.text = "SELECT * FROM categories ORDER BY categoryid DESC";

                stmt.execute();
                var result:SQLResult = stmt.getResult();
            }

            private function addCategory(value:String):void
            {
                var stmt:SQLStatement = new SQLStatement();
                stmt.sqlConnection = sqlConn;
                // Statement
                stmt.text = "INSERT INTO categories " +
                                    "(name) VALUES (:name)";
                stmt.parameters[":name"] = value;
                //OR Statement
                stmt.text = "INSERT INTO categories " +
                                    "(name) VALUES ('"+value+"')";

                stmt.execute();
                var result:SQLResult = stmt.getResult();
            }

            private function updateCategory(name:String, categoryid:int):void
            {
                var stmt:SQLStatement = new SQLStatement();
                stmt.sqlConnection = sqlConn;
                stmt.text = "UPDATE categories " +
                                    "SET name='"+name+"'" +
                                    "WHERE " +
                                    "categoryid='"+categoryid+"'";

                stmt.execute();
                var result:SQLResult = stmt.getResult();

                getCategories();
            }

            private function removeCategory(categoryid:int):void
            {
                var stmt:SQLStatement = new SQLStatement();
                stmt.sqlConnection = sqlConn;
                // Statement
                stmt.text = "DELETE FROM categories WHERE categoryid=:categoryid";
                stmt.parameters[":categoryid"] = categoryid;
                // OR Statement
                stmt.text = "DELETE FROM categories WHERE categoryid='"+categoryid+"'";

                stmt.execute();
                var result:SQLResult = stmt.getResult();

                getCategories();
            }

        ]]>
    </mx:Script>
</mx:WindowedApplication>

Slideshow with fade transition

Photo slide show application in Flex 3. The slide show will display photos, one-by-one, using a fade-in effect.
Read more about transitions in photoshop example.

View the app(or click on the screenshot)
View the source code
Download the source code

Amazon S3 File Uploader

I did some experiments with Amazon Simple Storage Service (Amazon S3) a while ago, but today i decided to put small example on my site.
View the source code

Vista Start Menu

By default any ListBase component (List, TileList, HorizontaList…) draws blue rectangle on rollover, selection event. I wanted more appealing effect, round rectangle with nice blue gradient background.
Vista Start Menu is a great example where round rectangle for selection is used. I tried to make copy of it and bring it to Flex(screenshot).
To achieve this i needed to override two methods:
drawSelectionIndicator drawHighlightIndicator
View the app(or click on the screenshot)

Customizing TileList selection

This example shows you how to customize selection boxes in a Flex TileList. Marc’s original post Customizing TileList selection explains which methods you need to override, Thanks Marc.

before:
after:

main.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:comps="comps.*" viewSourceURL="srcview/index.html">
    <comps:CardTileList itemRenderer="ir.Card" width="479" height="371">
        <comps:dataProvider>
            <mx:ArrayCollection>
                <mx:source>
                        <mx:Object label="2A" data="2a"/>
                        <mx:Object label="2B" data="2b"/>
                        <mx:Object label="2C" data="2c"/>
                    </mx:source>
            </mx:ArrayCollection>
        </comps:dataProvider>
    </comps:CardTileList>
</mx:Application>

comps/CardTileList.as

package comps
{
    import flash.display.Graphics;
    import flash.display.Sprite;
    import mx.controls.TileList;
    import mx.controls.listClasses.IListItemRenderer;

    public class CardTileList extends TileList
    {
        public function CardTileList()
        {
            super();
        }

        override protected function drawSelectionIndicator(indicator:Sprite,
                                                        x:Number,
                                                        y:Number,
                                                        width:Number,
                                                        height:Number,
                                                        color:uint,
                                                        itemRenderer:IListItemRenderer):void

        {
            var g:Graphics = indicator.graphics;
            g.clear();
            g.beginFill(0x009dff);
            g.lineStyle(2, 0x6e7c9d);
            //g.drawRoundRect(x,y,itemRenderer.width,height,15,15);
            g.drawRoundRect(x+(itemRenderer.width-150)/2, y, 150, height, 34, 34);
            g.endFill();
        }

        override protected function drawHighlightIndicator(indicator:Sprite,
                                                           x:Number,
                                                           y:Number,
                                                           width:Number,
                                                           height:Number,
                                                           color:uint,
                                                           itemRenderer:IListItemRenderer):void

        {
            var g:Graphics = indicator.graphics;
            g.clear();
            g.beginFill(0x009dff);
            g.lineStyle(2, 0x6e7c9d);
            //g.drawRoundRect(x,y,itemRenderer.width,height,15,15);
            g.drawRoundRect(x+(itemRenderer.width-150)/2, y, 150, height, 34, 34);
            g.endFill();
        }
    }
}