FileStream

API Reference: IO.FileStream

FileStream is a class which allows you to making IO operations like reading, copying, creating or appending on file.

Stream Types

Stream Type defines the stream behaviour that applied on stream object. There are three types of streams.

Write
Write is the Stream Type that allows to write your content inside the file depending on Content Mode. For this type if file exists file content will be replaced with you data. File cannot be read with this type of streams.

Read
Read is the Stream Type that allows to read your content inside the file depending on Content Mode. If file not exists you will get and exception. File cannot be written with this type of streams.

Append
Append is the Stream Type that allows to append your content inside the file depending on Content Mode. Append works like write except if file exists append will write your data to end of the file so existing file will not be lost. File cannot be read with this type of streams.

info

For api reference of Stream Type, you can visit IO.FileStream.StreamType

Permission Management for FileStream

Managing permissions for FileStream the same as Permission Management for File Operations

Content Mode

Content Mode defines the stream behaviour that applied on stream object. Text mode is the default Content mode for File Streams. There are two modes of streams.

Binary
Binary is the Content Mode that allows to open stream in binary mode.

Text
Binary is the Content Mode that allows to open stream in text mode. It is good way to read document files.

info

For api reference of Content Mode, you can visit IO.FileStream.ContentMode

note

The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics

TypeScript

import PageSampleDesign from "generated/pages/pageSample";
import { Route, Router } from "@smartface/router";
import Application from "@smartface/native/application";
import File from "@smartface/native/io/file";
import Path from "@smartface/native/io/path";
import Label from "@smartface/native/ui/label";
import FlexLayout from "@smartface/native/ui/flexlayout";
import Http from "@smartface/native/net/http";
import Button from "@smartface/native/ui/button";
import ImageView from "@smartface/native/ui/imageview";
import Image from "@smartface/native/ui/image";
import FileStream from "@smartface/native/io/filestream";
import { styleableComponentMixin, styleableContainerComponentMixin } from "@smartface/styling-context";


class StyleableLabel extends styleableComponentMixin(Label) {}
class StyleableButton extends styleableComponentMixin(Button) {}
class StyleableImageView extends styleableComponentMixin(ImageView) {}
class StyleableFlexLayout extends styleableContainerComponentMixin(FlexLayout) {}

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
    buttonFont: Object = {
    font: {
        size: 12,
        bold: true,
        italic: false,
        family: "SFProText",
        style: "Semibold",
    },
    };
    http = new Http();
    flexLayoutTopContainer: StyleableFlexLayout;
    myLabel: StyleableLabel;
    myImageView: StyleableImageView;
    myFlexLayoutBottomContainer: StyleableFlexLayout;
    myButtonAppendText: StyleableButton;
    myButtonDownloadRandomImage: StyleableButton;
    imageCounter: number = 0; 
      
  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  // The page design has been made from the code for better
  // showcase purposes. As a best practice, remove this and
  // use WYSIWYG editor to style your pages.
  centerizeTheChildrenLayout() {
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            flexProps: {
              flexDirection: 'ROW',
              justifyContent: 'CENTER',
              alignItems: 'CENTER'
            }
        }
    })
  }

  onShow() {
    super.onShow();
    const { headerBar } = this;
    Application.statusBar.visible = false;
    headerBar.visible = false;

  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();
    
    this.flexLayoutTopContainer = new StyleableFlexLayout();

    this.addChild(
        this.flexLayoutTopContainer,
        "flexLayoutTopContainer",
        ".sf-flexLayout",
        {
        width: null,
        height: null,
        flexGrow: 1,
        flexProps: {
            alignSelf: "STRETCH",
            flexDirection: "ROW",
        },
        }
    );

    this.myLabel = new StyleableLabel();
    this.flexLayoutTopContainer.addChild(
        this.myLabel,
        "myLabel",
        ".sf-flexLayout",
        {
        width: null,
        height: null,
        margin: 5,
        flexGrow: 1,
        multiline: true,
        textColor: "#FFFFFF",
        backgroundColor: "#00A1F1",
        }
    );

    this.myImageView = new StyleableImageView();

    this.flexLayoutTopContainer.addChild(
        this.myImageView,
        "myImageView",
        ".sf-imageView",
        {
        width: null,
        height: null,
        margin: 5,
        flexGrow: 1,
        backgroundColor: "#00A1F1",
        imageFillType: "STRETCH",
        flexProps: {
            alignSelf: "STRETCH",
            flexDirection: "ROW",
        },
        }
    );

    this.myFlexLayoutBottomContainer = new StyleableFlexLayout();

    this.addChild(
        this.myFlexLayoutBottomContainer,
        "myFlexLayoutBottomContainer",
        ".sf-flexLayout",
        {
        width: null,
        height: null,
        margin: 5,
        flexGrow: 2,
        backgroundColor: "#00A1F1",
        imageFillType: "STRETCH",
        flexProps: {
            flexWrap: "WRAP",
            alignSelf: "STRETCH",
            flexDirection: "ROW",
            justifyContent: "SPACE_AROUND",
        },
        }
    );

    this.myButtonAppendText = new StyleableButton({
        text: "Append Text",
        onPress: () => {
        let file = new File({ path: Path.DataDirectory + "/test.txt" });
        if (!file.exists) {
            file.createFile(true);
        }
        let fileStreamAppend = file.openStream(
            FileStream.StreamType.APPEND,
            FileStream.ContentMode.TEXT
        );
        fileStreamAppend.write("Smartface Native Framework\n");
        fileStreamAppend.close();

        let fileStreamRead = file.openStream(
            FileStream.StreamType.READ,
            FileStream.ContentMode.TEXT
        );
        this.myLabel.text = "File Content: \n" + fileStreamRead.readToEnd();
        fileStreamRead.close();
        },
    });

    this.myFlexLayoutBottomContainer.addChild(
        this.myButtonAppendText,
        "myButtonAppendText",
        ".sf-button",
        {
        height: 75,
        width: 150,
        font: this.buttonFont,
        }
    );

    this.myButtonDownloadRandomImage = new StyleableButton({
        text: "Download Random Image",
        onPress: () => {
        this.http.request({
            url: "http://thecatapi.com/api/images/get?format=src",
            method: "GET",
            onLoad: (response) => {
            let file = new File({
                path: Path.DataDirectory + "/image-" + this.imageCounter + ".png",
            });
            console.log("file:" + file);
            if (!file.exists) {
                file.createFile(true);
            }
            var fileStream = file.openStream(
                FileStream.StreamType.WRITE,
                FileStream.ContentMode.BINARY
            );
            fileStream.write(response.body);
            console.log("file is writed");
            fileStream.close();

            this.myImageView.image = Image.createFromFile(
                Path.DataDirectory + "/image-" + this.imageCounter + ".png"
            );
            this.imageCounter++;
            },
            onError: function (error) {
            console.log("Download image failed");
            },
        });
        },
    });

    this.myFlexLayoutBottomContainer.addChild(
        this.myButtonDownloadRandomImage,
        "myButtonDownloadRandomImage",
        ".sf-button",
        {
        height: 75,
        width: 150,
        font: this.buttonFont,
        }
    );
  }
}